5월 2025 - WooGong's Blog

무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #3: HTML 구조 분석과 MVC 디자인 준비

지난 2편에서는 ASP.NET Core MVC Web Application의 핵심인 Program.cs 파일을 살펴보았습니다. 지난 글은 아래 에서 확인해 주세요.

.NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기
.NET 8 ASP.NET Core MVC 시작점, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!

이번 3편에서는 본격적으로 Website의 뼈대가 될 HTML 파일의 구조를 파악하는 시간을 가져보려 합니다. 우리가 사용할 Template은 Themewagon.com에서 제공하는 “Medcare”라는 Medical Website 무료 Template입니다. Download는 여기에서 받으실 수 있습니다.

e-commerce website 를 사용할까도 생각해 보았지만 Healthcare 에 관심도 있고 가장 유사하지 않나 하는 생각에 선택하게 되었습니다. e-commerce 만큼 적용할 수 있는 재미는 적을 수 있지만 일단 무엇이든 시작해 보려고 합니다.

Medcare Template, 어떤 모습일까?

압축을 풀고 폴더를 살펴보면, 우리 눈에 익숙한 css, fonts, img, js, scss 폴더와 함께 index.html, about.html, department.html, doctors.html, blog.html, contact.html과 같은 메뉴별 HTML 파일들을 확인할 수 있습니다. 특히, CSS를 동적으로 관리할 수 있도록 scss 폴더가 제공되는 점과,Template적용에 유용한 document 파일이 포함된 점이 좋네요.

먼저 index.html 을 열어 첫 화면을 살펴보겠습니다. index.html 을 double click 합니다.

Website의 전체적인 메뉴 구성은 Home, About, Department, Doctors, Blog, Contact 총 6개의 주요 메뉴로 이루어져 있습니다.

각 페이지는 공통적으로 Header, Body, Footer의 세 가지 영역으로 나뉩니다.

1. Header (머리말)

Header 영역은 Website의 얼굴이라고 할 수 있습니다. Medcare Template의 Header는 다음과 같은 요소들로 구성되어 있습니다.

메뉴 (Navigation Bar): Website 의 주요 Page로 이동할 수 있는 link들을 제공합니다. 사용자가 원하는 정보를 쉽게 찾도록 돕는 중요한 역할을 합니다.
SNS 이모티콘 목록: 다양한 Social Media Platform 으로 연결되는 icon들이 배치되어 있습니다. 기관의 Social 활동을 홍보하고 사용자들과의 소통 채널을 제공합니다.
메뉴별 대표 image및 text: Header 아래에는 각 메뉴 Page의 특징을 시각적으로 보여주는 image와 간략한 설명 text가 함께 나타납니다. 현재 어떤 Page를 보고 있는지 직관적으로 알 수 있도록 디자인되어 있습니다.

2. 본문 (Body): 핵심 contents 를 담는 공간

Body 영역은 각 Menu Page의 실제 내용을 담는 곳입니다. 예를 들어, “About” Page에서는 기관의 소개, 역사, 비전 등의 정보가 표시될 것이고, “Doctors” Page에서는 의료진의 정보와 전문 분야 등이 소개될 것입니다. Themewagon Template은 각 Page의 목적에 맞게 깔끔하고 정돈된 Layout을 제공합니다.

3. 꼬리말 (Footer): Website의 마침표

Footer 영역은 Website의 하단에 위치하며, 일반적으로 다음과 같은 정보들을 포함합니다.

Top Products, Quick Links, Resources, NewsLetter: 유용한 정보나 자주 찾는 Link, News Letter 구독 등의 기능을 제공하여 사용자 편의성을 높입니다. Healthcare 기관의 경우, 주요 서비스나 관련 정보 Link 등이 포함될 수 있습니다.
Copy Right: Website의 저작권 정보를 명시하여 지적 재산권을 보호합니다.
SNS 이모티콘 목록: Header와 마찬가지로 Social Media 채널로의 접근성을 제공합니다.

MVC 구조 설계를 위한 첫걸음: View와 Controller

이제 Download 한 HTML 파일들을 ASP.NET Core MVC Web Application의 View와 Controller로 어떻게 구성할지 고민해 볼 차례입니다.

