밤의 3D 도시에 지도 핀이 쾅! 오시는 길·영업시간 안내 영상, 인스타 하이라이트에 딱

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

구름 위에서 밤의 도시로 슝— 급강하! 네온 옥상과 창문 불빛이 반짝이는 3D 도시 한가운데로 빛기둥이 내려오고, 지도 핀이 ‘쾅’ 꽂히면서 충격파 링과 반짝이가 터져요. 이어서 카메라가 가게 주위를 빙 돌고, 역 출구에서 가게까지 라임색 네온 길이 혜성처럼 달려가요. 마지막엔 유리 카드가 하나씩 날아와 가게 이름·찾아오는 길·영업시간·휴무일을 또렷하게 보여 주는 15초 야경 길 안내 영상이에요. “어디 있어요?”, “몇 시까지 해요?”라는 질문에 눈길을 확 끄는 영상 하나로 답하고 싶을 때 딱이에요. 9:16 세로형이라 릴스·쇼츠·스토리에 바로 올릴 수 있어요.

영상 속 ‘우리 가게’, ‘○○역 2번 출구’, ‘도보 3분’, ‘매일 11:00–21:00’, ‘매주 월요일 휴무’는 모두 바꿔 쓰라고 넣은 예시 문구예요. 도시와 지도도 실제 동네가 아니라 도형으로 직접 쌓아 올린 가상 도시랍니다. 아래 복사용 프롬프트의 대괄호에 우리 가게 정보만 채워 Claude Code에 보내 주세요.

이 영상, 이런 곳에 쓰면 좋아요

• 인스타 프로필 하이라이트 ‘오시는 길’: 하이라이트에 하나 넣어 두면 처음 오는 손님이 길을 묻기 전에 먼저 확인할 수 있어요. 커버를 라임색 핀 모양으로 맞추면 통일감 UP!
• 릴스·쇼츠 고정 게시물: 구름을 뚫고 도시로 날아드는 첫 장면이 눈길을 잡아 줘서, 가게 소개 릴스 사이에 고정해 두기 좋아요. “위치 어디예요?” 댓글엔 링크 대신 이 영상으로 답하기!
• 오픈·이전 공지: 핀이 빛기둥과 함께 꽂히는 순간이 ‘여기 생겼어요!’라는 느낌을 확실히 줘요. 이전 공지라면 마지막 카드에 ‘○월 ○일부터 새 자리에서 만나요’ 한 줄을 더해 달라고 하면 돼요.
• 저녁 장사 가게 홍보: 야경 분위기라 바, 이자카야, 늦게까지 여는 카페·디저트 가게처럼 밤 손님이 많은 곳과 특히 잘 어울려요.
• 예약 확정 메시지·매장 앞 화면: 예약 손님에게 보내는 안내 DM이나 매장 입구 화면에 띄워 두면 “여기로 오세요”가 한눈에 전달돼요.

업종별로는 이렇게 바꿔 보세요. 카페나 빵집은 역 출구 기준 걸음 수를, 미용실·네일숍은 ‘○○빌딩 3층’처럼 건물 정보를 카드 한 줄로 더하면 좋아요. 공방이나 스튜디오라면 ‘수업 시작 10분 전 입장’ 같은 안내를, 픽업 위주 온라인 가게라면 ‘픽업 가능 시간’을 영업시간 자리에 넣으면 돼요. 정보는 꼭 실제로 정한 내용만 넣어 주세요. 피드용 정사각형이나 4:5가 필요하면 영상을 잘라 쓰기보다 “1080×1080 정사각형에 다시 배치해 줘”라고 요청해 주세요. 도시 장면과 정보 카드를 새로 배치해 줘서 글자가 잘리지 않아요.

우리 가게 버전으로 바꿀 것

준비물은 다섯 가지예요. 가게 이름, 기준이 되는 역이나 건물(출구 번호까지), 걸어서 걸리는 시간, 영업시간, 휴무일. 가게 이름은 여섯 글자 안쪽이면 핀 위 말풍선과 아래 카드에 큼직하게 들어가요. 더 길면 “가게 이름을 두 줄로 나눠 줘”라고 덧붙이기! 역이 없는 동네라면 ‘○○초등학교 정문’, ‘○○마트 맞은편’처럼 손님이 찾기 쉬운 표지물로 바꿔도 좋아요. 도시는 실제 지도를 베끼지 않고 블록을 쌓아 만드는 방식이라, “출구에서 오른쪽으로 가다가 첫 큰길에서 왼쪽”처럼 길 모양을 말로 설명해 주면 네온 길이 그 모양대로 달려요. 색은 남보라 야경에 라임 핀·핑크·시안 네온을 썼는데, 우리 가게 대표색을 알려 주면 핀과 네온 길 색을 바꿀 수 있어요. 낮 분위기가 더 어울린다면 “노을 진 저녁”이나 “맑은 낮 하늘”로 바꿔 달라고 해도 돼요.

