무료 템플릿으로 만드는 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 를 어떻게 다루는지에 대한 감을 갖게 되리라 생각됩니다.