가게 이름, 손님이 실제로 남긴 후기 세 줄(사용 허락 받은 것), 실제 평점만 준비하면 끝! 아래 프롬프트의 대괄호를 채워 Claude Code에 보내고, 미리보기를 확인한 뒤 MP4로 받아요.
처음 만드는 분은 클로드 환경 설치법부터 준비해 주세요. Claude Code와 HyperFrames로 첫 MP4를 만드는 순서예요.
별 다섯 개가 음악 박자에 맞춰 하나씩 금빛으로 차오르고, 숫자가 1.0, 2.0… 5.0으로 같이 올라가요. 이어서 손님 후기 말풍선 카드 세 장이 오른쪽·위·왼쪽에서 3D로 날아와 겹겹이 쌓이고, 비스듬한 계단처럼 펼쳐졌다가 한가운데로 빨려 들어가면, 마지막에 [가게 이름] 자리와 평점 자리가 담긴 남보라 유리판이 남아요. 인스타 피드에 꼭 맞는 4:5 세로(1080×1350) 15.4초짜리 고객 후기 별점 카드 영상이에요.
이 글에서 새로 알게 되는 것: 애니메이션을 음악의 박자 격자(114BPM이면 한 박 0.526초)에 맞춰 배치하는 방법, 그리고 실제 손님 후기를 영상에 옮길 때 지켜야 할 것.
영상 속 가게 이름, 후기 세 문장, 평점 5.0은 모두 바꿔 쓰는 예시예요. 그래서 화면에도 카드마다 ‘예시 SAMPLE’, 평점 옆에 ‘예시 평점’ 꼬리표를 달아 두었어요. 실제 손님이 남긴 후기가 아니랍니다.
이 후기 카드가 일하는 자리
- 인스타그램 피드 게시물: 4:5 세로라 피드에서 화면을 가장 넓게 차지해요. 첫 장면부터 ‘REVIEW · 손님 후기’ 칩과 빈 별 다섯 개가 보여서, 넘기던 손가락이 멈췄을 때 무슨 영상인지 바로 알 수 있어요.
- 스마트스토어·상세페이지의 후기 구간 위: 상품 상세 이미지 사이에 ‘구매 후기’ 구간을 열어 주는 짧은 영상으로 넣기 좋아요. 마지막 정지 화면이 2.8초 정도라 반복 재생되어도 정보가 읽혀요.
- 매장 TV·계산대 옆 모니터: 소리 없이 틀어도 별이 차오르는 움직임과 카드 넘김만으로 내용이 전달돼요. 가로 TV라면 잘라 쓰지 말고 16:9로 카드를 옆으로 늘어놓게 다시 배치해 달라고 하세요.
- 카카오톡 채널·블로그 소식 첫머리: “이번 달 손님들이 남겨 주신 이야기” 같은 소식 글 맨 위에 붙이면 글보다 먼저 분위기를 보여 줘요.
카페·빵집·미용실·공방·꽃집·온라인 쇼핑몰처럼 후기가 쌓이는 곳이라면 업종은 상관없어요. 바뀌는 건 카드 속 문장과 아바타 색 정도예요.
손님 후기를 넣을 때 지킬 것
바꿔 쓸 자리는 다섯 군데예요. ① 마지막 판의 [가게 이름]과 그 아래 영어 한 줄(YOUR SHOP), ② 후기 카드 세 장의 문장(한 줄 15자 안팎이 넉넉해요), ③ 카드 아래 작은 영어 번역, ④ 손님 표시(지금은 ‘손님 A·B·C’), ⑤ 평점 숫자.
여기서 중요한 약속이 있어요. 실제 후기를 쓸 땐 그 손님이 남긴 문장을 고치지 말고 옮기고, 영상에 써도 되는지 먼저 물어보세요. 닉네임이나 얼굴 사진도 허락 없이 넣지 않는 게 좋아요. 지금처럼 ‘손님 A’처럼 이름을 가리면 부담이 줄어요. 평점은 실제로 받은 숫자를 그대로 넣어 주세요. 예를 들어 4.8이라면 숫자만 4.8로 바꾸면 되고, 별 다섯 개 연출은 ‘다섯 칸 별점판’이라는 뜻이라 그대로 둬도 어색하지 않아요. 별을 4.8칸만 채우고 싶다면 “다섯 번째 별은 80%만 채워 줘”라고 요청하면 돼요. 지어낸 후기나 부풀린 평점을 넣는 건 손님을 속이는 일이니 영상에 넣지 않아요.
후기 문장이 길다면 통째로 줄이기보다 핵심 한 구절을 고르세요. “음료도 맛있고 사장님이 친절해서 또 올게요”라면 “사장님이 정말 친절해요”처럼 손님이 실제로 쓴 말 가운데 한 부분을 고르는 식이에요.
박자 하나에 별 하나: 0.526초 격자 맞추기
이 영상에서 가장 중요한 효과는 모든 움직임이 음악의 박자 위에 놓여 있다는 것이에요. 음악은 114BPM으로 만들었어요. 1분에 114박이니 한 박은 60 ÷ 114 = 약 0.526초예요. 그래서 시간을 초가 아니라 ‘몇 번째 박’으로 정했어요.
- 0박(0초): 첫 킥 드럼과 함께 카드가 비스듬한 각도에서 앞으로 다가와요.
- 1~5박(0.53초, 1.05초, 1.58초, 2.11초, 2.63초): 별이 하나씩 차요. 각 별은 15% 크기에서 0.34초 동안 100%로 커지는데, 끝에서 살짝 넘쳤다 돌아오는 튕김(back.out 2.4)을 줘서 ‘톡’ 하는 느낌을 냈어요. 동시에 빛 고리가 0.4배에서 1.35배로 퍼지고, 작은 반짝이 8개가 120픽셀 바깥으로 흩어져요. 숫자는 같은 순간 0.0→1.0→…→5.0으로 바뀌고, 소리는 솔·라·시·레·미로 한 음씩 올라가는 종소리예요.
- 6·10·14박(3.16초, 5.26초, 7.37초): 후기 카드가 한 장씩 들어와요. 카드는 박보다 0.12초 먼저 움직이기 시작해요. 박 정각에 출발하면 눈에는 늦게 도착한 것처럼 보여서, 소리(금관 ‘빰!’)와 카드가 자리 잡는 순간이 겹치도록 앞당긴 거예요.
- 21.5박(11.32초): 음악이 반 박 동안 멈추고 카드가 가운데로 빨려 들어가요. 22박(11.58초)에 가장 큰 화음과 함께 마지막 판이 튀어나와요.
- 24박(12.63초)부터는 모든 움직임이 멈춘 정지 화면이에요.
바꿔 볼 때 팁: 템포를 바꾸고 싶다면 숫자를 하나하나 고치지 말고 **“BPM을 100으로 바꾸고 모든 등장 시각을 박 단위로 다시 맞춰 줘”**라고 요청하세요. 100BPM이면 한 박이 0.6초라 별 다섯 개가 3초에 걸쳐 차오르고, 전체 길이는 17초 정도로 늘어나요. 별을 한 박에 하나 대신 반 박에 하나로 채우면 훨씬 급하고 신나는 느낌이 돼요. 숫자는 글자를 바꿔 쓰지 않고 0.0부터 5.0까지 여섯 장을 겹쳐 두고 한 장씩 켜는 방식이라, 어느 프레임에서 멈춰도 숫자가 깨지지 않아요.
시안에서 걸린 세 군데와 고친 방법
렌더링 전에 장면을 여러 시각에서 찍어 보는 스냅샷 검토에서 실제로 세 가지 문제가 나왔어요.
1. 숫자가 뭉개지고 별이 비어 있었어요. 첫 스냅샷에서 평점 자리에 0.0부터 5.0까지 여섯 장의 숫자가 한꺼번에 겹쳐 검은 덩어리처럼 보였고, 정작 별은 박자가 지나도 하나도 차지 않았어요. 숫자 여섯 장이 처음부터 ‘보이는 상태’로 시작한 게 원인이었고, 별의 금색 층은 크기 정보가 없어 0×0으로 줄어든 채 커지고 있었어요. 숫자는 첫 장만 보이게 시작하도록, 별 층은 별 크기만큼 자리를 잡도록 고쳤어요.
2. 카드가 쌓이면 위 카드의 후기가 가려졌어요. 세 번째 카드가 들어오는 8초 무렵, 먼저 온 두 장이 너무 촘촘히 겹쳐 ‘또 오고 싶은 곳이에요!’와 ‘사장님이 정말 친절해요’가 반쯤 가려졌어요. 위 카드를 더 높이(위로 520픽셀, 뒤로 380픽셀), 가운데 카드를 위로 180픽셀 올리고, 새 카드는 150픽셀 아래에 자리 잡게 해서 세 문장이 모두 읽히게 했어요.
3. 장식 별이 글자를 덮고, 오른쪽 카드가 화면 밖으로 밀렸어요. 카드를 계단처럼 펼치는 10초 무렵, 공중에 떠 있는 입체 별 몇 개가 카메라 쪽 앞에 있어서 ‘사진보다 실물이 더 예뻐요’를 덮었어요. 장식 별 11개를 모두 카드 뒤 깊이로 보내고, 계단 간격을 좌우 150픽셀에서 105픽셀로, 크기를 78%에서 74%로 줄여 오른쪽 끝도 화면 안에 들어오게 했어요.
Claude Code에 맡기는 순서
맨 아래 프롬프트에 가게 이름·실제 후기·평점 칸을 채워 Claude Code에 붙여 넣으면 시작돼요. 미리보기가 뜨면 별이 박자에 맞게 차는지, 후기 문장 끝이 잘리지 않는지만 보고 MP4로 받으세요. 처음이라면 클로드 환경 설치법부터, 문구를 우리 가게 것으로 바꾸는 요령은 바꿔 쓰기 안내에 있어요.
고쳐 달라고 할 때는 “시간 + 대상 + 원하는 결과”로 말하면 한 번에 통해요. 예를 들면 “5초에 들어오는 두 번째 카드를 위에서 떨어지지 말고 아래에서 올라오게 해 줘”, “마지막 판의 [가게 이름]을 우리 로고 이미지로 바꾸고 크기는 지금 글자 폭에 맞춰 줘”, “평점을 4.8로 바꾸고 다섯 번째 별은 80%만 채워 줘”처럼요.
COPY & MAKE IT YOURS
내 이름으로 만들 프롬프트
사진 없이 아래 프롬프트를 Claude Code에 보내 시작할 수 있어요. 대괄호 부분만 내 매장 정보로 바꾸면 돼요.
쓸 곳: [인스타 피드 후기 소개 / 스마트스토어 상세 후기 구간 / 매장 TV·계산대 모니터 / 카카오 채널·블로그 소식 첫머리 중 하나] HyperFrames 스킬을 사용해서 15초 안팎의 고객 후기 별점 카드 영상을 만들어 줘. 4:5 세로 1080×1350, 60fps. (쓸 곳이 릴스·쇼츠면 1080×1920, 매장 가로 TV면 1920×1080으로 같은 연출을 잘라 쓰지 말고 다시 배치해 줘.) 가게 이름: [우리 가게 이름] 가게 이름 아래 영어 한 줄: [예: YOUR SHOP / CAFE ○○] 후기 세 개(손님이 실제로 쓴 문장 그대로, 영상 사용 허락 받은 것만): 1. [후기 문장] / 영어 번역: [ ] 2. [후기 문장] / 영어 번역: [ ] 3. [후기 문장] / 영어 번역: [ ] 손님 표시: [예: 손님 A·B·C처럼 이름 가리기] 평점: [실제 받은 평점, 예: 4.8 — 다섯 번째 별은 그만큼만 채우기] 색: [예: 남보라 밤 배경 + 금빛 별 + 크림색 카드] 구성: - 첫 장면부터 ‘REVIEW · 손님 후기’ 칩과 빈 별 다섯 개가 보이게 해서 후기 영상이라는 게 1초 안에 읽히게. - 별은 음악 한 박마다 하나씩 금빛으로 차오르고(작게 시작해 톡 튕기며 커지기, 빛 고리와 반짝이), 평점 숫자도 같은 박에 올라가게. - 후기 말풍선 카드 세 장이 오른쪽·위·왼쪽에서 3D로 날아와 겹겹이 쌓였다가, 세 장이 한 화면에 다 읽히게 비스듬한 계단처럼 펼쳐지기. 위 카드의 문장이 가려지지 않게 간격을 넉넉히. - 반 박 멈춘 뒤 카드가 가운데로 빨려 들어가고, 큰 화음과 함께 가게 이름·별 다섯·평점이 담긴 마지막 판이 튀어나와 2~3초 정지. - 배경은 은은한 빛 번짐(보케)과 사선 빛줄기, 카드 뒤 깊이에 떠 있는 입체 별. 장식이 글자 앞을 가리지 않게. - 카메라는 처음부터 살짝 비스듬히 다가오며 장면마다 3D로 돌아가게. 음악: 새로 만든 밝은 펑크·디스코 곡, 강한 킥과 박수, 별이 찰 때마다 한 음씩 올라가는 종소리, 카드가 들어올 때 금관 한 방. 음량 -14 LUFS 안팎, 트루 피크 -1 dBTP 이하. 먼저 장면 스냅샷으로 글자 잘림·가림을 확인한 뒤, 끝까지 재생되는 MP4로 만들어 줘.
이 예제의 실제 제작 지시문 보기
위쪽은 이 편에 적용된 사용자 지시 기록, 메인 작업 세션이 전달한 작품 지시 원문, 함께 적용한 운영 기준, 코드 제작에 실제로 적용한 구체화 브리프와 제작 중 수정이에요. 별도 AI 동영상·이미지 생성 모델에 보낸 입력은 아니에요. 복사용 프롬프트는 독자가 가게 이름과 실제 후기, 평점을 넣기 쉽게 다시 쓴 버전이에요.
[사용자 지시 — Claude 제작 기준서(CLAUDE_TYPO_DAILY.md) 기록] 2026-10-23: 하루 1편 체제에서는 광고형과 작품형을 번갈아 만든다. 영상 속 문구는 최소화하고 필요하면 영어·숫자·기호를 함께 쓴다(해외에서도 읽히게). 2026-10-29: AdSense 1차 승인 거절 뒤 “앞으로 가치 있게 잘 써야 돼.” → 클로드버전 신규 글은 실제 제작 기록·수정 전후 이미지·기법 해설 1가지를 담고, 고정 소제목을 쓰지 않는다. [메인 작업 세션이 전달한 이 작품의 지시 원문] 2026-11-02 09:30 — 광고형: 고객 후기 별점 카드 (4:5 세로 1080×1350). 별 다섯 개가 박자에 맞춰 하나씩 채워지며 빛나고, 손님 후기 말풍선 카드 2~3장이 3D로 겹쳐 넘어가며, 마지막에 가게 이름 자리와 평점 자리가 남는다. 첫 1~2초에 「후기 카드」라는 쓰임새가 바로 보여야 한다. 가게 이름·후기 문구는 가상 예시이며 바꿔 쓰는 자리임이 보이게(예: [가게 이름], 짧은 예시 후기에 '예시' 표시). 실제 손님 후기처럼 꾸미지 마라(예시임을 화면이나 본문에 분명히). 평점 숫자는 예시 표기. [함께 적용한 운영 기준 요약 — AGENTS.md·POST_WRITING_GUIDE.md·CLAUDE_TYPO_DAILY.md·메인 작업 세션 제작 기준] 클로드버전 광고형. HyperFrames 0.8.149, composition 1개, 결정적 시드, 단일 GSAP 타임라인, CSS 3D + 캔버스. 약 15초·60fps, 첫 1~2초에 가장 강한 장면, 3D 카메라·입자·빛·깊이감·박자 맞춘 전환 5~6회 이상. 문구는 바꿔 쓰는 자리 위주로 짧게, 영어 병기. 렌더 전 스냅샷 장면 시트 검토. 새 음악(Python/NumPy 합성 + FFmpeg 마스터링, 밝은 펑크/디스코 계열), 약 -14 LUFS·트루 피크 -1 dBTP 이하. 25MiB 미만, 인접 프레임 평균 밝기 변화 25/255 이하. 기존 감사 편지·RSVP 티켓·SNS 폰·스크래치 쿠폰 편과 스타일·팔레트·모션·음악이 겹치지 않게. [적용 브리프 — Claude가 구체화해 코드 제작에 적용한 내용] - 비율·길이: 4:5 1080×1350, 60fps, 15.4초(924프레임). 114BPM 박자 격자(한 박 0.526초) 위에 모든 등장 시각을 둔다. - 팔레트: 남보라 밤 배경(#110c30→#271a63), 금빛 별(#ffe680→#ffc233→#ff9a1f), 크림색 카드, 민트 꼬리표(#3fd6b4), 보케는 금·민트·분홍·라벤더. - 0박: ‘REVIEW · 손님 후기’ 칩 + 빈 별 다섯 + 0.0 평점 카드가 비스듬한 카메라 앞으로 다가온다(첫 프레임부터 후기 카드로 읽히게). - 1~5박: 별이 하나씩 차오른다(15%→100%, 0.34초, back.out 2.4, 빛 고리 0.4→1.35배, 반짝이 8개 120px). 평점은 0.0~5.0 여섯 겹을 박마다 하나씩 켠다. 종소리 G-A-B-D-E. - 5.6박: 카드가 왼쪽 뒤로 날아가며 퇴장. 6·10·14박: 후기 말풍선 카드가 오른쪽(회전 -95°)·위(85°)·왼쪽(100°)에서 0.12초 앞당겨 들어와 쌓인다. 각 카드에 ‘예시 SAMPLE’ 꼬리표, 손님 A·B·C, 작은 별 다섯이 4분의 1박 간격으로 튀어나옴, 빛 띠가 한 번 지나감. - 예시 후기: “또 오고 싶은 곳이에요!” / Can't wait to come back! · “사장님이 정말 친절해요” / Such friendly staff · “사진보다 실물이 더 예뻐요” / Even better in person. - 18박: 세 장이 비스듬한 계단으로 펼쳐지고 카메라가 좌우로 돈다. 21.5박: 반 박 멈춤과 함께 가운데로 빨려 들어감. 22박: [가게 이름]·YOUR SHOP·별 다섯·5.0 / 5·‘예시 평점’ 꼬리표가 담긴 남보라 유리판이 튀어나오고 색종이 140조각이 1초 동안 터진다. 24박(12.63초)부터 정지. - 배경: 보케 46개(카메라 각도에 따라 시차 이동), 사선 빛줄기 4개, 카드 뒤 깊이에 떠 있는 7겹 입체 별 11개, 따옴표 장식 2개, 반짝임 14개(정지 구간에서는 멈춤). - 음악: 114BPM G장조 부기 펑크/디스코 펑크, Gmaj9–Em9–Cmaj9–D9, 포 온 더 플로어 킥·2·4박 박수·16분 하이햇, 슬랩 베이스, 클라비 코드, 카드 등장마다 금관 스탭, 18박부터 오픈 하이햇·스트링, 21.5박 반 박 정지 후 22박 마지막 화음·크래시·반짝 종소리, 시드 20261102. [제작 중 수정 — 스냅샷 검토에서 실제로 발견해 고친 것] 1. 첫 스냅샷: 평점 숫자 여섯 겹이 처음부터 모두 보여 검게 뭉개짐, 별 금색 층이 크기 없이 0×0으로 줄어 별이 비어 보임 → 숫자는 첫 장만 보이게 시작, 별 층에 별 크기만큼 자리 지정. 2. 2차 스냅샷 8초: 카드 셋이 촘촘히 쌓여 위 두 장의 후기 문장이 가려짐 → 위 카드 위로 520·뒤로 380픽셀, 가운데 카드 위로 180픽셀, 새 카드 150픽셀 아래. 3. 2차 스냅샷 10.4초: 공중의 입체 별이 아래 카드 문장을 덮고, 오른쪽 카드가 화면 끝에 닿음 → 장식 별 11개를 모두 카드 뒤 깊이(-1250~-170픽셀)로, 계단 간격 ±150→±105픽셀, 크기 78→74%.