소방 AI 영상제작

/ 01

처음 시작하기

프롬프트는 만들 영상을 글로 설명한 지시문입니다. Claude Code 에 프롬프트를 입력하면 Claude Code 가 영상 코드를 작성하고 MP4 파일로 만듭니다. 사용자가 입력하는 것은 프롬프트와 영상에 쓸 그림 파일입니다.

입력

• 프롬프트만들 영상을 글로 설명한 지시문. 예제의 '입력' 상자를 복사해 문구와 시간을 바꿈
• 그림·영상 파일(선택)로고·아이콘·촬영본. 작업 폴더의 media/ 에 두고 프롬프트에 파일 이름을 적음

Claude CodeHyperFrames 스킬

결과

• 정지 화면프롬프트의 '확인' 줄에 적은 초의 화면 그림
• MP4 영상렌더 명령이 만든 영상 파일

첫 영상 만드는 순서

1. 1준비

   사용자

   빈 작업 폴더를 만들고 그 폴더에서 Claude Code 를 엶. 쓸 그림은 media/ 에 복사

   Claude Code

   —

   결과

   작업 폴더

2. 2프롬프트

   사용자

   예제 프롬프트를 복사해 문구·초를 바꾸고 붙여 넣어 보냄

   Claude Code

   HyperFrames 스킬 안내를 읽고 화면 코드를 씀

   결과

   영상 코드(작업 폴더에 저장)

3. 3확인

   사용자

   '확인' 줄의 정지 화면을 봄

   Claude Code

   check 로 겹침·글꼴을 점검하고 정지 화면을 저장

   결과

   정지 화면 그림

4. 4고치기

   사용자

   고칠 곳을 초·위치로 짚어 요청. 예: '9초 둘째 줄 글자를 크게'

   Claude Code

   그 부분의 코드만 고치고 정지 화면을 다시 저장

   결과

   고친 영상 코드

5. 5렌더

   사용자

   'MP4 로 렌더' 요청

   Claude Code

   렌더 명령(npx hyperframes render) 실행

   결과

   MP4 영상

처음 만들어 보기 좋은 예제 3D 장면이나 그림 파일 없이 프롬프트만으로 만들 수 있는 예제입니다.

• 출동 경로 지도13초 · SVG 지도 · CSS 3D 기울기
• 상황판 대시보드 데모12초 · SVG 그래프 · CSS 3D 카메라
• 오프닝 타이틀 — 11912초 · Canvas 불씨 · SVG 외곽선

자주 묻는 질문

/ 02

만드는 과정

대표 영상은 Blender 로 렌더한 3D 장면 위에 HTML 로 글자와 이름표를 올리고, HyperFrames 로 둘을 합쳐 MP4 영상으로 만들었습니다. 3D 장면 코드(Python)와 화면 코드(HTML)는 모두 Claude Code 가 프롬프트를 받아 작성했습니다. 이 영상의 프롬프트는 03 프롬프트 쓰기에 있습니다.

+

=

1. 1프롬프트Claude Code장면 시간표9줄
2. 23D 렌더Blender프레임 그림Python 1,303줄 · 프레임 576장
3. 3화면 코드HTML · GSAPindex.html143줄
4. 4합성 렌더HyperFramesMP424초 · 1920×1080

/ 03

프롬프트 쓰기

프롬프트는 여섯 가지 내용으로 구성됩니다. 아래는 대표 영상의 프롬프트를 내용별로 색을 나눠 표시한 것입니다. 오른쪽에는 내용마다 무엇을 적는지와 내 영상에 맞게 바꿀 때 고칠 부분을 정리했습니다.

같은 구성으로 만든 다른 예제 여섯 가지 내용 구성은 같고 내용만 다른 예제를 짝지었습니다. 두 프롬프트에서 차이가 드러나는 줄을 하나씩 나란히 놓고, 두 프롬프트가 몇 줄 다른지 함께 적었습니다. 대부분은 여러 줄이 다르므로, 고른 한 줄만 바꾼다고 오른쪽 영상이 되지는 않습니다.

