Remotion Composition — 비디오의 구조를 설계하는 방법
Composition, Sequence, Series로 장면을 조합하는 선언적 비디오 구조화
Remotion의 비디오 구조는 3개의 핵심 개념으로 이루어집니다.
Composition: 하나의 완성된 비디오를 정의합니다. fps, 해상도(width/height), 총 길이(durationInFrames)를 지정하고, 어떤 React 컴포넌트를 렌더링할지 결정합니다. 하나의 프로젝트에 여러 Composition을 등록하면 여러 비디오를 한 프로젝트에서 관리할 수 있습니다.
Sequence: 비디오 타임라인의 특정 구간을 담당합니다. from prop으로 시작 프레임을 지정하면, 자식 컴포넌트는 Sequence 시작점을 frame 0으로 인식합니다. 이 "로컬 타임" 개념 덕분에 장면을 독립적으로 개발한 뒤 자유롭게 배치할 수 있습니다.
Series: 여러 Sequence를 순차적으로 배치하는 편의 컴포넌트입니다. 수동으로 from 값을 계산할 필요 없이, 각 장면의 duration만 지정하면 자동으로 이어붙여줍니다.
동작 흐름
Root.tsx에서 registerRoot()로 프로젝트 진입점 등록
<Composition>으로 비디오 메타데이터(fps, width, height, durationInFrames) + 컴포넌트 정의
<Sequence from={60}>으로 장면별 시작 위치 지정 → 자식은 로컬 frame 0부터 시작
<Series>로 여러 장면을 순차 배치: <Series.Sequence durationInFrames={90}>씩 이어붙임
Remotion Studio에서 각 Composition을 개별 탭으로 미리보기 및 렌더링
장점
- ✓ 로컬 타임: Sequence 내부 컴포넌트가 독립적 frame 0 기준 → 장면 순서 변경이 자유
- ✓ 다중 비디오 관리: 한 프로젝트에서 여러 포맷/버전을 Composition으로 관리
- ✓ React 컴포넌트 재사용: 장면을 컴포넌트로 만들어 여러 비디오에서 재사용
단점
- ✗ durationInFrames 계산: fps와 원하는 초 수를 곱해야 하므로 직관적이지 않을 수 있음
- ✗ 중첩 Sequence의 타임 계산이 복잡해질 수 있음