heygen-com/hyperframes

플러그인 설치: 설정 또는 업데이트 명령을 실행하기 전에, 이 스킬이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르세요. 독립형 설치의 경우 아래 업데이트 지침을 유지합니다.

첫째, 이 스킬을 최신 상태로 유지하세요 — 실행 전에 사용자에게 확인: npx hyperframes skills update product-launch-video. 모든 것이 최신 상태면 빠르게 아무 일도 일어나지 않습니다. 그렇지 않으면 이 스킬과 이 스킬이 의존하는 핵심 도메인 스킬을 업데이트합니다.

media-use: 오디오/이미지/로고를 가져오기 전에 /media-use를 호출하여 HeyGen 카탈로그의 BGM/SFX/이미지와 공식 출처의 브랜드 로고를 확인하세요. 기존 자산을 등록하려면 먼저 --adopt를 실행하세요. /media-use 스킬을 참조하세요.

figma 소스: 소스가 figma.com URL인 경우 먼저 /figma를 실행하세요 — 자산 내보내기, 브랜드 토큰, 필요한 경우 컴포넌트/스토리보드 재구성 — 그런 다음 그 출력물을 기반으로 이 워크플로우를 구축하세요. 원시 MCP 도구를 통해 직접 Figma를 제어하지 마세요. SVG 살균, .media/manifest.jsonl 출처 추적, 브랜드 토큰 var() 바인딩을 건너뛰게 되어, 나중에 브랜드가 변경되어도 전체 재가져오기 없이 변경 사항이 전파되지 않습니다.

제품 출시를 위한 HyperFrames

이 스킬을 사용하여 제품을 파악하고, 브랜드를 이해하며, 출시 비디오를 계획하고, HyperFrames에서 프레임별로 비디오를 구축하세요.

첫 번째 관문은 /hyperframes입니다. 당신은 조정자(Orchestrator)입니다. 각 단계를 실행하고, 각 게이트를 확인한 후 다음 단계로 진행하세요. 이 스킬은 마케팅, 출시, 프로모션 또는 공개되는 제품을 위한 것입니다. "우리 사이트 홍보"와 같은 요청도 포함됩니다. 사이트 투어/쇼케이스 요청도 여기에 머무릅니다: BRIEF.md에는 있는 그대로 보여주기 의도가 담겨 있으며, 캡처된 스크린샷이 비디오에서 보여줄 자산이 됩니다. 다른 의도, 단순히 "비디오 만들어줘", 또는 불확실한 경우 → 먼저 /hyperframes를 읽으세요 — 의도 레이어가 모든 경로 결정을 담당하며, BRIEF.md 없이 여기에 도착한 새로운 생성 요청은 어차피 그것을 거쳐야 합니다(설정의 시작 규칙 참조).

당신은 조정자입니다. videos/<project>/ 디렉토리에서 작업하세요. 단계를 순서대로 실행하고 각 게이트를 통과한 후에 다음 단계로 진행하세요. 사용자 게이트 단계는 0단계, 3단계, 6단계입니다. Step 0 이전에 ../hyperframes/references/brief-contract.md를 읽으세요 — 게이트 유형과 BRIEF.md의 flow/storyboard가 어떻게 3/4/6단계 게이트를 제어하는 모드를 도출하는지 정의합니다. Step 5를 제외한 모든 단계를 직접 수행하세요. Step 5에서는 프레임당 하나의 하위 에이전트를 할당합니다. 디자인이나 모션 규칙은 여기에 두지 마세요. 이러한 규칙은 프레임 작업 하위 에이전트, 이 스킬의 로컬 ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/, 그리고 hyperframes-creative에 있습니다.

워크플로우: Step 0 설정 -> hyperframes.json; Step 1 캡처 -> capture/; Step 2 디자인 시스템 -> frame.md; Step 3 스토리보드/대본 -> STORYBOARD.md 및 SCRIPT.md; Step 3.1 오디오 -> audio_meta.json; Step 4 시각 디자인 -> 보강된 STORYBOARD.md; Step 5 프레임 -> compositions/frames/NN-*.html 및 index.html; Step 6 최종 렌더링 -> renders/video.mp4.

