Motion Canvas 사용 가이드

Motion Canvas는 TypeScript 제너레이터 함수로 벡터 애니메이션을 정의하고, 실시간 미리보기 에디터에서 즉시 확인·렌더링할 수 있는 오픈소스 애니메이션 라이브러리다. Revideo와 Remotion 모두 이 Motion Canvas 생태계/사상을 계승한 프레임워크다.

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

Motion Canvas는 활발히 유지보수 중 (Revideo와 달리 메인테이너가 본 프로젝트를 지속). 정보 전달용·교육용 애니메이션의 사실상 표준 도구로 자리잡음. 단, 서버less 렌더 API는 없어 SaaS용 백엔드 자동화에는 Revideo가 더 적합.

🧩 핵심 컴포넌트

Motion Canvas는 두 부분으로 나뉜다:

컴포넌트	역할
TypeScript 라이브러리	제너레이터 함수 기반 애니메이션 정의 (`makeScene2D`, 노드, signal, tween 등)
에디터 (Vite dev server)	실시간 미리보기 + 변수 슬라이더 + 렌더 트리거 + 프레임 단위 디버깅

핵심 아이디어: 함수 = 애니메이션. yield*로 시간 흐름을 제어하고, 한 함수 안에서 모든 장면·전환을 표현한다.

🆚 Revideo / Remotion과의 비교

항목	Motion Canvas	Revideo	Remotion
언어	TypeScript 제너레이터	TypeScript 제너레이터	React + JSX
대상	정보 전달·교육 영상	SaaS 자동화 영상	React 개발자 영상
렌더링	브라우저에서 export (이미지 시퀀스 / mp4)	헤드리스 API + 서버less	Node + Puppeteer/Chrome
실시간 미리보기	✅ 강력 (에디터 자체)	✅ Studio (Revideo Player)	✅ Remotion Studio
서버 렌더	❌ 미지원	✅ `renderVideo()`	✅ CLI / Lambda
3D / 외부 라이브러리	⚠️ 제한적	✅ Rive, Three.js, Lottie	⚠️ React 한정
상태	🟢 활발	🟡 Midrender 흡수	🟢 활발
GitHub stars	4.5k+	2k+ (Revideo)	21k+

선택 가이드:

교육/설명 영상, 발표 자료 → Motion Canvas

SaaS 자동화, 다량 영상, 서버less → Revideo

React 팀, JSX 선호 → Remotion

📂 이 가이드의 구성 (6 children 영역)

Motion Canvas 생태계도 hub + children 구조로 정리한다. 각 영역은 독립 페이지로 확장 예정:

영역	다루는 내용	상태
시작하기	설치, Quickstart, 프로젝트 구조	📝 작성 예정
애니메이션 & 디자인	Scenes, 노드 트리, signal, tween, layout	📝 작성 예정
렌더링	이미지 시퀀스 / mp4 / 슬라이드쇼 export	📝 작성 예정
에디터 워크플로우	변수 슬라이더, 프레임 디버깅, Vite 설정	📝 작성 예정
확장 & 통합	Lottie, Rive, 외부 에셋, Font	📝 작성 예정
플랫폼 & 도움말	Discord, GitHub Discussions, 트러블슈팅	📝 작성 예정

각 children은 본 가이드의 표준 형식 (한글화 + 코드 예시 + 표)을 따라 작성된다.

🚀 Quickstart (5분)

1) 새 프로젝트 생성

npm init motion-canvas@latest
# 또는 직접
mkdir my-project && cd my-project
npm init -y
npm install @motion-canvas/core @motion-canvas/2d

2) Vite 설정

// vite.config.ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';

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

3) 첫 Scene 작성

// src/scenes/example.tsx
import {makeScene2D, Circle} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  view.add(<Circle size={320} fill={'#3b82f6'} />);
});

4) 프로젝트 진입점

// src/project.ts
import {makeProject} from '@motion-canvas/core';
import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
});

5) 에디터 실행

npm run start
# http://localhost:9013

에디터에서 변수 슬라이더 / 타임라인 / 프레임 점프 사용 가능. Ctrl+S로 변경사항 즉시 반영.

🎬 렌더링 — 3가지 export 모드

모드	결과	용도
이미지 시퀀스 (기본)	PNG 프레임 폴더 (`/output/`)	고품질, 후처리 가능
비디오	mp4	일반 공유
슬라이드쇼	PNG 묶음	프레젠테이션

⚠️ 렌더는 브라우저 안에서 일어남. 헤드리스 서버/CLI로 자동화하려면 Playwright/Puppeteer로 에디터를 띄우고 RENDER 버튼을 자동 클릭하는 패턴이 필요 (Revideo 대비 큰 약점).

🧠 Motion Canvas의 사고방식

함수가 곧 애니메이션

yield* circle().fill('#ef4444', 1);   // 1초 동안 빨간색으로 보간
yield* circle().position.x(300, 0.5); // 0.5초 동안 x 이동
yield* waitFor(0.3);                   // 0.3초 대기

Signal = 시간에 따라 변하는 값

const opacity = createSignal(0);
view.add(<Circle opacity={opacity} />);
yield* opacity(1, 1);

노드 = JSX 트리

Motion Canvas의 JSX는 React와 비슷하지만 시간/시각 속성에 최적화된 노드 시스템:

<Layout direction={'column'} gap={20} alignItems={'center'}>
  <Txt text={'Hello'} fontSize={64} />
  <Rect width={400} height={200} fill={'#1e40af'} radius={20} />
</Layout>

🚀 다음 단계

작업	가이드
설치 + 첫 Scene	Quickstart (공식)
Scene 구조 깊이	Project Structure (공식)
Revideo와 차이	Revideo 사용 가이드
Remotion과 차이	Remotion 사용 가이드

🔗 공식 리소스

공식 문서: https://motioncanvas.io/docs
Quickstart: https://motioncanvas.io/docs/quickstart
GitHub: https://github.com/motion-canvas/motion-canvas
Discord: https://discord.gg/motion-canvas
예제 모음: https://github.com/motion-canvas/examples

상위 문서: 없음 (Root hub) 출처: Motion Canvas 공식 문서 — Introduction + Quickstart 한글화 (2026-07-29) 공급사: Motion Canvas (motion-canvas 조직)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Motion Canvas 사용 가이드 hub 본문 + 6 children 영역 구분 + Quickstart