파티를 준비하는 중…
Jiyu
MADE WITH CLAUDE CODE
SCROLL TO OPEN ↓
TWENTY-NINE
스물아홉 번의 계절
혼자 떠났던 첫 여행
스물다섯
밤새 웃던 우리
언제나
작년 이맘때의 촛불
스물여덟
좋아하는 오후
어느 날
반짝이던 밤
성수
그리고 지금
스물아홉
YOU ARE INVITED
지유의 스물아홉 번째
밤에 초대합니다
딱 하루,
이 밤을 위해 루프탑
SEE YOU AT THE TOP
도시의 꼭대기에서
만나요
THE PARTY BEGINS IN

파티까지

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

2026년 8월 22일 토요일 저녁 7시
지유의 스물아홉 번째 밤, 함께 건배해 주세요.

SCHEDULE OF THE NIGHT

이 밤의 순서

19:00
웰컴 샴페인 · 포토 타임
20:00
디너 · 토스트
21:30
케이크 · 캔들 · 소원
22:00
루프탑 DJ 셋 · 시티뷰 야경

루네 루프탑 라운지 · 12F
서울 성동구 성수동 카페거리

네이버 지도로 길찾기
DRESS CODE

블랙 & 골드

BLACK
GOLD

완벽하지 않아도 괜찮아요.
골드 귀걸이 하나, 블랙 재킷 하나면 충분해요.

WITH LOVE

순간들

NO GIFTS, JUST YOU

선물은 사양할게요

빈손으로 와요, 그게 선물이에요.
정 아쉬우면 그날 폴라로이드 한 장만 찍어줘요.

GUESTBOOK

축하 한마디

지유에게 반짝이는 한마디를 남겨주세요.

MAKE A WISH

후 불어서 촛불을 꺼주세요

마이크 권한을 허용하면 진짜 입김으로 꺼져요
소원은 이뤄질 거예요.
8월 22일, 루프탑에서 만나요 🥂
Jiyu's Twenty Nine
2026 . 08 . 22 . SATURDAY 7PM
스물아홉 번째 여름의 끝,
가장 좋아하는 사람들과 건배하고 싶어요.
그 자리에 있어 주세요.
HOW IT'S MADE · 전부 공개

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

아무것도 없는 새 컴퓨터에 Claude Code만 깔린 상태 기준이에요. 키 3개를 발급받고 아래 프롬프트를 순서대로 복붙하면 Claude Code가 영상 생성·합성·배포까지 다 합니다. (청첩장 버전도 같은 방법: tiger-wedding.pages.dev)

STEP 0 · 키 3개 발급

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

Cloudflare 계정 (배포): dash.cloudflare.com 무료 가입. 나중에 Claude Code에 "wrangler login" 시키면 끝.
GCP Vertex 키 (영상·이미지 AI): console.cloud.google.com → 새 프로젝트 → Vertex AI 사용설정 → 서비스 계정 키(JSON) 발급 → ~/.claude/.gcp-vertex-key.pem으로 저장. 신규 $300 크레딧(90일)으로 충분해요.
Pexels 키 (무료 사진): pexels.com/api 가입 → 키 복사. 내 사진 쓰면 생략.
STEP 1 · 환경 준비 (복붙)

도구 설치 + 키 연결

새 컴퓨터에 Claude Code만 있어. 필요한 도구를 설치해줘: ffmpeg, node, wrangler, 헤드리스 QA용 puppeteer-core + chromium. Pexels 키는 저장소 밖 안전한 곳에, GCP 키 파일은 ~/.claude/.gcp-vertex-key.pem 로 저장하고, Cloudflare는 'wrangler login'으로 로그인하게 안내해줘.
STEP 2 · AI 자산 생성 (복붙)

선물상자·파티장·배경을 AI로