---

단계 0: 설정

목표: 확인된 브리프와 함께 시작하고, HyperFrames 프로젝트를 생성하며, 브리프를 지속적으로 유지합니다.

브리프는 여기서 질문하는 것이 아니라 의도 레이어에서 확인됩니다. 시작 규칙, 순서대로: (1) BRIEF.md가 존재한다면 → 읽고 아무것도 묻지 마세요 — 브리프는 확정되었으며, 그 flow/storyboard가 모드를 파생합니다(브리프 계약 § 1). (2) BRIEF.md는 없지만 프로젝트가 존재한다면(hyperframes.json / STORYBOARD.md가 디스크에 있음) → 스토리보드의 머리말과 기록된 환경설정에서 재개하세요. 절반쯤 완성된 프로젝트를 다시 질문하지 마세요. (3) 둘 다 없음 — 여기에 직접 도착한 새로운 생성 요청 → /hyperframes를 읽고 그 의도 레이어(references/intent-interview.md)를 실행하세요: 레시피와 기억된 기본값을 확인하고, 이 경로의 질문(../hyperframes/references/routes/product-launch-video.md)을 수행한 다음, 잠긴 브리프를 반환합니다. 편집 요청은 이 모든 것을 건너뛰고 편집을 수행하세요.

hyperframes.json이 없는 경우에만 초기화하세요. 브랜드 또는 도메인에서 케밥-케이스로 <project> 이름을 지정하세요(예: acme-promo). 워크스페이스 이름이나 타임스탬프는 사용하지 마세요.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=product-launch-video — init은 설치된 스킬을 GitHub의 최신 버전과 비교하고 오래된 것이 있으면 전역 세트를 업데이트합니다.

초기화 후, <PROJECT_ROOT>를 videos/<project>로 설정하고 이후의 모든 상대 경로 명령을 해당 디렉토리를 작업 디렉토리로 하여 실행하세요. 아래 명령에서 .는 <PROJECT_ROOT>를 의미합니다. .media, capture 또는 출력 파일을 호출자 디렉토리에 절대 쓰지 마세요.

초기화 직후 BRIEF.md를 작성하세요 (절대 그 전에 작성하지 마세요 — init은 비어 있지 않은 디렉토리를 거부합니다): 의도 레이어의 잠긴 브리프, 형식은 ../hyperframes/references/brief-format.md를 따릅니다. <MEDIA_DIR>을 설치된 /media-use 스킬 디렉토리로 확인하세요. 그런 다음 각 환경설정 기반 답변을 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .로 기록하세요(brief-format.md는 하위 집합을 명명합니다). 의도 레이어가 레시피를 채택한 경우 node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>를 실행하세요. 프로젝트로 frame.md를 복사하고(Step 2는 건너뜀) Step 3 초안을 작성할 스켈레톤을 반환합니다. 레시피는 답변을 채우지만 승인은 채우지 않습니다. 검토 게이트는 여전히 실행됩니다.

설정을 진행하기 전에 로그인 상태를 표시하세요 — npx hyperframes auth status를 실행하고 그 출력을 그대로 전달하세요. 음성/BGM이 HeyGen을 사용할지 로컬 엔진을 사용할지 보고하고, 로그아웃 상태일 때 로그인 방법을 알려줍니다. 종료 코드 계약에 유의하세요: auth status는 로그인하지 않은 경우 종료 코드 1을 반환합니다(저장된 자격 증명이 거부된 경우도 포함) — 이 0이 아닌 종료는 정상적인 로그아웃 상태이므로 오류로 처리하지 말고, 재시도하지 말며, &&/set -e로 연결하여 워크플로우를 중단시키지 마세요. 다음 분기를 적용하세요:

• 협업형: 사용자가 로그인하거나 명시적으로 offline / go를 선택할 때까지 기다립니다.
• 자율형: 상태를 알리고 사용 가능한 로컬 엔진을 통해 계속 진행합니다.

