우편 청첩장
봉투가 열리며 손글씨 편지가 미끄러져 나오는 빈티지 항공우편 청첩장
프로젝트 개요
크라프트 베이지 + 잉크 + 우표 빨강 + 항공우편 블루 4색으로 빈티지 항공우편 청첩장을 만들었습니다. 시그니처는 봉투 오픈 인터랙션 — 페이지 진입 1.2초 후 봉투 flap이 자동으로 위로 회전(rotateX 180°)하고 안에서 손글씨 편지가 슬라이드업으로 미끄러져 나옵니다. 클릭 시 다시 접거나 펼 수 있습니다. Caveat 손글씨 편지 본문, 4개 도시 빈티지 엽서 카드(Provence/Lisbon/Kyoto/Seoul), 우표 도장과 sepia 카카오맵까지 5섹션을 단일 라우트에 담았습니다.
핵심 구현 포인트
봉투 오픈 인터랙션 (시그니처)
rotateX 180°로 봉투 flap이 자동 열리고, 편지가 translateY로 슬라이드업합니다. 클릭으로 토글 가능. perspective + cubic-bezier easing으로 입체감을 살렸습니다.
항공우편 빨강·파랑 보더
border-image의 repeating-linear-gradient로 PAR AVION 항공우편 봉투 특유의 빨강·파랑 줄무늬 보더를 CSS만으로 구현했습니다.
Caveat 손글씨 편지 본문
Letter 섹션 전체를 Caveat 손글씨 폰트로 작성. 시작/끝에 빨강·파랑 줄무늬가 있는 카드 안에 4문단 편지와 손글씨 서명을 담았습니다.
도시 엽서 4프레임 (살짝 기울임)
Provence / Lisbon / Kyoto / Seoul 네 도시 엽서를 ±1° 기울어진 카드로 배치. hover 시 0°로 펴지고, 우표 도장 원형 마크와 손글씨 캡션이 들어갑니다.
우표 도장 + sepia 카카오맵
Destination 섹션에 'POSTED MAY 04 2026' 도장 마크와 sepia 처리된 카카오맵으로 빈티지 우편 톤을 끝까지 유지합니다.
