Make a Video — 초보자용 완성 MP4 제작 스킬
두 단계, 8개의 순차적 게이트로 구성됩니다. 각 게이트는 다음 게이트가 사용할 구체적인 결과물을 생성합니다. 게이트를 건너뛰지 마세요.
이 스킬을 사용해야 하는 경우 — 그리고 핸드오프해야 하는 경우
이 스킬을 사용해야 하는 경우:
- 사용자가 HyperFrames를 처음 접하고 개념, 스크립트, 또는 개요부터 시작하는 경우
- 엔드투엔드 워크스루를 원하고 프레임워크 참조 자료를 원하지 않는 경우
- 아직 포맷을 결정하지 못한 경우
핸드오프해야 하는 경우:
- 사용자가 URL을 붙여넣고 해당 사이트의 비디오를 원하는 경우 →
/website-to-hyperframes호출 - 사용자가 명시적으로 9:16 세로형 토크쇼(얼굴 + 장면 오버레이)를 원하는 경우 → 게이트 1–4를 여기서 실행하고, 게이트 5부터
/short-form-video호출 - 사용자가 비디오가 아닌 프레임워크 규칙을 원하는 경우 →
/hyperframes호출
두 단계
- 1단계 — 인터뷰 (게이트 1–4): 코드를 건드리기 전에 모든 것을 수집하는 단일 대화 패스입니다. 의도, 형식, 스크립트, 음성, 스타일, 자산, 페이싱.
BRIEF.md로 종합하고 명시적인 승인을 기다립니다. - 2단계 — 빌드 (게이트 5–8): 스캐폴드 → 스토리보드 → 컴포지션 → 린트 → Studio 미리보기 → 드래프트 렌더 → 시각적 확인 → MP4 미리보기 → 최종 렌더.
게이트 1 · 의도 및 형식
AskUserQuestion을 통해 한 번에 하나의 질문을 하고, 가능하면 객관식으로 제공합니다.
- 이 비디오의 용도는 무엇인가요? (홍보 · 소셜 광고 · 출시 티저 · 제품 데모 · 튜토리얼 · 설명 영상 · 인트로/아웃트로 카드 · 기타)
- 대상 시청자는 누구인가요? (자유 응답)
- 목표 길이는? (10–20초 숏 · 20–45초 홍보 · 45–90초 설명 · 1.5–3분 강의 · 사용자 정의)
- 화면 비율은? (16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080)
- 프레임 레이트는? (30 기본 · 60 선명한 UI용 · 24 영화용)
- 플랫폼/전달 제약 사항은? (파일 크기 · 마감일 · 재생 위치)
게이트: 6개 모두 캡처됨. 답변이 9:16 + 얼굴 캠인 경우, 게이트 5에서 /short-form-video로 핸드오프할 계획을 세웁니다.
전체 질문 은행: Read: references/interview-questions.md
게이트 2 · 스크립트 및 음성
- 스크립트 출처는? (붙여넣기 · 개요 → 제가 초안 작성 · 제가 녹음 · 텍스트 TTS · 내레이션 없음)
- TTS인 경우: 음성 선호도.
npx hyperframes tts --help에서 선택지를 제공합니다. 페이스도 캡처합니다. - 얼굴 캠인 경우: 녹화 경로 · 전체 화면 또는 모서리 배치 · 대본이 필요한가요? (
npx hyperframes transcribe <file> --model small.en --json) - 자막은? (끄기 · 하이프 · 코퍼레이트 · 가라오케 단어별 · 미니멀)
게이트: 스크립트 캡처(또는 초안 작성) 완료, 오디오 계획 캡처 완료, 자막 계획 캡처 완료.
게이트 3 · 스타일 수집
사용자에게 무엇이든 묻기 전에, 기존 자산을 먼저 목록화하세요. <workspace-root>/assets/ 및 모든 프로젝트 assets/ 폴더를 확인하세요. 이미 있는 것을 묻지 마세요.
그런 다음 점진적으로 물어보세요. 사용자가 모든 질문에 답할 필요는 없습니다.
- 스타일 가이드 또는 브랜드 문서가 있나요? (붙여넣기/경로 · 없음)
- 색상 팔레트는? (HEX 코드 · 없음 — MOTION_PHILOSOPHY 기본값 사용)
- 폰트는? (Google Fonts 이름 · 파일 경로 · 없음 — Inter + JetBrains Mono 기본값 사용)
- 로고 파일이 있나요? (경로 · 없음 — 텍스트 워드마크 사용)
- 분위기를 위한 참고 비디오가 있나요? (URL/경로 · 없음)
- 기타 자산은? (스크린샷 · 제품 사진 · B-roll · 음악 — 경로 나열)
- MOTION_PHILOSOPHY 미학 (검정 캔버스 · 크롬 타이포 · 원근 그리드 · 휩 트랜지션) 또는 다른 느낌?
- 페이싱은? (1–2초 역동적 · 2–3초 균형 · 3–5초 여유)
- 음악은? (없음 · 앰비언트 패드 0.15 · 배경 음악 0.4 · 전체 0.8 — 파일 경로가 있으면 제공)
- 아웃트로 / 클릭 유도 문구?
절대 사용자에게 브랜드를 강요하지 마세요. 사용자가 명시적으로 스타일 제공을 거부하는 경우에만 MOTION_PHILOSOPHY 기본값으로 대체하세요.
전체 스타일 흐름 + MOTION_PHILOSOPHY 기본값: Read: references/style-intake.md
게이트 4 · 브리프 종합 (빌드 전 하드 게이트)
MOTION_PHILOSOPHY.md가 작업 공간 루트에 있으면 읽습니다 — 있으면 필수입니다. 없으면references/style-intake.md의 기본값을 사용하고 브리프에 부재를 기록합니다.- 프로젝트 위치를 묻습니다 (명확하지 않은 경우):
video-projects/가 있으면 →video-projects/<슬러그>/사용- 그렇지 않으면 → 사용자에게 물어봅니다
<프로젝트-폴더>/BRIEF.md작성:- 슬러그 · 의도 · 대상 · 해상도 · FPS · 길이
- 스크립트 (전체 또는 개요)
- 음성 선택 · 자막 계획 · 얼굴 캠 계획
- 스타일 프로필: 팔레트(HEX), 폰트, 로고 경로, 참고 비디오
- 페이싱
- 자산 목록 (경로 포함)
- 아웃트로 / CTA 텍스트
- 브리프를 보여줍니다. 명시적인 승인을 기다립니다. "네, 빌드하세요"라는 명확한 확인 없이 게이트 5로 진행하지 마세요.
게이트 5 · 스캐폴드 및 스토리보드
먼저 핸드오프 확인
브리프가 9:16 세로형 토크쇼(얼굴 캠 + 장면 오버레이)인 경우, 지금 /short-form-video를 호출하고 브리프를 전달합니다. 해당 형식에 맞춰 제작된 4-레이어 스캐폴드가 있습니다.
그렇지 않으면 계속 진행합니다:
스캐폴드
mkdir <프로젝트-폴더>- 비슷한 형식의 형제 프로젝트가 있으면,
hyperframes.json+meta.json을 템플릿으로 복사할 것을 제안합니다. 그렇지 않으면 폴더 내부에서:npx hyperframes init - 사용자의 슬러그, 해상도, FPS로
meta.json을 편집합니다. - 제공된 자산을
<프로젝트-폴더>/assets/에 복사합니다. - 게이트 3의
<프로젝트-폴더>/assets/style-profile.md를 생성합니다 — 팔레트/폰트/로고의 단일 진실 공급원입니다.
스토리보드
references/storyboard-template.md의 템플릿을 사용하여 <프로젝트-폴더>/STORYBOARD.md를 생성합니다. 모든 비트에는 다음이 포함됩니다:
Beat N — 제목 (시작-끝, 길이) — 한 문장으로 설명하는 컨셉
시각 요소: [각 요소, 크기, 애니메이션, 타이밍]
모션 언어: [모션 종류]
사용된 이징: [3–4개의 고유 GSAP 이징]
종료: [다음 비트로의 전환]
오디오: [VO 라인 / SFX / 음악 레이어]
파일 상단: 씬 · 시작 · 길이 · 컴포지션 파일이 포함된 타이밍 테이블.
3막 구조를 제안합니다:
- 1막 (훅) ≈ 전체 길이의 20%
- 2막 (본문) ≈ 55%
- 3막 (페이오프 + 4–6초 홀드가 있는 아웃트로) ≈ 25%
(MOTION_PHILOSOPHY §0 법칙 9, §1)
사용자 의도를 카탈로그 블록에 매핑: Read: references/catalog-intent-map.md
게이트: 스토리보드 + 타이밍 테이블을 보여줍니다. 사용자가 승인할 때까지 반복합니다.
게이트 6 · 컴포지션 빌드
프레임워크 규칙을 위해 /hyperframes를 호출합니다. 이 스킬은 스캐폴드와 규율을 담당하고, /hyperframes는 규칙을 적용합니다.
모든 하위 컴포지션 스캐폴드
<div data-composition-id="scene-name" data-start="..." data-duration="...">
<style>[data-composition-id="scene-name"] { /* 범위 지정 */ }</style>
<!-- DOM -->
<script>
(function(){
const SLOT_DURATION = ...;
const tl = gsap.timeline({ paused: true });
// ... 트윈 ...
tl.to({}, { duration: SLOT_DURATION }, 0); // 앵커 — MOTION_PHILOSOPHY 법칙 11
window.__timelines["scene-name"] = tl;
})();
</script>
</div>
전체 보일러플레이트 + 자막 패턴 + 앰비언트 배경 패턴: Read: references/composition-scaffold.md
빌드 규칙
- 앰비언트 배경은 전체 컴포지션 길이 동안
data-track-index="0"에 설정. - 키네틱 타이포 오프너: 단어당 스태거 0.06–0.10초.
- 자막은
index.html의 루트 컴포지션과 동일한 수준의 형제 요소로, 각각data-track-index ≥ 20을 가집니다. 절대 씬 타임라인 내부에 넣지 마세요 (MOTION_PHILOSOPHY §3.13). - 카탈로그 블록은
npx hyperframes add <이름>으로 설치합니다. 즉시 블록의 CSS를[data-composition-id="..."]로 범위를 지정하세요 — 카탈로그 블록은 하위 컴포지션으로 로드될 때 상위 문서로 유출되는html, body { ... }규칙과 함께 제공됩니다. - 세로형 + 얼굴 캠: 기본 1920×1080 얼굴을 하단 절반 또는 전체 화면 모드로 변환(
translate+scale)합니다. (여기까지 왔다면/short-form-video로의 핸드오프를 강력히 고려하세요.) - 사용자가 제공한 것만 적용하세요. 그들의 팔레트, 그들의 폰트, 그들의 로고. 다른 것은 주입하지 마세요. 사용자가 MOTION_PHILOSOPHY 기본값을 선택한 경우,
references/style-intake.md에서 팔레트 + 폰트 쌍을 가져옵니다.
결정론
Math.random(), Date.now(), 렌더 시간 fetch() 사용 금지. 시드 PRNG 또는 고조파 사인 해시를 사용하세요 (MOTION_PHILOSOPHY §3.10).
게이트 7 · 린트 → Studio 미리보기 (미리보기 게이트 1 — 필수)
npx hyperframes lint— 모든 오류 수정, 경고 분류.- 백그라운드에서
npx hyperframes preview실행. http://localhost:3002에서 "Studio running"이 표시될 때까지 기다립니다.- 사용자에게 URL 과 개별 컴포지션 URL(
http://localhost:3002/?comp=<id>)을 제공합니다. 프로젝트에 WebGL 셰이더 블록이 있으면 개별 URL을 먼저 제시하세요 — 소프트웨어 WebGL 폴백이 마스터 컴포지션을 지연시킬 수 있습니다. - 진행하기 전에 "드래프트를 렌더링해도 괜찮아 보입니다"라는 명시적인 확인을 기다립니다. 침묵은 승인이 아닙니다.
핫 리로드가 켜져 있습니다 — 편집 내용이 실시간으로 반영됩니다.
게이트 8 · 드래프트 렌더 → 시각적 확인 → MP4 미리보기 → 최종
드래프트 렌더
npx hyperframes render --quality draft --output renders/<슬러그>-draft.mp4
시각적 확인 (전달 전 필수)
린트 통과 ≠ 디자인 작동. 프레임을 추출하여 직접 확인합니다.
mkdir -p renders/frames- 모든 비트의 핵심 순간 및 모든 전환에 대해:
ffmpeg -y -ss <t> -i renders/<슬러그>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png - 모든 PNG에 대해
Read도구를 호출합니다. Read 도구는 이미지를 컨텍스트에 로드합니다 — 파일 이름만 나열하지 마세요. - 프레임별로 확인: 잘린 얼굴 없음, 씬별 올바른 얼굴 모드, 텍스트 읽기 가능 및 팔레트 일치, 오버플로 없음, 전환이 의도한 단어에 맞춰짐, 빈 프레임 없음.
- 문제가 있는 경우: 수정 → 재렌더링 → 재확인. 망가진 드래프트를 절대 배송하지 마세요.
MP4 미리보기 (미리보기 게이트 2 — 필수)
npx serve renders -p 8080 -n
Python의 http.server를 사용하지 마세요 — HTTP Range 요청을 지원하지 않아 스크러빙이 작동하지 않습니다.
사용자에게 http://localhost:8080/<슬러그>-draft.mp4를 제공합니다. 재생 및 오디오 동기화에 대한 명시적인 승인을 기다립니다.
최종 렌더
npx hyperframes render --quality standard --output renders/<슬러그>-final.mp4
출력 경로를 보고합니다. 완료.
전체 사전 점검 및 전달 전 체크리스트: Read: references/build-checklist.md
절대적 규칙 (하중 지지 — 완화하지 마세요)
- 미리보기 게이트 1 (Studio) 또는 미리보기 게이트 2 (렌더링된 MP4)를 건너뛰지 마세요. 빌드당 항상 두 개의 게이트.
- 프레임을 추출하고 Read 도구를 통해 직접 확인하기 전까지 렌더가 완료되었다고 말하지 마세요.
- 전용 프로젝트 폴더 안에서만 빌드하세요. 절대
index.html을 작업 공간 루트에 두지 마세요. - 사용자의 작업 공간을 먼저 목록화하지 않고 자산에 대해 묻지 마세요.
- 모든 하위 컴포지션 타임라인 끝에
tl.to({}, { duration: SLOT_DURATION }, 0)앵커 트윈을 건너뛰지 마세요. MOTION_PHILOSOPHY 법칙 11. - 렌더 로직 내에서
Math.random()/Date.now()를 사용하지 마세요. 시드 해시만 사용하세요. <video>태그에class="clip"을 추가하지 마세요. 클립이 깨집니다.- 사용자에게 브랜드를 강요하지 마세요. 먼저 물어보고, 사용자가 명시적으로 거부할 때만 MOTION_PHILOSOPHY 기본값으로 대체하세요.
참조
references/interview-questions.md— 게이트별 전체 질문 은행references/style-intake.md— 스타일 인터뷰 + MOTION_PHILOSOPHY 기본값references/catalog-intent-map.md— "사용자가 X라고 말하면 → Y 설치"references/storyboard-template.md— 비트별 템플릿 + 작업 예제references/composition-scaffold.md— 범위 지정 스타일 + IIFE GSAP 보일러플레이트references/build-checklist.md— 사전 점검 + 전달 전 게이트
외부 (작업 공간 수준):
MOTION_PHILOSOPHY.md— 이 스킬이 존재한다고 가정하는 유일한 외부 참조. 미적 기준선. 파일이 없으면references/style-intake.md에 폴백이 있습니다.
관련 스킬
/hyperframes— 프레임워크 규칙, 게이트 6에서 호출/hyperframes-cli— init · lint · preview · render · transcribe · tts/hyperframes-registry— 카탈로그 블록 설치/gsap— GSAP 애니메이션 참조/short-form-video— 9:16 토크쇼 형식의 경우 게이트 5에서 핸드오프/website-to-hyperframes— 시작 입력이 URL인 경우 게이트 1에서 핸드오프