Motion Canvas 시작하기

Motion Canvas 프로젝트를 처음 만들고 첫 Scene을 렌더링하기까지의 전 과정을 다룬다. Node.js + npm만 있으면 5분 안에 첫 애니메이션이 만들어진다.

---

📦 시스템 요구사항

항목	요구사항
Node.js	18 이상 (LTS 권장)
운영체제	macOS / Windows / Linux
FFmpeg	mp4 export 시 필요 (이미지 시퀀스는 불필요)
에디터	Vite dev server (자동)

macOS: brew install ffmpeg, Ubuntu: sudo apt install ffmpeg, Windows: ffmpeg.org 다운로드.

---

🚀 5분 Quickstart

1) 새 프로젝트 (공식 scaffolder)

npm init motion-canvas@latest
# ? Project name: › my-project
# ? Scene name:  › example

대화형으로 폴더명/Scene명을 묻고, 의존성 자동 설치 + 첫 Scene 생성.

2) 직접 만들기 (수동)

mkdir my-project && cd my-project
npm init -y
npm install @motion-canvas/core @motion-canvas/2d vite
npm install -D @motion-canvas/vite-plugin typescript

3) Vite 설정

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

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

4) 진입점

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

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

5) 첫 Scene

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

export default makeScene2D(function* (view) {
  view.add(<Circle size={300} fill={'#3b82f6'} />);
  yield;
  view.add(<Txt text={'Hello Motion Canvas'} y={-300} fontSize={64} fill={'#fff'} />);
});

6) 에디터 실행

npm run start
# http://localhost:9013

에디터 좌측에 Scene 리스트, 우측에 캔버스. 하단 타임라인, 상단 변수 슬라이더.

---

📂 프로젝트 구조

my-project/
├── src/
│   ├── project.ts                # 진입점 (Scenes 등록)
│   └── scenes/
│       ├── example.tsx           # Scene 1
│       └── intro.tsx             # Scene 2
├── output/                       # 렌더 결과 (자동 생성)
│   ├── frames/                   # 이미지 시퀀스
│   └── still/                    # 스냅샷
├── public/                       # 정적 자산 (이미지, 폰트)
├── vite.config.ts
├── tsconfig.json
└── package.json

Scene 파일은 ?scene 가상 모듈로 import. Vite 플러그인이 자동 처리.

---

🎬 첫 export

1. 에디터에서 RENDER 버튼 클릭
2. 기본 = 이미지 시퀀스 (/output/frames/)
3. mp4로 변경: 우측 패널 → Exporter → ffmpeg 선택
4. 결과는 /output/ 하위에 저장

자세한 export 옵션은 Motion Canvas 렌더링 참고.

---

🔗 공식 리소스

• Quickstart: https://motioncanvas.io/docs/quickstart
• Getting Started 카테고리: https://motioncanvas.io/docs/category/getting-started/
• GitHub 템플릿: https://github.com/motion-canvas/template

상위 문서: ← Motion Canvas 사용 가이드 출처: Motion Canvas 공식 문서 — Getting Started + Quickstart 한글화 (2026-07-30) 공급사: Motion Canvas (motion-canvas 조직)

변경 이력

날짜	변경
2026-07-30	초안 작성 — Getting Started 카테고리 한글화 + Quickstart 코드