Remotion 데이터 드리븐 비디오 — API/DB 데이터로 비디오 자동 생성
calculateMetadata + delayRender로 외부 데이터를 안전하게 비디오에 주입하는 패턴
Remotion의 가장 강력한 활용은 데이터 기반 비디오 생성입니다.
calculateMetadata: Composition의 props를 기반으로 렌더링 전에 비동기 데이터를 fetch합니다. API 호출 결과에 따라 비디오 길이(durationInFrames)를 동적으로 결정할 수도 있습니다. 예: 뉴스 기사 수에 따라 비디오 길이가 달라지는 뉴스 요약 비디오.
getInputProps(): CLI나 Lambda에서 렌더링할 때 외부 데이터를 JSON으로 전달하는 방법입니다. npx remotion render --props='{"productId": 123}'처럼 사용합니다.
delayRender() / continueRender(): 컴포넌트 내부에서 비동기 작업(이미지 로드, API 호출)이 완료될 때까지 해당 프레임의 스크린샷을 지연시킵니다. 이 안전장치 없이는 이미지가 로드되기 전에 스크린샷이 찍혀 빈 프레임이 렌더링될 수 있습니다.
이 세 가지를 조합하면 "DB에서 상품 1000개를 읽어 각각 15초짜리 홍보 비디오를 자동 생성"같은 파이프라인이 가능해집니다.
동작 흐름
Composition에 calculateMetadata 함수를 연결하여 렌더링 전 API/DB에서 데이터 fetch
fetch 결과로 props와 durationInFrames를 동적으로 결정하여 반환
컴포넌트에서 delayRender()를 호출하여 비동기 리소스(이미지, 폰트) 로딩 시작
리소스 로딩 완료 후 continueRender()를 호출하여 프레임 스크린샷 허용
CLI에서 --props로 JSON 데이터를 주입하거나, Lambda에서 inputProps로 전달하여 대량 렌더링
장점
- ✓ 완전 자동화: 데이터만 바뀌면 비디오가 자동으로 갱신
- ✓ 대량 생성: 1000개 상품 = 1000개 비디오, 수작업 불필요
- ✓ delayRender로 비동기 안전성 보장 → 프로덕션에서 빈 프레임 사고 방지
단점
- ✗ 외부 API 의존: API 다운/변경 시 렌더링 실패 → 에러 핸들링 필수
- ✗ delayRender 타임아웃: 30초 내 continueRender가 호출되지 않으면 렌더링 중단