Revideo Motion Canvas 기초

Revideo는 Motion Canvas에서 포크된 프로젝트다. 따라서 애니메이션 작성 API는 거의 100% Motion Canvas와 동일하다. 이 페이지에서는 Motion Canvas 가이드를 Revideo 컨텍스트에서 어떻게 활용하는지 정리한다.

🔗 Revideo ≠ Motion Canvas — 차이점

영역	Motion Canvas	Revideo
목적	비디오 애니메이션 에디터 (UI 도구)	비디오 라이브러리 (코드에서 호출)
렌더링	UI의 "Render" 버튼으로 수동 실행	`renderVideo()` 함수 호출 (headless 가능)
실행 단위	로컬 에디터 실행	`npm run render` 또는 HTTP API
API	자체	Motion Canvas API를 그대로 (Scene, Signals, Tweening)
차이점	`draw()` 함수가 sync	Revideo에서는 `draw()`가 async (비동기 promise 허용)
추가 기능	(없음)	Rive 애니메이션 통합, headless 렌더 API

즉, 애니메이션 작성법은 Motion Canvas 문서/예제를 그대로 참고해도 99% 작동한다. 다른 점은 **"어디서 어떻게 호출하느냐"**뿐.

📚 Motion Canvas 가이드를 Revido로 가져오는 법

1. Animation flow (`yield*` / `chain` / `all`)

Revideo Scene Flow 이해하기에서 다뤘듯, Revideo도 Motion Canvas의 제너레이터 패턴을 그대로 따른다. 공식 Motion Canvas 가이드의 flow 페이지의 모든 예제가 Revideo에서 그대로 작동한다.

2. Signals & Tweening

Motion Canvas의 signal(), tween(), easing API가 Revideo @revideo/2d에서 그대로 노출된다. 자세한 패턴은 Revideo Animations 상세 API 참고 (flow, signals, tweening, layouts, shaders 등 20+ 항목).

3. Layouts & Hierarchy

<Layout>, <Rect>, <Circle>, <Txt> 등 모든 노드 트리 컴포넌트가 Motion Canvas의 scene graph와 동일.

⚠️ Revido 고유 차이 — `draw()` 함수의 비동기성

Motion Canvas에서 커스텀 컴포넌트를 만들 때 draw()는 동기 함수로 작성:

// Motion Canvas — sync
class MyComponent {
  protected draw(context: CanvasRenderingContext2D) {
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 100);
  }
}

Revideo에서는 draw()가 async 함수 — Promise 반환 가능 (비동기 리소스 로딩 대기):

// Revideo — async
class MyComponent {
  protected async draw(context: CanvasRenderingContext2D) {
    // await 가능한 비동기 작업 가능
    const image = await loadImageAsync('background.png');
    context.drawImage(image, 0, 0);
  }
}

대부분의 경우 draw()를 직접 구현할 일은 없다. Motion Canvas의 <Rect>, <Img> 같은 내장 컴포넌트가 일반적 사용 사례의 95%를 커버.

🎓 Motion Canvas의 학습 리소스를 Revido에서 활용

리소스	사용법
Motion Canvas 공식 문서	`flow`, `signals`, `tweening` 패턴 학습 — Revideo에 그대로 적용
Motion Canvas 예제 모음	코드 패턴 참고 (Revideo에 맞게 import만 변경)
Revideo Animations 섹션	Revideo 고유 API (20+ 페이지)
Revideo Code Snippets	실전 코드 조각 5개 (streaming text, moving objects 등)

🔄 import 경로 변환 가이드

Motion Canvas 코드 → Revideo 코드로 옮길 때 import만 바꾸면 된다:

// Motion Canvas
import {makeScene2D, Rect, Txt} from '@motion-canvas/2d';
import {createRef, waitFor, all, chain} from '@motion-canvas/core';

// Revideo
import {makeScene2D, Rect, Txt} from '@revideo/2d';
import {createRef, waitFor, all, chain} from '@revideo/core';

패키지 이름만 @motion-canvas/* → @revideo/*로 일괄 치환. API 시그니처는 동일.

🎯 다음 단계

Scene 컴포넌트 분리: Revideo Scene 컴포넌트 논리적 분리 → 다음 손자 페이지
이모지·Rive·3D: 후속 손자 페이지 참고
씬 작성 패턴 복습: Revideo Scene Flow 이해하기 → Revideo 시작하기 → 이전 hub

🔗 공식 리소스

Motion Canvas 공식: https://motioncanvas.io
Motion Canvas GitHub: https://github.com/motion-canvas/motion-canvas
Revideo Animations API: https://midrender.com/revideo/docs/animations
Revideo Code Snippets: https://midrender.com/revideo/docs/code-snippets

상위 문서: ← Revideo 애니메이션 & 디자인 출처: Revideo 공식 문서 — Designing Animations / Motion Canvas + Motion Canvas Guide 한글화 (2026-07-29) 공급사: Revideo (현 Midrender) / Motion Canvas (Motion Canvas 프로젝트)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Motion Canvas 가이드 활용법 + import 변환 + draw() 비동기 차이점 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동