3D 숫자 카드가 넘어가는 매장 TV 대기·예약 안내 화면, 반복 재생 16초 영상과 숫자판 원리

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

매장 TV에 틀어 두는 「지금 입장 번호 / 예약 안내」 화면이에요. 첫 장면부터 큼직한 숫자판과 NEXT 대기 번호, 전화 예약 카드, QR 예약 카드가 한 화면에 다 보이고, 0.5초 만에 숫자 카드가 3D로 휙 넘어가며 048이 049가 돼요. 카메라가 숫자판 가까이 다가갔다가, 줄 서 있는 번호표 쪽으로 넘어가고, 예약 카드들이 안쪽에서 날아와 자리를 잡은 뒤, 마지막엔 처음과 똑같은 전체 화면으로 돌아와 멈춰요. 16초짜리 16:9 가로 영상이라 TV에서 반복 재생으로 틀어 두기 좋아요.

이 글에서는 두께가 있는 카드 한 장을 180도 돌려서 숫자를 바꾸는 원리와, 첫 장면과 끝 장면을 맞춰 TV에서 끊김 없이 이어 틀게 만드는 방법을 새로 알 수 있어요. 화면 속 [가게 이름], [000-0000-0000], [예약 링크 자리]는 바꿔 쓰는 자리이고, QR은 실제로 찍히는 코드가 아니라 「예시 · SAMPLE」 표시를 붙인 장식 무늬예요.

어느 화면에 틀어 두면 좋을까

• 카페·식당 입구의 대기 모니터: 손님이 줄을 서는 동안 “지금 몇 번까지 들어갔지?”를 보는 자리예요. 번호판이 가장 크게, 가장 먼저 보이게 짰어요.
• 미용실·네일숍·공방 카운터 옆 TV: 예약제로 운영하는 곳이라면 전화 예약 카드와 QR 카드가 손님에게 “다음엔 예약하고 오세요”를 대신 말해 줘요.
• 팝업스토어·행사 접수 부스: 입장 순서를 안내하는 배경 화면으로 쓰고, NEXT 칸에 다음 입장 번호를 넣어요.
• 키오스크 옆 보조 모니터: 키오스크에서 대기 등록을 받는 매장이라면 대기 팀 수가 늘어나는 장면(WAITING 5 → 6)이 등록 안내 역할을 해요.

한 가지는 꼭 알아 두세요. 이 영상은 미리 렌더링한 동영상이라 실제 호출 번호를 자동으로 따라가지 않아요. 번호가 실시간으로 바뀌어야 하는 매장이라면 대기 관리 프로그램 화면과 번갈아 틀거나, 이 영상을 “우리 가게는 이렇게 순서를 불러요”라는 안내·분위기 화면으로 쓰는 편이 맞아요. 세로 모니터에 걸 거라면 9:16 비율로 배치를 새로 짜 달라고 하면 돼요.

바꿔 넣는 다섯 자리

• [가게 이름]: 위쪽 왼편. 열 글자 안쪽이 가장 보기 좋아요. 길면 “가게 이름 글자 크기를 줄여서 한 줄에 맞춰 줘”라고 덧붙여요.
• [000-0000-0000]: 예약 전화번호. 매장 번호처럼 공개해도 되는 번호만 넣어요.
• [예약 링크 자리]: 네이버 예약, 인스타그램 프로필처럼 손님이 찾아갈 곳을 짧게 적어요.
• QR 무늬: 지금은 장식이에요. 진짜 QR을 넣고 싶다면 무료 QR 생성 도구로 내 예약 링크의 QR 이미지를 먼저 만들고, 그 파일을 Claude Code에 주면서 “QR 무늬 자리를 이 이미지로 바꾸고 예시 표시는 빼 줘”라고 요청해요. 바꾼 뒤에는 꼭 휴대폰으로 직접 찍어서 열리는지 확인하고요.
• 번호 순서(048 → 049 → 050 → 051)와 대기 팀 수: 숫자만 바꾸면 돼요. 두 자리가 한꺼번에 바뀌는 순간(049 → 050)이 하나 들어 있으면 넘김이 더 시원해 보여요.

색은 네이비 바탕에 민트 포인트, 크림색 카드예요. 매장 색이 따로 있다면 “민트를 우리 가게 초록 #2E8B57로” 처럼 색 코드를 알려 주세요.

16초 동안 화면에서 벌어지는 일

