김 나는 3D 머그잔과 카드 세 장이 한 장의 메뉴판으로 모이는 겨울 음료 메뉴 영상, 매장 모니터·릴스용 15초 세로 템플릿

처음 만드는 분은 클로드 환경 설치법부터 준비해 주세요. Claude Code와 HyperFrames로 첫 MP4를 만드는 순서예요.

김이 모락모락 나는 머그잔이 빙글 돌며 들어오고, 핫초코·유자차·바닐라 라테 카드가 한 장씩 날아와 자리를 잡은 뒤, 마지막에 초록 메뉴판 한 장으로 착 정리되는 15초 세로 영상이에요. 첫 장면부터 화면 위쪽에 「겨울 음료 메뉴」가 떠 있어서, 휙 넘기던 사람도 무슨 영상인지 바로 알아요. 매장 세로 모니터, 키오스크 옆 대기 화면, 겨울 메뉴 시작 공지 릴스에 쓰기 좋게 만들었어요.

이 글에서 새로 알게 되는 것은 하나예요. 움직이는 잔에서 피어오르는 김이 잔을 스티커처럼 따라다니지 않게 하는 방법, 그리고 첫 시안에서 실제로 틀어졌던 장면 세 곳을 어떻게 고쳤는지예요. 화면 속 [가게 이름], 메뉴 이름, ₩ 0,000은 모두 바꿔 쓰는 자리라서 실제 가격이나 가게 정보는 하나도 들어 있지 않아요. 머그잔과 눈, 김, 카드는 사진이 아니라 전부 코드로 그렸어요.

이 메뉴판이 일하기 좋은 자리

• 매장 세로 모니터·대기 화면: 12.8초부터는 메뉴판과 글자가 움직이지 않고 눈과 김만 천천히 흘러요. 그래서 반복 재생을 걸어 두면 끝부분이 꽤 길게 ‘읽히는 메뉴판’ 역할을 해요. 카운터 옆 세로 TV에 겨울 한정 메뉴를 띄워 두기 좋아요.
• 겨울 메뉴 시작 공지 릴스·스토리: 카드가 박자에 맞춰 한 장씩 들어와서 “올겨울 메뉴는 이 세 가지!”를 말없이 보여 줘요. 9:16 세로라 휴대폰 화면에 꽉 차요.
• 키오스크·포스터 옆 보조 화면: 종이 메뉴판 옆에 움직이는 화면이 하나 있으면 시선이 먼저 가요. 메뉴를 세 개만 골라 ‘이번 시즌 추천’처럼 쓰면 깔끔해요.
• 찻집·베이커리 카페·북카페의 시즌 안내: 유자차 자리에 대추차나 생강차, 바닐라 라테 자리에 밤 라테처럼 우리 가게 겨울 음료를 넣으면 돼요. 음료가 아니어도 붕어빵·호떡 같은 겨울 간식 세 가지로 바꿔도 같은 구조가 그대로 통해요.

가로 TV에 띄울 거라면 영상을 잘라 쓰지 말고 “같은 연출로 1920×1080에 다시 배치해 줘. 메뉴판은 오른쪽, 머그잔은 왼쪽에 크게”처럼 자리를 새로 잡아 달라고 하세요. 세로 화면을 가로로 자르면 카드 세 장 중 하나가 잘려 나가요.

바꿔 넣을 칸과 글자 길이 요령

바꿀 곳은 다섯 군데예요. ① 맨 위 [가게 이름] 칩, ② 카드 세 장의 한글 메뉴 이름과 아래 영문 이름, ③ ₩ 0,000 가격 칸, ④ 카드 왼쪽 동그라미 안의 선 아이콘, ⑤ 잔 속 음료 무늬예요. 잔 속 음료는 카드가 바뀔 때마다 핫초코(마시멜로 네 조각) → 유자차(유자 껍질 채) → 바닐라 라테(하트 라테아트)로 함께 바뀌니까, 메뉴를 바꾸면 이 무늬도 같이 바꿔 달라고 하면 좋아요.

