Revideo 시작하기

Revideo를 처음 접할 때 필요한 모든 것을 한 곳에 모았다. 설치 → 프로젝트 구조 → Scene Flow → 매개변수 비디오 순서로 학습하면 약 30분 안에 첫 영상을 만들고, 데이터로个性化하는 패턴까지 익힐 수 있다.

---

📚 Revideo 시작하기 가이드

#	페이지	영문	핵심 내용
1	Revideo Quickstart	Quickstart	npm init @revideo@latest, 의존성, 기본 예제 구조
2	Revideo 프로젝트 구조	Project Structure	src/, project.ts, render.ts, assets 폴더
3	Revideo Scene Flow 이해하기	Scene Flow	makeScene2D, yield*, waitFor, chain/all
4	Revideo Parameterized Videos	Parameterized Videos	inputProps로 동적 입력 받아 렌더링

---

🎯 상황별 가이드

목표	먼저 볼 페이지
처음 설치해서 Hello World 띄우기	Revideo Quickstart
프로젝트 폴더 구조와 진입점 파악	Revideo 프로젝트 구조
yield* / chain / all 시퀀싱 패턴	Revideo Scene Flow 이해하기
사용자명·통계로 영상个性化	Revideo Parameterized Videos

---

⚡ 빠른 시작 (5분)

# 1) 프로젝트 생성
npm init @revideo@latest my-video
cd my-video

# 2) 의존성 설치
npm install

# 3) 브라우저에서 라이브 편집
npm start
# → http://localhost:3000

# 4) mp4로 렌더링
npm run render

기본 예제 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) {
  // Video + Audio + Image 레이어를 yield*로 시퀀싱
  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);

  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),
  );
});

---

📚 영역 구분

• 애니메이션 디테일: Revideo 애니메이션 & 디자인 → 다음 hub
• 서버 렌더링: Revideo 렌더링 → 다음 hub
• 웹앱 통합: Revideo 웹앱 & Player → 다음 hub
• 문제 해결: Revideo 성능 & 최적화 · Revideo 플랫폼 & 도움말

상위 문서: ← Revideo 사용 가이드 출처: Revideo 공식 문서 — Guide / Quickstart / Project Structure / Scene Flow / Parameterized Videos 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Revideo Quickstart / Project Structure / Scene Flow / Parameterized 영역 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동