15초 장면 구성

0초엔 구름 사이로 아득히 내려다보이는 밤의 도시와 가게 위의 희미한 빛기둥이 보여요. 0.25초부터 ‘오시는 길’ 글자가 한 자씩 세워지고, 0.3초부터 반 박자마다 건물들이 땅에서 쑥쑥 솟아올라요. 1.5초쯤 가까운 구름을 뚫고 카메라가 도시로 급강하하고, 2초쯤 빛기둥 속으로 핀이 떨어져 2.4초에 쾅! 하얀 섬광, 세 겹 충격파 링, 반짝이 폭발과 함께 가게 주변부터 창문 불이 파도처럼 켜져요. 제목은 이때 위쪽으로 올라가 자리를 잡아요. 2.44.1초엔 카메라가 가게 주위를 돌고, 3초에 ‘우리 가게’ 말풍선이 톡. 4.1초에 휙! 하고 화면이 역 쪽으로 넘어가며 4.5초에 ‘○○역 2번 출구’ 표시가 나와요. 4.86.6초엔 라임색 네온 길이 혜성처럼 거리를 달리고 카메라가 그 뒤를 따라가요. 6.6초에 가게에 도착하면 링이 한 번 더 퍼지고 카메라가 위로 빠지며 길 전체를 보여 주고, 6.9초에 ‘도보 3분’ 배지가 붙어요. 7.1초에 빛나는 고리가 화면을 쓸고 지나가면, 7.5·8.4·9.6·10.8초에 이름·찾아오는 길·영업시간·휴무일 카드가 회전하며 날아와 자리 잡아요(이름은 한 글자씩, 아이콘은 하나씩 팝, 시계 바늘은 한 바퀴). 12초에 가게 이름 아래 형광펜이 그어지고 핀 둘레에 고리가 생긴 뒤, 마지막 2.6초 정도는 멈춘 야경 위에서 정보를 천천히 읽을 수 있어요.

음악

이 영상만을 위해 새로 만든 100BPM, A단조 무툰 곡이에요. 처음엔 바람 소리와 몽글한 패드 위로 건물이 솟을 때마다 ‘둥둥’ 톰이 올라가고, 라이저와 거꾸로 감기는 심벌, 핀이 떨어지는 ‘휘익’ 소리가 쌓이다가 2.4초에 쾅! 하고 비트가 터져요. 그다음부턴 ‘쿵—짝 쿵 짝’ 댄스홀 리듬에 미끄러지는 베이스, 엇박 신스 화음이 들썩들썩. 창문 불이 켜질 땐 반짝이는 음이 줄줄이 올라가고, 화면이 휙 넘어갈 땐 톰 필인과 바람 가르는 소리, 네온 길이 달릴 땐 레이저 ‘퓽’ 소리와 함께 음계가 촤르륵 올라가요. 카드가 날아올 때마다 ‘슉’, 시계 ‘째깍’, 휴무일 칩엔 ‘쿵’까지 맞췄고 마지막은 큰 타격과 화음으로 마무리해요. 외부 음원이나 루프 없이 코드로 직접 합성했어요. “좀 더 잔잔한 로파이 느낌으로”처럼 원하는 분위기를 말로 적어 주면 새로 만들어 줘요.

Claude Code로 이렇게 만들어요

이 영상은 Claude Code에서 HyperFrames 스킬로 만들었어요. 화면을 웹페이지처럼 짜고, 브라우저의 3D 기능으로 건물과 카메라를 움직여 MP4로 렌더링하는 방식이라 가게 이름이나 영업시간만 바꿔 다시 뽑기 쉬워요. 처음이라면 본문 위의 클로드 환경 설치법부터 따라 해 주세요. 준비가 끝났다면 빈 작업 폴더를 Claude Code로 열고, 아래 복사용 프롬프트의 대괄호를 채워 붙여 넣기! 먼저 장면 미리보기 몇 장을 보여 달라고 적어 두었으니, 말풍선·역 표시·카드 글자가 화면 밖으로 잘리지 않는지, 건물이 핀이나 글자를 가리지 않는지 확인한 뒤 “좋아, MP4로 만들어 줘”라고 답하면 돼요. 3D 장면은 렌더링이 조금 더 오래 걸리고 파일도 커지기 쉬우니, 올릴 곳에 맞게 용량을 줄여 달라고 함께 말해 두면 편해요. 같은 프롬프트라도 모델과 PC 환경에 따라 결과는 조금씩 달라질 수 있어요.

