C#

C# 윈폼 환경에서 ASP.NET 활용하여 웹 구현하기(1)

choyoung 2025. 1. 18. 19:23

Microsoft에서 제공하는 Visual Studio의 C# 윈폼 환경에서 웹 페이지를 구현할 수 있는 방법에 대해 알아보겠습니다.

 

저는 학교에서 실제 현업에서 단순 제어 기능으로 사용되고 있는 C# 윈폼 구현을 배웠습니다.

하지만 이 기능은 임베디드 측면에서 시스템 또는 센서 값 등과 통신하는 부분에 있어서는 용이하나 사용자 측면에서 보았을 때는 디자인 요소에서는 아쉬움을 느낄 수밖에 없었습니다.

따라서 교내 우산 관리 서비스에 기존에 배워 사용하였던 C# 윈폼 화면을 개발하기에는 적절하지 않다고 판단하였고

동일한 C# 윈폼 환경에서 css 등의 언어를 사용하여 같은 환경에서 디자인적 요소를 추가하여야겠다고 생각했습니다.

계획에 가장 충족한  ASP.NET Core 웹앱 환경을 선택하였습니다.

 

ASP.NET Core 웹앱 환경을 통해 구현한 웹페이지 화면부터 보여드리겠습니다!

ASP.NET Core 웹앱 환경을 통해 구현한 웹페이지입니다. 제 블로그를 통해 여러분도 쉽게 구축할 수 있으니 블로그를 순서대로 보면서 따라와주세요!

 

 

이 글에서는 ASP.NET Core 웹앱 환경의 기초 설정, 웹페이지 구축 방법, 실행 방법까지 알아보겠습니다.

 

우선 ASP.NET은 .NET을 사용하여 최신 웹앱 및 서비스를 빌드하기 위해 Microsoft에서 만든 오프 소스 웹 프레임워크입니다. ASP.NET은 플랫폼 간이며 Windows, Linux, macOS, and Docker 환경에서 실행 가능합니다.

 

.NET 플랫폼에 포함된 몇 가지 항목은 다음과 같습니다

  • C#, F# 및 Visual Basic 프로그래밍 언어
  • 문자열, 날짜, 파일/IO 등으로 작업하기 위한 기본 라이브러리
  • Windows, Linux, macOS and Docker용 편집기 및 도구

 

먼저 ASP.NET Core을 사용하기 위해서 Visual Studio에서 환경 설정하는 법을 알아보겠습니다.

Visual Studio 환경 설정

  • Visual Studio Installer 실행 및 수정

 

  • 워크로드 선택 및 수정: .Net 데스크톱 개발 선택 수정

.NET 데스크톱 개발을 선택하여 설치를 누르면 ASP.NET 환경에서 개발할 수 있는 환경이 갖추어진 것입니다!

 

 

다음으로 ASP.NET Core 프로젝트를 생성하는 법을 알아보겠습니다.

Windows Forms 애플리케이션 ASP.NET 프로젝트 생성

시작하려면 C# 애플리케이션 프로젝트를 만듭니다. 프로젝트 형식에는 필요한 모든 템플릿 파일이 함께 제공됩니다.

 

  • Visual Studio를 열고 시작 창에서 새 프로젝트 만들기를 선택

 

  • 새 프로젝트 만들기 창의 언어 목록에서 C# 선택
    다음으로 Windows를 모든 플랫폼 목록에서 선택하고, 웹을 모든 프로젝트 유형 목록에서 선택합니다.
  • 언어, 플랫폼 및 프로젝트 형식 필터를 적용한 후
    ASP.NET Core Web App 템플릿을 선택하고 다음을 선택합니다.

 

  • 새 프로젝트 구성 창의 프로젝트 이름 필드에 원하는 파일명을 입력하고 저장 경로를 입력한 뒤 다음 선택
    ( 저장 경로는 우측의 ... 버튼을 선택하여 지정)

 

 

  • 다음의 추가 정보 창에서 .NET 8.0대상 프레임워크 필드에 표시되는지 확인
  • 컨테이너 지원 사용 확인란을 선택하지 않은 상태로 두고 인증 유형에 없음 선택

프레임워크 .NET 8.0 설치하는 방법은 제 블로그에 따로 기재해 놓겠습니다!

 

 

ASP.NET Core 파일의 솔루션 탐색기

다음으로 ASP.NET 파일을 생성한 뒤 어떤 경로로 파일이 이루어져 있는지 둘러보도록 하겠습니다.

  • 프로젝트 템플릿은 example라는 단일 ASP.NET Core 프로젝트로 솔루션으로 생성
  • 솔루션 탐색기 탭을 선택하여 내용 확인 가능

 

  • Pages 폴더 확장

 

  • Index.cshtml 파일을 선택하고 코드 편집기에서 확인

 

  • 각 .cshtml 파일에는 연결된 코드 파일이 존재
  • 편집기에서 코드 파일을 열려면 솔루션 탐색기에서 Index.cshtml 노드를 확장하고 Index.cshtml.cs 파일을 선택

 

  • 프로젝트에는 웹 사이트의 루트인 wwwroot 폴더가 포함되어 있음
  • CSS, 이미지 및 JavaScript 라이브러리와 같은 정적 사이트 콘텐츠를 원하는 경로에 직접 배치 가능

 

  • 프로젝트에는 런타임에 웹앱을 관리하는 구성 파일도 포함
  • 기본 애플리케이션의 구성은 appsettings.json에 저장, appsettings.Development.json를 통해 재정의 가능
  • appsettings.json 파일을 확장하여 appsettings.Development.json 파일 확인

 

 

실행, 디버그 및 변경

  • 도구 모음에서 https 단추를 선택하여 디버그 모드에서 앱을 빌드하고 실행
  • 또는 F5를 누르거나 메뉴 모음에서 디버그>디버깅 시작 을 선택

 

 

  • Visual Studio에서 브라우저 창을 시작
  • 메뉴 모음에 홈 및 개인 정보 페이지가 표시되는 것을 확인

 

  • 메뉴 모음에서 개인 정보(Privacy) 선택
  • 브라우저의 개인 정보(Privacy) 페이지는 Privacy.cshtml 파일에 설정된 텍스트를 렌더링하는 것

 

 

  • Visual Studio로 돌아가서 Shift+F5 눌러 디버깅 중지
  • 또는 웹페이지 창 닫음 버튼

이상으로 Visual Studio에서 ASP.NET Core 파일을 실행하기 위한 기초 설정, ASP.NET을 활용한 웹페이지 구축, 실행 방법까지 알아보았습니다.

다음 글에서 ASP.NET Core 파일의 html, css, js를 수정하여 개발자가 원하는 형식의 웹페이지를 구현할 수 있도록 코드를 수정하는 방법 등을 알아보겠습니다.

 

읽어주셔서 감사합니다!