비디오 디렉터은(는) 무엇을 하나요?
역할
AI 비디오 제작을 위한 지휘자 역할을 합니다. 당신(에이전트)은 각 비트에 무엇이 필요한지 결정하고, 이를 올바른 렌더링 엔진에 라우팅하고, 모든 것을 하나의 HyperFrames 구성으로 합성하며, frame.md를 통해 브랜드 일관성을 강제하고, 자체 검증한 후 MP4로 렌더링합니다.
이 스킬은 다중 엔진 비디오 합성을 위한 라우터이자 작업 참고 자료입니다. 해당 엔진이 사용될 때만 참조 파일을 로드하세요.
하나의 법칙 (모든 것을 결정)
HyperFrames는 헤드리스 Chrome에서 각 프레임을 seek하여 FFmpeg를 통해 렌더링합니다 (frameIndex = floor(t·fps), 동일한 입력 → 동일한 출력). 따라서 모든 시각 요소는 다음 두 가지 중 하나입니다:
| 패턴 | 실행 방식 | 엔진 | 규칙 |
|---|---|---|---|
| 실시간 seek 가능 어댑터 | 렌더 내부에서 실행되며, 프레임당 시간 t로 구동됨 | GSAP, Lottie (window.__hfLottie), Three.js, GSAP 프록시 onUpdate로 구동되는 캔버스 | 클록 기반이어야 함 — Date.now(), Math.random() (mulberry32 시드 사용), setTimeout 또는 .play() 사용 금지 |
| 사전 렌더링 에셋 | 오프라인에서 실행되어 파일을 출력한 후 클립으로 가져옴 | ManimCE (Python→MP4/알파), TTS 오디오, 배경 제거 | 먼저 렌더링한 다음 <video>/에셋 클립으로 배치 |
seek이 가능하면 어댑터입니다. 그렇지 않으면 사전 렌더링하세요. Manim은 항상 사전 렌더링된 클립입니다 — Python에서 실행되며 절대 실시간 어댑터가 될 수 없습니다.
각 비트를 엔진에 라우팅하기
"X를 티저/프로모션으로 설명 (빠르고, 강력하게)" → 참조/teaser-explainer.md
"개념/수학/알고리즘/애니메이션 설명" → ManimCE (사전 렌더링된 클립)
"브랜드 모션: 로고 스팅, 통계 공개, 아이콘 팝" → Lottie (실시간, lottie-web)
"움직이는 자막, 제목, 공개, 데이터 콜아웃" → GSAP (실시간) ← 기본값
"3D / 공간적" → Three.js (실시간)
음성 → 자막 → 트랜스크립션 + 승인 웹앱
음성 해설 없음 → TTS (Kokoro: npx hyperframes tts)
브랜드 색상/글꼴/모티프 → frame.md (먼저 적용)
GSAP은 텍스트/모션을 위한 신뢰할 수 있는 기본값입니다. 디자인된 브랜드 그래픽에는 Lottie, 아이디어를 애니메이션으로 설명할 때는 Manim을 사용하세요.
워크플로우
- 비트를 계획하세요. 내러티브 아크 + 각 비트에 필요한 엔진. 16:9 및/또는 9:16을 선택하세요.
- 브랜드를 설정하세요.
FRAME.md가 프로젝트 루트에 있는지 확인하세요. 모든 색상/글꼴/모티프는 여기서 가져옵니다 — 절대 임의로 만들지 마세요. 모든 비디오에는 세 가지 브랜드 앵커가 필요합니다: 공개 시 로고 + 종료 카드, 주요 Lottie 애니메이션, 링크 종료 카드 (로고 + CTA + URL). - 먼저 에셋 비트를 사전 렌더링하세요 (클립으로 존재하도록):
- Manim →
py -m manim render -qh --fps 30 scene.py SceneName, MP4를assets/로 복사하세요. - 자막/TTS → 트랜스크립션 → 승인 웹앱 → 동기화 후
npx hyperframes tts.
- Manim →
- 스캐폴딩 + 구성.
npx hyperframes init <slug> --non-interactive.index.html을 작성하세요. 다음을 사용하세요:- GSAP 프록시로 구동되는 seek 가능한 애니메이션 배경 (캔버스)
- 브랜드 모션 그래픽을 위한 Lottie
<video class="clip" muted playsinline>본문 클립으로 Manim 렌더- 장면별 GSAP 진입, 각 경계에서 플래시 전환, 마지막 장면에서만 페이드 아웃
- 티저/소셜 속도 (빠른 컷, 키네틱 워드 슬램, 훅 몽타주) 프레젠테이션이 아닌 프로듀서처럼 편집하세요
- 자체 검증 (게이트):
npx hyperframes lint(0 오류) →validate(0 콘솔 오류, WCAG AA) → 렌더링 → 타임라인에서 5프레임 스팟 체크. 수정 → 재실행. - 렌더링.
npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4. 세로형은 1080×1920 레이아웃으로 복제하세요.
전제 조건 (먼저 확인; 우아하게 저하)
Node 22+, FFmpeg, Python 3.11+ 및 pip (Manim/자막)이 필요합니다. ManimCE는 py -m pip install manim으로 설치됩니다 (Tex/MathTex() 대신 Text()/MarkupText()로 작성하면 LaTeX가 필요하지 않습니다). Manim을 사용할 수 없으면 → 수학 비트를 건너뛰거나 설치를 제안하세요. 절대 전체 비디오를 실패시키지 마세요.
동반 스킬
video-edit (트랜스크립션 + 승인 웹앱), page-load-animations (spring/framer-motion 패턴), marketing-video (Remotion 대체 파이프라인).
리소스
- 참조/teaser-explainer.md — 시네마틱 티저-설명자 공식
- 참조/composition-pattern.md — 전체 다중 엔진
index.html패턴 - 참조/manim.md — ManimCE 장면 작성 가이드
- 참조/lottie.md — HyperFrames용 Lottie 통합
- 참조/editing.md — 소셜 속도 및 편집 규칙
- 참조/cinematic.md — 심리적/FOMO 컷, 클리프행어 구조
출처: https://github.com/hoodini/ai-agents-skills yuv-video-director (MIT 라이선스) — 샷 라우팅 로직 및 엔진 결정 매트릭스를 추출 및 일반화함; 모든 개인 브랜드 참조 (YUV.AI, Neon Phoenix, Yuval Avidani) 제거됨.