수정 요청 예시

“2.4초 핀과 빛기둥 색을 우리 가게 초록으로 바꿔 줘”, “0~2초 급강하를 조금 더 천천히”, “4.8초에 달리는 네온 길을 출구에서 왼쪽으로 꺾게 해 줘”, “6.9초 ‘도보 3분’ 배지를 길 왼쪽으로 옮겨 줘”, “9.6초 영업시간 카드 아래에 ‘라스트 오더 20:30’ 카드 한 장 추가해 줘”, “옥상 네온을 핑크 빼고 시안만으로”, “마지막 정지 화면을 1초 더 길게”처럼 시간과 대상, 바라는 결과를 함께 말해 보세요. 한 번에 한두 가지씩 고치면 달라진 점을 비교하기 쉬워요. 마음에 든 버전은 이름을 바꿔 따로 저장해 달라고 하기!

완성본 확인·저장·올리기

MP4를 처음부터 끝까지 재생하며 출구 번호, 걸리는 시간, 영업시간, 휴무 요일이 실제와 맞는지 꼭 확인해요. 길 안내는 숫자 하나만 틀려도 손님이 헤매니까 직접 걸어 본 시간으로 적는 게 가장 좋아요. 영상 속 도시는 그림이라 실제 거리와 모양이 다를 수 있으니, 정확한 위치는 게시물 설명에 주소를 함께 적어 주세요. 화려한 장면이 빠르게 지나가니 휴대폰에서 한 번 재생해 보고, 마지막 정지 화면의 카드 글자가 충분히 읽히는지도 살펴봐요. 릴스에 올릴 땐 오른쪽 버튼과 아래 설명 글자 자리에 카드가 가리지 않는지, 스토리라면 위쪽 계정 이름 영역에 ‘오시는 길’ 제목이 걸리지 않는지 미리보기로 확인하기! 완성 MP4와 수정용 파일을 한 폴더에 모아 두면 영업시간이 바뀔 때 숫자만 고쳐 금방 새 버전을 만들 수 있어요. 우리 가게 가는 길, 반짝반짝하게 알려 볼까요?

쓸 곳: [인스타 하이라이트 / 릴스·쇼츠 / 스토리 / 피드(정사각형으로 다시 배치) 중 하나]

HyperFrames 스킬을 사용해서 우리 가게의 15초 야경 3D 도시 ‘오시는 길·영업시간 안내’ 영상을 만들어 줘. 9:16 세로형 1080×1920, 60fps.

가게 이름(여섯 글자 안쪽): [우리 가게 이름]
기준 역이나 표지물과 출구: [예: ○○역 2번 출구 / ○○마트 맞은편]
걸어서 걸리는 시간: [예: 도보 3분]
길 모양 설명: [예: 출구에서 나와 오른쪽으로 가다가 첫 큰길에서 왼쪽, 가게는 모퉁이 근처]
영업시간: [예: 매일 11:00–21:00]
휴무일: [예: 매주 월요일 휴무]
대표색(없으면 지우기): [예: 핀은 초록, 네온은 시안]

구성: 실제 지도를 베끼지 말고 블록을 쌓아 만든 가상 3D 도시(진짜 원근이 있는 입체)로 만들어 줘. 밤 분위기로, 건물은 짙은 남보라·인디고·딥틸 여러 톤에 따뜻한 창문 불빛, 일부 옥상엔 네온 테두리, 은은하게 빛나는 차선, 위는 짙은 남색이고 지평선 쪽은 마젠타·오렌지 노을인 하늘과 작은 별, 먼 스카이라인 실루엣과 안개. 카메라는 계속 움직여: 구름 위에서 급강하해 도시로 날아들고, 그동안 박자마다 건물이 땅에서 솟아오르게. 첫 1초 안에 도시와 가게 위 빛기둥이 보이게 하고 ‘오시는 길’ 제목이 한 글자씩 나타나게. 약 2.4초 비트가 터지는 순간 빛기둥 속으로 핀이 내려꽂히고, 섬광 한 번, 충격파 링 2~3겹, 반짝이 폭발, 가게 주변부터 창문 불이 파도처럼 켜지게. 이어서 가게 주위를 도는 카메라와 가게 이름 말풍선, 휙 넘기는 화면 전환으로 역 출구 표시, 출구에서 가게까지 빛나는 네온 길이 혜성처럼 달리고 카메라가 뒤따라가기. 도착하면 링 한 번과 ‘도보 [N]분’ 배지. 빛나는 고리가 화면을 쓸고 지나간 뒤 정보 카드가 3D 타일처럼 회전하며 날아와 가게 이름, ‘[역] [출구]에서 도보 [N]분’, 영업시간, 휴무일을 한 줄씩 보여 주기(이름은 한 글자씩, 아이콘은 하나씩 팝, 카드마다 반짝 빛 한 번). 앞쪽으로 흐린 구름·새·빛 방울이 가끔 지나가 깊이감을 주고, 마지막 2초 이상은 멈춘 야경 위에 정보가 크게 또렷하게 보이게 해 줘. 핀이나 글자가 계속 튀거나 깜빡이게 하지는 말고, 건물이 핀·말풍선·글자를 가리지 않게, 라벨이 화면 밖으로 잘리지 않게 해 줘. 릴스·스토리 위아래 버튼 영역에 중요한 글자가 걸리지 않게 배치해 줘.

