열자마자 영상이 나오는 청첩장
링크를 누르면 가장 먼저 짧은 인트로 영상이 재생됩니다.
영상이 끝나면 화면이 부드럽게 사라지면서 청첩장 본문이 나타나는 구조입니다.
openAI로 기본 이미지를 생성, midjourney로 이미지를 다듬고, KlingAI로 영상을 제작하였습니다.
영상이 로드되지 않는 환경에서도 막히지 않도록, 실패하면 곧바로 본문으로 넘어가게 처리했습니다.
오른쪽 아래의 Skip 버튼으로 건너뛸 수도 있습니다.
담은 것들
\- 우리의 이야기 : 우리가 만나고 걸어온 시간을 타임라인으로 정리했습니다.
\- 예식 안내 : 카운트다운, 캘린더, 오시는 길(네이버/카카오 지도), 주차와 교통
\- 갤러리 : 슬라이드 형태로 사진을 넘겨 볼 수 있고, 눌러서 크게 볼 수 있습니다.
\- 방명록 : 하객분들이 축하 메시지를 남길 수 있습니다.
\- 참석 여부(RSVP) : 참석 의사를 청첩장 안에서 바로 전달할 수 있습니다.
\- 마음 전하실 곳 : 계좌번호 안내
\- 배경 음악과 꽃가루 : 분위기를 만드는 작은 장치들
기술 구성
프레임워크 없이 HTML, CSS, JavaScript로 직접 작성했습니다.
방명록과 참석 응답처럼 데이터를 저장해야 하는 부분만 PHP로 간단한 API를 만들었습니다.
지도는 네이버 지도 API, 카카오톡 공유는 카카오 SDK를 사용했습니다.
처음에는 이름만 \`wedding_v05\`, \`v11.9\`처럼 버전을 올려 가며 빠르게 만들었고,
구성을 하나씩 채워 가며 지금의 모양이 되었습니다.
다음 편에서는 만든 뒤 다듬은 과정과, 결혼식 이후를 이야기합니다.