프로젝트 목록
이벤트 / 캠페인STANDARD
클래식 럭셔리 청첩장
네이비와 골드, 큰 세리프와 한영 병기로 완성한 호텔 웨딩 멀티페이지 청첩장
HTML5CSS3SCSSVanilla TSSwiper.jsCormorant Garamond
프로젝트 개요
네이비와 골드, Cormorant Garamond 세리프로 완성한 호텔 웨딩 청첩장 데모입니다. 홈 / 스토리 / 갤러리 / 오시는 길 4개 sub-route를 부모 layout 한 곳에서 SCSS와 헤더·푸터를 공유하도록 구성했고, 한영 병기 인사글과 챕터로 격조 있는 감성을 전달합니다. 갤러리는 Swiper 기반 풀스크린 캐러셀(키보드·페이지네이션·loop)을 직접 초기화했습니다.
핵심 구현 포인트
1
멀티페이지 + 공유 layout
React Router 7의 중첩 layout으로 4개 sub-route가 동일한 헤더·푸터·SCSS를 공유합니다. 페이지 이동 시 CSS 재로드 없이 부드러운 페이드로 전환됩니다.
2
한영 병기 타이포
Cormorant Garamond 세리프를 디스플레이, Pretendard를 한글 본문으로 배치해 영문과 한글이 한 흐름으로 읽히도록 설계했습니다. 외국인 친구 초청이 필요한 커플을 위한 구조입니다.
3
Swiper 풀스크린 갤러리
Swiper v12 vanilla 모드로 직접 초기화한 풀스크린 캐러셀. 키보드 화살표, 커스텀 네비 버튼, 페이지네이션 도트, loop, 실시간 카운터까지 지원합니다.
4
실시간 D-day 카운트다운
히어로의 4셀 카운트다운이 1초마다 갱신됩니다. 골드 액센트와 세리프 타이포로 격조 있는 외형을 유지합니다.
5
오시는 길 + 카카오맵 + 한영 병기 안내
호텔 정문 컷, 카카오맵 iframe, 지하철·발렛·셔틀 3카드 안내를 한영 병기로 제공해 외국인 하객도 불편 없이 읽을 수 있도록 구성했습니다.