1. 0~2초: 전체 안내 화면 그대로 시작. 0.5초에 숫자 카드 세 장이 차례로 넘어가고, 민트 고리와 작은 조각이 튀며 “딩동” 호출음이 나요.
2. 2~4초: 카메라가 숫자판 앞으로 다가가 비스듬히 돌고, 3초에 049가 050으로 넘어가요.
3. 4~6초: 카메라가 옆으로 휙 넘어가면 번호표 051~055가 줄지어 미끄러져 들어오고, 새 번호표 056이 위에서 툭 떨어지며 WAITING 5가 6이 돼요.
4. 6~10초: 전화 예약 카드와 QR 카드가 안쪽에서 날아와 자리를 잡고, QR 무늬가 대각선 방향으로 채워진 뒤 「예시 · SAMPLE」 도장이 찍혀요. 이어서 카메라가 높이 올라가고 패널들이 서로 다른 깊이로 흩어졌다가 10초에 딱 붙어요.
5. 11~16초: 050이 051로 넘어가고, 가게 이름 글자가 한 자씩 세워지며 안내 문구가 열리고, 14초부터는 처음과 같은 전체 화면에서 배경 빛망울만 아주 느리게 떠다녀요.

숫자 카드 한 장이 넘어가는 원리

이 영상의 핵심은 숫자판이에요. 종이를 반으로 접는 플립시계 방식이 아니라, 두께가 있는 카드 한 장을 통째로 180도 돌리는 방식이에요.

• 카드 한 장 = 면 여섯 개: 숫자 카드는 가로 220, 세로 300픽셀에 두께가 50픽셀이에요. 앞면과 뒷면, 그리고 위·아래·왼쪽·오른쪽 옆면 네 장을 상자처럼 붙였어요. 카드가 돌아갈 때 베이지색 옆면이 잠깐 보여서 “두꺼운 판이 넘어간다”는 느낌이 나요.
• 앞면엔 지금 숫자, 뒷면엔 다음 숫자: 뒷면은 처음부터 가로축으로 180도 뒤집어 붙여 둬요. 카드가 180도 돌면 뒤집혀 있던 뒷면이 바로 서서 다음 숫자가 똑바로 보여요. 다음 넘김 때는 앞면의 숫자를 그다음 숫자로 바꿔 두니까, 카드는 계속 같은 방향으로 360도, 540도 돌아가요.
• 0.46초, 0.08초 간격, 살짝 넘치게: 한 장이 넘어가는 데 0.46초가 걸리고, 세 장은 0.08초씩 늦게 출발해서 왼쪽부터 도미노처럼 넘어가요. 움직임 끝에 목표보다 조금 더 돌았다가 돌아오는 반동을 넣어 “탁” 하고 멈추는 맛을 냈고, 도는 중간에는 카드가 화면 쪽으로 최대 70픽셀 들렸다가 내려앉아요.
• 각도에 따른 그늘: 카드가 옆으로 누울수록 앞면과 뒷면에 남색 그늘을 최대 55%까지 덮어서, 조명을 받는 면과 등지는 면이 구분돼요.

바꿔 보고 싶다면 이렇게 요청해 보세요. 간격을 0.08초에서 0.15초로 늘리면 더 느긋한 도미노가 되고, 두께를 50에서 20으로 줄이면 얇은 플라스틱 카드처럼 가벼워져요. 위아래로 넘기는 대신 세로축으로 돌리면 문이 열리듯 옆으로 넘어가요. 다만 반동을 너무 크게 하면 숫자가 잠깐 기울어 읽히지 않으니, 멀리서 보는 TV용이라면 지금 정도가 적당해요.

시안에서 걸린 세 가지와 고친 방법

렌더링 전 장면 미리보기와 첫 렌더본을 확인하면서 실제로 고친 부분이에요.

1. 전화번호가 카드 밖으로 잘렸어요. 첫 시안에서는 전화번호 글자 크기가 92픽셀이라 마지막 자리가 카드 오른쪽 끝에서 잘렸고, 「NOW SERVING」 알약 모양 표시가 옆의 「지금 입장 번호」 글자를 덮고 있었어요. 전화번호를 72픽셀로 줄이고, 한글 안내를 오른쪽으로 58픽셀 옮겼어요. 번호를 바꿔 넣을 때도 자릿수가 많으면 같은 일이 생길 수 있으니 렌더링 전에 꼭 미리보기를 봐 주세요.

2. 카메라가 넘어가는 순간 화면이 텅 비었어요. 첫 렌더본의 3.95초 무렵, 숫자판에서 번호표 줄로 카메라가 넘어가는 사이에 남색 바탕만 보이는 프레임이 있었어요. 바로 다음 순간 번호표가 한꺼번에 나타나서 인접 프레임 평균 밝기가 한 번에 19.7(255 기준)이나 바뀌기도 했고요. 번호표를 왼쪽에서 1,300픽셀 떨어진 곳부터 미끄러져 들어오게 해서 카메라가 넘어가는 동안에도 화면에 보이게 했고, 넘어가는 시간을 0.35초에서 0.56초로 늘렸어요. 고친 뒤 영상 전체에서 가장 큰 밝기 변화는 7.8로 줄었어요.