View: 각 HTML 파일(.html)은 사용자에게 보여지는 화면, 즉 View의 역할을 하게 됩니다. 예를 들어, index.html은 Home Page View가 되고, about.html은 About Page View가 되는 식입니다.
Controller: 사용자의 Request을 처리하고, Model에서 데이터를 가져와 View에 전달하는 역할을 합니다. 각 메뉴에 대응하는 Controller를 만들고, 해당 Controller의 Action Method에서 적절한 View를 반환하도록 구현해야 합니다.

마무리

다음 편에서는 Medcare Template의 HTML 파일들을 분석한 내용을 바탕으로, ASP.NET Core MVC Project에서 View를 생성하고 Controller를 연결하는 과정을 자세히 다루어 보겠습니다. Themewagon Templage 을 Website로 구성하는 방법을 살펴보면서 실제 업무에서 디자이너가 작업한 Website HTML Source 를 어떻게 다루는지에 대한 감을 갖게 되리라 생각됩니다.

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

[ASP.NET Core] .NET 8 ASP.NET Core MVC 시작점, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!

지난 1편에서 우리는 Visual Studio 2022와 Visual Studio Code를 사용하여 .NET 8 기반의 ASP.NET Core MVC 웹 애플리케이션 프로젝트를 생성해보았습니다. 오늘은 그 프로젝트의 핵심 엔진이라고 할 수 있는 Program.cs 파일을 자세히 들여다보며, 각 코드가 어떤 역할을 하고, .NET 8의 어떤 개념과 연결되는지 쉽게 설명해보겠습니다.

1. 전체 Program.cs

전체 Program.cs 파일의 내용은 다음과 같습니다.

Code Snippet

var builder = WebApplication.CreateBuilder(args);
 
// Add services to the container.
builder.Services.AddControllersWithViews();
 
var app = builder.Build();
 
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler(“/Home/Error”);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
 
app.UseHttpsRedirection();
app.UseStaticFiles();
 
app.UseRouting();
 
app.UseAuthorization();
 
app.MapControllerRoute(
    name: “default”,
    pattern: “{controller=Home}/{action=Index}/{id?}“);
 
app.Run();

2. 각 코드 분석

그럼 첫 줄부터 살펴보죠.

var builder = WebApplication.CreateBuilder(args);

가장 먼저 등장하는 이 코드는 Web Application을 구축하기 위한 Builder Pattern(빌더 패턴)을 활용하는 부분입니다. WebApplication.CreateBuilder(args)는 WebApplicationBuilder라는 특별한 객체를 생성하는데, 이 Builder를 통해 Web Application에 필요한 다양한 Service와 Middleware를 설정하고 구성할 수 있습니다. 마치 레고 블록을 하나씩 쌓아 올리듯, Builder를 사용하여 Application의 기능을 만들어나가는 것이죠. 여기서 args는 Command Line argument를 담고 있는 배열인데, Application 실행 시 외부에서 전달되는 설정을 처리하는 데 사용될 수 있습니다.

// Add services to the container.
builder.Services.AddControllersWithViews();

이 주석 아래의 코드는 우리 Web Application의 핵심 기능 중 하나인 MVC (Model-View-Controller) 패턴을 사용하기 위한 서비스를 Service Container(서비스 컨테이너)에 등록하는 역할을 합니다. Service Container는 ASP.NET Core Application에서 필요한 객체들을 생성하고 관리하는 일종의 보관소입니다. builder.Services.AddControllersWithViews()를 호출함으로써, 우리는 Controller와 View를 처리하는 데 필요한 다양한 서비스들을 이 Container에 등록하게 됩니다. 이제 Controller를 만들고 View를 디자인해서 사용자에게 멋진 화면을 보여줄 준비가 된 것입니다.

var app = builder.Build();

Builder 를 통해 필요한 서비스들을 모두 등록했다면, 이제 builder.Build()를 호출하여 실제로 작동하는 WebApplication 객체를 생성합니다. 이 app 객체는 우리 Web Application의 instance(인스턴스)이며, 들어오는 HTTP Request(요청)을 어떻게 처리할지 정의하는 HTTP Request Pipeline(HTTP 요청 처리 파이프라인)을 구성하는 데 사용됩니다. 마치 공장에서 조립 라인을 만드는 것과 비슷하다고 생각하면 됩니다.

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

