돌잔치 / 백일 초대장
파스텔 톤과 성장 타임라인 슬라이더로 따뜻하게 풀어낸 가족 행사 초대장
프로젝트 개요
옅은 크림과 파스텔 핑크/피치 톤, 둥근 폰트(Quicksand)로 사랑스러운 분위기를 살린 돌잔치·백일 초대장 데모입니다. 시그니처 인터랙션은 0~12개월 5장의 카드가 가로로 흐르는 성장 타임라인 슬라이더로, 모바일 터치 스와이프와 PC 마우스 드래그·휠·키보드 화살표·인디케이터·prev/next 버튼까지 모두 외부 라이브러리 없이 직접 구현했습니다. 카운트다운, 카카오맵, 일러스트 둥둥 모션, 답례품 카드까지 6개 섹션을 단일 라우트에 담았습니다.
핵심 구현 포인트
성장 타임라인 가로 슬라이더
Pointer Events 기반으로 모바일 스와이프와 PC 드래그를 동시에 지원합니다. 25% 임계값 스냅, 키보드 화살표, 휠 가로 스크롤, 인디케이터 동기화까지 외부 라이브러리 없이 구현했습니다.
실시간 D-day 카운트다운
행사일까지 남은 일/시/분/초를 1초마다 갱신합니다. tabular-nums로 숫자 떨림을 막고, 음수 방어 처리로 안전합니다.
일러스트 액센트 둥둥 모션
인트로의 SVG 일러스트 4개에 개별 딜레이/속도를 부여해 자연스럽게 떠다니는 효과를 구현했습니다. prefers-reduced-motion 사용자에게는 모션이 자동 비활성화됩니다.
카카오맵 임베드 + 오시는 길
API 키 없이 iframe 방식으로 지도를 노출하고, 지하철·버스·주차 정보를 카드로 정리해 모바일에서도 한눈에 들어오도록 설계했습니다.
모바일 우선 반응형
초대장 사용자의 90% 이상이 모바일이라는 점을 반영해 max-width 720px 중앙 정렬을 기본으로, 카드 폭과 카운트다운/지도 비율을 모바일 가독성에 맞춰 조정했습니다.