3. 6초에도 빈 화면이 한 번 더 있었어요. 번호표 줄에서 예약 카드로 넘어가는 6.0초에, 전화 예약 카드가 아직 나타나기 전이라 또 빈 바탕이 보였어요. 카드가 날아오기 시작하는 시점을 6.0초에서 5.72초로 0.28초 앞당겨 카메라 이동과 겹치게 했어요.

TV에서 이어 틀기 좋은 이유, 그리고 한계

시작 화면과 끝 화면의 배치·카메라 위치가 같고, 마지막 2초는 배경 빛망울 말고는 움직임이 없어서 반복 재생을 걸어도 장면이 튀지 않아요. 음악도 120BPM 8마디(정확히 16초)로 맞춘 이번 편 전용 마림바 하우스 곡이에요. 곡 끝에서 울림이 남는 부분을 곡 맨 앞에 겹쳐 두어서, 반복될 때 소리가 최대한 자연스럽게 이어지게 했어요. 다만 TV나 재생기마다 반복 지점에서 아주 짧은 틈이 생길 수 있어요. 숫자가 넘어갈 때는 “딩동” 호출음(솔 → 미♭)과 나무 딸깍 소리가 박자에 맞춰 나요.

한계도 있어요. 반복이 시작되는 순간 숫자는 051에서 처음 값인 048로 돌아가요. 손님이 그 순간을 보면 번호가 줄어든 것처럼 느낄 수 있으니, 실제 번호 안내보다는 순서·예약 방법을 알려 주는 화면으로 쓰는 걸 권해요. 그리고 매장 TV에서는 소리를 꺼 두는 경우가 많으니, 소리 없이 봐도 이해되도록 글자와 숫자로만 안내가 끝나게 만들었어요.

Claude Code로 내 가게 버전 만들기

복사용 프롬프트에서 대괄호 칸만 내 정보로 바꿔 Claude Code에 붙여 넣으면, 장면 미리보기를 먼저 보고 확인한 뒤 MP4로 받아요. 처음 설치는 클로드 환경 설치법, 이름·문구를 바꾸고 저장해서 올리는 공통 순서는 실전 안내에 따로 정리해 뒀어요.

고칠 때는 시간과 대상을 함께 말하면 한 번에 알아들어요.

• “0.5초에 넘어가는 숫자를 101 → 102로 바꾸고, NEXT 칸도 거기에 맞춰 줘.”
• “5초에 떨어지는 번호표는 빼고, 대기 팀 수는 3팀으로 고정해 줘.”
• “QR 카드 대신 ‘카카오톡 채널 [채널 이름]’ 카드로 바꿔 줘.”
• “14초부터 멈춰 있는 화면을 4초로 늘려서 전체 18초로 만들어 줘.”

완성본은 TV에서 직접 한 번 끝까지 틀어 보고, 멀리 떨어져서 전화번호와 숫자가 읽히는지 확인해 주세요. 가게 이름이 위쪽 끝에 가까워서, 가장자리가 잘려 보이는 TV라면 “전체 배치를 5% 안쪽으로 모아 줘”라고 요청해 주세요.

#모션그래픽

쓸 곳: [매장 입구 대기 TV / 카운터 옆 예약 안내 모니터 / 팝업·행사 접수 부스 화면 / 키오스크 옆 보조 화면 중 하나]

HyperFrames 스킬을 사용해서 매장 TV에 반복 재생으로 틀어 둘 16초 안팎의 「대기 번호·예약 안내」 화면 영상을 만들어 줘. 16:9 가로 1920×1080, 60fps. (세로 모니터라면 1080×1920으로 잘라 쓰지 말고 다시 배치해 줘.)

바꿔 넣을 내용:
- 가게 이름: [가게 이름]
- 예약 전화번호: [000-0000-0000]
- 예약 링크 안내: [예: 네이버 예약 / 인스타그램 @계정]
- 넘어갈 대기 번호 순서: [예: 048 → 049 → 050 → 051]
- 대기 팀 수 변화: [예: 5팀 → 6팀]
- 안내 문구 한 줄: [예: 순서대로 불러 드릴게요 · Thank you for waiting]
- 색: [예: 네이비 바탕 + 민트 포인트 + 크림색 카드]
- QR: [장식용 QR 무늬 + “예시 · SAMPLE” 표시 / 내가 만든 진짜 QR 이미지 파일 사용]

