🎬
Remotion — React로 비디오를 만드는 프레임워크
JSX 컴포넌트가 곧 비디오 프레임이 되는 프로그래매틱 비디오 생성
Remotion은 2021년 Jonny Burger가 만든 오픈소스 프로젝트로, React 생태계의 컴포넌트 기반 사고방식을 비디오 제작에 그대로 적용합니다.
핵심 아이디어는 단순합니다: 시간(frame)을 props로 받는 React 컴포넌트가 곧 비디오입니다. 30fps 비디오에서 frame 0~29가 첫 1초, 30~59가 두 번째 1초... 이런 식으로 각 프레임을 React로 렌더링한 뒤 FFmpeg로 인코딩합니다.
기존 비디오 편집 도구(Premiere, After Effects)와의 결정적 차이는 프로그래매틱 제어입니다. 데이터베이스에서 1000개 상품 정보를 읽어 1000개 홍보 비디오를 자동 생성하거나, API 응답에 따라 비디오 내용을 동적으로 바꾸는 것이 자연스럽습니다.
TypeScript/React 개발자라면 새로운 도구를 배울 필요 없이 기존 스킬셋으로 바로 비디오를 만들 수 있다는 점이 가장 큰 장점입니다.
동작 흐름
1
React 컴포넌트를 작성하고 useCurrentFrame()으로 현재 프레임 번호를 받음
2
프레임 번호에 따라 위치, 투명도, 크기 등 스타일을 계산 → 애니메이션 표현
3
Remotion Studio(localhost:3000)에서 실시간 미리보기 + 타임라인 스크럽
4
npx remotion render로 각 프레임을 Headless Chrome에서 스크린샷 → FFmpeg로 MP4 인코딩
장점
- ✓ React 생태계 그대로 활용: npm 패키지, 컴포넌트 라이브러리, TypeScript 타입 안전성
- ✓ Git 버전 관리: 비디오 프로젝트를 코드로 관리하므로 diff, PR 리뷰, 롤백 가능
- ✓ 무한 확장: Lambda로 수천 개 비디오를 병렬 렌더링 가능
- ✓ 실시간 미리보기: Remotion Studio에서 HMR로 즉시 변경 확인
단점
- ✗ 학습 비용: React를 모르면 진입 장벽이 높음
- ✗ 렌더링 속도: 프레임마다 Headless Chrome 스크린샷 → 1분 비디오에 수 분 소요
- ✗ 라이선스: 기업용 기능(Lambda 등)은 유료 라이선스 필요
- ✗ 실사 영상 편집에는 부적합: 프로그래매틱 그래픽/모션에 특화
사용 사례
SaaS 제품에 비디오 생성 기능 내장 (사용자가 템플릿 선택 → 비디오 자동 생성)
데이터 기반 대량 비디오: 상품 카탈로그 → 상품별 홍보 비디오 1000개 자동 생성
GitHub Actions/CI에서 릴리즈 노트 비디오 자동 생성
소셜미디어 콘텐츠: 매일 주가 요약, 날씨 리포트 등 반복 비디오 자동화
교육 콘텐츠: 수학 공식 시각화, 알고리즘 설명 애니메이션