# 소방 AI 영상제작 — AI 작업 안내 파일

119 소방 AI 스튜디오(https://119-ai-studio.kr)의 '소방 AI 영상제작' 페이지를 AI가 읽도록 글로 옮긴 파일입니다. Claude Code 와 HyperFrames(3D 장면은 Blender)로 소방 홍보·교육 영상을 만드는 프롬프트를 쓸 때 씁니다. 만든 프롬프트는 사용자가 Claude Code 에 붙여 넣습니다.
화면에서 보기: https://119-ai-studio.kr/fire-video.html
이 파일: https://119-ai-studio.kr/assets/ai/fire-video.txt

기준일: 2026-10-23

## 만드는 흐름

1. 준비 — 사람: 빈 작업 폴더를 만들고 그 폴더에서 Claude Code 를 엶. 쓸 그림은 media/ 에 복사 → 작업 폴더
2. 프롬프트 — 사람: 예제 프롬프트를 복사해 문구·초를 바꾸고 붙여 넣어 보냄 / Claude Code: HyperFrames 스킬 안내를 읽고 화면 코드를 씀 → 영상 코드(작업 폴더에 저장)
3. 확인 — 사람: '확인' 줄의 정지 화면을 봄 / Claude Code: check 로 겹침·글꼴을 점검하고 정지 화면을 저장 → 정지 화면 그림
4. 고치기 — 사람: 고칠 곳을 초·위치로 짚어 요청. 예: '9초 둘째 줄 글자를 크게' / Claude Code: 그 부분의 코드만 고치고 정지 화면을 다시 저장 → 고친 영상 코드
5. 렌더 — 사람: 'MP4 로 렌더' 요청 / Claude Code: 렌더 명령(npx hyperframes render) 실행 → MP4 영상

- 완성 코드(index.html 등)는 Claude Code 가 프롬프트를 받아 쓰는 결과입니다. 프롬프트에 코드를 붙여 넣지 않습니다.

## 준비물

- Claude Code: 터미널 프로그램(CLI) 또는 데스크톱 앱. 설치 순서는 개발 환경 안내
- Node.js 22 이상: HyperFrames 가 요구하는 판. 개발 환경 안내의 Node.js 24 를 그대로 설치
- FFmpeg: HyperFrames 가 요구하는 영상 처리 프로그램. 설치돼 있는지 모르면 Claude Code 에 확인을 요청
- HyperFrames 스킬: Claude Code 가 HyperFrames 로 영상을 만들 때 먼저 읽는 안내 묶음. 터미널에서 한 번 실행 — 명령 `npx skills add heygen-com/hyperframes`
- Blender 파이썬 모듈(3D 예제만): 3D 장면이 들어간 예제에만 필요. 렌더 시간이 길어 처음에는 건너뜀

## 프롬프트 형식

프롬프트는 아래 여섯 역할의 줄로 씁니다.

1. 형식 — 도구·화면 크기·길이. 바꿀 때: 화면 크기·길이를 바꿈. 세로 영상은 1080×1920
2. 소재·모양 — 무엇이 어떤 모습으로 나오는지. 바꿀 때: 나올 것·색을 바꿈. 쓸 그림은 media/ 의 파일 이름으로
3. 시간표 — 몇 초부터 몇 초까지. 바꿀 때: 장면마다 시작–끝 초. 마지막 초 = 영상 길이
4. 움직임 — 어디서 어디로 움직이는지. 바꿀 때: 움직임을 바꿈. 기법 도감의 영어 낱말(dolly in 등)을 함께
5. 규칙 — 다시 렌더해도 같은 결과. 바꿀 때: 그대로 둠
6. 확인 — 정지 화면으로 먼저 확인. 바꿀 때: 시간표에 맞춰 정지 화면 초를 바꿈

본보기 — 소방 AI 스튜디오 홍보 영상(https://119-ai-studio.kr/fire-video.html#fv-promo):

```text
/hyperframes 와 Blender(bpy)로 1920×1080, 24초 '소방 AI 스튜디오' 홍보 영상
- 3D 소재: 주요 메뉴마다 3D 아이콘 하나, 가운데 119 배지, 오른쪽에 소방펌프차(보조 요소). 검은 무대와 반사 바닥, 주황·파랑 테두리광
- 0–3초: 119 배지가 돌며 커짐, 왼쪽에 제목 '소방 AI 스튜디오'
- 3–9.4초: 아이콘이 배지에서 하나씩 나와 기운 궤도를 돎, 이웃 아이콘끼리 빛줄기와 빛 알갱이
- 9.6–15초: 아이콘이 네 묶음으로 모임, 묶음 이름표 AX 사례·레퍼런스·개발 도구·AI 학습
- 15–19초: 카메라가 펌프차 쪽으로 이동, 아이콘 셋이 차 위에 뜸, 문구 '화재·구조·구급 / 재난 대응·행정'
- 19–24초: 아이콘이 배지 위로 반원을 그리며 정렬, 배지 아래에 이름과 주소
- 이름표는 3D 좌표를 화면 좌표로 바꾼 track.json 을 따라 HTML 로 얹음. 위치는 시간의 함수로만, 무작위는 씨앗값 난수
- 확인: 1.8·6.4·12.6·17.6·22.8초 정지 화면 먼저
```

## 지킬 것

- 글자가 기본 글꼴로 나옴 → 글꼴 파일을 프로젝트 안 fonts 폴더에 두고 @font-face 로 연결합니다.
- 렌더할 때마다 결과가 다름 → Date.now·Math.random·네트워크 요청을 빼고, 무작위가 필요하면 씨앗값 난수를 씁니다.
- 움직임이 처음 위치로 튐 → CSS 에 transform 을 적지 않고 GSAP fromTo 로 시작과 끝을 함께 정합니다.
- 아래쪽 자막이 사라짐 → 시간이 붙은 요소는 bottom 대신 top 으로 자리를 잡습니다.
- 얼굴이 프레임마다 바뀜 → 움직임을 작게(slow, subtle), 길이는 5초로 두고 같은 기준 이미지에서 다시 만듭니다.
- 표장·글자가 뭉개짐 → 작은 글자와 표장은 마감 단계에서 코드로 얹습니다.
- 카메라와 인물이 함께 크게 움직임 → 카메라 움직임과 인물 움직임을 한 문장씩 따로 적습니다.
- 자막이 화면 끝에서 잘림 → 가장자리에서 5% 이상 안쪽에 두고 세로형·가로형 두 화면비로 각각 봅니다.
- 촬영본 소리가 사라짐 → 소리가 있는 영상은 muted 를 빼고 data-has-audio 를 켭니다.
- 결과를 고칠 때는 몇 초의 어느 부분을 어떻게 바꿀지 적고, 나머지는 그대로 두라고 덧붙입니다.

## 예제 영상과 프롬프트

### 3D 소방펌프차 장비 소개
- 주소: https://119-ai-studio.kr/fire-video.html#fv-truck-3d
- 내용: 경광등·운전실·장비함·지붕 사다리를 차례로 보여 주는 장비 소개 영상입니다.
- 쓰는 곳: 새 장비 안내, 차량 구조 교육, 장비 홍보
- 길이·화면: 12초 · 1920×1080

```text
/hyperframes 와 Blender(bpy)로 1920×1080, 12초 소방펌프차 장비 소개
- 3D 모형: 2축 캡오버 펌프차, 더블캡, 가로형 경광등, 롤업 셔터 장비함, 옆면 반사띠와 119, 지붕 사다리·작업등, 뒷바퀴 복륜
- 검은 무대와 반사 바닥, 뒤쪽 세로 조명 줄. 경광등 빛이 차체와 바닥에 비침
- 0–2.6초: 어둠 속 전조등·경광등 점등, 무대 조명이 서서히 밝아짐
- 2.6–5.6초: 운전실 앞으로 근접, 경광등·운전실 설명 선
- 5.6–8.8초: 옆면을 따라 뒤로 이동, 장비함·로고·바퀴 설명 선
- 8.8–12초: 뒤쪽 위로 올라 지붕을 내려다봄, 8.6초에 작업등 점등, 지붕·작업등·사다리 설명 선
- 설명 선: 부품 3D 좌표를 화면 좌표로 바꾼 track.json 을 따라 HTML·SVG 로
- 화면 아래 '3D 모형 예시 · 실제 제원과 다를 수 있음'
- 확인: 1.4·3.8·7.4·10.8초 정지 화면 먼저
```

### 출동 경로 지도
- 주소: https://119-ai-studio.kr/fire-video.html#fv-dispatch-map
- 내용: 가상 도시 위에 출동 경로를 그리고 차량을 따라가는 지도 영상입니다.
- 쓰는 곳: 출동 체계 설명, 관할 구역 안내, 신고 접수 교육
- 길이·화면: 13초 · 1920×1080

```text
/hyperframes 로 1920×1080, 13초 출동 경로 지도
- 가상 도시: 간격이 고르지 않은 격자 도로, 네 번째마다 큰길, 강 하나, 공원 몇 곳. 씨앗값 난수로
- 출발 안전센터에서 사고 지점까지 교차로를 따라가는 경로. 주황 선이 그려지고 차량 점이 끝에 붙음
- 카메라: 위에서 본 도시 → 지도를 52도 기울이며 차량을 따라감 → 뒤로 빠져 지원 경로 세 개가 모임
- 왼쪽 위 유리 패널: 출동 지령, 유형, 출동대, 도착까지 남은 시간(줄어듦). 오른쪽 위 경과 시간
- 끝 문구 '신고 접수부터 현장 도착까지'
- 화면에 '가상의 도시 · 예시 장면' 표시
```

### 상황판 대시보드 데모
- 주소: https://119-ai-studio.kr/fire-video.html#fv-dashboard-demo
- 내용: 숫자·그래프·알림이 차례로 켜지는 상황판 소개 영상입니다.
- 쓰는 곳: 업무 시스템 소개, 통계 브리핑, 보고회 첫 화면
- 길이·화면: 12초 · 1920×1080

```text
/hyperframes 로 1920×1080, 12초 상황판 데모. 데이터는 예시라고 화면에 표시
- 구성: 왼쪽 메뉴 막대, 위쪽 제목과 LIVE 시계, 숫자 칸 넷(오늘 출동·화재·구조·구급), 시간대별 선 그래프, 유형별 막대, 작은 지도, 최근 신고 목록
- 시간대별 24개 값의 합 = 오늘 출동 수
- 움직임: 기운 화면이 떠올라 펴짐 → 그래프로 다가가 18시 값 표시(점선·말풍선) → 아래로 내려 지도 핀과 알림 → 전체
- 그래프 색은 주황·파랑·청록 셋, 막대 끝에 값을 직접 표시
- 끝 문구 '오늘의 출동 현황 한 화면'
```

### 세로 숏폼 9:16
- 주소: https://119-ai-studio.kr/fire-video.html#fv-vertical-short
- 내용: 휴대전화 화면에 맞춘 12초 세로 영상입니다. 자막이 낱말마다 켜집니다.
- 쓰는 곳: 기관 SNS, 캠페인 숏폼, 행사 예고
- 길이·화면: 12초 · 1080×1920

```text
/hyperframes 로 1080×1920, 12초 세로 숏폼
- 소재: media/ 의 3D 아이콘 그림(정사각형 투명 PNG)
- 0–2.5초: '소방 업무에 / 쓰는 AI 자료, / 한곳에' 세 줄이 아래에서 올라옴, 119 배지가 돌며 등장
- 2.75–5.9초: 메뉴 아이콘 열두 개가 위에서 떨어져 격자로 자리 잡음, 이름표 함께
- 5.9–8.75초: 격자가 작아지며 위로, 직군 칩 현장·상황실·예방·행정·분석·정보화
- 9.1–12초: 배지와 이름, 주소 버튼이 커졌다 작아지며 강조
- 위쪽 진행 막대 셋(4초씩), 화면 왼쪽 위에 배지와 이름
- 자막: [시작 초, 낱말들] 배열. 지금 읽는 낱말만 밝게, 핵심 낱말은 노랑. 자막 칸은 top 기준
```

### 오프닝 타이틀 — 119
- 주소: https://119-ai-studio.kr/fire-video.html#fv-title-sequence
- 내용: 불씨와 빛 효과로 시작하는 행사용 오프닝 영상입니다.
- 쓰는 곳: 행사 오프닝, 교육 과정 개강, 영상 첫 화면
- 길이·화면: 12초 · 1920×1080

```text
/hyperframes 로 1920×1080, 12초 오프닝 타이틀
- 0–2.8초: 검은 화면을 가로지르는 빛줄기, 그 위로 '119 FIRE · AI STUDIO' 가 무작위 순서로 한 자씩 켜짐
- 2.6–6.6초: 화면을 거의 채우는 기울어진 119. 외곽선을 1.8초 동안 그린 뒤 위에서 아래로 노랑→주황→진홍 채움, 은은한 번짐
- 6.8–9.6초: 두 줄 제목 '화재 · 구조 · 구급 · 행정' / '소방 업무를 위한 AI' 가 가림막 아래에서 올라오고 빛 띠가 훑고 지나감
- 9.8–12초: 둥근 사각 마크와 이름
- 바닥에서 불씨 170개가 계속 떠오름. Math.random 대신 씨앗값 난수, 위치는 시간의 함수로만
- 확인: 1.4·3.4·5·7.6·11.2초 정지 화면 먼저
```

## 따라 하기

### 15초 홍보 영상 만들기
- 주소: https://119-ai-studio.kr/fire-video.html#fv-studio-promo
- 내용: 3D 아이콘 그림과 HTML 글자로 메뉴를 소개하는 홍보 영상입니다. 프롬프트의 문구와 그림만 바꾸면 다른 내용의 홍보 영상을 만들 수 있습니다.
1. 준비 — Node.js 24·FFmpeg 설치, Claude Code 에 HyperFrames 스킬 추가. 설치 명령은 '처음 시작하기'의 준비할 프로그램에 있음
2. 콘티 — 15초를 네 장면으로 나눔: 이름 · 메뉴 카드 · 업무 이름 · 끝 화면
3. 그림 — 아이콘은 정사각형 투명 PNG. 쓸 그림을 media/ 폴더에 넣고 프롬프트에 파일 이름을 적음
4. 프롬프트 — 아래 프롬프트를 Claude Code 에 붙여 넣고 문구만 수정. 장면마다 시작·끝 초를 적음
5. 점검 — check 명령으로 글자 겹침·글꼴을 확인하고 중요한 순간의 정지 화면을 확인. 고칠 곳은 '9초 둘째 줄'처럼 시간과 위치로 알려 줌
6. 렌더 — npx hyperframes render -o out.mp4. 세로형은 1080×1920 으로 바꿈

프롬프트:

```text
/hyperframes 로 1920×1080, 15초 '소방 AI 스튜디오' 홍보 영상
- 바탕 #0e0a0c, 강조색 #ff5a2e, 보조 강조 #ffb338, 글꼴 Pretendard
- 소재: media/ 의 3D 아이콘 그림(정사각형 투명 PNG)
- 0–3.4초: 119 배지가 돌며 커지고 빛 고리가 퍼짐, 제목 '소방 AI 스튜디오' 가 한 글자씩 흐림에서 또렷하게
- 3.5–7.5초: 메뉴 카드 다섯 장이 오른쪽에서 비스듬히 들어와 천천히 기울어짐. 카드마다 아이콘·이름·한 줄 설명
- 7.9–11.5초: 0.95초 박자마다 바탕색이 바뀌며 업무 이름 현장·상황실·예방·행정이 크게 등장, 아이콘도 함께
- 11.6–15초: 배지 둘레를 아이콘이 돌고, 제목과 주소 119-ai-studio.kr
- Date.now·Math.random 대신 씨앗값 난수, 움직임은 GSAP fromTo
- 확인: check 실행 후 1.6·4.6·8.4·13.4초 정지 화면
```

### 사진 한 장을 5초 영상으로
- 주소: https://119-ai-studio.kr/fire-video.html#fv-photo-to-video
- 내용: 소방 이미지 페이지의 참조 그림으로 사진 한 장(기준 이미지)을 만들고, 영상 생성 AI로 그 사진에 카메라 움직임을 더해 5초 영상을 만듭니다. 실제 사람이 나와야 하는 장면에 씁니다.
1. 움직임 고르기 — 기법 도감의 카메라 견본에서 하나만 선택. 처음이면 돌리 인
2. 참조 받기 — 소방 이미지 허브에서 복장·헬멧 참조 내려받기. 좌우는 착용자 기준
3. 기준 이미지 — Codex·ChatGPT 에 참조를 넣고 이미지 프롬프트 입력. 인물·복장·배경·구도를 적음
4. 검수 — 얼굴, 표장·계급장·좌우, 손가락과 장비 확인. 틀린 곳만 짚어 다시 요청
5. 영상화 — 검수한 이미지를 영상 생성 도구에 넣고 움직임만 적은 영상 프롬프트 입력
6. 글자 얹기 — 이름·기관명은 생성 모델에 맡기지 않고 로워서드 견본처럼 코드로

이미지 프롬프트:

```text
Photorealistic portrait of a Korean firefighter standing in front of a fire station garage at dusk, wearing the attached reference uniform exactly (keep patches, colors and left/right placement as in the reference), helmet held under the left arm, calm expression, medium shot, eye level, 16:9, soft warm key light, no text, no logos other than those in the reference.
```

영상 프롬프트:

```text
Slow dolly-in toward the firefighter. The camera moves forward steadily for 5 seconds. The firefighter stays still and breathes naturally. End on a medium close-up. No cuts, no zoom bursts.
```

### 찍어 둔 영상에 제목·자막 입히기
- 주소: https://119-ai-studio.kr/fire-video.html#fv-footage-captions
- 내용: 훈련·행사 촬영본을 고르고 장면표를 만든 뒤, 코드로 만든 제목과 자막 바를 영상 위에 얹습니다.
1. 촬영본 고르기 — 얼굴이 보이는 사람은 초상 이용 동의부터. 번호판·위치가 드러나는 장면은 빼거나 가림
2. 장면표 — 쓸 구간의 시작·끝 초를 표로 정리. 이 표가 그대로 편집 지시가 됨
3. 자막 원고 — 장면마다 한 줄. 절차·수치가 들어가면 담당 부서 검토
4. 자막 바 얹기 — 로워서드 견본의 배경을 촬영본으로 바꿔 달라고 Claude Code 에 요청하고, 자막 시작 초를 장면표에 맞춤
5. 소리 — 현장음과 내레이션 크기 맞춤. 배경 음악은 이용 조건과 출처 표기 조건을 함께 기록
6. 검토 — 개인정보·오탈자·잘림 확인, 장면별 제작 방식 표시를 넣어 내보냄

프롬프트:

```text
/hyperframes 로 촬영본 training.mp4 위에 자막 바 얹기
- 화면 1920×1080, 촬영본 길이 그대로, 소리 유지
- 2초·9초·15초에 왼쪽 아래 자막 바가 열렸다 3초 뒤 닫힘. 강조 막대 #ff5a2e 가 먼저 서고, 흰 이름 상자, 그 아래 검은 직위 줄이 차례로 펼쳐짐
- 자막 문구는 아래 표의 순서대로
- 글꼴 Pretendard
```

## 기법 도감 — 프롬프트에 쓰는 영어 낱말

- 단어별 등장(Word reveal): 낱말을 하나씩 띄워 마지막 줄까지 차례로 읽힘 낱말: word-by-word, stagger, blur in — https://119-ai-studio.kr/fire-video.html#fv-word-reveal
- 바 와이프 리빌(Bar wipe reveal): 색 막대가 지나간 자리에 줄마다 글자가 남음 낱말: bar wipe, mask reveal — https://119-ai-studio.kr/fire-video.html#fv-mask-reveal
- 키네틱 타이포그래피(Kinetic type): 박자마다 바탕색과 낱말이 바뀌는 첫 3초 낱말: kinetic typography, beat cut, color flip — https://119-ai-studio.kr/fire-video.html#fv-kinetic-type
- 숫자 카운터 · 게이지(Counter & gauge): 출처가 있는 통계를 원형 게이지와 함께 낱말: count up, radial gauge, tabular numbers — https://119-ai-studio.kr/fire-video.html#fv-number-counter
- 로워서드(Lower third): 말하는 사람이나 장면 설명을 화면 아래에 낱말: lower third, name super — https://119-ai-studio.kr/fire-video.html#fv-lower-third
- 콘솔 타자(Typewriter): 상황실 지령·시스템 알림을 흉내 내는 장면 낱말: typewriter, terminal, scanlines — https://119-ai-studio.kr/fire-video.html#fv-typewriter
- 컷(Cut): 한 프레임 만에 다음 장면으로 낱말: hard cut — https://119-ai-studio.kr/fire-video.html#fv-cut
- 디졸브(Dissolve): 시간·장소가 바뀌었음을 부드럽게 낱말: cross dissolve, fade — https://119-ai-studio.kr/fire-video.html#fv-dissolve
- 휩 팬(Whip pan): 출동·이동처럼 속도감이 필요한 두 장면 사이 낱말: whip pan, swish pan, motion blur — https://119-ai-studio.kr/fire-video.html#fv-whip-pan
- 도형 와이프(Iris wipe): 다음 장면의 가운데로 시선을 모을 때 낱말: iris wipe, circle reveal — https://119-ai-studio.kr/fire-video.html#fv-shape-wipe
- 매치 컷(Match cut): 모양이 같은 두 장면을 한 흐름으로 낱말: match cut, graphic match — https://119-ai-studio.kr/fire-video.html#fv-match-cut
- 푸시(Push): 같은 형식의 화면을 차례로 넘길 때 낱말: push transition, slide — https://119-ai-studio.kr/fire-video.html#fv-push
- 돌리 인(Dolly in): 운전실로 곧장 다가감 · 화각은 그대로 낱말: dolly in, push in — https://119-ai-studio.kr/fire-video.html#fv-dolly-in
- 팬(Pan): 제자리에서 고개만 돌려 옆으로 긴 대상을 훑음 낱말: pan left to right — https://119-ai-studio.kr/fire-video.html#fv-pan
- 틸트(Tilt): 앞바퀴에서 경광등까지 고개를 듦 낱말: tilt up — https://119-ai-studio.kr/fire-video.html#fv-tilt
- 트래킹(Tracking): 차 옆을 나란히 따라 이동 낱말: tracking shot, truck right — https://119-ai-studio.kr/fire-video.html#fv-tracking
- 오빗(Orbit): 같은 거리를 지키며 차 둘레를 반 바퀴 낱말: orbit, arc shot, 360 — https://119-ai-studio.kr/fire-video.html#fv-orbit
- 크레인(Crane up): 낮은 눈높이에서 솟아 지붕을 내려다봄 낱말: crane up, boom up, overhead — https://119-ai-studio.kr/fire-video.html#fv-crane
- 돌리 줌(Dolly zoom): 물러나며 당겨 찍기 · 차는 그대로, 배경만 늘어남 낱말: dolly zoom, vertigo effect, zolly — https://119-ai-studio.kr/fire-video.html#fv-dolly-zoom

## 방법 고르기

- HyperFrames(글자·그래픽·데이터): HTML·GSAP 로 쓴 장면을 MP4 로 렌더링합니다.
- Blender(bpy)(3D 모형·조명): 파이썬으로 3D 장면을 만들어 렌더하고, 그 프레임을 영상 바탕으로 씁니다.
- Claude Motion(설치 없이 대화 안에서): Claude 대화 안에서 짧은 설명 영상을 만들고 MP4 로 내려받습니다.
- Remotion(React 로 여러 영상을 같은 틀로 관리할 때): React 컴포넌트로 쓴 장면을 MP4 로 렌더링합니다.
- 촬영본 + 코드 그래픽(찍어 둔 영상이 있을 때): 훈련·행사 촬영본 위에 코드로 만든 제목·자막을 얹습니다.
- 이미지 생성 → 영상 생성(실사 인물·장면): 기준 이미지를 만들고 영상 생성 도구로 움직임을 줍니다.