이 부분은 HTTP Request Pipeline을 구성하는 중요한 Code Block(코드 블록)입니다. app.Environment.IsDevelopment()는 현재 애플리케이션이 개발 환경에서 실행 중인지 확인합니다. 개발 환경이 아니라면, 즉 운영 환경이라면 다음과 같은 Middleware를 Pipeline에 추가한다는 내용입니다.

app.UseExceptionHandler("/Home/Error");: Application 실행 중에 예외가 발생했을 때, 사용자에게 친절한 오류 페이지(/Home/Error 액션)를 보여주는 Exception Handler Middleware (예외 처리 미들웨어)입니다. 예상치 못한 문제 발생 시에도 깔끔하게 대응할 수 있도록 도와줍니다.
app.UseHsts();: HSTS (HTTP Strict Transport Security) Middelware는 Web Browser에게 해당 웹사이트는 항상 HTTPS를 통해서만 접속해야 한다는 것을 알려줍니다. 이는 사용자의 연결을 보호하고 중간자 공격을 방지하는 중요한 보안 기능입니다. 주석에서 언급된 것처럼, 프로덕션 환경에서는 HSTS의 지속 시간(기본값 30일)을 신중하게 설정해야 합니다.

app.UseHttpsRedirection();

이 코드는 HTTP로 들어온 요청을 자동으로 HTTPS로 Redirect(재전송)하는 HTTPS Redirection Middleware(HTTPS 리다이렉션 미들웨어)를 Pipeline에 추가합니다. HTTPS는 HTTP에 보안 계층을 더한 프로토콜로, 데이터 암호화를 통해 사용자의 정보를 안전하게 보호합니다. 요즘 웹사이트에서는 HTTPS 사용이 필수적이죠.

app.UseStaticFiles();

Static Files Middleware(정적 파일 미들웨어)는 wwwroot 폴더와 그 하위 폴더에 있는 CSS, JavaScript, 이미지 등의 정적 파일들을 클라이언트(웹 브라우저)에게 제공하는 역할을 합니다. 이 미들웨어가 없다면 웹사이트의 디자인이나 동작에 필요한 파일들을 제대로 불러올 수 없겠죠.

app.UseRouting();

Routing Middleware(라우팅 미들웨어)는 들어온 HTTP Request의 URL을 분석하고, 이 Request을 처리할 적절한 End Point(일반적으로 Controller의 Action Method)를 결정하는 역할을 합니다. 마치 웹사이트의 길 안내자처럼, User의 Request을 올바른 곳으로 연결해 줍니다.

app.UseAuthorization();

Authentication(인증)된 사용자의 권한을 확인하여 특정 Resource에 대한 접근을 제어하는 Authorization(권한 부여 미들웨어)입니다. 예를 들어, 관리자만 접근할 수 있는 페이지가 있다면 이 미들웨어가 사용자의 권한을 확인하고 접근을 허용하거나 거부하는 역할을 합니다. (Note: app.UseAuthentication() 미들웨어가 먼저 Pipeline에 추가되어야 권한 부여가 제대로 작동합니다. 기본적인 MVC Project Template에는 아직 인증 관련 코드가 없을 수 있습니다.)

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

이 코드는 Route(라우트)를 정의하는 부분입니다. Route는 URL Pattern과 이를 처리할 Controller 및 Action Method를 연결하는 규칙입니다. 여기서 정의된 “default” Route는 가장 기본적인 형태로, 다음과 같은 URL 구조를 처리합니다.

{controller}: 요청을 처리할 Controller 의 이름 (기본값: Home)
{action}: Controller 내에서 실행할 Action Method의 이름 (기본값: Index)
{id?}: 선택적인 ID Parameter

예를 들어, /Home/Index URL은 HomeController의 Index Action Method를 실행하고, /Products/Details/123 URL은 ProductsController의 Details Action Method를 실행하면서 ID 값으로 123을 전달하게 됩니다. 이 Routing 규칙 덕분에 우리는 깔끔하고 이해하기 쉬운 URL 구조를 만들 수 있습니다.

app.Run();

마지막으로 app.Run()은 앞에서 구성한 Web Application을 실제로 실행하고 HTTP 요청을 수신하기 시작하는 명령어입니다. 이 한 줄의 코드로 여러분이 작성한 ASP.NET Core MVC Web Application이 노출되어 사용자의 Request 를 기다리게 됩니다.