1. 소방 AI 스튜디오 홍보 영상

   1형식

   1920×1080, 24초

   1080×1920, 12초

   화면 크기·길이 — 휴대전화용 세로 영상

   모든 줄이 다른 별개 프롬프트 — 줄 구성만 같음

   세로 숏폼 9:16
2. 소방 AI 스튜디오 홍보 영상

   2소재·모양

   주요 메뉴마다 3D 아이콘 하나, 가운데 119 배지

   2축 캡오버 펌프차, 더블캡, 가로형 경광등

   3D 소재 — 아이콘 대신 펌프차, 장비 소개 영상

   모든 줄이 다른 별개 프롬프트 — 줄 구성만 같음

   3D 소방펌프차 장비 소개
3. 소방 AI 스튜디오 홍보 영상

   1형식

   /hyperframes 와 Blender(bpy)로

   /hyperframes 로 1920×1080, 15초

   도구 — Blender 장면 없이 아이콘 그림(PNG)과 HTML 글자로 만든 홍보 영상

   모든 줄이 다른 별개 프롬프트 — 줄 구성만 같음

   15초 홍보 영상 만들기
4. 돌리 인

   4움직임

   위치 (14, 9, 1.9) → (6.4, 4.1, 1.75)

   같은 거리·높이로 20° → 200° 회전

   카메라 — 같은 펌프차 장면, 위치·시선 두 줄이 회전 한 줄로 바뀜

   같은 줄 1줄 · 왼쪽에만 2줄 · 오른쪽에만 1줄

   오빗

프롬프트를 만드는 방법 프롬프트는 예제를 직접 고쳐 쓰거나 AI에게 대신 써 달라고 할 수 있습니다. AI에게 프롬프트를 써 달라고 부탁하는 프롬프트를 메타 프롬프트라고 합니다.

[내 영상]
- 쓰는 곳: 소방서 견학 행사 안내, 기관 SNS
- 화면·길이: 세로 1080×1920, 15초
- 꼭 들어갈 문구: '소방서 견학의 날', '○○소방서', 신청 주소(아직 정하지 않음)
- 쓸 그림 파일: media/core.png(119 배지), media/truck.png(펌프차 그림)
- 분위기·색: 밝은 주황, 차분한 움직임

/ 04

예제 영상

예제마다 영상과 장면별 정지 화면(콘티), Claude Code 에 입력한 프롬프트를 실었습니다. '입력' 상자의 프롬프트를 복사해 문구와 시간을 바꾸면 같은 구성의 영상을 만들 수 있습니다.

/ 05

따라 하기

영상 하나를 처음부터 완성할 때까지 단계별로 안내합니다. Claude Code 로 만드는 예제에는 프롬프트를, 영상 생성 AI 를 쓰는 예제에는 작업 순서 그림을 실었습니다.

/ 06

기법 도감

기법마다 짧은 견본 영상을 실었습니다. 카드 아래의 영어 낱말을 프롬프트에 그대로 쓰면 원하는 움직임을 정확하게 전달할 수 있습니다.

/ 07

도구 고르기

그림의 왼쪽은 코드로 정확하게 만드는 방법, 오른쪽은 AI가 장면을 생성하는 방법입니다. 글자·숫자·지도처럼 정확해야 하는 화면은 왼쪽 방법으로, 실사 인물처럼 코드로 그리기 어려운 장면은 오른쪽 방법으로 만듭니다. AI로 만든 장면 위에 정확한 자막을 코드로 덧붙이는 것처럼 두 방법을 함께 쓰기도 합니다.

/ 08

참고 자료

'원문 확인'·'배포 파일 확인' 표시가 있는 자료는 원문을 직접 확인해 내용을 옮겼습니다. 표시가 없는 자료는 주소와 참고할 부분만 적었습니다.