프로젝트 목록
이벤트 / 캠페인STANDARD
미니멀 화이트 청첩장
절제된 모던 톤과 타이프라이터·스크롤 reveal로 "글로 쓴 우리 이야기"를 표현한 원페이지 청첩장
HTML5CSS3SCSSVanilla TSIntersectionObserver
프로젝트 개요
미니멀 화이트 톤의 모바일 우선 청첩장 데모입니다. 외부 라이브러리 없이 타이프라이터, 스크롤 페이드인, 실시간 D-day 카운트다운, 계좌번호 클립보드 복사를 모두 직접 구현했습니다. 화이트 + 옅은 골드 + 충분한 여백으로 텍스트가 주인공이 되는 절제된 디자인을 추구했고, 7개 섹션(인트로/인사/우리 이야기/갤러리/결혼식 정보/계좌/푸터)을 단일 라우트에 담았습니다.
핵심 구현 포인트
1
신랑신부 이름 타이프라이터
페이지 로드 시 영문 이니셜이 한 글자씩 타이핑되는 효과. 외부 라이브러리 없이 setInterval과 dataset만으로 구현, reduced-motion 대응 포함.
2
실시간 D-day 카운트다운
결혼식 일시까지 남은 일/시/분/초를 1초마다 갱신. tabular-nums로 숫자 떨림을 막고, 음수 방어 처리 포함.
3
계좌번호 클립보드 복사 + 토스트
navigator.clipboard와 textarea fallback을 동시에 지원해 모든 환경에서 동작. 복사 결과는 하단 토스트로 2.4초간 안내.
4
스크롤 진입 페이드인
IntersectionObserver로 섹션이 뷰포트에 들어올 때만 부드럽게 페이드인. once 트리거로 성능 부담 최소화.
5
모바일 우선 반응형
청첩장 사용자의 80% 이상이 모바일이라는 점을 반영해 max-width 680px 중앙 정렬과 좌우 24px 패딩을 기본으로 설계했습니다.