블랙+샴페인골드 생일 초대장용 자산을 만들어줘.
1) 선물상자: Imagen(9:16)으로 "블랙 선물상자+골드 새틴 리본, 골드 콘페티, 다크 무드" 이미지 생성.
2) 개봉 영상: 그 이미지를 Veo 3.1 i2v로 "리본 풀리고 뚜껑 열리며 골드빛·콘페티 터지는" 8초 영상으로.
3) 파티장: Veo로 "야간 루프탑 라운지 파티(디스코볼·샴페인타워·풍선·시티뷰)를 카메라가 전진 비행" 8초.
4) 주마등 배경: Veo fast로 "샴페인골드 보케가 떠다니는" 배경 루프.
5) 스냅: Pexels 세로 사진 6장. ★주인공이 한 명으로 보이게 얼굴 나온 컷은 1장만, 나머지는 뒷모습·사물 컷으로.
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로.
GUESTBOOK KV 네임스페이스 생성 후 wrangler.toml에 바인딩, functions/api/guestbook.js에 GET(최근 200개, 메시지는 키 metadata로 KV 1콜)·POST(허니팟+이름/메시지 길이제한+링크차단+같은 IP 60분 1회) 구현. 입력은 textContent로만 렌더해 XSS 방지. 배포 후 테스트 글로 저장·조회까지 확인해줘.
STEP 5 · 음악 + 캔들 이스터에그 (복붙)

탭하면 음악, 후 불면 촛불이 꺼진다

1) BGM: 저작권free 음원을 audio/bgm.mp3로(1MB 이하 압축). iOS는 자동재생 금지라 첫 '탭'에서 시작, 볼륨 0→0.34 페이드인. 우하단 사운드 토글(🔇/🔊)+localStorage로 음소거 기억. 리본 '탭'과 음악 시작을 한 몸으로(window.__partyEnter).
2) 피날레에 CSS 케이크+캔들 3개를 만들고, "🎤 마이크로 후~ 불기" 버튼을 눌러 마이크 권한을 받으면 Web Audio AnalyserNode로 입김 소리(RMS)를 감지해서 촛불이 꺼지고 콘페티가 터지게 해줘. 권한 거부·미지원이면 탭으로 끄는 폴백 버튼.
★ 비결 1 · 폰에서 안 끊기는 법

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

스크롤에 맞춰 영상을 재생(video의 currentTime 조작)하면 폰(특히 사파리)에서 끊기거나 아예 안 돌아갑니다. 그래서 영상을 ffmpeg로 사진 80장(fps=10)으로 쪼개 전부 미리 불러두고, 스크롤 위치에 맞는 한 장을 canvas에 그립니다. 디코딩이 없어서 버터처럼 부드러워요. 카메라 줌·위빙·세로팬은 canvas에 CSS로 얹습니다.

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

실제로 막혔던 함정들

· overflow-x:hidden 쓰면 position:sticky가 깨져요overflow-x:clip.
· 핀 높이 100vh는 모바일 주소창 때문에 점프100dvh.
· 세로팬이 캔버스 높이보다 크면 아래 검정 노출 → 팬 폭 제한.
· Cloudflare Pages 파일당 25MB 한도 → 영상 압축.
· 더미 사진으로 만들 때 얼굴 나온 컷이 2장 이상이면 "다른 사람들"로 보임 → 얼굴 1장+뒷모습 컷.
· 추측 금지: 헤드리스 브라우저 스크린샷으로 눈으로 확인.

★ 영상·이미지, 돈 안 쓰고 만드는 법

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

① 자동: GCP 신규 $300 크레딧(90일)이면 Veo·Imagen 몇 컷은 그 안에서 끝나요(이 페이지 영상 3개+이미지 3장 ≈ $2 안팎).
② 수동: Google AI Studio(무료 한도)·Luma·Kling·Pika에서 뽑아 폴더에 넣고 "이 영상들로 만들어줘"라고 해도 됩니다. 사진은 Pexels 무료.

막히는 데 있으면 → @aitigermask

탭하여 음악과 함께 ♪