글자 길이는 꼭 확인하세요. 실제로 첫 시안에서 「바닐라 라테」(띄어쓰기 포함 6자)를 74px 굵은 글씨로 넣었더니 오른쪽 가격 칸과 딱 붙어 버렸어요. 글씨를 64px로 줄이고 이름과 가격 사이 간격을 다시 잡아서 해결했어요. 한글 메뉴 이름은 6자 안쪽이 가장 안전하고, 더 길면 “메뉴 이름이 7자 이상이면 글씨를 줄이지 말고 두 줄로 나눠 줘”처럼 요청하는 게 좋아요. 가격은 실제 판매가를 확인한 뒤 직접 넣어 주세요. 메뉴를 네 개로 늘리고 싶다면 “카드 높이를 줄여 네 칸 메뉴판으로, 네 번째 카드는 13번째 박에 들어오게”라고 말하면 돼요.

첫 시안에서 실제로 고친 세 장면

렌더 전에 미리보기 장면을 여러 장 뽑아 보고, 렌더한 MP4에서도 1초 간격으로 장면을 다시 꺼내 확인했어요. 그 과정에서 실제로 걸린 문제와 고친 값을 그대로 적어 볼게요.

하나, 눈과 김이 제목을 가렸어요. 첫 시안은 카메라 바로 앞을 지나는 큰 눈송이(흐린 보케)가 많고 김도 진해서, 영상의 쓰임새를 알려 줄 「WINTER DRINKS」가 거의 안 보였어요. 0초 장면에는 제목이 아예 없었고요. 가까운 눈송이 비율을 줄이고 투명도를 0.5에서 0.22로, 김 한 덩어리의 최대 투명도를 0.11에서 0.065로 낮췄어요. 제목은 0초에도 75% 보이도록 시작값을 바꿨어요. 머그잔도 너무 커서 받침 접시가 화면 끝에 닿아 크기를 약 20% 줄였고, 손잡이가 뒤로 숨어 컵처럼 보이던 회전 각도도 오른쪽 앞을 향하게 바꿨어요.

둘, 첫 카드가 나온 뒤 가운데가 텅 비었어요. 1차 렌더본을 보니 3~5초에 핫초코 카드는 맨 위 제자리로 가 버리고 머그잔은 맨 아래로 내려가서, 가운데 절반이 2초 가까이 비어 있었어요. 그래서 첫 카드만 두 번째 카드가 올 때까지 화면 가운데(세로 900px 지점)에 머물다가, 5.12초 박자에 맞춰 위로 올라가게 바꿨어요.

셋, 세 번째 카드가 양옆으로 잘렸어요. 카드가 들어올 때 앞으로 살짝 튀어나오는 연출(z축 +260px, 1.08배)을 넣었는데, 원근 거리 1700px에서는 앞으로 나온 만큼 약 1.2배 더 커 보이고 여기에 1.08배가 겹쳐서, 860px 카드가 약 1,120px로 1,080px 화면보다 넓어졌어요. 튀어나오는 양을 +120px, 1.02배로 줄이고 머그잔을 조금 더 아래로 내려서 해결했어요. 미리보기에서는 이 밖에도 9.6초에 바닐라 라테 카드만 혼자 어두워지는 문제가 있었는데, 밝기 필터의 시작값이 비어 있던 게 원인으로 보여 모든 카드에 기본 밝기 값을 먼저 넣었더니 사라졌어요.

기법 해설: 김이 ‘태어난 자리’를 기억하게 하기

이 영상에서 머그잔은 2.93초에 화면 가운데에서 맨 아래로 내려가요. 김을 그냥 “지금 잔 위치 위에 그린다”고 하면, 잔이 내려가는 순간 하늘 높이 올라가 있던 김까지 통째로 함께 끌려 내려가요. 스티커를 붙여 놓고 옮기는 것처럼 보이죠. 진짜 김은 이미 공기 중에 나온 순간부터 잔과 상관없이 혼자 올라가고, 새 김만 새 자리에서 나와요.

