Revideo 렌더링 개요

Revideo에서 영상을 mp4로 출력하는 렌더링 파이프라인의 전체 그림을 다룬다. Revideo는 Motion Canvas의 renderer-architecture를 답습하면서 동시에 헤드리스(headless) 렌더 API를 제공해 서버나 CLI에서 직접 영상을 합성할 수 있게 해준다.

🎬 렌더링이 뭔가 — Motion Canvas와의 차이

항목	Motion Canvas (디버그/편집)	Revideo (실제 렌더)
실행 환경	브라우저 + Vite dev server	헤드리스 Chromium + FFmpeg
목적	코드 변경 즉시 미리보기	최종 mp4 출력
속도	실시간(60fps)	보통 0.5x ~ 2x (오프라인)
출력	화면 표시	파일 저장 또는 HTTP 응답
API	`player.render()`	`renderVideo()` (CLI + 라이브러리)

Revideo는 Motion Canvas와 동일한 Scene 정의를 그대로 렌더에 재사용한다. 별도 렌더 스크립트 작성 불필요.

🧱 렌더링 파이프라인 단계

Revideo 렌더는 다음 5단계를 거친다:

프로젝트 로드 — src/project.ts에서 Scene 목록과 변수(variables) 로드
헤드리스 Chromium 부팅 — Puppeteer/Playwright로 브라우저 인스턴스 띄움
타임라인 실행 — yield* generate... 흐름을 frame-by-frame으로 평가
프레임 캡처 — 각 frame을 PNG/WebP 시퀀스로 추출
FFmpeg 인코딩 — 시퀀스를 mp4로 mux, 오디오 트랙 합성

import {renderVideo} from '@revideo/core/render';

await renderVideo({
  projectFile: './src/project.ts',
  settings: {
    outFile: 'out/video.mp4',
    fps: 30,
    size: [1280, 720],
  },
});

🖥️ 두 가지 진입점

진입점	용도	위치
CLI (`npx revideo render`)	로컬 개발, 한 번 렌더	터미널
Node API (`renderVideo()`)	서버, SaaS 파이프라인	코드 내부

두 진입점 모두 동일한 src/project.ts를 사용하므로 로컬에서 만든 결과물이 서버에서도 그대로 재현된다.

🔑 핵심 옵션

옵션	기본값	설명
`projectFile`	필수	`makeProject`를 export하는 진입점
`outFile`	`out/video.mp4`	결과물 경로
`fps`	30	프레임 레이트
`size`	`[1920, 1080]`	해상도 (가로, 세로)
`variables`	`{}`	`project.ts`의 `variables`에 주입할 값
`progressCallback`	—	진행률(0~1) 보고 — UX 표시용
`signal`	—	AbortSignal — 취소 가능

await renderVideo({
  projectFile: './src/project.ts',
  settings: {outFile: 'out/promo.mp4', size: [1080, 1920]},  // 세로 9:16
  variables: {userName: '김철수', plan: 'pro'},
  progressCallback: (p) => console.log(`${(p * 100).toFixed(0)}%`),
});

⚙️ 시스템 의존성

의존성	용도	설치
FFmpeg	mp4 mux, 오디오 인코딩	Revideo CLI가 자동 설치 시도
Chromium	헤드리스 브라우저	Puppeteer가 자동 다운로드
GPU/CPU	인코딩 가속 (선택)	`--hardwareAcceleration=nvenc` 등

⚠️ FFmpeg 미설치 시 렌더는 시작조차 안 된다. macOS는 brew install ffmpeg, Ubuntu는 sudo apt install ffmpeg. 자세한 트러블슈팅은 Revideo FFmpeg Issues 참고.

🚀 다음 단계

작업	가이드
로컬에서 한 번 렌더	Revideo CLI 로컬 개발
서버에 렌더 서비스 배포	Revideo 렌더링 서비스 배포
렌더 시간 최적화	Revideo 성능 & 최적화

🔗 공식 리소스

공식 문서: https://midrender.com/revideo/docs/guide/rendering-videos
GitHub: https://github.com/midrender/revideo
렌더 트러블슈팅: https://midrender.com/revideo/docs/common-issues

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

변경 이력

날짜	변경
2026-07-29	초안 작성 — Rendering Videos 개요 한글화 + 핵심 옵션 표