초대장을 준비하는 중…
D & S
MADE WITH CLAUDE CODE
SCROLL TO OPEN ↓
OUR STORY
우리가 걸어온 길
처음 만난 날
2019 봄
첫 데이트
2019 여름
함께한 여행
2021
그 날의 약속
2025 프러포즈
맞잡은 손
언제나
이제, 우리
2026
YOU ARE INVITED
저희 두 사람,
하나가 됩니다
소중한 분들을
초대합니다
WALK WITH US
이 길의 끝에서
기다릴게요
THE CELEBRATION BEGINS IN

결혼식까지

--
DAYS
--
HOURS
--
MIN
--
SEC

2026년 11월 14일 토요일 오후 2시
저희의 새로운 시작을 함께해 주세요.

SCHEDULE OF EVENTS

예식 안내

13:30
하객 입장 · 포토 타임
14:00
예식 시작
14:40
성혼 선언 · 폐백
15:10
피로연 · 식사

더 채플 청담 · 3F 그랜드홀
서울 강남구 청담동

네이버 지도로 길찾기
WITH LOVE

순간들

A LITTLE TOKEN

마음 전하실 곳

참석이 어려우신 분들을 위해 마음 전하실 곳을 안내드립니다.

신랑 도현○○은행 123-456-789012
신부 서연○○은행 987-654-321098
GUESTBOOK

축하 한마디

두 사람에게 따뜻한 축복을 남겨주세요.

Dohyun & Seoyeon
2026 . 11 . 14 . SATURDAY 2PM
두 사람이 사랑으로 만나
한 길을 함께 걷고자 합니다.
귀한 걸음으로 축복해 주세요.
HOW IT'S MADE · 전부 공개

코드 한 줄 없이,
Claude Code로 만들었어요

아무것도 없는 새 컴퓨터에 Claude Code만 깔린 상태 기준이에요. 아래 키 3개를 처음부터 발급받고, 프롬프트를 순서대로 복붙하면 Claude Code가 영상 생성·합성·배포까지 다 합니다.

STEP 0 · 키 3개 발급 (처음부터)

이 3개만 사람이 직접 받아요 (다 무료)

Cloudflare 계정 (사이트 배포용):dash.cloudflare.com 에서 무료 가입. 끝. 나중에 Claude Code에 "wrangler login" 시키면 브라우저로 로그인돼요.
GCP Vertex 키 (영상·이미지 AI 생성):console.cloud.google.com 가입 → 새 프로젝트 만들기 → 검색창에 "Vertex AI" 쳐서 API 사용설정 → "IAM · 서비스 계정" → 서비스 계정 만들기 → 키 추가(JSON) 다운로드 → 그 파일을 ~/.claude/.gcp-vertex-key.pem 위치에 저장. 영상·이미지 생성은 GCP 신규 $300 무료 크레딧(90일)으로 충분히 커버돼요(크레딧 소진 후엔 사용량 과금). 크레딧 없이 만드는 법은 아래 ★ 참고. (방명록·배경음악·배포는 완전 무료)
Pexels 키 (무료 사진):pexels.com/api 에서 가입 → "Your API Key" 복사. (내 사진 쓰면 이건 생략)
STEP 1 · 환경 준비 (복붙)

도구 설치 + 키 연결

새 컴퓨터에 Claude Code만 있어. 이 작업에 필요한 도구를 설치/준비해줘: ffmpeg, node, wrangler(cloudflare), 헤드리스 QA용 puppeteer-core + chromium, yt-dlp. 그리고 방금 발급받은 키를 연결할게: Pexels 키는 저장소 밖 안전한 곳에, GCP Vertex 키 파일은 ~/.claude/.gcp-vertex-key.pem 로, Cloudflare는 'wrangler login'으로 로그인하게 안내해줘.
STEP 2 · 영상·사진 만들기 (복붙)

AI로 자산부터 생성