그래서 김을 30줄기로 나누고, 줄기마다 김 덩어리 13개를 일정한 간격으로 흘려보냈어요. 화면에는 한 프레임에 390개의 부드러운 흰 점이 겹쳐 그려져요. 핵심은 덩어리마다 ‘나이’를 계산하는 거예요. 지금 시각이 t이고 어떤 덩어리의 나이가 a초라면, 그 덩어리는 t−a초에 태어난 거예요. 그 시각에 잔이 어디 있었는지를 다시 계산해서 거기서 출발시키고, 나이만큼 위로 올려 보내요. 이 영상의 모든 움직임은 시각만 주면 위치가 정해지는 식으로 짜여 있어서 과거 위치를 언제든 다시 구할 수 있어요. 그래서 잔이 내려가면 위쪽의 오래된 김은 제자리에서 흩어지고, 아래에서는 새 김이 올라와요.

실제 값은 이래요. 덩어리 하나의 수명은 1.82.7초, 크기는 태어날 때 잔 크기의 약 0.1배에서 사라질 무렵 0.51배까지 커지고, 투명도는 수명 한가운데서 가장 진하다가 양 끝에서 0이 되는 곡선을 따라가요. 줄기마다 좌우로 흔들리는 폭과 빠르기를 조금씩 다르게 줘서 똑같은 물결이 반복되지 않게 했고, 메뉴판이 펼쳐진 뒤에는 글자를 덜 가리도록 김 전체를 45% 옅게 했어요. 김을 더 풍성하게 하고 싶으면 “김 수명을 1.5배로”, 바람에 날리는 느낌이 좋다면 “김이 오른쪽으로 비스듬히 흐르게”, 아이스 음료 메뉴판으로 바꾼다면 “김 대신 잔 표면에 물방울이 맺히게”라고 요청해 보세요. 김이 잔을 따라다니는 것처럼 보이면 “김은 나온 시각의 잔 위치에서 출발하게 해 줘”라고 그대로 말하면 돼요.

82BPM 겨울 로파이와 박자 지도

음악은 이 영상만을 위해 새로 합성한 82BPM 내림마장조(E♭) 겨울 로파이 재즈 힙합이에요. 한 박이 0.73초라서 카드는 4·7·10번째 박(2.93초, 5.12초, 7.32초)에, 메뉴판은 13번째 박(9.51초)에 펼쳐져요. 카드가 들어오는 순간엔 종이가 스치는 ‘쉭’ 소리와 ‘탁’ 하고 놓이는 소리, 글로켄슈필 서너 음이 함께 울리고, 1.46초에 잔이 자리를 잡을 땐 도자기가 ‘팅’ 하고 부딪히는 소리가 나요. 코드는 E♭maj9 → Cm9 → A♭maj9 → B♭13sus → E♭maj9로 흐르고, 따뜻한 일렉트릭 피아노 위에 살짝 늘어지게 스윙한 킥·스네어, 레코드판 잡음을 깔았어요. 외부 음원이나 기존 곡 없이 코드로 만든 소리예요. 박자를 바꾸고 싶으면 “카드가 2박마다 들어오게 100BPM으로”처럼 템포와 등장 박을 함께 말해 주세요.

Claude Code에 맡길 때

Claude Code와 HyperFrames가 준비돼 있다면 아래 복사용 프롬프트의 대괄호만 채워 보내면 돼요. 처음이라면 클로드 환경 설치법을, 다른 가게 버전으로 고쳐 쓰는 요령은 내 가게 버전으로 바꾸는 법을 먼저 봐 주세요. 미리보기 장면을 받으면 렌더 전에 ① 첫 장면에 메뉴판이라는 게 보이는지 ② 가장 긴 메뉴 이름이 가격과 붙지 않는지 ③ 카드가 화면 밖으로 잘리지 않는지, 이 세 가지만 확인해도 위에서 겪은 문제를 대부분 피할 수 있어요.