3. 최종 Program.cs

Code Snippet

// WebApplication Builder를 생성합니다.
// 이 Builder는 Application의 Hosting, Configuaration 및 Service 등록을 설정하는 데 사용됩니다.
var builder = WebApplication.CreateBuilder(args);
 
// Add services to the container.
// Container에 Service를 추가합니다.
// Service는 Application 내에서 사용할 수 있는 재사용 가능한 구성 요소입니다.
// AddControllersWithViews() 메서드는 MVC (Model-View-Controller) 패턴을 지원하는 데 필요한 Service를 등록합니다.
// 여기에는 Controller, View, Engin 등이 포함됩니다.
builder.Services.AddControllersWithViews();
 
// 구성된 Builder를 사용하여 WebApplication Instance를 생성합니다.
// 이 app 변수는 HTTP Request Pipeline을 구성하고 Application을 실행하는 데 사용됩니다.
var app = builder.Build();
 
// Configure the HTTP request pipeline.
// HTTP Request Pipeline을 구성합니다.
// 이 Pipeline은 들어오는 HTTP Request이 처리되는 순서를 정의합니다.
// 개발 환경이 아닌 경우에만 Exception Handler Middleware를 추가합니다.
if (!app.Environment.IsDevelopment())
{
    // Exception Handler Middleware는 Application에서 발생한 Exception 을 처리하고 사용자 친화적인 오류 페이지를 표시하는 데 사용됩니다.
    app.UseExceptionHandler(“/Home/Error”);
    // HSTS (HTTP Strict Transport Security) Middleware는 Browser에게 HTTPS를 통해서만 사이트에 액세스하도록 지시하여 보안을 강화합니다.
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    // 기본값은 30일이며, 프로덕션 환경에서는 이 값을 늘리는 것을 고려할 수 있습니다. 자세한 내용은 링크를 참조하세요.
    app.UseHsts();
}
 
// HTTPS Redirection Middleware는 HTTP Request을 HTTPS로 Redirection합니다.
app.UseHttpsRedirection();
// Static Files Middleware는 wwwroot 폴더와 같은 위치에서 이미지, CSS, JavaScript 파일과 같은 정적 파일을 제공하는 데 사용됩니다.
app.UseStaticFiles();
 
// Routing Middleware는 들어오는 HTTP Request의 URL을 분석하고 해당 Request을 처리할 End Point(일반적으로 Controller Action)를 결정합니다.
app.UseRouting();
 
// Authorization Middleware는 사용자의 ID를 확인하고 요청된 Resource에 액세스할 수 있는 권한이 있는지 확인합니다.
app.UseAuthorization();
 
// End Point Routing을 구성합니다. 여기서는 MVC Controller에 대한 Default Route Pattern(기본 라우트 패턴)을 정의합니다.
// name: 라우트의 이름입니다. 일반적으로 링크 생성 등에 사용됩니다.
// pattern: URL 패턴을 정의합니다.
//    {controller=Home}: Controller 이름입니다. 지정되지 않은 경우 기본값은 “Home”입니다.
//    {action=Index}: Action(Controller 내의 Method) 이름입니다. 지정되지 않은 경우 기본값은 “Index”입니다.
//    {id?}: 선택적 Parameter입니다. URL에 id 값이 있을 수도 있고 없을 수도 있습니다.
app.MapControllerRoute(
    name: “default”,
    pattern: “{controller=Home}/{action=Index}/{id?}“);
 
// WebApplication을 실행합니다. 이 호출은 Application이 HTTP Request 를 수신하고 처리하기 시작하도록 합니다.
app.Run();

4. 마무리

이처럼 Program.cs 파일은 우리 Web Application의 시작점이자, 필요한 서비스들을 등록하고 HTTP Request 를 처리하는 방법을 정의하는 중요한 역할을 합니다. 이 파일을 이해하는 것이 ASP.NET Core MVC Web Application 개발의 첫걸음이자 핵심입니다.

다음 3 편에서는 지금까지 구성한 Web Application 위에 무료 HTML Source 인 Medcare Template 하나를 Download 받아 전체적인 화면 구성과 메뉴를 살펴보고, 이 HTML 소스를 ASP.NET Core MVC의 View와 Controller로 어떻게 녹여낼 수 있을지 함께 고민해 보겠습니다.