오프라인 제공자가 없을 때 필요한 기능을 조용히 생략하지 마세요. 장애물을 표면화하세요. 이 결정을 다른 질문에 포함시키거나 저장소별 .env에 키를 쓰지 마세요. 인증 소유권 및 오프라인 대체: /media-use references/setup-providers.md § 공급자.

게이트: hyperframes.json과 BRIEF.md가 존재합니다. 환경설정 기반 답변이 기록되었습니다(브리프 계약 § 2). 로그인 상태가 표시되었습니다(로그인됨 또는 오프라인으로 계속 진행).

---

단계 1: 자산 캡처

목표: 비디오에 필요한 소스 자료, 브랜드 신호, 사용 가능한 자산을 수집합니다.

입력을 분류하고 경로를 선택하세요. 명시적 URL -> 캡처하고 사이트를 내레이션 및 자산에 사용합니다. 붙여넣은 스크립트/브리프 -> user_script.txt로 그대로 저장합니다. VO_MODE (그대로 또는 재구성)는 BRIEF.md에서 가져옵니다 — 의도 레이어는 스크립트가 도착할 때 묻습니다(브리프에 없는 경우에만 여기서 한 번 묻습니다). 그런 다음 캡처 대상을 확인합니다: 텍스트에 URL이 있음 -> 사용합니다. 브랜드 이름만 있음 -> WebSearch, 한 줄로 URL을 확인한 후 크롤링합니다. URL/사이트 없음(또는 브리프가 스크랩하지 말라고 함) -> 캡처 없음 경로.

캡처 실행: npx hyperframes capture "<URL>" -o ./capture --json. 호출자가 더 작은 마감일을 소유하지 않는 한 기본 탐색 후 예산을 유지하세요. 그렇다면 다운스트림 작업을 위한 시간을 남겨두는 양수 --capture-budget <milliseconds>를 전달하세요. --timeout은 페이지 탐색만 제어합니다. 선택적 이미지 캡셔닝을 의도적으로 비활성화할 때만 --skip-vision을 사용하세요.

명령 결과와 출력 디렉토리를 즉시 검사하세요. 0이 아닌 종료, JSON ok: false, 또는 capture/BLOCKED.md는 캡처 경로에 대한 하드 스톱입니다: 기록된 이유를 보고하고 부분 스크린샷, DOM, 토큰 또는 자산을 사용하지 마세요. 실패한 URL 캡처 후 인위적인 캡처 없음 대체를 생성하지 마세요. 원본 브리프가 소스 자료를 제공했거나 사용자가 실패 후 제공된 스크린샷 또는 브리프로 명시적으로 전환한 경우에만 캡처 없음 경로를 통해 계속 진행하세요.

매우 적은 텍스트 콘텐츠와 같은 경고는 빈 자산 카탈로그와 함께 사용 가능한 페이지의 증거가 아닙니다. 사이트 투어 또는 있는 그대로 보여주기 브리프의 경우 신뢰할 수 있는 캡처된 구조 또는 제공된 스크린샷이 필요합니다. 둘 다 없으면 중지하세요. 캡처를 사용할 수 없기 때문에 페이지를 발명하거나 재구축하지 마세요.

사이트 투어 또는 있는 그대로 보여주기 브리프의 경우 캡처된 페이지가 시각적 진실 공급원입니다. 전체 웹사이트를 HTML로 재구축하는 대신 실제 스크린샷을 사용하세요. 샷에 내부 움직임이 필요한 경우 스크린샷을 베이스로 유지하고 측정된 위치에 실제 캡처된 자산을 오버레이하거나 움직이는 구성 요소 하나만 재구축하세요. 스크롤 샷의 경우 capture/screenshots/full-page.png 위로 뷰포트를 애니메이션합니다 — 전체 문서의 1x 플레이트, 1920 너비 뷰포트가 아래로 이동하는 픽셀 정확도입니다. 페이지가 한 조각으로 캡처하기에는 너무 길면 없습니다. 같은 디렉토리의 겹치는 스크롤 위치 샷으로 대체하세요. 1:1을 넘어 확대하려면 해당 영역의 자체 2x 캡처가 필요합니다. 플레이트에는 1x 이상의 여유가 없기 때문입니다. 사용자가 명시적으로 양식화된 해석을 요청한 경우에만 전체 페이지를 재생성하세요. 사용할 수 없는 캡처만으로는 허가가 아닙니다.

