작업 목표
- 원본 웹사이트의 메인 페이지 구조를 분석하고 HTML로 재구성
- PC와 모바일 화면에 맞는 반응형 레이아웃 구현
- 메인 비주얼, 전시, 교육 영역에 슬라이드 UI 적용
- 모바일 햄버거 메뉴와 검색 화면 등 주요 인터랙션 구현
어린이박물관 웹사이트 클론코딩
국립중앙박물관 어린이박물관 웹사이트의 메인 페이지를 참고하여 레이아웃, 반응형 구조, 슬라이드, 모바일 메뉴를 구현한 클론코딩 작업입니다.
Overview
이 프로젝트는 국립중앙박물관 어린이박물관 웹사이트의 메인 페이지를 참고해 구조와 동작을 직접 구현한 클론코딩 작업입니다. 원본 사이트의 상단 링크 메뉴, 메인 내비게이션, 모바일 메뉴, 검색 화면, 메인 비주얼 슬라이드, 관람 예약 현황, 전시·교육 카드, 공지사항, SNS 영역, 푸터 구성을 분석하고 HTML, CSS, JavaScript로 재현했습니다.
디자인을 새롭게 변경하기보다 실제 공공기관 웹사이트가 정보를 어떤 흐름으로 배치하고, PC와 모바일에서 메뉴 구조를 어떻게 다르게 제공하는지 학습하는 데 중점을 두었습니다. 특히 많은 정보가 들어가는 사이트에서 섹션별 역할을 명확하게 나누고, 사용자가 원하는 정보에 빠르게 접근할 수 있도록 구성하는 방식을 연습했습니다.
구현 포인트
- 상단 외부 링크 메뉴와 메인 GNB, 서브메뉴 구조 재현
- 관람 시간, 관람료, 예약 현황 정보를 카드형 섹션으로 구성
- 전시와 교육 콘텐츠를 Swiper 슬라이드 형태로 구현
- 모바일 전용 내비게이션과 검색 모달 화면 구현
Page Detail
메인 페이지는 헤더, 메인 비주얼, 관람 예약 정보, 전시·교육 콘텐츠, 공지사항, SNS, 푸터 영역으로 구성했습니다. 메인 비주얼에서는 PC 이미지와 모바일 이미지를 분리해 화면 크기에 따라 다른 이미지가 노출되도록 했고, 관람 예약 영역에서는 회차별 시간과 예약 상태를 한눈에 확인할 수 있도록 정보를 정리했습니다.
Reference
원본 사이트의 정보 구성, 색상 사용, 카드 레이아웃, 슬라이드 흐름, 모바일 내비게이션 구조를 참고하여 공공기관 웹사이트의 화면 구성 방식을 분석했습니다.
Clone Coding
분석한 구조를 바탕으로 HTML 마크업을 작성하고, CSS와 JavaScript를 사용해 레이아웃, 반응형 화면, 슬라이드, 메뉴 열림·닫힘 기능을 직접 구현했습니다.
Interaction
정적인 화면 구현뿐 아니라 실제 사이트처럼 조작 가능한 요소도 함께 구현했습니다. 메인 비주얼 영역에는 이전·다음 버튼과 페이지네이션, 재생·정지 버튼이 있는 슬라이드 구조를 적용했고, 전시와 교육 섹션에도 각각 독립적인 슬라이드 컨트롤을 배치했습니다. 모바일에서는 햄버거 버튼을 누르면 메뉴가 열리고, 닫기 버튼을 통해 메뉴가 닫히는 구조로 구현했습니다.
Swiper Slider
메인 비주얼, 전시, 교육 영역에 Swiper를 적용해 여러 콘텐츠를 슬라이드 방식으로 탐색할 수 있도록 구현했습니다.
Mobile Navigation
모바일 화면에서는 별도의 헤더와 메뉴 영역을 구성하고, 햄버거 버튼과 닫기 버튼으로 메뉴 상태를 제어할 수 있도록 구현했습니다.
Learning Point
이번 클론코딩을 통해 공공기관 웹사이트처럼 정보량이 많은 페이지를 섹션별로 정리하는 방법을 학습했습니다. 특히 관람 정보, 예약 현황, 전시, 교육, 공지사항처럼 성격이 다른 콘텐츠를 한 페이지 안에서 구분하고, 사용자가 필요한 정보를 빠르게 찾을 수 있도록 배치하는 구조를 연습했습니다.
Markup Structure
헤더, 메인, 섹션, 카드, 리스트, 푸터처럼 역할이 분명한 단위로 마크업을 나누며 유지보수하기 쉬운 구조를 연습했습니다.
Responsive Practice
PC와 모바일에서 이미지, 메뉴, 콘텐츠 배치가 다르게 보이도록 구성하며 반응형 웹사이트의 기본 구조를 익혔습니다.