화면 구성: 왼쪽에 큰 「NOW SERVING · 지금 입장 번호」 숫자판과 그 아래 NEXT 대기 번호 세 칸, 오른쪽에 전화 예약 카드와 QR 예약 카드, 위에 가게 이름, 아래에 안내 문구. 첫 프레임부터 이 전체 화면이 보이게 해서 무엇에 쓰는 화면인지 바로 알 수 있게 해 줘.

움직임:
1) 0.5초쯤 숫자판이 두께 있는 3D 카드로 한 장씩 도미노처럼 넘어가며 다음 번호로 바뀌고, 민트 고리와 작은 조각이 튀게. NEXT 칸도 한 칸씩 밀려나게.
2) 카메라가 숫자판 앞으로 다가가 비스듬히 돌고, 박자에 맞춰 한 번 더 번호가 넘어가게.
3) 카메라가 옆으로 넘어가면 번호표들이 줄지어 미끄러져 들어오고, 새 번호표 하나가 위에서 떨어지며 대기 팀 수가 늘게.
4) 예약 카드 두 장이 안쪽 깊은 곳에서 날아와 자리를 잡고, QR 무늬가 채워진 뒤 예시 표시가 도장처럼 찍히게.
5) 카메라가 높이 올라가 패널들이 서로 다른 깊이로 흩어졌다 다시 붙고, 번호가 한 번 더 넘어간 뒤 가게 이름이 한 글자씩 세워지게.
6) 마지막 2초는 처음과 똑같은 전체 화면으로 거의 멈춰서, 반복 재생할 때 장면이 튀지 않게.
박자에 맞춘 전환을 6번 이상, 카메라가 넘어가는 순간에도 화면이 비지 않게 해 줘. 하얗게 번쩍이거나 깜빡이는 효과는 넣지 마. 글자와 숫자는 TV에서 멀리서도 읽히게 크게.

음악도 이 영상 전용으로 새로 만들어 줘. 외부 음원·루프·유명 곡 멜로디 없이 코드로 직접 합성. 120BPM 안팎 [밝은 장조] 마림바 하우스: 네 박 킥, 엇박 하이햇과 베이스, 마림바 리프. 번호가 넘어갈 때마다 “딩동” 호출음과 나무 딸깍 소리, 카메라가 넘어갈 때 바람 소리. 영상 길이와 마디 수를 딱 맞춰서 반복 재생해도 이어지게. 음량은 -14 LUFS 근처, 최종 MP4에서도 트루 피크 -1dBTP 이하.

상업 이용 가능한 무료 글꼴을 쓰고 이름과 라이선스를 기록해 줘. 먼저 장면 미리보기 여러 장을 보여 주고, 내가 확인하면 MP4로 렌더링해 줘. 웹에 올릴 수 있게 용량도 확인해 줘. 필요한 도구가 없으면 설치할 항목을 먼저 알려 줘.

[사용자 지시 요약 — CLAUDE_TYPO_DAILY.md 기록]
2026-10-23 사용자 재확인: 하루 1편 체제에서는 광고형과 작품형을 번갈아 만든다. 10/26~11/1 주는 전부 작품형이었고, 그다음 주부터 번갈아 기본값으로 돌아간다. 2026-10-29 사용자 승인: AdSense 1차 거절 뒤 “앞으로 가치 있게 잘 써야 돼” — 클로드버전 신규 글은 실제 제작 기록·수정 전후 이미지·기법 해설 1가지를 넣고, 고정 소제목과 제목 공식을 쓰지 않는다.

[함께 적용한 운영 기준 요약 — AGENTS.md·POST_WRITING_GUIDE.md·CLAUDE_TYPO_DAILY.md]
클로드버전 광고형 1편(게시 슬롯 09:30). 첫 1~2초에 무엇에 쓰는 영상인지 보이게. 화려함 기준: 3D 카메라 이동·입자·빛·깊이감·박자 전환 5~6회 이상. 영상 속 문구 최소화, 필요하면 영어 병기. 가게 이름·전화번호는 바꿔 쓰는 자리로 표시. 반복 점멸·화이트아웃 금지, 60fps 인접 프레임 평균 밝기 변화 25/255 이하. 작품마다 새 음악(외부 음원·루프·기존 곡 금지), 약 -14 LUFS·트루 피크 -1 dBTP 이하, 기존 작품과 BPM·조성·장르가 겹치지 않게. 렌더 전 스냅샷 장면 시트로 먼저 검토. 게시본 25MiB 미만.