#모션그래픽

쓸 곳: [매장 세로 모니터·대기 화면 / 겨울 메뉴 공지 릴스·스토리 / 키오스크 옆 보조 화면 / 시즌 메뉴 안내 중 하나]

HyperFrames 스킬을 사용해서 15초 안팎의 겨울 음료 메뉴판 영상을 만들어 줘. 9:16 세로형 1080×1920, 60fps. (쓸 곳이 가로 TV면 1920×1080, 인스타 피드면 1080×1350으로 같은 연출을 잘라 쓰지 말고 다시 배치해 줘.)

가게 이름: [가게 이름]
메뉴 세 가지(한글 / 영문, 한글은 6자 이내 권장): [예: 핫초코 / HOT CHOCOLATE] [예: 유자차 / YUJA TEA] [예: 바닐라 라테 / VANILLA LATTE]
가격: [메뉴별 실제 판매가 — 정하지 않았으면 ₩ 0,000 자리로 비워 둬]
색: [예: 크림색·카라멜·짙은 초록·눈빛 흰색]
마지막 정지 장면에 넣을 짧은 문구(없으면 비워 둬): [ ]

사진 없이 코드로 그려 줘. 3D로 계산한 머그잔(받침 접시, 손잡이, 유약 질감, 빛 반사)에서 김이 피어오르고, 앞뒤 깊이가 다른 눈이 내리는 배경에서 시작해.
1) 0~3초: 첫 프레임부터 화면 위쪽에 가게 이름과 「겨울 음료 메뉴」 제목이 보이게. 머그잔이 기울어진 채 돌며 다가와 박자에 맞춰 자리 잡고, 카메라가 살짝 올라가 잔 속 음료를 보여 줘.
2) 3~9초: 박자에 맞춰 메뉴 카드가 한 장씩 3D로 뒤집히며 날아와. 카드가 바뀔 때마다 잔 속 음료 무늬(예: 마시멜로, 유자 껍질, 하트 라테아트)도 그 메뉴로 바뀌고, 눈송이가 카드에서 바깥으로 흩어지게. 첫 카드는 다음 카드가 올 때까지 화면 가운데에 둬서 빈 곳이 없게 해 줘.
3) 9~12초: 흩어진 카드가 한 줄로 정렬되며 뒤에서 메뉴판이 펼쳐지고, 제목이 메뉴판 머리로 내려앉게. 빛 반사가 한 번 지나가게.
4) 마지막 3초: 메뉴판과 글자는 움직이지 않고 눈과 김만 천천히.
김은 잔이 움직여도 따라다니지 않게, 덩어리마다 나온 시각의 잔 위치에서 출발하게 해 줘. 글자가 김·눈에 가리지 않게 가까운 눈은 옅게. 카드가 화면 밖으로 잘리거나 메뉴 이름과 가격이 붙지 않게 확인해 줘. 박자에 맞춘 전환은 6번 이상, 반복 깜빡임이나 하얗게 번쩍이는 화면은 넣지 마.

음악도 이 영상 전용으로 새로 만들어 줘. 외부 음원·루프·유명 곡 멜로디 없이 코드로 직접 합성. 80BPM 안팎 [겨울 로파이 재즈 힙합]: 따뜻한 일렉트릭 피아노, 살짝 스윙한 또렷한 킥·스네어, 레코드판 잡음, 카드가 놓일 때 종이 소리와 글로켄슈필. 보컬 없이. 음량은 -14 LUFS 근처, 최종 MP4에서 트루 피크 -1dBTP 이하.

