Remotion Rendering Overview

Remotion의 렌더링 모델을 한 페이지에 정리한다. 컴포지션을 mp4/mov/gif 같은 실제 영상 파일로 출력하는 모든 방법의 큰 그림을 먼저 잡자.

🏗️ 렌더링 파이프라인

[ Remotion 컴포지션 ] 
        ↓
[ 번들링 (Webpack/Vite) ] — 모든 React 코드를 단일 JS 번들로
        ↓
[ Headless Chrome/Chromium ] — 각 프레임을 PNG로 캡처
        ↓
[ FFmpeg ] — PNG 시퀀스를 영상 컨테이너로 인코딩
        ↓
[ mp4 / mov / gif / webm ]

이 세 단계를 Remotion은 자동 오케스트레이션한다.

🎯 렌더링 방법 선택

방법	적합
CLI (`npx remotion render`)	로컬에서 1개~수십 개 영상
Server-side (`@remotion/renderer`)	Node API로 자동화·대량 처리
Client-side (`@remotion/renderer` Web)	브라우저에서 직접 렌더 (사용자 측)
Lambda	AWS Lambda 기반 pay-per-render, 대량 동시성
Cloud Run / Azure / Vercel	다른 클라우드 호스팅 옵션

📌 SSR (Server-side) ≠ Client-side: SSR은 Node에서, Client-side는 브라우저에서 실행

📦 번들 (Bundle)

Remotion은 렌더링 전에 Remotion 프로젝트 전체를 하나의 JS 번들로 빌드한다. 이 번들은:

src/index.ts의 <Composition> 등록 코드를 포함
staticFile()로 참조한 public/ 자산 포함
React, Remotion, 모든 의존성 포함

번들은 보통 out/ 디렉터리에 생성되며, 헤드리스 Chrome이 이 번들을 로드해 프레임을 캡처한다.

🔢 핵심 개념

개념	설명
Concurrency	동시에 실행되는 렌더링 작업 수
Bundle	빌드된 단일 JS 아티팩트
Serve URL	번들에 접근할 수 있는 URL (로컬 서버 / S3 / Lambda)
Composition ID	`<Composition id="...">`에 지정한 고유 ID
Output	mp4 / mov / png 시퀀스 / gif / webm / audio
Codec	h264 / h265 / vp8 / vp9 / prores 등

🧪 가장 단순한 렌더링 (CLI)

npx remotion render src/index.ts MyComp out.mp4

인자	의미
`src/index.ts`	엔트리 포인트
`MyComp`	컴포지션 ID
`out.mp4`	출력 파일 경로

🛠️ 추가 옵션 (주요)

옵션	설명
`--props=...`	JSON props 주입
`--concurrency=4`	동시 렌더 작업 수 (CPU 코어에 맞춰)
`--codec=h264`	비디오 코덱
`--crf=18`	품질 (낮을수록 고품질, 기본 18)
`--pixel-format=yuv420p`	픽셀 포맷
`--frames=0-100`	일부 프레임만 렌더
`--every-nth-frame=2`	2배속 렌더 (프레임 건너뜀)
`--browser-executable=`	커스텀 Chrome 경로

자세한 옵션: https://www.remotion.dev/docs/cli/render

📚 영역 구분

로컬 실행: Remotion CLI Render
Node API: Remotion Server-side Rendering (SSR)
브라우저 실행: Remotion Client-side Rendering
대량·동시성: Remotion Lambda
클라우드 호스팅: Remotion Cloud Hosting

상위 문서: ← Remotion 렌더링 출처: Remotion 공식 문서 — Rendering 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Rendering 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동