[메인 작업 세션이 전달한 작품 지시 원문]
(게시 날짜는 일정 조정으로 생략) 09:30 — 광고형: 대기·예약 안내 화면(매장 TV용) (16:9 가로 1920×1080). 매장 TV에 띄우는 「지금 대기 중 / 예약 안내」 화면. 대기 번호가 3D 플립 카드로 넘어가며 바뀌고, 예약 방법 안내 카드(전화·QR 자리)가 깊이감 있게 들어오며, 마지막에 가게 이름 자리와 안내 문구가 정리된다. 첫 1~2초에 「대기 번호 안내 화면」이 바로 보여야 한다. QR은 실제 작동하는 코드가 아니라 '예시' 표시가 있는 장식 패턴으로, 전화번호·가게 이름은 [ ] 바꿔 쓰는 자리. 깔끔한 네이비·민트·크림.
(함께 받은 기준: 광고형 TV 화면은 끊김 없이 반복 재생되는 루프 구성을 권장. countdown-flip, open-sign, class-calendar, map-pin과 겹치지 않게. 광고형 음악은 경쾌한 마림바·하우스 계열 등 이번 주 다른 편과 겹치지 않게.)

[이번 제작에 적용한 구체화 브리프]
「WAITING BOARD」. 16:9 1920×1080·60fps·16.0초(120BPM 32박 = 8마디), 첫 프레임과 마지막 프레임의 배치·카메라를 같게 해서 반복 재생용으로 구성.
- 홈 화면: 위 [가게 이름]·WAITING BOARD · 대기 안내, 왼쪽 NOW SERVING · 지금 입장 번호 숫자판(두께 50px 3D 카드 3장) + NEXT 3칸, 오른쪽 RESERVATION 전화 예약 · CALL [000-0000-0000] 카드, SCAN & BOOK QR로 예약하기 [예약 링크 자리] 카드(장식 QR 무늬 + 예시 · SAMPLE), 아래 순서대로 불러 드릴게요 · Thank you for waiting.
- 번호: 048 → 049(0.5초) → 050(3.0초, 두 자리 동시) → 051(11.0초). 카드 넘김 0.46초, 0.08초 간격 도미노, 반동 있는 감속, 넘김마다 민트 고리·조각 입자·딩동 호출음.
- 카메라(CSS 3D, 원근 1800px): 0~1.5초 홈 → 2초 숫자판 근접·비스듬히 → 4초 대기 번호표 줄(051~055, 5.3초 056 낙하, WAITING 5 → 6) → 6초 예약 카드(전화 카드 → QR 카드, QR 무늬 대각선 순서로 채움, 스캔선, 8.5초 예시 도장) → 9~10초 높이 올라가 패널 깊이 분리 → 10초 다시 붙음 → 12초 가게 이름 한 글자씩 세움, 안내 문구 열림, 빛 띠 → 14초 홈 복귀, 16초까지 정지(배경 빛망울만 주기 16초로 순환).
- 배경: 네이비 그라데이션, 민트 바닥 격자(3D), 민트·크림 빛망울, 카메라 전환 중 속도선, 비네트.
- 음악: 120BPM E♭장조 마림바 하우스(Eb–Cm–Ab–Bb ×2), 네 박 킥·2·4박 클랩·엇박 하이햇·엇박 베이스·마림바 리프·패드, 효과음(나무 딸깍·딩동 G5→E♭5·바람 소리·번호표 쿵·QR 블립·도장·다시 붙는 소리·가게 이름 마림바). 곡 끝 울림을 앞에 겹쳐 반복 재생용으로 구성. 시드 20261106.

[제작 중 수정]
- 렌더 전 스냅샷 1차: 전화번호 글자(92px)가 카드 밖으로 잘림 → 72px, NOW SERVING 표시가 한글 안내를 덮음 → 한글 안내 58px 이동, 번호표 줄 구도(라벨 잘림·새 번호표가 화면 끝) → 줄 간격·카메라 재배치, 6.8초 빈 아래쪽 → QR 카드 도착을 6.75초로 당김.
- 1차 렌더본 검사: 3.95초 카메라 전환 중 빈 화면 + 4.0초 인접 프레임 밝기 변화 19.7/255 → 번호표가 전환 동안 왼쪽에서 미끄러져 들어오게, 전환 0.35 → 0.56초. 6.0초 빈 화면 → 전화 카드 도착 6.0 → 5.72초. 2차 렌더본 최대 밝기 변화 7.8/255.
- 숫자 카드 뒷면이 앞면보다 탁해 보임 → 위아래 대칭 그라데이션으로 변경.

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