버건디 청첩장용 자산을 만들어줘.
1) 봉투: Imagen(imagen-3.0-generate-002, 9:16)으로 "딥버건디 청첩장 봉투+금박 왁스실+말린 장미·유칼립투스, 어두운 벨벳 배경" 이미지 생성.
2) 봉투 개봉 영상: 그 이미지를 Veo 3.1 i2v로 "왁스실 떼지고 → 플랩 열리며 → 카드·황금빛·꽃잎 나오는" 8초 영상으로.
3) 식장: Veo로 "골든아워 야외 결혼식장을 카메라가 꽃길 따라 전진 비행" 8초.
4) 주마등 배경: Veo 가성비(veo-3.0-fast)로 "버건디·골드 보케가 떠다니는" 배경 루프.
5) 스냅: Pexels에서 'couple sunset', 'wedding proposal' 등 세로 사진 6장.
GCP 키는 ~/.claude/.gcp-vertex-key.pem 사용. 다 docs 아래 저장해줘.
STEP 3 · 스크롤 청첩장 페이지 (복붙)

5막을 영화처럼 잇기

위 자산으로 세로 9:16 시네마틱 스크롤 청첩장(버건디)을 만들어줘. 스크롤하면 5막이 심리스하게 이어진다:
①봉투 개봉 ②주마등(스냅이 하나씩 앞으로 지나가고 배경 보케가 움직임) ③식장으로 날아 들어가며 긴 세로팬(버진로드) ④카운트다운·예식일정·오시는길·마음전하실곳 ⑤이름·날짜 피날레.
규칙: GSAP ScrollTrigger + Lenis. ★봉투·식장 스크럽은 'canvas 프레임 시퀀스'로(아래 비결). 핀 높이 100dvh, overflow-x:clip, 막 사이 어두운 veil 크로스페이드. 헤드리스 chromium으로 스크롤 지점별 스크린샷 찍어 검증하고 보여줘. Cloudflare Pages로 배포(파일당 25MB 이하로 압축). 이름·날짜·사진은 우선 더미.
STEP 4 · 방명록 (복붙)

서버·DB 없이 (Cloudflare KV)

방명록을 추가해줘. 서버·DB 없이 Cloudflare KV + Pages Functions로.
1) `GUESTBOOK` KV 네임스페이스를 만들고 wrangler.toml에 binding 이름 GUESTBOOK으로 연결.
2) functions/api/guestbook.js (URL은 /api/guestbook):
   · GET = 최근 200개 최신순 JSON. KV.list로 한 번에 가져오되 메시지는 키 metadata에 저장(키 m:<타임스탬프>_<랜덤>)해서 목록을 KV 1콜로 끝내.
   · POST {name,message,website} = 저장. 스팸가드 필수: 허니팟(화면에 숨긴 website 칸이 채워지면 봇이니 조용히 무시), 이름 1~20·메시지 2~200자, 링크/텔레그램·카톡아이디 차단, 같은 IP 60분 1회(KV에 rl:<ip> 3600초 TTL).
3) 청첩장에 방명록 섹션(이름·메시지·남기기 + 허니팟 숨김 input). 열면 GET으로 목록 렌더, 남기면 POST 후 맨 위에 바로 추가. 사용자 입력은 textContent로만 넣어 XSS 방지.
배포 후 /api/guestbook에 테스트 글을 남겨 저장·조회까지 확인해줘. (방명록이 "준비 중"으로 뜨면 Cloudflare 대시보드 Settings → Functions → KV bindings에서 GUESTBOOK 연결 후 재배포)
참고: KV·Pages 무료 한도(하루 쓰기 1천·읽기 10만)면 청첩장 방명록엔 차고 넘쳐. 카드사·DB 결제 0원.
STEP 5 · 배경음악 (복붙)

아이폰에서도 되는 BGM