GEMINI_API_KEY, GOOGLE_API_KEY, 또는 OpenRouter 키가 존재하는 경우 캡처는 자산을 capture/extracted/asset-descriptions.md로 자동 캡션합니다. 이것은 검토 게이트가 아닙니다. 비전 키가 없으면 DOM 컨텍스트를 사용하고 계속 진행하세요.

캡처 없음 경로: capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md, capture/assets/를 수동으로 생성하세요. tokens.json은 { "title": "", "description": "", "colors": [], "fonts": [] }여야 합니다. 가능하면 브리프에서 제목/설명을 채우세요. visible-text.txt에는 전체 브리프 또는 스크립트가 포함됩니다. 사용자가 자산 노트를 제공하지 않는 한 asset-descriptions.md에는 캡처된 자산이 없다고 명시해야 합니다.

게이트: 캡처 JSON이 ok: true를 보고했습니다. capture/BLOCKED.md가 존재하지 않습니다. capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md, capture/assets/가 존재합니다. 브랜드를 하나의 명확한 문장으로 말할 수 있습니다. asset-descriptions.md를 주요 자산 인벤토리로 취급하세요. 실제 캡처 후 누락된 경우 중지하고 캡처 불완전을 보고하세요. 이 구조적 게이트가 여전히 통과하는 경우에만 성능이 저하된 선택적 단계에 대한 경고가 허용됩니다.

---

단계 2: 디자인 시스템

목표: 제공된 프레임 프리셋 중 하나를 선택합니다. 스크립트가 이 비디오의 frame.md + 캡션 스킨을 생성합니다.

BRIEF.md가 style_preset을 명명한 경우 — 사용자가 의도 레이어의 쇼케이스에서 눈으로 직접 선택한 것입니다 — 그것을 사용하세요. 브리프에 명시되지 않은 경우에만 판단은 사용자의 몫입니다. 그런 다음 한 가지 결정을 내리세요 — 어떤 프리셋을 사용할지: ../hyperframes-creative/references/design-spec.md를 읽고 브랜드와 브리프에 가장 적합한 프리셋을 선택하세요. 그런 다음 실행하세요:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

스크립트는 나머지를 결정적으로 수행합니다: 프리셋의 FRAME.md → frame.md로 복사하고 리믹스하여 capture/extracted/tokens.json의 브랜드 토큰(브랜드 색상이 역할(잉크, 캔버스, 악센트)별로 프리셋의 색상 키에 매핑됨 — 키/구조/컴포넌트 유지; 프리셋의 디스플레이 + 본문 글꼴이 브랜드의 것으로 교체됨) 위에 적용하고, 프리셋의 캡션 스킨을 .hyperframes/caption-skin.html로 복사하며, 자체 검증합니다(매핑이 깨지면 종료 코드 1). 0으로 종료되는 즉시 다음 단계로 진행하세요 — 사양을 수동 편집하지 마세요.

브랜드 색상/글꼴이 없는 tokens.json(예: 캡처 없음)의 경우 → 스크립트는 프리셋의 자체 팔레트(완전한 출시 가능한 디자인)를 유지합니다. 브리프가 캡처에서 누락된 브랜드 색상/글꼴을 명명하는 경우 실행 전에 capture/extracted/tokens.json에 추가하세요(또는 사용자의 design.md를 사용하여 채우세요). 매핑이 정말로 필요한 경우에만 사후에 수동으로 frame.md를 조정하세요.

게이트: build-frame.mjs가 종료 코드 0으로 종료되었습니다. 명명된 프리셋에서 frame.md가 존재합니다. (프리셋이 제공하는 경우) .hyperframes/caption-skin.html이 캡션 스킨 소스로 존재합니다. 선택한 프리셋이 환경설정으로 기록되었습니다(--key style_preset --workflow <this workflow>, 브리프 계약 § 2).

---

