애니메이션 비디오
여기의 모든 것은 remotion/에서 제로 크레딧으로 렌더링됩니다. 두 가지 수준 — 항상 수준 1을 먼저 시도하세요:
- 내장 장면을 사양으로 구성 (코드 없이, 몇 분).
- 아이디어가 정말 필요할 때 엔진에 새 장면 유형 추가 (코드 작성, 테스트, 이후 모든 에이전트가 재사용 가능).
로컬에서 렌더링하기 전: remotion/node_modules가 없으면 cd remotion && npm ci 실행
(첫 번째 렌더링은 Remotion의 헤드리스 Chrome(~170MB)도 다운로드하며, 한 번만 수행).
수준 1 — 장면 키트
장면 (shots[].type) | 적합한 용도 | 주요 필드 |
|---|---|---|
kinetic | 후크, 펀치라인 | text, highlight, per_word (0.18) — 단어가 하나씩 나타남 |
title | 단일 굵은 줄 | text ≤ 6단어, highlight |
number | 한 가지 눈에 띄는 수치 | value, prefix, suffix, decimals, caption, color — 숫자가 올라감 |
bars | 크기 비교 | title, unit, items[{label,value,color}] |
compare | 우리 vs 그들, 신화 vs 사실, 전후 | title, left{label,items,color}, right{…} |
list | '3가지', 해야 할 것/하지 말아야 할 것 | items, style tick/cross/number |
timeline | 일어난 과정 | items[{year,text}] |
chat | 문자로 전달하는 스토리 | title (연락처), messages[{from: me/them, text, at}] |
quote | 출처가 있는 문장 | text, by |
media | B-roll, 사진, AI 클립 | src, kenburns, headline, fit |
모든 장면은 label(킥커), stamp(고무 도장 숫자), bg(뒤에 흐릿한 사진/비디오, credit 포함), transition(fade 기본, cut, slide, zoom, wipe)을 사용합니다. 오버레이(headline, textover, lowerthird, stamp)는 모든 장면 위에 배치됩니다. 전체 참조: remotion/SPEC.md.
모든 새 장면의 작업 예제: remotion/examples/animated.json.
레시피
- 얼굴 없는 설명 영상 (20~40초):
kinetic후크 →number→bars/compare→list→ 후크를 반영하는title마무리. 내레이션을audio로, 자막을words에서 가져오고, 0.08~0.12 볼륨의 조용한music배경 음악. - 문자 메시지 스토리:
kinetic후크("그녀가 새벽 3시에 답장했다") → 교환당 하나의chat장면(at간격 0.8~1.4초, 내레이션에 맞춤) → 반전이 있는title. 각 버블은 10단어 이하로 유지. - 말하는 비디오에 애니메이션 삽입: CLIP_1 … 해당 문장이 나오는 박자에
number또는compare를 2~3초 동안 표시(transition: "zoom") … 클립이 재개되어야 하는start가 설정된 CLIP_1으로 복귀. - 신화 vs 사실:
left.color: "danger",right.color: "good"인compare, 그런 다음 다음title에stamp"FALSE" 표시.
video-script(tools/beats.mjs가 음성에 맞게 장면 타이밍 조정)로 비트를 계획한 다음:
cd remotion
node render.mjs job/spec.json --validate
node render.mjs job/spec.json job/final.mp4 --preview job/check.jpg --at 0.1,<각 장면 중간>,<끝-1>
전달하기 전에 항상 미리보기 스트립을 확인하세요: 후크가 0.1초에 완전히 그려져 있는지, 가장자리가 잘리지 않았는지, 텍스트가 겹치지 않는지, 강조 색상이 읽기 쉬운지, AI 생성 태그와 워터마크가 있는지 확인.
스타일 규칙
- 브랜드는
settings.brand(사양theme)에서 가져옵니다: 각 장면에서 중요한 하나의 항목에 사용되는 단일 악센트 색상. - 헤드라인은 7단어 이하, 텍스트 오버는 12단어 이하, 목록/비교 열은 4개 항목 이하(휴대폰 화면이 작기 때문).
- 장면은 텍스트 한 줄당 최소 1.5초 동안 유지.
- 숫자는
citations와 일치해야 함; 출처가 없는 수치는 절대 애니메이션으로 만들지 마세요. - 브랜드 로고, 실제 인물 사진, 실제 채팅 스크린샷은 금지.
수준 2 - 새 장면 유형
위의 조합으로 아이디어를 표현할 수 없을 때만 사용 (예: 지도 경로, 진행 링, 분할 화면 반응).
src/types.ts:XShot = ShotBase & { type: "x"; … }를 추가하고Shot유니온에 추가.src/shots/Shots.tsx: 다른 컴포넌트 옆에 컴포넌트를 작성 —useCurrentFrame()에서spring/interpolate로 애니메이션(CSS 애니메이션이나Math.random사용 금지: 렌더링은 결정적이어야 함),t.font,t.accent,tone(t, color)사용, 1080×1920 크기로, 그런 다음ShotView에if (s.type === "x") body = …줄 추가. 0초(base === 0)에 화면에 표시되는 경우 입장 애니메이션 없이 완전히 그립니다.render.mjs:types에"x"를 추가하고 필수 필드에 대한 유효성 검사 추가(검사 에이전트가 이 메시지에 의존).SPEC.md+ 위 표: 문서화.examples/animated.json에 추가.- 테스트:
npx tsc --noEmit -p .,node render.mjs examples/animated.json out/animated.mp4 --preview out/animated.jpg --at …실행하고 확인.