내가 주지 않은 주소, 가격, 할인, 주차 정보, 메뉴는 넣지 마. 실존 지도 서비스의 화면이나 다른 회사 광고 구성을 따라 하지 말고 새로 설계해 줘.

음악도 이 영상 전용으로 새로 만들어 줘. 외부 음원·루프·유명 곡 멜로디 없이 코드로 직접 합성. 100BPM 정도 A단조, 무툰·댄스홀처럼 통통 튀는 강한 비트, 15초, 보컬 없이. 급강하 동안 바람·패드·라이저로 빌드업하다가 핀이 꽂힐 때 크게 터지는 드롭, 화면 전환마다 필인과 휙 소리, 네온 길엔 올라가는 아르페지오, 카드마다 효과음, 마지막은 큰 타격과 화음으로. 음량은 -14 LUFS 근처, 소리가 찌그러지지 않게 확인해 줘.

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

[사용자 요청 원문 — 2026-10-13 대화]
내일 3편 만들어

[1차 결과에 대한 사용자 피드백 원문 — 불합격]
광고용도 좋지만 화려한 눈요기도 있어야 좋지. 전부 단순하잖아.

[함께 적용한 운영 기준 요약 — AGENTS.md·POST_WRITING_GUIDE.md·CLAUDE_TYPO_DAILY.md]
특정 아이템 홍보가 아닌 여러 가게가 바꿔 쓸 수 있는 스타일의 영상, 본문은 활용처 중심. 약 15초, 화려한 모션, 주요 문구 가독성, 마지막 2~3초 정지, 사진 바운스·반복 점멸 같은 과한 반복 움직임 금지. 작품마다 새 음악·강한 비트. 이전 글(양쪽 버전)과 스타일·비율·팔레트·음악이 겹치지 않게. 가격·영업시간·효능·수상·순위는 지어내지 않고 바꿔 쓰는 예시임을 표시.

[1차(r0) 브리프 요약 — 불합격으로 교체]
살짝 기울인 평면 일러스트 지도(라벤더·그레이프·라임) 위에 핀이 떨어지고 경로 선이 그려진 뒤 아래 흰 카드에 정보가 나오는 15초 안내 영상. 정적인 지도 위에 요소만 올린 구성이라 단순하다는 평가를 받음.