단계 3: 스토리보드 및 대본

목표: 브리프와 캡처된 자료를 승인된 프레임별 스토리 계획으로 전환합니다.

../hyperframes-creative/references/story-spine.md(훅 언어, 증거보다 가치, 제안으로서의 스토리보드, 소스 추적 가능한 시각 자료), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md, ../hyperframes/references/script-format.md를 읽으세요. 이를 사용하여 STORYBOARD.md와, 내레이션이 필요한 경우 SCRIPT.md를 작성하세요. 머리말 duration:을 브리프의 length로 설정하세요 — 대략적인 예상치입니다. 어셈블리에서 그에 대한 최종 컷 위치를 보고합니다.

story-design.md를 스토리 청사진, 훅, 설득 로직, 비트, VO_MODE, 자산 선택에 사용하세요. 소프트 가이드로, ../hyperframes-animation/blueprints-index.md의 역할→청사진 메뉴를 참조하세요. 각 비트에 대해 맞는 청사진 ID가 있으면 기록하세요. 그러나 스토리 진실이 어떤 비트가 존재하는지 결정합니다 — 청사진에 맞추기 위해 비트를 강제하지 말고, 입증된 형태가 사용 가능하다고 해서 비트를 발명하지 마세요. 각 시각적 프레임의 asset_candidates를 capture/extracted/asset-descriptions.md(표준 인벤토리)에서 선택하세요. 원시 capture/assets/를 탐색하지 마세요. 해당 인벤토리가 없거나 사용할 수 없는 경우가 아니면 사용자에게 자산을 선택하도록 요청하지 마세요. 스토리보드 및 대본 참조의 정확한 필수 필드를 사용하세요.

