프로젝트 개요
"부동산 불로소득 공화국 탈출 선언"을 주제로 Claude AI가 기획부터 렌더링까지 전 과정을 자동화해 제작한 Full HD MP4 영상 프로젝트입니다.
- 산출물: 1920×1080 / 66초 / 3.6MB MP4 영상 + 나레이션
- 제작 방식: 코드 한 줄 없이 AI 에이전트(Claude)가 기획~렌더링 전 과정 자동화
- 소요 시간: 아이디어 입력 → 완성 MP4 출력까지 약 10분
완성 영상
제작 파이프라인
씬 구성
| 씬 | 시간 구간 | 핵심 콘텐츠 | 주요 애니메이션 |
|---|---|---|---|
| S1 | 0 ~ 12s | 커버 — 제목·태그·부제 | scale·x-slide·cursor blink |
| S2 | 12 ~ 25s | 배경 — 문제 구조 설명 | x-slide·y-fade·scaleX |
| S3 | 25 ~ 37s | 대통령 발언 — Callout | y-rise·quote fade |
| S4 | 37 ~ 50s | 핵심 수치 — 카드 3장 | back.out(1.5) stagger |
| S5 | 50 ~ 66s | 전망 — 정책 방향 불릿 | x-slide stagger·fade-out |
핵심 기술 요소
HTML = 영상의 소스코드
<!-- HyperFrames 씬 클립 구조 -->
<div id="s1" class="scene clip"
data-start="0" data-duration="13" data-track-index="1">
<!-- Notion 스타일 콘텐츠 -->
</div>
<!-- 나레이션 오디오 병합 -->
<audio
id="narration"
src="narration.mp3"
data-start="0"
data-duration="65.16"
data-track-index="0"
data-volume="1"
></audio>
GSAP 결정론적 타임라인
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// HyperFrames가 seek/play를 완전 제어
tl.from("#s1-title", { x: -40, opacity: 0, duration: 0.7, ease: "expo.out" }, 1.35);
tl.from("#s4-c1", { y: 44, opacity: 0, duration: 0.55, ease: "back.out(1.5)" }, 38.5);
window.__timelines["main"] = tl;
ElevenLabs TTS API
curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/{voice_id}" \
-H "xi-api-key: {API_KEY}" \
-d '{
"model_id": "eleven_multilingual_v2",
"voice_settings": { "stability": 0.5, "similarity_boost": 0.75 }
}' --output narration.mp3
MP4 렌더링
npx hyperframes render --output realestate-narration.mp4
# → 6 workers · GPU WebGL · 1,980 frames · 47.9s → 3.6MB MP4
기술 스택
| 구분 | 기술 |
|---|---|
| AI 오케스트레이션 | Claude (Anthropic) — 기획/코딩/디버깅/품질검증 전 자동화 |
| 음성 합성 | ElevenLabs TTS API (eleven_multilingual_v2) |
| 영상 제작 | HyperFrames (HTML→MP4), GSAP 3.14.2 |
| 렌더링 엔진 | Headless Chrome (CDP), FFmpeg |
| 정보 수집 | Web Search API (실시간 뉴스) |
| 마크업 | HTML5, CSS3, Noto Sans KR |
이 프로젝트의 의미
"HTML이 영상의 소스코드다"
기존 영상 제작은 Premiere Pro / After Effects 등 GUI 툴에 의존합니다. 이 프로젝트는 HTML + CSS + JS를 영상 소스코드로 사용함으로써 버전 관리, 재사용, 파라미터화, 자동화가 모두 가능한 새로운 콘텐츠 제작 패러다임을 증명합니다.
data-variable-values 속성으로 제목·색상·수치를 파라미터화하면 동일 템플릿에서 수십 개 변형 영상을 자동 배치 생산하는 것도 가능합니다.