Revideo Quickstart

Revideo 첫 프로젝트를 만들고 mp4로 렌더링하기까지의 전 과정을 다룬다. 약 5분이면 첫 영상을 뽑을 수 있다.

---

📦 시스템 요구사항

항목	요구사항
Node.js	18 이상 (LTS 권장)
운영체제	macOS / Windows / Linux
FFmpeg	자동 설치 (Revideo CLI)
브라우저	Chrome / Edge (편집 미리보기용)

Node 버전이 낮으면 npm install 단계에서 에러가 난다. node -v로 먼저 확인.

---

🚀 5분 Quickstart

1단계: 프로젝트 생성

npm init @revideo@latest my-video
cd my-video

대화형 프롬프트가 뜨는데, 기본값(Enter)을 눌러도 충분하다. 생성 후 폴더에 다음이 생긴다:

my-video/
├── public/              # 로컬 미디어 파일 (mp4, png 등)
├── src/
│   ├── project.ts       # 프로젝트 엔트리
│   ├── render.ts        # 렌더링 엔트리 (CLI 렌더 시 실행)
│   └── scenes/
│       └── example.tsx  # 기본 예제 (Video + Audio + Img)
├── package.json
└── vite.config.ts

2단계: 의존성 설치 + 예제 실행

npm install
npm start
# → 브라우저에서 http://localhost:3000 열림

npm start는 Vite 개발 서버 + motionCanvas 플러그인을 함께 띄운다. 화면에 비디오 + 오디오 + 이미지가 합쳐진 1분짜리 모션 그래픽이 보인다. 코드 수정하면 HMR(Hot Module Replacement)로 즉시 반영된다.

3단계: mp4로 렌더링

npm run render
# → ./out 폴더에 output.mp4 생성

npm run render는 내부적으로 src/render.ts의 renderVideo()를 호출한다.

---

📝 기본 예제 (src/scenes/example.tsx)

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  yield view.add(
    <>
      <Video src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
             play={true} size={['100%', '100%']} />
      <Audio src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
             play={true} time={17.0} />
    </>,
  );
  yield* waitFor(1);

  const logoRef = createRef<Img>();
  yield view.add(
    <Img width={'1%'} ref={logoRef}
         src={'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'} />,
  );
  yield* chain(
    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
    logoRef().scale(60, 1),
  );
});

함수	역할
makeScene2D(generator)	한 씬을 정의하는 진입점
view.add(<JSX>)	씬에 노드 추가
waitFor(seconds)	N초간 대기 (frames)
chain(...gens)	제너레이터를 순차 실행
all(...tweens)	트윈을 병렬 실행
createRef<T>()	노드 참조 생성 (애니메이션에 사용)

---

⚠️ 자주 마주치는 첫 에러

증상	원인	해결
npm init 후 cd 안 함	디렉터리 이동 누락	cd my-video 후 npm install
Error: no such file or directory, open 'package.json'	잘못된 폴더에서 실행	프로젝트 루트에서 실행
포트 3000 충돌	다른 dev 서버 점유	vite.config.ts의 server.port 변경
document.fonts.ready 관련 경고	폰트 로딩 미완료	모든 view.add 앞에 yield

---

🎯 다음 단계

• 씬 작성 패턴 익히기: Revideo Scene Flow 이해하기 → 다음 손자 페이지
• 프로젝트 폴더 역할 자세히: Revideo 프로젝트 구조 → 다음 손자 페이지
• 데이터로 영상个性化: Revideo Parameterized Videos → 다음 손자 페이지

🔗 공식 리소스

• 공식 Quickstart: https://midrender.com/revideo/docs/guide/installation-and-setup
• 예제 모음: https://github.com/redotvideo/examples

상위 문서: ← Revideo 시작하기 출처: Revideo 공식 문서 — Quickstart (Installation & Setup) 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Quickstart 5분 가이드 + 기본 예제 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동