Motion Canvas 확장 & 통합

Motion Canvas는 외부 에셋 / 외부 라이브러리 통합에 제한이 있다 (브라우저 내 export + 2D only). 이 페이지는 자주 쓰이는 통합 패턴을 자체 정리한 내용이다.

⚠️ Type B 페이지: 공식 문서가 얇아서 자체 조사 + 검증된 패턴 위주로 정리. 출처 없는 패턴은 ❌ 표시.

🖼️ 이미지 (`Img`)

import {Img} from '@motion-canvas/2d';

view.add(
  <Img
    src={'/image.png'}        // public/ 또는 절대 URL
    width={400}
    height={300}
    radius={12}
  />,
);

public/ 폴더에 두면 /image.png로 접근. 외부 CDN URL도 가능 (CORS 주의).

동적 로딩 / placeholder

const img = createRef<Img>();
view.add(<Img ref={img} src={''} width={400} height={300} />);

yield img().src('/loaded.png', 0);  // 시점 변경 시 로드

📝 외부 폰트

Google Fonts

/* src/style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

// scene
<Txt
  fontFamily={'Noto Sans KR'}
  fontSize={64}
  text={'한글도 잘 나와요'}
/>

로컬 폰트

/* public/font.css */
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
}

한/중/일 폰트는 Web font + woff2 권장. TTF는 용량 큼.

🎬 Lottie 통합

Motion Canvas는 Lottie 네이티브 지원이 없음. 패턴 2가지:

패턴 A: `<Img>` + Lottie JSON → PNG 시퀀스 변환

# Lottie JSON → PNG 시퀀스 (서버사이드)
# lottie_convert 또는 After Effects + bodymovin

view.add(<Img src={'/lottie-frames/0001.png'} width={400} />);

한계: 애니메이션 표현 불가, 정적 프레임만.

패턴 B: HTML overlay (iframe)

Motion Canvas는 iframe 직접 렌더 안 됨 → Revideo 사용 권장:

// Revideo는 Lottie + Rive + 3D 모두 지원
// https://wiki.snowpuri.com/spaces/videoai/wiki/951

Lottie가 중요하면 Revideo가 정답.

🎨 Rive 통합

Rive도 Motion Canvas에 네이티브 미지원. 같은 패턴:

해결 1: Rive → PNG 시퀀스 export → <Img> 시퀀스
해결 2: Rive가 필요하면 Revideo (Rive 네이티브 지원) 검토

🎵 오디오 통합

Motion Canvas는 오디오 트랙 미지원 (2026-07 기준, GitHub 이슈에서 진행 중).

우회:

영상 export 후 외부 도구로 mux (FFmpeg)

또는 Revideo/Remotion 사용 (오디오 트랙 1급 지원)

📐 외부 데이터 (JSON) 주입

패턴: Variables + URL query

import {createVariable} from '@motion-canvas/core';

const data = createVariable({title: 'Default', count: 0});
view.add(<Txt text={data().title} fontSize={64} />);

에디터 URL: ?data=%7B%22title%22%3A%22Custom%22%2C%22count%22%3A42%7D

디자인 리뷰 시 URL 공유만으로 변수 값 변경 가능.

패턴: fetch + 비동기

export default makeScene2D(async function* (view) {
  const res = await fetch('/api/data.json');
  const data = await res.json();

  view.add(<Txt text={data.title} fontSize={64} />);
});

async function*로 Scene을 비동기로 만들 수 있다.

🧩 플러그인 (커스텀 노드)

Motion Canvas는 플러그인 시스템이 있다. 커스텀 노드/신호 타입 등록 가능:

// plugins/gradient-circle.ts
import {Circle, makePlugin} from '@motion-canvas/2d';

export class GradientCircle extends Circle {
  // 커스텀 노드
}

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

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

일반 사용에는 거의 안 쓰이지만, 반복 노드 패턴을 라이브러리화할 때 유용.

⚠️ Motion Canvas가 약한 영역 정리

기능	Motion Canvas	대안
Lottie/Rive	❌ 미지원	Revideo
오디오 트랙	❌	Revideo, Remotion
3D (Three.js)	❌	Revideo, Three.js 직접
서버 자동화	❌ (브라우저 only)	Revideo, Remotion Lambda
외부 데이터	✅ Variable	OK
폰트/이미지	✅	OK
플러그인	✅	OK

한 줄 요약: 정적 2D 벡터 애니메이션은 Motion Canvas. SaaS 자동화 / 동적 데이터 / 3D / 오디오는 Revideo.

🚀 다음 단계

작업	가이드
SaaS 자동화	Revideo 사용 가이드
React 통합	Remotion 사용 가이드
도움말	Motion Canvas 플랫폼 & 도움말

🔗 참고 자료

공식 문서 (제한적): https://motioncanvas.io/docs
플러그인 예제: https://github.com/motion-canvas/motion-canvas/tree/main/packages
Revideo (대안): https://midrender.com/revideo

상위 문서: ← Motion Canvas 사용 가이드 출처: [주제 가이드 — Motion Canvas 확장/통합] (자체 조사·작성 2026-07-30) + 1차: Motion Canvas 공식 문서 일부 공급사: 자체 작성 + Motion Canvas (motion-canvas 조직) 1차 자료

변경 이력

날짜	변경
2026-07-30	초안 작성 — Type B 자체 정리. Lottie/Rive/오디오/3D/외부데이터 통합 패턴 + 약한 영역 표

🖼️ 이미지 (Img)