작업 목표
- 원본 웹사이트의 메인 페이지 구조를 분석하고 HTML로 재구성
- PC와 모바일 화면에서 자연스럽게 동작하는 반응형 레이아웃 구현
- 메인 비주얼, 팝업, 메뉴 리스트에 Swiper 슬라이드 적용
- 모바일 햄버거 메뉴와 서브메뉴 토글 등 기본 인터랙션 구현
이삭토스트 웹사이트 클론코딩
이삭토스트 공식 웹사이트의 메인 페이지를 참고하여 레이아웃, 반응형 구조, 슬라이드, 메뉴 인터랙션을 구현한 클론코딩 작업입니다.
Overview
이 프로젝트는 이삭토스트 공식 웹사이트의 메인 페이지를 참고해 구조와 인터랙션을 직접 구현한 클론코딩 작업입니다. 원본 사이트의 시각적 흐름을 관찰하며 헤더, 메인 비주얼 슬라이드, 브랜드 소개, 메뉴 탭, 팝업 영역, 퀵 메뉴, 모바일 메뉴 등 주요 UI 요소를 HTML, CSS, JavaScript로 재현했습니다.
디자인을 새롭게 바꾸기보다 실제 서비스 페이지가 어떤 방식으로 콘텐츠를 배치하고, 사용자의 행동을 유도하는지 분석하는 데 중점을 두었습니다. 이를 통해 브랜드 사이트의 레이아웃 구성, 반응형 처리, 슬라이드 UI, 메뉴 인터랙션 구현 방식을 학습했습니다.
구현 포인트
- 브랜드 사이트의 상단 내비게이션과 서브메뉴 구조 재현
- 팝업존, 메인 비주얼, 메뉴 영역에 슬라이드 기능 적용
- 토스트 메뉴를 카테고리별로 구분하는 탭 UI 구성
- 퀵 메뉴와 모바일 메뉴를 별도로 구성해 화면 크기별 사용성 확보
Page Detail
메인 페이지는 상단 팝업존과 퀵 메뉴, 헤더, 메인 비주얼 슬라이드, 브랜드 소개, 메뉴 섹션으로 구성했습니다. 메인 비주얼 영역은 PC용 이미지와 모바일용 이미지를 분리해 화면 크기에 맞게 노출되도록 했고, 메뉴 영역은 토스트, 세트메뉴, 사이드, 음료 카테고리를 탭으로 구분해 사용자가 원하는 메뉴 정보를 쉽게 확인할 수 있도록 구현했습니다.
Reference
원본 사이트의 브랜드 컬러, 메뉴 구성, 슬라이드 흐름, 모바일 내비게이션 구조를 참고하여 실제 서비스 페이지의 구성 방식을 분석했습니다.
Clone Coding
분석한 구조를 바탕으로 HTML 마크업을 작성하고, CSS와 JavaScript를 사용해 레이아웃, 반응형 화면, 슬라이드, 메뉴 토글 기능을 직접 구현했습니다.
Interaction
정적인 화면 구현에 그치지 않고, 실제 사이트처럼 사용자가 조작할 수 있는 요소들을 함께 구현했습니다. 팝업존 슬라이드, 메인 비주얼 슬라이드, 메뉴 슬라이드에는 Swiper를 적용했고, 모바일에서는 햄버거 버튼을 통해 메뉴가 열리고 닫히도록 구성했습니다. 또한 모바일 서브메뉴는 클릭 시 하위 메뉴가 펼쳐지는 방식으로 구현했습니다.
Swiper Slider
팝업, 메인 비주얼, 메뉴 콘텐츠에 슬라이드 기능을 적용해 브랜드 사이트에서 자주 사용되는 동적인 UI 구조를 연습했습니다.
Mobile Menu
모바일 화면에서는 별도의 메뉴 영역을 구성하고, 햄버거 버튼과 닫기 버튼, 서브메뉴 토글을 통해 실제 모바일 내비게이션과 유사하게 동작하도록 구현했습니다.
Learning Point
이번 클론코딩을 통해 브랜드 웹사이트의 메인 페이지가 단순히 이미지를 배치하는 것이 아니라, 브랜드 소개, 메뉴 탐색, 이벤트 노출, 가맹 문의 등 여러 목적을 하나의 흐름 안에 배치한다는 점을 배웠습니다. 또한 PC와 모바일에서 다른 구조를 사용해야 하는 영역을 구분하고, 슬라이드와 메뉴 인터랙션을 조합해 실제 서비스에 가까운 화면을 구현하는 경험을 할 수 있었습니다.
Markup Structure
헤더, 메인, 섹션, 메뉴 리스트처럼 역할이 분명한 구조로 마크업을 작성하며 유지보수하기 쉬운 HTML 구조를 연습했습니다.
Responsive Practice
PC와 모바일에서 노출되는 이미지와 메뉴 구조를 다르게 처리하며 반응형 웹사이트의 기본적인 설계 방식을 익혔습니다.