mkt-full-video-with-11-hyperframe-heygen-16-9은(는) 무엇을 하나요?
종단 간 오케스트레이터: 스크립트 → 최종 MP4 16:9 (1920×1080) 팟캐스트 키노트.
출력물은 1920×1080 해상도의 "토킹헤드 + 슬라이드" 형식 MP4 파일입니다. 오른쪽 둥근 플로팅 프레임에 HeyGen 아바타(Claude-오렌지 브랜드 테두리)가 있으며, 왼쪽에는 현대적인 AI/Claude 에디토리얼 스타일의 슬라이드 콘텐츠가 위치합니다. 슬라이드가 전체 화면을 강조해야 할 경우 PIP(Picture-in-Picture) 줌 아웃 순간도 포함됩니다. 모든 컴포지션은 아래 패턴을 자동으로 적용하므로 수동 편집이 필요 없습니다.
자동 내장 패턴 (Phase 3 출력)
모든 오케스트레이터 생성 비디오에는 자동으로 다음이 포함됩니다:
-
장면별 컴포지션 HTML — 파이썬 템플릿이 아닌 병렬 LLM 서브 에이전트(장면당 1개, 1회 메시지로 분기)가 작성:
- 출력:
compositions/scene-1.html…compositions/scene-N.html(장면당 1개 파일, N에 관계없이 고유한 파일명) - 각 서브 에이전트는
visual-plan.json의 해당 장면 블록과 참조 문서(references/composition-patterns.md,slide-design-tokens.md,infographic-prompt-template.md)를 읽고 처음부터 HTML/CSS/GSAP를 작성합니다. 해당 장면의 특정 은유에 맞는 패턴을 선택하고, 5개의 고정 아키타입에 얽매이지 않습니다. - LLM을 사용하는 이유: HyperFrames에는 무수한 시각적 사고 패턴(before-after, hub-and-spokes, two-clock-comparison, three-tier-comparison, scroll-tape, hero-orb-spec-trio, terminal-mock, gift-box 등)이 있습니다. Python 생성기는 단 5개의 고정 아키타입만 알기 때문에 지루하고, "scroll-tape-wasted" 또는 "right-tool-vehicles"와 같은 장면별 은유에 적응할 수 없습니다. 장면별 LLM 작성은 디자인 의도를 충족할 만큼 창의적입니다.
- 브랜드 로고 자동 첨부: 오케스트레이터는 브랜드 컨텍스트(
claude/chatgpt/gemini/claude-code)를 서브 에이전트에 전달하고, 서브 에이전트는assets/logos/의 로고를 참조하여 컴포지션에 임베드합니다(orb glow, tool-badge pill, fail-row icon 등 패턴 필요 시).
- 출력:
-
".avatar-breathing"의 "Hybrid Hook" 시각적 줌 전략 (
generate_root_index.py를 통한 Phase 3e):- HOOK 장면: 장면 길이에 걸쳐 느린 램프 1.0 → 1.10 (드라마틱 빌드업)
- HOOK→BODY: 스냅 리셋 1.10 → 1.0 (긴장 완화)
- BODY 장면: PIP-IN 이벤트 시 1.06 펀치 비트 (리듬감)
- CTA 장면: 부드러운 1.0 → 1.04 푸시 (마무리)
- 평평한 "breathing yoyo" 대체 — 각 장면 아키타입마다 고유한 줌 움직임이 있습니다.
-
크림지 배경 b-roll PIP 교체 레이어 (분할 노동 아키텍처 — 중요):
- HTML 컴포지션(슬라이드 마운트)은 DATA / TIER-LETTERS / ITEMS / BADGES / TITLE / 브랜드 로고를 담당하며 항상 켜져 있습니다.
<img class="broll-image">크림지 배경 에디토리얼 일러스트레이션은 METAPHOR / EMOTION을 담당하며, 전체 스테이지 1920×1080을 사용하고 해당 장면의 PIP 윈도우 동안 페이드 인되고 그 외에는 페이드 아웃됩니다.- 각 레이어는 서로 다른 메시지의 절반을 전달합니다(HTML = "무엇", 이미지 = "왜/느낌").
- 중요: 이미지는 루트 레이어(
index.html의<img id="broll-N">)에만 존재해야 합니다. 컴포지션 HTML은<div class="image-slot">을 임베드해서는 안 됩니다. 그렇게 하면 16:9 이미지를 작은 사각형에 가둬 보기 흉해집니다. 컴포지션은 DATA 전용 레이어입니다. - 이미지 소스: 플래너 스킬이
prompts.md를 작성 → 사용자가 AI33/Nano Banana Pro 또는mkt-broll-image를 통해1.png-N.png를 생성합니다. - 전체 스테이지 1920×1080,
object-fit: contain, 크림색#F0EEE6레터박스가 보이지 않게 혼합됩니다.
-
아바타 프레임 브랜드 색상 테두리 (
generate_root_index.py를 통한 Phase 3e):- SPLIT 기본 상태: Claude-오렌지
#d977573픽셀 실선 + 6픽셀 후광 + 80픽셀 외부 발광(따뜻한 브랜드 프레임, 흰색 테두리 사용 안 함) - PIP 상태: 바이올렛
#a78bfa3픽셀 실선 + 6픽셀 후광 + 60픽셀 발광(아바타가 축소될 때 강조 신호) - 브랜드별 재정의: 사용자가
chatgpt/gemini/claude-code브랜드 강조를 선택하면 생성기는 일치하는 악센트를 사용합니다.
- SPLIT 기본 상태: Claude-오렌지
-
캡션 오버레이 (
compositions/captions.html이 존재할 때 기본 활성화):- 하단 중앙 필,
bottom: 100px, Inter 600 38px 흰색, 어두운 바이올렛 테두리 필 위에 표시 - 구문 단위 페이드 인/아웃(0.18초), 각 청크 끝에서 하드
tl.set종료 - 상수 Jinja 템플릿 + 비디오별
captions.json(또는 Whisper 세그먼트 폴백)으로generate_captions.py가 생성 generate_root_index.py가 z-index 28에 자동 마운트;--no-captions로 비활성화- 아래 Phase 3e Step 2 참조
- 하단 중앙 필,
-
YT 구독 하단-서드 (마지막 3초, 기본 활성화):
data-start = total_duration - 3.0s에yt-lower-third.html컴포지션 마운트- 슬라이드 인 애니메이션 + 구독 버튼 누름 + 구독됨 상태 전환
- z-index 60 (모든 레이어 위),
pointer-events: none - 채널명 + 구독자 수가
compositions/yt-lower-third.html에 내장됨(사용자가 이름을 바꾸려면 편집) - 비활성화:
generate_root_index.py --no-yt-lower-third. 사용자 정의 지속 시간:--yt-lower-third-duration 4.5
6개 패턴 모두 자동 내장 — 오케스트레이터는 추가 단계가 필요 없습니다. 사용자는 1.png-N.png(Phase 3.5)만 렌더링하면 분할 노동이 완전히 표시됩니다. 이미지 생성을 건너뛰어도 비디오는 순수 HTML 컴포지션(이미지 레이어 투명도 0)으로도 멋지게 재생됩니다.
9:16 형제 스킬과의 차이점
mkt-full-video-with-11-hyperframe-heygen (9:16) | -16-9 (이 스킬) | |
|---|---|---|
| 화면비 | 1080×1920 세로 | 1920×1080 가로 |
| 레이아웃 | 아바타 전체 화면 + 캡션 스트립 + b-roll 컷 | 슬라이드 창 왼쪽 (1200) + 아바타 플로팅 프레임 오른쪽 (540×880) |
| 캡션 마운트 | 있음 (TikTok 스타일 단어별) | 기본적으로 캡션 없음 (슬라이드가 시각적으로 메시지를 전달) |
| PIP 메커니즘 | 없음 | SPLIT ↔ PIP 전환 — 슬라이드가 1920으로 확장되고 아바타가 320×420 모서리로 축소 |
| 아바타 움직임 | 정적 전체 화면 | 호흡 요요 + 장면 시작 펀치 인 |
| 슬라이드 스타일 | 변형 기반 목업(post-stack, ai-window, app-card…) | LLM 작성 장면별 컴포지션 + 현대적인 AI 팔레트 + 루트 레이어의 크림지 b-roll |
| 컴포지션 작성자 | Python 템플릿 | N개의 병렬 LLM 서브 에이전트 (장면당 1개) |
| 렌더링 대상 | TikTok/Reels/Shorts | 팟캐스트 키노트 / YouTube 지식 / LinkedIn |
| HeyGen 렌더링 | 720×1280 세로 | 여전히 720×1280 세로 (가로 아바타 프레임에 맞게 object-position: center 25%로 잘림 — 1280×720이 아님!) |
모든 가로형 지식 비디오에는 이 스킬을 선택하십시오. 모든 세로형 쇼트 폼에는 형제 스킬을 선택하십시오.
사용 시기
- 사용자가 60~150초 길이의 베트남어 스크립트로 팟캐스트 키노트 가로형 지식 비디오를 만들고자 할 때
- 사용자가 출력물에 "Claude AI / Anthropic 에디토리얼" 느낌을 원할 때: 어두운 슬라이드 배경, 네온 글로우 티어 레터, 유리 카드, 루트 레이어의 크림지 인포그래픽
- 주제가 지식 공유 / 사례 연구 / 전후 비교 / 도구 비교 / 5개 이상 팁 목록 — 슬라이드 중심에 적합하며, N개의 장면(3, 5, 7, 10…)을 유연하게 지원
- 게시 채널: YouTube 가로형, LinkedIn 비디오, 팟캐스트 클립, 웹사이트 임베드
- 사용자가 이미 MP3 + source.mp4를 가지고 있고 Phase 3을 다시 계획하려는 경우 → 오케스트레이터는 Phase 1+2를 건너뛰고 바로 Phase 3으로 진입
다음의 경우 이 스킬을 사용하지 마십시오:
- 사용자가 TikTok/Reels/Shorts 세로형을 필요로 하는 경우 → 형제 9:16 스킬 사용
- 스크립트가 5000자를 초과하는 경우 → 의미 단위로 분할 먼저 진행
- 주제가 순수 시각적 위주(몽타주, 뮤직 비디오)인 경우 — 이 스킬은 토킹헤드 + 슬라이드에 최적화됨
파이프라인 개요
Script (Vietnamese, ≤ 5000 chars)
│
▼
[Phase 0.5 Resume detection — voiceover.mp3 + source.mp4가 이미 존재하면 Phase 1+2 건너뜀]
│
▼
Phase 1 ── mkt-elevenlabs-tts-to-mp3 ─────► voiceover.mp3
│ │
│ CHECKPOINT #1 — 사용자가 MP3 듣고 검토
│ │
│ ▼ (OK)
Phase 2 ── heygen-mp3-to-mp4 ─────────────► source.mp4 (720×1280 세로, 립싱크 적용)
│ (1280×720으로 렌더링하지 않음)
│
▼
Phase 3a ── transcribe (Whisper) → voiceover.srt + transcript.json
Phase 3b ── plan_visuals.py → visual-plan.json + prompts.md
(planner skill: mkt-plan-short-video-edit-16-9)
CHECKPOINT #2 — 사용자가 계획 검토
│
▼ (LLM이 visual-plan.json을 장면별 은유/티어레터/항목에 맞게 사용자 정의)
│
Phase 3c ── apply_plan_to_scenes.py → scenes.json (에디터 호환)
Phase 3d ── 🔥 N개의 병렬 LLM 서브 에이전트로 분기 (장면당 1개) 🔥
→ compositions/scene-1.html … scene-N.html
(각 서브 에이전트: visual-plan의 장면 블록 + 참조 문서를 읽고 → HTML/CSS/GSAP 작성)
Phase 3e ── scaffold_project.py (sfx/ + logos/ + avatar.jpg + yt-lower-third.html)
generate_root_index.py → index.html (1920×1080, scene-N.html, broll 레이어, PIP, SFX, 브랜드 마크, Claude-오렌지 아바타 테두리 마운트)
Phase 3f ── lint + preview (Studio @ http://localhost:3002)
(선택적 Phase 3.5: AI33/Nano를 통해 1.png-N.png 크림지 배경 생성)
│
▼
사용자가 Studio 미리보기 검토 → "render" → npx hyperframes render → out.mp4 1920×1080
체크포인트:
- #1 MP3 음성 해설 — 오케스트레이터 게이트 (재개 모드이면 건너뜀).
- #2 시각적 계획 — Phase 3b 게이트 (
auto_scenes=true이면 건너뛸 수 있음). - 렌더 게이트 — 사용자가 Studio에서 확인한 후에만 렌더링.
입력값
| 입력값 | 필수 | 형식 / 예시 |
|---|---|---|
| 주제 (Topic) | 예 | 짧은 제목 ("Claude AI의 이점", "토큰 절약 팁 5가지") |
| 브랜드 강조 (Brand emphasis) | 예 | claude / chatgpt / gemini / claude-code / generic — 악센트 팔레트 + 로고 + 아바타 테두리 색상 결정 |
| 스크립트 텍스트 (Script text) | 예 (재개 모드 제외) | .txt/.md 파일 또는 인라인. 베트남어. 5000자 이하 |
| 출력 슬러그 (Output slug) | 아니요 | 주제에서 자동 파생. 소문자, ASCII, 대시. |
| 장면 수 (Number of scenes) | 아니요 | 기본값 5 (Hook / Problem / Solution / Recap / CTA). 길이에 따라 3~10 가능. 5개 이상 팁 목록도 OK — 각 팁마다 1개 서브 에이전트 + 1개 Hook + 1개 CTA로 분기. |
| 아바타 모양 (Avatar look) | 아니요 | HEYGEN_AVATAR_LOOKS 환경 변수에서 가져온 1개 ID. 선택하지 않으면 무작위. |
| 인포그래픽 모드 (Infographic mode) | 아니요 | now (mkt-broll-image를 통해 즉시 이미지 생성) / scaffold (prompts.md만 기록, 사용자가 나중에 수동 생성) / none. 기본값 scaffold. |
auto_scenes | 아니요 | 기본값 false. true로 설정하면 장면-개요 체크포인트를 건너뜀. |
start_at | 아니요 | phase_1 (기본값) / phase_2 / phase_3. 재개 진입점. |
skip_phase_1 / skip_phase_2 | 아니요 | 재개 모드를 위한 부울 바로가기 (start_at=phase_3의 대안). |
작업 공간 레이아웃
workspace/content/YYYY-MM-DD/<slug>/
├── script.txt # Phase 0 — 사용자가 제공한 정리된 텍스트
├── script-tagged.txt # Phase 1a — 스크립트 + ElevenLabs v3 오디오 태그 ([excited], [sigh]…)
├── voiceover.mp3 # Phase 1b
├── voiceover.srt # Phase 3a (Whisper)
├── voiceover_segments.json # Phase 3a (단어 수준 세그먼트)
├── source.mp4 # Phase 2 (720×1280 세로 — 가로로 렌더링하지 마십시오)
├── transcript.json # Phase 3a (whisper 단어)
├── transcript-cleaned.json # Phase 3a (수동 오타 수정)
├── scenes-outline.json # Phase 3b — 체크포인트 전 개요
├── visual-plan.json # Phase 3b — 전체 기계 판독 가능 계획 (플래너 출력)
├── scenes.json # Phase 3c — visual-plan의 에디터 호환 평면화
├── prompts.md # Phase 3b — 크림지 배경 에디토리얼 프롬프트 (장면당 1개)
├── 1.png 2.png ... N.png # Phase 3.5 — 크림 인포그래픽 이미지 (장면당 1개), 루트 broll 레이어
├── captions.json # Phase 3e (선택 사항) — 오케스트레이터 선별 [{text,start,end},...]; 누락된 경우 voiceover_segments.json으로 폴백
├── compositions/
│ ├── scene-1.html # Phase 3d — LLM 작성, 1200×1080 기본 가로
│ ├── scene-2.html # 장면당 1개 파일, N에 관계없음
│ ├── ...
│ ├── scene-N.html
│ ├── captions.html # Phase 3e — captions.html.j2 + captions.json (또는 Whisper 세그먼트)에서 생성
│ └── yt-lower-third.html # Phase 3e — 스킬 자산에서 자동 복사
├── assets/
│ └── logos/ # Phase 3e — 자동 복사 (claude.png, chatgpt.png, gemini.jpg, claude-code.png)
├── sfx/ # Phase 3e — 6개 기본 SFX
└── index.html # Phase 3e — 루트 컴포지션 1920×1080
YYYY-MM-DD = 오늘 날짜 (UTC+7).
워크플로우
Step 0 — 설정 + 재개 감지
len(script_text) <= 5000확인 (재개 모드이고 스크립트 입력이 없으면 건너뜀). 초과 시 중단.- 주제가 없으면 슬러그를 주제에서 파생.
workspace/content/YYYY-MM-DD/<slug>/생성.script.txt저장 (재개 모드이고 스크립트가 이미 존재하면 건너뜀).- 브랜드 악센트 팔레트 선택 (
references/slide-design-tokens.md참조). - 재개 감지 —
voiceover.mp3및source.mp4가 이미 존재하는지 확인. 둘 다 존재하면start_at=phase_3설정.
Step 1 — 음성 해설 생성 (Phase 1)
mkt-elevenlabs-tts-to-mp3호출.- 입력:
script.txt,voice_name,stability,similarity_boost - 출력:
voiceover.mp3
- 입력:
- 사용자에게 MP3 듣고 확인 요청 (Checkpoint #1).
- 불만족 시 다시 생성 (구성 변경).
- 확인 시 다음 단계 진행.
Step 2 — 소스 비디오 생성 (Phase 2)
heygen-mp3-to-mp4호출.- 입력:
voiceover.mp3, 아바타 ID, 배경, 기타 설정 - 중요:
source.mp4는 720×1280 세로로 렌더링됨. 아바타 발화 영상의 가로 버전을 요청하지 마십시오. 가로 아바타 프레임은 CSSobject-position: center 25%로 잘라내기만 하면 됩니다. - 출력:
source.mp4(720×1280, 립싱크 적용)
- 입력:
Step 3 — 전사 및 계획 (Phase 3a-3b)
- (Phase 3a) Whisper로
voiceover.mp3를 전사하여voiceover.srt,transcript.json,voiceover_segments.json생성. - (Phase 3b) 플래너 스킬 호출:
mkt-plan-short-video-edit-16-9. 플래너는visual-plan.json과prompts.md를 생성합니다.scenes-outline.json은 체크포인트 전 개요를 나타냅니다.
- 사용자에게 시각적 계획 검토 요청 (Checkpoint #2).
auto_scenes=true이면 자동 진행.- 수정 사항을
visual-plan.json에 직접 편집.prompts.md다시 생성.
Step 4 — 장면 계획 적용 (Phase 3c-3e)
- (Phase 3c)
apply_plan_to_scenes.py실행 →scenes.json. - (Phase 3d) 🔥 N개의 병렬 LLM 서브 에이전트로 분기 🔥
- 각 장면에 대해 1개의 서브 에이전트가
visual-plan.json의 장면 블록 + 참조 문서를 읽고compositions/scene-N.html을 처음부터 작성. - 서브 에이전트 프롬프트 템플릿을 미리 정의된 HTML 구조에 얽매이지 않도록 유지. LLM이 해당 장면의 은유에 가장 적합한 패턴을 선택하도록 허용.
- 각 장면에 대해 1개의 서브 에이전트가
- (Phase 3e)
scaffold_project.py실행 (sfx, 로고, 아바타 이미지, yt-lower-third 복사).generate_root_index.py실행 →index.html.index.html은 모든scene-N.html파일, broll 레이어, 캡션(존재하는 경우), yt-lower-third, SFX, 브랜드 마크를 1920×1080 캔버스에 마운트합니다.- 캡션 HTML 생성 (
captions.html.j2+captions.json이 우선, 없으면voiceover_segments.json폴백).generate_root_index.py의--no-captions플래그로 비활성화.
Step 5 — 미리보기 및 렌더링 (Phase 3f)
npx hyperframes studio실행 →http://localhost:3002에서 미리보기.- 사용자가 최종 비디오를 확인하고 "render" 명령 실행.
npx hyperframes render→out.mp41920×1080.
환경 변수
| 변수명 | 설명 | 기본값 |
|---|---|---|
ELEVENLABS_API_KEY | ElevenLabs TTS API 키 | — |
ELEVENLABS_VOICE_ID | 음성 ID | 21m00Tcm4TlvDq8ikWAM |
HEYGEN_API_KEY | HeyGen API 키 | — |
HEYGEN_AVATAR_LOOKS | 쉼표로 구분된 아바타 ID 목록 | — |
OPENAI_API_KEY | GPT-4o (서브 에이전트, 전사) 또는 Whisper API용 | — |
ANTHROPIC_API_KEY | Claude 3.5 Sonnet (선호되는 서브 에이전트 모델) | — |
참조
references/ 디렉토리에는 다음이 포함됩니다:
composition-patterns.md— Gigaverse/HyperFrames 패턴 예시 (hub-and-spokes, before-after, terminal-mock 등)slide-design-tokens.md— 브랜드별 디자인 토큰 (색상, 그림자, 타이포그래피)infographic-prompt-template.md— LLM이prompts.md를 생성하기 위한 프롬프트 템플릿
assets/ 디렉토리에는 다음이 포함됩니다:
logos/— 브랜드 로고 PNG (claude.png, chatgpt.png, gemini.jpg, claude-code.png)default_avatar.jpg— 아바타 플레이스홀더yt-lower-third.html— YT 구독 컴포지션 템플릿captions.html.j2— 캡션 Jinja2 템플릿