Revideo 프로젝트 구조

npm init @revideo@latest로 생성한 프로젝트의 폴더·파일 구조와 각각의 역할을 정리한다. 어느 파일에서 무엇을 수정해야 하는지 빠르게 파악하는 용도.

---

📁 폴더 구조 한눈에

my-video/
├── public/                  # 로컬 정적 자산 (mp4, png, font, ...)
├── src/
│   ├── project.ts           # ⭐ 프로젝트 엔트리 — makeProject() 호출
│   ├── render.ts            # ⭐ 렌더링 엔트리 — renderVideo() 호출
│   └── scenes/              # 씬 정의 (TSX/TS)
│       └── example.tsx      # 기본 예제
├── package.json             # npm 스크립트 + 의존성
├── vite.config.ts           # Vite + motionCanvas 플러그인
└── tsconfig.json

⭐ 표시한 두 파일이 가장 자주 만지는 진입점. project.ts는 미리보기/에디터, render.ts는 CLI/배치 렌더용.

---

📄 핵심 파일별 역할

vite.config.ts — Vite + motionCanvas 플러그인

import {defineConfig} from 'vite';
import motionCanvas from '@revideo/vite-plugin';

export default defineConfig({
  plugins: [motionCanvas()],
});

기본 설정으로 충분하다. motionCanvas() 플러그인이 브라우저 캔버스와 오디오 처리를 위한 ffmpeg 백엔드 프로세스 간 통신을 활성화한다. 커스텀 설정으로 output 폴더, project 파일, dev 서버 port 등을 바꿀 수 있다.

src/render.ts — CLI 렌더링 엔트리

import {renderVideo} from '@revideo/renderer';

async function render() {
  console.log('Rendering video...');
  const file = await renderVideo({
    projectFile: './src/project.ts',
    variables: {video: ''},  // 파라미터화된 비디오용
    settings: {logProgress: true},
  });
  console.log(`Rendered video to ${file}`);
}

render();

옵션	설명
projectFile	엔트리 프로젝트 파일 (기본 ./src/project.ts)
variables	Parameterized Video에 전달할 변수 (자세한 건 Revideo Parameterized Videos 참고)
settings.logProgress	진행 상황 로그 출력
settings.workers	병렬 렌더 워커 수

이 파일은 dev 서버 (npm start)와 무관하다. npx revideo serve 모드와 별개의 일회성 렌더 실행 파일. 필요 없으면 삭제해도 됨.

src/project.ts — 프로젝트 엔트리

import {makeProject} from '@revideo/core';
import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
  variables: {username: 'new user'},  // 시각 편집기에서 보이는 기본값
});

이 파일이 Studio / Player / render.ts / SaaS Render Endpoint 모두의 진실 공급원. 씬 추가 시 이 배열에 등록.

src/scenes/example.tsx — 씬 정의

import {Video, makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export default makeScene2D('scene', function* (view) {
  yield view.add(
    <Video src="/my-video.mp4"} size={['100%', '100%']} play={true} />,
  );
  yield* waitFor(10);
});

한 파일에 여러 씬을 정의해도 되고, 씬별로 파일을 쪼개도 됨. 큰 프로젝트는 후자가 권장 (HMR이 파일 단위로 동작하므로).

public/ — 로컬 정적 자산

public/에 넣은 파일은 파일명만으로 접근 가능:

<Video src="/my-video.mp4" />  {/* public/my-video.mp4 */}
<Img src="/logo.png" />        {/* public/logo.png */}

절대 경로(/)로 쓰면 됨. URL은 빌드 시 자동 처리. 큰 영상·폰트·이미지는 public/에 두는 게 일반적.

---

🔧 자주 수정하는 설정

변경하고 싶을 때	수정할 파일
씬 추가/제거	src/project.ts
mp4 출력 옵션 변경	src/render.ts
dev 서버 포트	vite.config.ts의 server.port
변수 기본값	src/project.ts의 variables
출력 폴더 변경	vite.config.ts의 motionCanvas({output: ...})

---

🎯 다음 단계

• 씬 작성 패턴 익히기: Revideo Scene Flow 이해하기 → 다음 손자 페이지
• 데이터로 영상个性化: Revideo Parameterized Videos → 다음 손자 페이지
• 첫 영상 만들기: Revideo Quickstart → 이전 손자 페이지

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

변경 이력

날짜	변경
2026-07-29	초안 작성 — 프로젝트 구조 + vite/render/project/public 4개 핵심 파일 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동