초안 작성 후, 검토 루프의 계획 단계를 실행하세요 — ../hyperframes/references/review-loop.md § 1: 계획을 제안으로 제시하고 두 가지 질문을 하세요 — 승인 또는 변경, 그리고 스케치 우선(권장) 또는 건너뛰기. 피드백은 채팅 응답으로 도착합니다. 승인될 때까지 반복하세요. 이것은 체크포인트 게이트(브리프 계약 § 1)입니다: 자율 모드에서 ```json { "approved": true, "sketches_first": false }

형식으로 기술적인 확인을 합니다.

---

## 단계 3.1: 오디오 자산 식별

목표: 비디오에 필요한 모든 오디오 요소(내레이션, BGM, SFX)를 계획하고 소싱합니다.

`../hyperframes/references/audio-sourcing.md`를 읽고 `/media-use`를 호출하여 음성 해설(VO 아티스트가 있을 때) 및 BGM/SFX 트랙을 계획하세요. 선택한 스토리보드 비트의 감정적 요구와 브리프의 `tone`과 일치하는 오디오 선택을 우선시하세요. 오디오 결정을 `audio_meta.json`에 기록하세요. 오디오를 미리 보거나 커밋하지 마세요. Step 6에서 사용하기 위해 메타데이터와 사용 의도만을 계획하세요.

이 단계는 스토리보드 검토가 완료된 후에만 실행하세요. 스토리보드가 변경되면 오디오 계획이 오래될 수 있기 때문입니다.

---

## 단계 4: 시각 디자인

목표: 스토리보드의 각 프레임에 대한 구체적인 시각적 방향을 확립하여 프레임 작업 하위 에이전트가 자체적으로 충실하게 구축할 수 있도록 합니다.

다음을 읽으세요: `../hyperframes-animation/references/visual-grammar.md`, `../hyperframes-animation/references/layout-composition.md`, `../hyperframes-animation/references/typography-scale.md`, `../hyperframes/references/caption-rules.md`.

프레임당 하나씩 `SKETCH.md`도 생성하세요. 각 스케치는 정확한 레이아웃 계획이어야 합니다 — 정확한 좌표, 측정된 비율, 정확한 글꼴 크기와 두께, 정확한 색상(육안이 아닌 `frame.md`의 토큰 이름 사용), 모든 요소의 정확한 Z-색인, 상태 전환(시작/종료/중간 상태)을 위한 정확한 CSS 클래스 이름, 그리고 공급업체 접두사나 축소 없이 완전히 자격이 부여된 속성과 값을 가진 정확한 CSS 속성. 스케치는 프레임 작업 하위 에이전트에게 하나의 완전한 사양 역할을 합니다. 스케치에서 "원본 그대로" 또는 "아이콘"을 참조하지 마세요 — 대신 `hyperframes.json`의 `instagram.svg`와 같은 정확한 자산 파일 이름을 사용하세요. 절대 CSS를 발명하지 마세요. 이 스케치가 언어입니다.

`capture/extracted/asset-descriptions.md`의 자산을 화면 요소에 우선적으로 연결하세요. 인벤토리에 없는 자산을 발명하지 마세요. 결정적으로, 스토리보드의 각 비트에 대해 `frame.md`의 구성 요소(`FRAME.md` 참조)를 결정하고, 각 구성 요소에 어떤 `tokens.json` 토큰(글꼴/색상)이 적용되는지, 각 비트가 어떻게 본 브랜드 자산(캡처된 스크린샷, UI 요소, 로고, 제품 사진)을 사용하는지, `caption-rules.md`의 캡션 스킨과 위치 규칙을 적용하세요. Step 3에서 목표로 삼았던 청사진 ID가 있다면 구체적인 디자인을 안내하기 위해 여기서 참조하세요.

제공된 Blueprint 디렉토리(존재하는 경우)를 읽고 이를 디자인에 통합하세요. 예: `../hyperframes-animation/blueprints/<id>/`. Blueprint는 컴포넌트 패턴, 레이아웃 그리드, 애니메이션 타이밍 다이어그램 및 전역 속도 곡선, 응답형 동작(테마 유형별), 화면 요소 배치를 위한 캔버스 영역 레이블, 레이어 우선 순위(높음/낮음 항목)를 제공할 수 있습니다. 이러한 Blueprint 지침을 개별 프레임 스케치에 적용하세요. Blueprint가 없는 경우 Step 2의 `frame.md` 구성 요소에 의존하여 레이아웃을 안내하세요.

**게이트:** 모든 프레임에 대해 `STORYBOARD.md`가 시각적 세부 사항으로 보강되었습니다. 프레임당 정확한 CSS 선택기와 값을 가진 `SKETCH.md`가 존재합니다. 선택한 청사진(있는 경우)이 참조되고 적용되었습니다.

---

## 단계 5: 프레임 구축

목표: 각 프레임에 대해 하나의 하위 에이전트를 생성하고, 스토리보드 설명과 스케치 사양에 따라 완전한 HTML 조각을 구축합니다.

이 단계를 직접 수행하지 마세요. 각 프레임마다 하나의 독립적인 하위 에이전트를 생성하고 임무를 부여하세요. 프레임당 하나의 하위 에이전트. 각 하위 에이전트가 다음을 읽어야 함을 지정하세요: **이** `STORYBOARD.md`(해당 프레임 비트만), **이** `SKETCH.md`(해당 프레임만), `../hyperframes-animation/rules/`, `../hyperframes-animation/blueprints/`, `hyperframes-creative`, 및 `../hyperframes/references/caption-rules.md`.

추가 지침 없이. 하위 에이전트가 자체적으로 `composition.html`을 생성하도록 합니다 — `frame.md`에 정의된 청사진이 프레임 레이아웃과 미학을 안내합니다. 각 하위 에이전트에 대해 `<PROJECT_ROOT>/compositions/frames/NN-name.html`에 HTML 출력을 기록하도록 하세요. 여기서 `NN`은 2자리 프레임 번호입니다.

각 하위 에이전트가 `frame.md`의 구성 요소를 가져오고, 브랜드 토큰을 적용하며, `SKETCH.md`의 배치 규칙을 따르도록 `frame.md` 시스템을 직접 활용해야 함을 전달하세요. 프레임 작업 하위 에이전트는 정확하게 디자인된 요소를 구축하거나 재사용합니다. HTML을 직접 작성하지 마세요.

각 프레임에 대해 하위 에이전트를 생성한 후, 모든 프레임을 결합하는 `<PROJECT_ROOT>/compositions/index.html`을 생성하세요. 이 인덱스는 스토리보드 순서와 `frame.md`의 규칙에 따라 프레임을 순서대로 표시해야 합니다. <!DOCTYPE html> 선언, <head>의 메타 태그 및 스타일, 그리고 각 프레임 HTML 조각이 순서대로 포함되어야 합니다.

**게이트:** 모든 프레임 번호에 대해 `compositions/frames/`가 고유한 NN-*.html 파일로 채워져 있습니다. `compositions/index.html`이 존재하고 유효합니다.

---

## 단계 6: 최종 프레임 및 렌더링

목표: 프레임을 검토하고, 최종 조정을 적용하며, 최종 비디오를 렌더링합니다.

`STORYBOARD.md`에 피드백을 적용하거나, 이전 게이트의 스케치 조정 사항을 적용하거나, 프레임을 검토하고 필요한 경우 Step 5의 일부 하위 에이전트를 다시 실행하세요. 검토 루프의 편집 단계를 실행하세요 — `../hyperframes/references/review-loop.md` § 2: 앞선 검토 라운드 이후의 변경 사항을 나열하고 명시적인 승인을 구하세요. 변경 사항이 있는 경우 루프를 반복하세요. 이것은 **체크포인트 게이트**입니다.

승인되면 `/media-use`를 사용하여 Step 3.1의 `audio_meta.json`에서 식별된 오디오 자산을 가져오고 `capture/assets/`에 넣습니다. 그런 다음 `npx hyperframes render --input ./compositions/index.html --output ./renders/video.mp4`를 실행하세요.

렌더링이 완료되면 결과를 확인하세요. `renders/` 디렉토리에 `video.mp4`가 존재해야 합니다. 그렇지 않은 경우 오류를 보고하세요.

**게이트:** `renders/video.mp4`가 존재합니다. (렌더링 검증을 위한) 사용자 승인이 완료되었습니다.

---

## 환경설정

환경설정 시스템을 사용하여 과거 선택을 기억하고 미래의 브리프에 이를 적용합니다. `node <MEDIA_DIR>/scripts/prefs.mjs`를 통해 액세스하세요.

- `--hyperframes .` — 이 프로젝트의 환경설정.
- `--record --key <name> --value <value>` — 환경설정 값 저장.
- `--get --key <name>` — 키로 값 검색.
- `--help` — 사용법.

`brief-format.md` § 2는 이 경로와 환경설정 시스템을 통해 기록되어야 하는 결정을 정의합니다.

## 파일 구조 참조

모든 파일은 `videos/<project>/` 아래에 있습니다:

hyperframes.json # 프로젝트 구성 BRIEF.md # 잠긴 브리프 frame.md # 디자인 시스템(프리셋에서 복사/리믹스) .hyperframes/caption-skin.html # 캡션 스킨 capture/ # 1단계 출력 extracted/ tokens.json visible-text.txt asset-descriptions.md assets/ screenshots/ BLOCKED.md (존재하는 경우) compositions/ index.html frames/ 01-intro.html 02-feature.html ... renders/ video.mp4 STORYBOARD.md # 3단계 출력 SCRIPT.md # 3단계 출력(내레이션 있는 경우) audio_meta.json # 3.1단계 출력

## 관련 문서

- `../hyperframes/references/brief-contract.md` — 게이트 유형 및 조정.
- `../hyperframes/references/review-loop.md` — 검토 및 승인 프로세스.
- `../hyperframes/references/audio-sourcing.md` — 오디오 계획.
- `../hyperframes-creative/references/story-spine.md` — 스토리텔링 구조.
- `../hyperframes-animation/references/` — 시각적 규칙 및 청사진.
- `../hyperframes/references/brief-format.md` — BRIEF.md 형식.
- `../hyperframes/references/storyboard-format.md` — STORYBOARD.md 형식.
- `../hyperframes/references/script-format.md` — SCRIPT.md 형식.
- `../hyperframes-animation/blueprints-index.md` — 청사진 카탈로그.