상업 이용 가능한 무료 글꼴을 쓰고 이름과 라이선스를 기록해 줘. 먼저 장면 미리보기(스냅샷) 여러 장을 보여 주고, 내가 확인하면 MP4로 렌더링해 줘. 웹에 올릴 수 있게 용량도 확인해 줘. 필요한 도구가 없으면 설치할 항목과 이유를 먼저 알려 줘. 완성 MP4, 음악 파일, 수정용 파일을 저장하고, 실행한 검사와 확인하지 못한 부분을 구분해서 알려 줘.

[메인 작업 세션이 전달한 작품 지시 원문 — 2026-10-31]
2026-11-04 09:30(이후 같은 날 Codex 메뉴 영상과 겹치지 않게 게시일을 11/8로 변경) — 광고형: 겨울 따뜻한 음료 메뉴판 (9:16 1080×1920). 김이 피어오르는 머그잔이 3D로 돌며 등장하고, 따뜻한 음료 메뉴 3종 카드가 눈송이·김과 함께 차례로 펼쳐진 뒤, 마지막에 메뉴판 한 장으로 정리된다. 첫 1~2초에 「겨울 음료 메뉴」 쓰임새가 바로 보여야 한다. 메뉴 이름은 일반 명사 예시(예: 핫초코, 유자차, 바닐라 라테), 가격은 지어내지 말고 `₩ 0,000` 같은 바꿔 쓰는 자리로. 가게 이름은 [가게 이름] 자리. 크림색·카라멜·짙은 초록·눈빛. 실제 사진은 쓰지 않고 코드로 그린다.

[함께 적용한 운영 기준 요약 — AGENTS.md·CLAUDE_TYPO_DAILY.md]
클로드버전 광고형 1편(게시 슬롯 2026-11-04 09:30). 영상 속 문구 최소화(바꿔 쓰는 자리 위주, 영어 병기), 첫 1~2초에 가장 강한 장면과 쓰임새, 3D 카메라·입자·빛·깊이감·박자 맞춘 전환 5~6회 이상, 마지막 2~3초 정지, 렌더 전 스냅샷 장면 시트 검토. 같은 주 다른 편·기존 음료 영상(new-drink, neon-menu, matcha-pulse, peach-fizz)과 스타일·팔레트·모션·음악이 겹치지 않게. 새 음악(외부 음원·루프·기존 곡 금지), 약 -14 LUFS·트루 피크 -1 dBTP 이하, 인접 프레임 평균 밝기 변화 25/255 이하. 가격·효능·영업 정보 지어내지 않기.

