Motion Canvas 렌더링

Motion Canvas의 렌더링 시스템 — 브라우저 내 export, 이미지 시퀀스/mp4/슬라이드쇼 3가지 모드, Vite 설정, FFmpeg 통합 — 을 다룬다.

🎬 3가지 Export 모드

Motion Canvas는 브라우저 안에서 렌더링을 실행한다. 헤드리스 서버/CLI 자동화는 미지원.

모드	출력	용도	설정 위치
이미지 시퀀스 (기본)	PNG 폴더 (`/output/frames/`)	고품질, 후처리 가능	기본
비디오 (mp4)	mp4	일반 공유	Exporter → `ffmpeg`
슬라이드쇼	PNG 묶음	프레젠테이션	Exporter → `slideshow`

🖱️ 에디터에서 렌더링

우측 패널의 Video Settings 탭 열기
Range 선택: 전체 / 구간 지정
Exporter 선택: sequence / video / slideshow
RENDER 버튼 클릭
진행 표시 (취소 가능: ABORT)

렌더가 끝나면 output 폴더가 자동으로 열린다.

📂 output 디렉토리 구조

기본 경로: 프로젝트 루트의 /output/

output/
├── frames/                    # 이미지 시퀀스
│   ├── frame_000000.png
│   ├── frame_000001.png
│   └── ...
├── video.mp4                  # mp4 export
├── slideshow/                 # 슬라이드쇼
│   ├── slide_001.png
│   └── ...
└── still/                     # 스냅샷
    └── ...

출력 경로는 vite.config.ts에서 변경 가능.

⚙️ Vite 설정 (Export 옵션)

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

export default defineConfig({
  plugins: [
    motionCanvas({
      // project.ts 위치 (기본: src/project.ts)
      project: './src/project.ts',

      // output 경로 (기본: ./output)
      output: './output',
    }),
  ],
});

옵션	기본값	설명
`project`	`./src/project.ts`	진입점
`output`	`./output`	결과물 경로
`plugins`	`[]`	추가 플러그인

🎞️ FFmpeg 통합 (mp4 export)

mp4 export는 FFmpeg가 필수. 자동 감지되며, PATH에 없으면 export 실패.

# macOS
brew install ffmpeg

# Ubuntu
sudo apt install ffmpeg

# Windows (choco)
choco install ffmpeg

mp4 옵션

에디터 Video Settings → Exporter ffmpeg → Advanced:

옵션	의미
`crf`	화질 (0=무손실, 23=기본, 51=최저)
`preset`	인코딩 속도 (ultrafast ~ veryslow)
`codec`	`libx264` (H.264) 기본

기본값으로도 충분히 고품질. 화질 조정 시 crf 18~23 권장.

🖼️ 스냅샷 — 현재 프레임만 저장

에디터에서 📷 아이콘 클릭 → 현재 frame을 /output/still/에 PNG로 저장.

발표 자료 / 썸네일 / 정적 일러스트 만들 때 유용.

🐢 성능 — 렌더링이 느릴 때

증상	원인	해결
1초 렌더에 1초 이상	무거운 Scene (100+ 노드)	노드 트리 단순화, Range 좁히기
mp4 안 만들어짐	FFmpeg 미설치	`ffmpeg -version` 확인
메모리 부족	고해상도 + 긴 Range	해상도 낮추기, Range 분할
이미지 깨짐	폰트 미로드	`public/`에 폰트 + `@font-face`

헤드리스 자동화가 필요하면 Revideo (서버less 렌더 API) 검토.

🔄 프레젠테이션 모드

에디터 ▶ 버튼으로 에디터 없이 Scene을 풀스크린 재생:

자동 루프
단축키: 스페이스(재생/정지), ← →(씬 이동)
프레젠테이션 / 시연용으로 최적

🚀 다음 단계

작업	가이드
에디터 디버깅	Motion Canvas 에디터 워크플로우
서버 자동화	Revideo 사용 가이드
Lottie/Rive 통합	Motion Canvas 확장 & 통합

🔗 공식 리소스

Rendering 가이드: https://motioncanvas.io/docs/getting-started/rendering
GitHub: https://github.com/motion-canvas/motion-canvas
트러블슈팅: https://motioncanvas.io/docs/category/common-questions

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

변경 이력

날짜	변경
2026-07-30	초안 작성 — 3 export 모드 + Vite 설정 + FFmpeg 통합 + 트러블슈팅