[다시 만들기(r1) 브리프 — 2026-10-14 09:30 슬롯]
컨셉(오시는 길·영업시간 안내, 9:16 1080×1920·60fps·15초, 마지막 2~3초 정지·가독성)은 유지하고 연출을 완전히 올림. 예시 문구 ‘우리 가게’, ‘○○역 2번 출구’, ‘도보 3분’, ‘매일 11:00–21:00’, ‘매주 월요일 휴무’(바꿔 쓰는 자리, 실제 매장 정보 아님). 실존 역명·가게·지도 데이터 사용 금지, 도시는 직접 쌓은 가상 블록.
- 공간: CSS 3D 원근(perspective + preserve-3d)으로 만든 실제 입체 도시. 카메라(돌리·틸트·회전·이동)가 계속 움직임. 건물 약 75동은 진짜 상자(옥상+4면), 블록 배치는 시드 고정 의사난수.
- 야경 색: 건물은 짙은 남보라·인디고·딥틸 여러 톤, 창문은 앰버·따뜻한 흰색, 일부 옥상에 핑크·시안·라임 네온 테두리, 은은하게 빛나는 차선, 가게 블록은 라임 지붕과 바닥 글로우로 강조. 하늘은 위 짙은 남색에서 지평선 마젠타·오렌지 노을, 작은 별(깜빡임 없음), 먼 스카이라인 실루엣 두 겹과 안개로 지평선 처리.
- 0~2.3초: 구름 위에서 급강하(구름층 7장이 지나감), 0.3초부터 반 박자마다 건물이 땅에서 솟아오름, 0.25초 ‘오시는 길’ 제목이 한 글자씩 세워지고 2.15초에 위로 올라가 입체 그림자·글로우 제목이 됨, 1.45초 앞쪽 구름을 뚫는 전환.
- 2.4초(드롭): 빛기둥 속으로 핀이 내려꽂힘(한 번 눌렸다 복원), 섬광 한 번, 화면 흔들림 한 번, 충격파 링 3겹, 반짝이 40개, 가게에서 바깥으로 창문 불이 파도처럼 켜진 뒤 유지.
- 2.4~4.1초 가게 궤도 회전, 3.0초 말풍선, 새 떼가 앞을 지나감. 4.1초 휩 팬(속도선) → 4.5초 역 출구 라벨.
- 4.8~6.6초: 3겹 글로우 네온 트레일(블룸)과 혜성 머리·꼬리 구슬 8개·불꽃 22개가 길을 달리고 카메라가 뒤따르는 추적 샷.
- 6.6초 도착 링 2겹과 카메라 상승으로 길 전체 공개, 6.9초 ‘도보 3분’ 배지. 7.1초 빛나는 고리 와이프.
- 7.5 / 8.4 / 9.6 / 10.8초: 유리 카드가 깊이에서 회전하며 날아옴(이름 한 글자씩, 아이콘 팝, 시계 바늘 한 바퀴, 카드마다 반사광 한 번). 앞쪽 보케 빛 방울이 가끔 천천히 지나감.
- 12.0초 이름 형광펜과 핀 고리, 약 12.4초 이후 정지. 멈춘 야경 위 정보 카드로 화면을 꽉 채움.
- 라벨·핀·말풍선은 같은 카메라를 쓰는 별도 3D 층에 두어 건물에 가리지 않게, 역 라벨은 화면 안에 완전히 들어올 때만 보이게 함.
음악: 새 곡 100BPM·A단조 무툰(Am–F–C–G). 바람·패드·건물마다 톰·라이저·리버스 심벌·하강 휘슬로 빌드업 → 2.4초 임팩트·크래시와 드롭(4박 킥, 뎀보 스네어·클랩, 글라이드 서브 베이스, 플럭 화음, 하이햇), 창문 불빛 플링크 상승, 3.9초 톰 필인과 4.1초 휙, 역 차임, 4.8초 레이저와 16분 펜타토닉 아르페지오, 6.6초 도착 임팩트, 고리 와이프 리버스 스웰, 보컬 찹 느낌 리드, 카드마다 휙·팝, 시계 째깍, 휴무 도장, 스네어 롤·라이저, 12.0초 최종 임팩트와 Am9 화음·벨 여운. 외부 음원·루프·보컬 없음, 시드 고정 NumPy 합성, FFmpeg로 -14 LUFS.
기술: Claude Code + HyperFrames 0.8.149(HTML+GSAP+CSS 3D 렌더), Python+NumPy 음악 합성, FFmpeg 검사·웹용 재인코딩. lint 오류 0, 렌더 전 스냅샷과 인코딩본 장면 확인, 디코딩·음량 검사.
이 브리프는 영상·음악 코드를 작성하는 데 적용한 지시이며, 별도의 AI 동영상·이미지 생성 모델에 보낸 입력이 아님.

[r1 제작 중 수정]
스냅샷 검토에서 ① 앞쪽 건물이 말풍선·핀을 가려 라벨 전용 3D 층으로 분리, ② 추적 샷 카메라가 너무 가까워 건물이 화면을 덮어 카메라 높이·건물 최고 높이 조정, ③ 새 떼가 말풍선을 가로질러 경로 이동, ④ 고리 와이프가 덩어리처럼 보여 얇게 조정. 이어서 검토 의견으로 ⑤ 건물 색이 밋밋해 야경 팔레트·네온 옥상·빛나는 차선·노을 하늘·별로 교체, ⑥ 지평선의 빈 격자를 스카이라인 실루엣과 안개로 가림, ⑦ 5.5초 무렵 역 라벨이 왼쪽 가장자리에서 잘려 화면 안에 들어올 때만 보이게 조정, ⑧ 제목에 입체 그림자와 글로우, ⑨ 앞쪽 보케 빛 방울 추가, ⑩ 2.4초 이후 빛기둥·트레일·링 블룸 강화.

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