배경음악을 넣어줘. iOS 자동재생 정책에 맞게.
- 저작권free 음원(Mixkit·Pixabay)을 audio/bgm.mp3 로. 못 구하면 무료·상업가능 음원 출처를 추천하고 받는 법까지 안내해줘. 1MB 넘으면 ffmpeg로 압축. 태그는 loop·playsinline·preload="none".
- iOS는 자동재생 금지(스크롤은 제스처로 안 쳐줌) → 첫 '탭'에서 시작. 시작 시 볼륨 0에서 1.7초에 걸쳐 0.34까지 페이드인.
- 우하단 동그란 사운드 토글(🔇/🔊), 처음엔 펄스 + "탭하여 음악과 함께 ♪" 힌트. 끄면 localStorage('wed_muted')에 기억해 재방문 시 존중.
- 입장과 음악을 한 몸으로: window.__weddingEnter() 만들어 봉투 '왁스 씰' 탭하면 호출(이전 음소거 무시하고 강제 시작). 씰 핫스팟은 캔버스 object-fit:cover로 잘리는 걸 감안해 JS로 화면좌표 계산해 정확히 씰 위에. 헤드리스 chromium으로 모바일·웹 캡처해 위치 검증.
- (선택) 스크롤 효과음: 봉투 개봉·피날레 진입 시 Web Audio로 1회씩, 볼륨 작게.
★ 영상·이미지, 돈 안 쓰고 만드는 법

무료 크레딧 주는 툴이 많아요

영상은 두 갈래, 둘 다 무료로 됩니다.

① 자동 (Claude Code가 API로): GCP 신규 $300 크레딧(90일). 청첩장 영상 몇 컷이면 크레딧 안에서 끝나요. 위 STEP 2처럼 Veo·Imagen을 Claude Code가 알아서 호출합니다.

② 수동 (무료 웹툴에서 직접 뽑기): 가입만 하면 무료 크레딧·일일 무료 생성을 주는 툴이 많아요 , Google AI Studio(aistudio.google.com, Veo·Imagen 무료 한도)·Luma Dream Machine·Kling·Pika·Pixverse. 여기서 8초 컷 몇 개·이미지를 뽑아 docs/ 폴더에 넣고 Claude Code에게 "docs에 있는 이 영상·사진들로 만들어줘"라고 하면 됩니다.

이미지·사진은 Google AI Studio(Imagen) 무료 한도, 또는 Pexels 무료 사진으로 대체 가능. 정직하게: 무료 웹툴은 워터마크·일일 한도·대기열이 있을 수 있어요(청첩장 몇 컷엔 충분).

★ 비결 1 · 모바일에서 안 끊기는 법

영상을 "사진 시퀀스"로 쪼개 canvas에 그린다

스크롤에 맞춰 영상을 재생(video의 currentTime 조작)하면 폰(특히 사파리)에서 끊기거나 아예 안 돌아갑니다. 데스크톱에선 멀쩡해 보여서 속기 쉬워요.

그래서 우리는 영상을 ffmpeg로 사진 80장으로 쪼개고(fps=10), 전부 미리 불러둔 뒤, 스크롤 위치에 맞는 사진 한 장을 canvas에 그립니다. 디코딩·탐색이 없어서 폰에서 버터처럼 부드러워요. 카메라 줌·위빙·세로팬은 그 canvas에 CSS로 얹고요. (자동재생 배경 루프만 video 그대로 둬도 됨)

★ 비결 2 · 이거 모르면 며칠 날립니다

실제로 막혔던 함정들

· overflow-x:hidden 쓰면 position:sticky가 깨져요(핀이 그냥 스크롤돼 화면이 텅 빔) → overflow-x:clip 사용.
· 핀 높이 100vh는 모바일 주소창 때문에 점프100dvh.
· 세로팬이 캔버스 높이보다 크면 영상 아래 검정 노출 → 캔버스 높이에 맞춰 팬 폭 제한.
· Cloudflare Pages는 파일당 25MB 한도 → 영상 압축.
· 추측 금지: 헤드리스 브라우저로 스크롤별 스크린샷을 찍어 눈으로 확인하며 진행.

막히는 데 있으면 → @aitigermask

탭하여 음악과 함께 ♪