vibe-video — AI 기반 숏 비디오 생성기 (코드 → MP4)
어떤 아이디어든 코드만으로 짧고 분위기 있는 비디오로 만듭니다. AI가 Canvas/JS 애니메이션을 작성하고, 프레임별로 렌더링한 후 선택적 BGM과 함께 MP4로 합성합니다.
사용 시기
사용자가 다음 유형의 짧은 비디오(15초~60초)를 만들고자 할 때 이 스킬을 사용하세요:
- 지식 설명 — 노벨상 사실, 과학 원리, 심리학 인사이트
- 감정 은유 — 집착, 불안, 이별, 기억
- 제품 홍보 — 앱 기능, 브랜드 스토리, 출시 발표
- 사회적 관찰 — 행동 패턴, 문화 현상
- 추상 개념 아트 — 순수 시각 시, 루프 애니메이션
워크플로우 (5단계, 건너뛰지 마세요)
1단계: 명확화 (최대 3개 질문)
사용자와 다음 사항을 확인하세요:
- 재생 시간 — 15초 / 30초 / 45초 / 60초 (기본 30초)
- 화면 비율 — 9:16 (세로) / 16:9 (가로) / 1:1 (정사각형) (기본 9:16)
- 스타일 —
style-presets.md의 스타일 프리셋 참조 - 주제 및 감정 곡선 — 핵심 메시지는 무엇인가요? 어떤 느낌을 남겨야 하나요?
2단계: 스토리보드 출력
코드를 작성하기 전에 스토리보드 테이블을 생성합니다:
| 시간 | 시각적 설명 | 캡션 (20자 이하) | 시각/오디오 큐 |
|------|--------------------|---------------------|-------------------|
| 0-3초 | ... | ... | ... |
규칙:
- 각 캡션은 2초 이상 유지, 핵심 결론은 3초 이상
- 처음 3초에 후크(역직관적 사실 / 감정적 오프너 / 핵심 고통점) 배치
- 총 5~8개 샷, 템포는 느림→빠름→느림
- 시각적 설명에는 형태, 색상, 움직임 방향, 카메라 움직임을 명시
진행 전 사용자 확인을 기다리세요. 변경 요청 시 지정된 샷만 수정합니다. 3개 이상의 샷이 변경되면 전체 스토리보드를 다시 출력합니다.
3단계: 렌더링 코드 작성
assets/templates/animation.js + animation.html을 시작점으로 복사하세요 — 레이어 시스템, 캡션 페이드, 시드 기반 PRNG 배경, window.seek(t) 계약을 구현하며 라이브 브라우저 미리보기가 포함되어 있습니다. STORYBOARD와 draw*() 함수를 편집하세요.
전체 기술 사양은 rendering-guide.md를 참조하세요. 빠른 참조:
// 시간 기반 애니메이션 — 모든 시각 요소는 t의 순수 함수
// (Math.random(), Date.now() 사용 금지 — 필요한 경우 시드 기반 PRNG 사용,
// 스틸 및 재개된 렌더링에서 모든 프레임이 동일하게 다시 렌더링되도록)
function seek(t) {
// t = 현재 시간 (초)
// 이 프레임의 시각적 상태 반환
// 위치/불투명도/크기에 선형 보간 사용
}
// 레이어 시스템
// 레이어 0: 배경 (그라데이션 / 입자)
// 레이어 1: 주요 대상
// 레이어 2: 동적 장식 (빛 실 / 입자 / 선)
// 레이어 3: 캡션 오버레이
// 내보내기
// Playwright 헤드리스 → 각 프레임 스크린샷 → ffmpeg 합성
3.5단계: 스토리보드 → H3 프롬프트 (사전 점검)
확인된 스토리보드와 렌더링 코드 첫 줄 사이에 이 단계를 삽입하세요. 스토리보드는 사람을 위해 작성되며, H3는 다른 문법이 필요합니다. 미리 번역하지 않으면 이 파이프라인에서 고칠 수 없는 유일한 실수(온모델 상태를 유지해야 하는 캐릭터를 다시 그리는 AI 샷)가 발생합니다.
# 먼저 린트: 타임라인 간격, H3 윈도우(4~15초), 엔진 할당, 크레딧 추정
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
그런 다음, H3 샷별로 6개 섹션 프롬프트 블록을 생성하고 해당 카메라 번호와 컷 마크를 애니메이션 코드에 다시 복사하여 두 레이어가 함께 움직이도록 합니다.
전체 절차, 필드 규칙, 체크리스트 및 린트 테이블: storyboard-to-h3.md.
4단계: 렌더링 및 합성
먼저 스틸 미리보기 — 한 프레임 확인은 약 1초가 걸리지만 전체 렌더링은 몇 분이 걸립니다:
# t=0 / 4 / 10초에서 룩-체크 (설치된 Edge 또는 Chrome 자동 사용)
node assets/templates/still.js --html animation.html --times 0,4,10
# 프레임 렌더링 (12~15fps면 보통 충분, 부드러운 움직임은 24~30이 좋음)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# 합성 (PATH에 없으면 FFMPEG=/path/to/ffmpeg 설정)
bash assets/templates/composite.sh ./frames output.mp4 30
# BGM 포함
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# 하이브리드: AI 분위기 플레이트 위에 Canvas 레이어 (투명 프레임, 키잉 불필요)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Windows 주의: bash composite.sh가 제대로 작동하지 않으면(Git Bash shim / PATH 손상), child_process.spawn을 사용하여 Node에서 직접 ffmpeg를 실행하세요 — rendering-guide.md 문제 해결 참조.
레거시 수동 명령:
# 프레임 렌더링
node render.js # frames/frame_0001.png ... 출력
# ffmpeg로 합성
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# BGM 포함
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
5단계: 전달
전달: MP4 파일 + 스토리보드 + 소스 코드. 파일 크기 목표: 30초 기준 50MB 미만.
이 스킬의 파일
| 파일 | 목적 |
|---|---|
SKILL.md | 이 파일 — 주요 스킬 정의 |
style-presets.md | 색상 팔레트와 렌더링 팁이 포함된 6가지 시각적 스타일 프리셋 |
rendering-guide.md | 기술 사양: Canvas 렌더링, 이징, 결정론 규칙, 문제 해결 |
metaphor-library.md | 추상 개념을 위한 시각적 은유 매핑 |
caption-guide.md | 캡션 타이포그래피, 타이밍 및 톤 규칙 |
bgm-guide.md | 비디오 유형별 BGM 선택 가이드 |
storyboard-to-h3.md | 사전 점검: 코드 작성 전 스토리보드 린트 + H3 6섹션 프롬프트 블록 |
../assets/templates/lint-storyboard.js | 스토리보드 린터: 타임라인 간격, H3 4~15초 윈도우, 엔진 할당, 크레딧 추정 |
../assets/templates/animation.js + animation.html | 즉시 편집 가능한 스캐폴드 (레이어, 캡션, 시드 배경, 라이브 미리보기) |
../assets/templates/render-playwright.js | 프레임 렌더러: 브라우저 자동 감지(Edge/Chrome/chromium), 페인트 동기화 스크린샷 |
../assets/templates/still.js | 저렴한 룩-체크를 위한 단일 프레임 스틸 렌더러 |
../assets/templates/composite.sh | ffmpeg 합성기 (비디오 / 비디오+BGM, FFMPEG= 재정의) |
../assets/templates/render-template.js | Node-canvas 변형 (브라우저 불필요; 제한된 CSS/폰트) |
예제 프롬프트
지식 설명
양파를 썰면 눈물이 나는 이유에 대한 30초 16:9 지식 비디오를 만들어 줘.
스타일: tech-blueprint. 곡선: 현상 → 메커니즘 → 해결책.
감정 은유
소유욕에 대한 30초 9:16 감정 비디오를 만들어 줘.
스타일: soft-glow. 시각적 은유: 빛 실이 감쌈 → 느슨해짐 → 반딧불.
제품 홍보
집중 앱을 위한 15초 9:16 제품 홍보 비디오를 만들어 줘.
스타일: minimal-line. 곡선: 고통점 → 해결책 → 결과.
라이선스
MIT — LICENSE 파일 참조. 개인 및 상업적 용도로 무료입니다.