Remotion Video Pro
범위
이 스킬은 Remotion을 사용한 프로그래매틱 비디오 제작에 필요한 모든 것을 담당합니다:
- 프로젝트 스캐폴딩 및 컴포지션 아키텍처
- 프레임 기반 애니메이션 수학 (interpolate, spring, measureSpring)
- 시간적 디자인 사고 (세이프 영역, 후크 윈도우, 타이밍)
- 오디오 동기화 (음성 해설, 자막, 비트 감지)
- 시각 디자인 시스템 (타이포그래피, 색상, 모션 원칙)
- 성능 최적화 (메모이제이션, OffthreadVideo, 번들 크기)
- 렌더링 파이프라인 (Lambda, CloudRun, CI/CD)
- 웹훅 기반 데이터 비디오 (CRM → 큐 → Lambda → S3)
- 대규모 배치 렌더링 (10,000개 이상의 개인화된 동영상)
- 컴포지션 검증 (pre-commit 훅, CI 게이트)
빠른 참조
| 문제 | 로드 규칙 |
|---|---|
| 프로젝트 설정, Zod 스키마, 컴포지션 구조 | 01-scaffolding.md |
| interpolate, spring, 전환, 타이밍 | 02-animation-physics.md |
| 모바일 세이프 영역, 프레임 타이밍, 반응형 레이아웃 | 03-temporal-design.md |
| 음성 해설 동기화, 자막, 비트 감지, 스펙트럼 | 04-audio-sync.md |
| 타이포그래피, 색상, 금지 패턴, 모션 원칙 | 05-anti-slop-aesthetics.md |
| 느린 렌더링, 메모이제이션, 번들 크기, Lambda | 06-performance.md |
| 소셜, 데모, 설명 영상용 사전 제작 프롬프트 | 07-prompt-templates.md |
| CI/CD, Lambda, CloudRun, 스냅샷 테스트 | 08-rendering-pipeline.md |
| CRM 웹훅 → Lambda → S3 파이프라인 | 09-webhook-integration.md |
| 대량 렌더 팬아웃, /api/render/batch | 10-batch-rendering.md |
| Pre-commit 훅, CI 게이트, 컴포지션 린팅 | 11-validation-pipeline.md |
황금 규칙
- 프레임이 왕이다. 모든 애니메이션은
useCurrentFrame()에서 파생됩니다. CSS 애니메이션, 타이머는 사용하지 않습니다. - 결정론만 허용된다.
Math.random()을 사용하지 않습니다. 대신 Remotion의random(seed)를 사용합니다. - Spring > Linear. 모션에는 기본적으로
spring()을 사용합니다. Linear는 로봇처럼 느껴집니다. - 모든 입력 비디오는 OffthreadVideo를 사용한다. MP4 입력에는 절대
<Video>를 사용하지 않습니다. - 비동기 데이터는 반드시 렌더를 게이트해야 한다. 폰트, 데이터, 외부 에셋에는
delayRender()/continueRender()를 사용합니다. - 모든 컴포지션에 Zod를 사용한다. 런타임 검증은 잘못된 props로 인한 렌더 크래시를 방지합니다.
- 모든 장면에 React.memo를 적용한다. 불필요한 리렌더링은 Lambda에서 렌더 시간과 비용을 증가시킵니다.
- 커밋 전에 검증한다. Pre-commit 훅은 7가지 대죄를 모두 잡아냅니다. 절대 비활성화하지 마세요.
- 배포 전에 테스트한다. 테스트 하네스는 Lambda 사이트 생성 전에 실행됩니다. 깨진 컴포지션은 Lambda에 도달하지 않습니다.
- 비디오는 데이터베이스 행이다. 대규모 개인화된 비디오는 렌더를 데이터 파이프라인 출력으로 취급하는 것을 의미합니다.
- 안티-슬롭 아니면 안 된다. 기본 Inter, 보라색 그라데이션, 이모지 아이콘은 금지입니다. 절대 안 됩니다.
- 컴포지션 버전을 관리한다. v2를 배포하고, 테스트하고, 활성화합니다. 오래된 웹훅은 이전 버전을 렌더링합니다. 프로덕션을 절대 깨지 마세요.
결정 트리
비디오를 제작하시겠습니까?
├── 소셜 숏폼 (TikTok/Reels) → 03, 04, 05, 07 로드
├── 제품 데모 / 설명 영상 → 02, 03, 04, 05 로드
├── 대규모 개인화 → 06, 08, 09, 10 로드
├── CI/CD 파이프라인 → 08, 11 로드
└── 기본만 필요 → 01, 02, 06, 11 로드