Revideo 사용 가이드

Revideo는 Motion Canvas에서 포크된 오픈소스 TypeScript 비디오 프레임워크다. React 대신 TypeScript 제너레이터 함수로 영상을 정의하고, headless 렌더링 API로 서버에서 영상을 만들고, React Player로 브라우저에서 미리보게 해준다. 상업용 SaaS의 비디오 파이프라인을 만들 때 특히 강하다.

📌 프로젝트 상태 (2026-07 기준)

Revideo는 현재 Midrender 팀에 흡수되어, midrender.com 하위 프로젝트로 운영 중. GitHub는 redotvideo/revideo → midrender/revideo로 이관됨. 개발 속도는 mid-2025 이후 둔화됐다는 외부 평가가 있어, 장기 프로젝트는 유지보수 상황을 주기적으로 확인할 것.

📚 Revideo 사용 가이드 — 6개 영역

#	children hub	손자 페이지 수	핵심 주제
1	Revideo 시작하기	4	Quickstart · 프로젝트 구조 · Scene Flow · Parameterized Videos
2	Revideo 애니메이션 & 디자인	5	Motion Canvas · 컴포넌트 분리 · 이모지 · Rive · Three.js 3D
3	Revideo 렌더링	3	비디오 렌더링 개요 · CLI 로컬 · 렌더링 서비스 배포
4	Revideo 웹앱 & Player	2	Player 미리보기 · SaaS Template
5	Revideo 성능 & 최적화	2	노드 격리 · Decoders
6	Revideo 플랫폼 & 도움말	3	Platform 소개 · Render Endpoint · Discord

🆚 Revideo vs Motion Canvas vs Remotion 비교

항목	Revideo	Motion Canvas	Remotion
정체	Motion Canvas의 라이브러리 포크	코드 기반 애니메이션 에디터	React 기반 비디오 프레임워크
언어	TypeScript (제너레이터)	TypeScript (제너레이터)	React/TSX
렌더링	Headless API + 브라우저	UI 버튼 (수동)	CLI / SSR / Lambda / Browser
오디오	`<Video>`/`<Audio>` 동기 export	제한적	`<Audio>` 컴포넌트
출시	2024 (YC S23)	2022	2021
라이선스	MIT (Motion Canvas fork)	MIT	무료 (개인) / 유료 (회사)
현狀	mid-2025 이후 유지보수 둔화 (Midrender 이관)	활발 (독자 노선)	매우 활발
적합	자동 비디오 파이프라인 / SaaS	정교한 애니메이션 직접 제작	React 개발자, 데이터 드리븐 영상

출처: 각 프로젝트 GitHub README + npm 다운로드 추이 (2026-07, pkgpulse 비교 2차 인용)

⚡ 빠른 시작 (5분)

# 1) 프로젝트 생성 (기본 예제 포함)
npm init @revideo@latest

# 2) 의존성 설치
cd my-video
npm install

# 3) 미리보기 서버 실행 (브라우저에서 라이브 편집)
npm start
# → http://localhost:3000

# 4) mp4로 렌더링
npm run render

기본 예제는 <Video> + <Audio> + <Img> 컴포넌트로 1분짜리 모션 그래픽을 만든다. src/scenes/에서 직접 장면을 수정할 수 있다.

🎯 Revideo를 고르는 이유

시나리오	왜 Revideo?
자동 비디오 파이프라인 (예: 사용자명·통계를 넣은 TikTok 광고 1만 개 생성)	렌더링을 HTTP API로 호출 가능 → 서버리스 배포
웹 기반 비디오 에디터 SaaS	React `<Player>` + 자체 UI → 손쉬운 통합
파라미터화된 영상 (JSON 입력으로 영상个性化)	공식 `parameterized-video` 패턴 내장
TypeScript-first 프로젝트	React 컨텍스트 없이 비디오 로직만 다루고 싶을 때

Revideo는 Motion Canvas의 애니메이션 표현력을 가져오면서 렌더링을 라이브러리 함수로 끌어내린 게 핵심 차별점이다. "영상을 코드로 만들고 싶다 + 서버에서 돌리고 싶다"는 두 조건이 동시에 있으면 거의 항상 Revideo가 답이 된다.

📚 영역 구분

시작부터: Revideo 시작하기 — Quickstart → Scene Flow → Parameterized Videos
애니메이션 디테일: Revideo 애니메이션 & 디자인 — Motion Canvas / Rive / Three.js
서버에서 돌리기: Revideo 렌더링 — 헤드리스 API, SaaS Template
문제 해결: Revideo 성능 & 최적화 · Revideo 플랫폼 & 도움말

🔗 공식 리소스

공식 문서: https://midrender.com/revideo/docs
GitHub (현): https://github.com/midrender/revideo
GitHub (구): https://github.com/redotvideo/revideo
예제 모음: https://github.com/redotvideo/examples
Midrender 본체: https://midrender.com

상위 문서: 없음 (Root hub) 출처: Revideo 공식 문서 — Guide + Animations + Code Snippets + Common Issues + Upgrading + Platform 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — hub 본문 + 6 children 영역 구분 + 비교표
2026-07-29	Quickstart / Project Structure 등 19개 손자 페이지 트리 설계
2026-07-29	메타데이터 블록을 본문 하단으로 이동