Microsoft에서 제공하는 Visual Studio의 C# 윈폼 환경에서 웹 페이지를 구현할 수 있는 방법에 대해 알아보겠습니다.
저는 학교에서 실제 현업에서 단순 제어 기능으로 사용되고 있는 C# 윈폼 구현을 배웠습니다.
하지만 이 기능은 임베디드 측면에서 시스템 또는 센서 값 등과 통신하는 부분에 있어서는 용이하나 사용자 측면에서 보았을 때는 디자인 요소에서는 아쉬움을 느낄 수밖에 없었습니다.
따라서 교내 우산 관리 서비스에 기존에 배워 사용하였던 C# 윈폼 화면을 개발하기에는 적절하지 않다고 판단하였고
동일한 C# 윈폼 환경에서 css 등의 언어를 사용하여 같은 환경에서 디자인적 요소를 추가하여야겠다고 생각했습니다.
계획에 가장 충족한 ASP.NET Core 웹앱 환경을 선택하였습니다.
이 전의 글에서 Visual Studio에서 ASP.NET Core 웹앱 환경을 설정하고 다루는 법을 상세히 설명해놓았으니
자세한 사항은 전의 포스트를 확인해주시면 감사하겠습니다!
먼저 제가 ASP.NET Core 웹앱을 활용하여 구현한 웹페이지는 다음과 같습니다.
이 글에서는 위에서 업로드한 영상처럼 C# 화면을 구축한 방법을 알아보도록 하겠습니다.
웹페이지 전체적인 디자인 흐름 수정하기

먼저 제가 디자인 한 우산 대여 페이지를 보시면 이는 우산 대여 현황을 실시간으로 보기 위한 페이지이므로
네비게이션 바나 footer 등의 사용자 편의를 위한 부분이 생략되어 있습니다.이러한 웹 화면 전체적인 흐름을 수정하기 위해서는
- 솔루션 탐색기에서 Pages>Shared>_Layout.cshtml폴더에서 수정 가능합니다.

- 다음은 _Layout.cshtml 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - borrowsan</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/borrowsan.styles.css" asp-append-version="true" />
</head>
<body>
<!-- 네비게이션 바 부분 삭제 -->
<header>
<!-- 네비게이션 바 코드 삭제 -->
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
- 기존 코드에서 네비게이션 바 부분 코드를 삭제하였습니다.
- 다른 부분의 코드 또한 편의성에 맞춰 수정하면 되겠습니다.
웹페이지에 사진이나 로고 추가하기

위 사진을 보면 아시겠지만 좌측 상단의 '바로우산' 로고와 각 6개의 박스 우측 상단에 우산 사진이 구현되어 있습니다.
- wwwroot 파일을 펼쳐보겠습니다.

- wwwroot 를 우클릭하여 새 폴더를 만들어줍니다.
- 폴더명은 'images'로 하는 것을 추천합니다.

- 다음으로 자신이 파일을 생성한 맨 처음 설정한 경로를 파일 탐색기를 통해 원하는 사진을 폴더에 넣습니다.
- 나중의 편의를 위해 사진명 또한 영어로 작성하는 것을 추천드립니다!

- 마지막으로 cshtml 파일에서 사진을 삽입할 수 있는 코드를 알아보겠습니다.
<img id="open-umbrella" src="~/images/펼쳐진우산.png" alt="펼쳐진우산" />
: 제 코드 설명을 계속해서 보시면 알겠지만 cshtml 이라고 하여 기존에 우리가 알던 html 코드와 달라지는 것은 크게 없습니다 ㅎㅎ
C# 윈폼에서 디자인 예쁘게하기
이 부분은 제가 ASP.NET을 사용하게 된 결정적인 계기였습니다!
C# 윈폼의 단순한 버튼, 텍스트 등을 디자인 요소에 삽입하는 것이 아닌 css 언어를 통해서 피그마와 동일한 디자인을 구현할 수 있는 방법을 알아보겠습니다.
- wwwroot > css > site.css를 클릭하여 수정

- site.css 의 코드를 자신이 원하는 css 코드로 수정하여 원하는 디자인을 구현할 수 있습니다.
다른 페이지로 넘어가기
이 기능 또한 앞서 설명드린 내용과 크게 달라지지 않습니다.
1. 새 cshtml 파일 생성하기
2. js 구현하기
새로운 cshtml 파일 생성하기
- Pages > 오른쪽 마우스 클릭 > 추가 > Razor 페이지 클릭

- 새 스캐폴드 항목 추가 > Razor Page - 비어 있음 클릭 > 추가

- 새 항목 추가 > (원하는 파일명 입력).cshtml 입력 > 추가 선택

- 기존의 cshtml 파일과 같은 형식으로 파일 생성된 것 확인 가능

새로 만든 파일에서도 위의 html, css 형식과 같은 형식으로 코드 작성하시면 됩니다!
새로운 파일로 넘어가는 js 구현하기
- wwwroot > js > site.js를 클릭하여 수정

function goToPage(boxNumber) {
// URL을 /return-screen 경로로 설정하고 boxNumber를 쿼리 매개변수로 전달
const targetPage = '/return-screen?box=' + boxNumber;
window.location.href = targetPage; // 페이지 이동
}
- 추가로 제가 구현한 페이지 넘어가는 js 코드입니다!
<script>
function goToPage(boxNumber) {
// URL을 /return-screen 경로로 설정하고 boxNumber를 쿼리 매개변수로 전달
const targetPage = '/return-screen?box=' + boxNumber;
window.location.href = targetPage; // 페이지 이동
}
</script>
- js에서 구현한 <script></script> 코드를 index.cshtml에 삽입한 코드입니다!
제가 진행한 교내 우산 관리 서비스 프로젝트에서 구현하기 위해 사용한 ASP.NET Core 웹앱 환경 내용은 이상입니다.
ASP.NET Core 웹앱 환경을 활용하여 화면 제어 C# 윈폼을 구현하고 싶으신 분들 중 추가로 구현하고 싶으신 기능이나 궁금하신 기능이 있다면 댓글 남겨주시면 답해드리겠습니다!
읽어주셔서 감사합니다.
'C#' 카테고리의 다른 글
C# 윈폼 - 새로운 폼 생성하기 (0) | 2025.01.20 |
---|---|
C# 윈폼 날짜 출력하기 (0) | 2025.01.19 |
C# 윈폼의 다양한 기능을 디자인적 요소로 활용하자! (2) | 2025.01.19 |
C# 윈폼 환경에서 ASP.NET 활용하여 웹 구현하기(2) (1) | 2025.01.18 |
C# 윈폼 환경에서 ASP.NET 활용하여 웹 구현하기(1) (3) | 2025.01.18 |