[이번 제작에 적용한 구체화 브리프]
「WINTER DRINKS」. 9:16 1080×1920·60fps·15.4초, 82BPM(1박 0.732초) 박자표 기준. 짙은 초록 배경(#0c2219~#123326)에 따뜻한 창가 빛, 카라멜 보케 26개, 3D 깊이로 내리는 눈 300개(가까운 것은 흐린 보케, 가까운 일부는 육각 결정).
- 머그잔: WebGL2 레이마칭으로 직접 계산. 아래가 좁은 원뿔 몸통(아래 반지름 0.49·위 0.60·높이 1.2), 안쪽 빈 공간, 원환 손잡이, 테두리가 살짝 올라간 받침 접시. 크림색 유약 + 아래쪽 짙은 초록 물결 유약 + 카라멜 선 + 작은 반점. 키 라이트 소프트 섀도·필 라이트·차가운 림 라이트·앰비언트 오클루전·창문 반사. 잔 속 음료 무늬는 카드에 맞춰 핫초코(마시멜로 4조각) → 유자차(유자 껍질 채 9가닥) → 바닐라 라테(하트 라테아트)로 소용돌이치며 바뀜.
- 김: 30줄기 × 13덩어리를 화면 합성(screen)으로. 각 덩어리는 태어난 시각의 잔 위치에서 출발해 위로 퍼짐(수명 1.8~2.7초).
- 0~2.93초: 첫 프레임부터 [가게 이름] 칩과 「겨울 음료 메뉴 / WINTER DRINKS」 제목. 머그잔이 기울어진 채 빠르게 돌며 다가와 1.46초(2박)에 자리를 잡고, 카메라가 천천히 위로 올라가 잔 속 핫초코를 보여 줌.
- 2.93초(4박): 머그잔이 화면 아래로 내려가며 120° 회전, 핫초코 카드가 깊이 -1500px에서 115° 뒤집히며 날아와 화면 가운데 착지, 눈송이가 카드 위치에서 바깥으로 흩어짐.
- 5.12초(7박): 핫초코 카드가 위 칸으로 올라가고 유자차 카드 등장, 잔 속 음료가 유자차로.
- 7.32초(10박): 바닐라 라테 카드 등장, 잔 속 하트 라테아트.
- 9.51초(13박): 흩어진 카드 세 장이 한 줄로 정렬되고, 위쪽이 경첩처럼 펼쳐지는 초록 메뉴판이 뒤에 나타나며 제목이 메뉴판 머리로 내려앉음.
- 10.98초(15박) 전체 화면이 살짝 밀려 들어가며 자리 잡음, 11.71초(16박) 메뉴판과 카드에 빛 반사가 지나감, 12.44초 이후 배치 정지(눈과 김만 천천히 움직임).
- 문구: [가게 이름], 겨울 음료 메뉴, WINTER DRINKS, 핫초코/HOT CHOCOLATE, 유자차/YUJA TEA, 바닐라 라테/VANILLA LATTE, ₩ 0,000(가격 자리), SAMPLE · 예시 메뉴. 글꼴 Noto Sans KR.
음악: 새 곡 82BPM·내림마장조 겨울 로파이 재즈 힙합(E♭maj9 – Cm9 – A♭maj9 – B♭13sus – E♭maj9). FM 일렉트릭 피아노, 58% 스윙 킥·스네어·하이햇, 업라이트 느낌 베이스, 레코드판 잡음, 글로켄슈필, 1.46초 도자기 부딪히는 소리, 카드마다 종이 스침·놓이는 소리·글로켄슈필 상행, 메뉴판 직전 셰이커와 역방향 스웰, 메뉴판에서 나무 접히는 듯한 저음과 화음. 시드 20261104, 외부 음원·루프·보컬 없음. Python+NumPy 합성 → FFmpeg 16kHz 로우패스 + 볼륨 +2.7dB + alimiter(limit 0.70).
기술: Claude Code + HyperFrames 0.8.149(2D 캔버스 2장 + WebGL2 캔버스 1장 + CSS 3D 카드, GSAP 타임라인 하나, 매 프레임을 시간만으로 계산, 시드 고정 난수). 렌더 결과가 25MiB 미만이라 다시 인코딩하지 않음.
이 브리프는 영상·음악 코드를 작성하는 데 적용한 지시이며, 별도의 AI 동영상·이미지 생성 모델에 보낸 입력이 아님.

[제작 중 수정]
첫 스냅샷: 0초에 제목이 없고, 가까운 눈송이 보케와 진한 김이 제목·잔을 덮고, 받침 접시가 화면 끝에 닿고, 「바닐라 라테」가 가격과 붙고, 9.6초 바닐라 라테 카드만 어두워짐 → 제목 시작 투명도 0.75, 가까운 눈 투명도 0.5→0.22, 김 투명도 0.11→0.065, 잔 크기 약 20% 축소, 메뉴 이름 74→64px, 카드 기본 밝기값 지정. 손잡이가 뒤로 숨는 회전 각도를 오른쪽 앞으로 조정, 바닐라 라테 카드가 잔에 걸려 잔을 조금 아래로. 1차 렌더 확인: 3~5초 화면 가운데가 비어 첫 카드를 두 번째 카드가 올 때까지 가운데에 두고, 8초 바닐라 라테 카드가 원근 때문에 화면보다 넓어져 앞으로 튀어나오는 양을 z +260→+120px, 1.08→1.02배로 줄여 2차 렌더.

클로드버전이 처음이라면? Claude Code와 HyperFrames 설치부터 알아보기 →