Motion Canvas 플랫폼 & 도움말

Motion Canvas는 공식 SaaS / 클라우드 렌더 서비스가 없다 (오픈소스 + 브라우저 export). 이 페이지는 커뮤니티·문서·트러블슈팅 채널을 자체 정리한 내용이다.

⚠️ Type B 페이지: 공식 help 페이지가 없어서 GitHub/Discord/공식 문서 기반으로 자체 정리.

---

🐙 GitHub — 버그 리포트 & 기능 제안

	URL
저장소	https://github.com/motion-canvas/motion-canvas
Issues	https://github.com/motion-canvas/motion-canvas/issues
Discussions	https://github.com/motion-canvas/motion-canvas/discussions
Releases	https://github.com/motion-canvas/motion-canvas/releases

버그 리포트 잘 쓰는 법

**환경**
- @motion-canvas/core: 0.8.0
- Node: 20.10
- OS: macOS 14.0

**재현**
1. `npm init motion-canvas@latest`
2. 기본 Scene 그대로
3. 에디터에서 RENDER 클릭

**기대**: mp4 export
**실제**: "ffmpeg not found" 에러

**참고**: brew install ffmpeg 이미 실행, `ffmpeg -version` 정상

재현 가능한 최소 예제 + 환경 + 기대/실제가 답변 속도를 10배 빠르게 한다.

라벨

라벨	용도
bug	버그
enhancement	기능 개선
documentation	문서
good first issue	신규 기여자용
help wanted	도움 필요
question	단순 질문

---

💬 Discord — 실시간 Q&A

	URL
공식 Discord	https://discord.gg/motion-canvas

GitHub Discussions보다 실시간 답변이 빠르다. 단, 버그 트래킹은 GitHub로 이관.

주요 채널

채널	용도
#general	자유 잡담
#help	Q&A
#showcase	작품 공유 / 피드백
#feature-requests	기능 제안
#announcements	릴리즈 공지

도움 요청 잘 쓰는 법

채널: #help
[Quickstart 따라하다 막혔어요]

환경:
- npm init motion-canvas@latest로 생성
- macOS 14
- Node 20.10

상황:
- npm run start → localhost:9013 에디터 열림
- 좌측에 Scene은 보이지만 캔버스가 검은색
- Console에 "Scene not registered" 에러

질문: src/project.ts에 Scene을 import 했는데 왜 인식 못 하나요?

환경 + 시도한 것 + 콘솔 에러 + 코드 스니펫 = 빠른 답변.

---

📚 공식 문서

• 메인: https://motioncanvas.io/docs
• Quickstart: https://motioncanvas.io/docs/quickstart
• Getting Started: https://motioncanvas.io/docs/category/getting-started
• Animations: https://motioncanvas.io/docs/category/animations
• Common Questions: https://motioncanvas.io/docs/category/common-questions

⚠️ 문서가 얇음. 신규 기능은 GitHub PR / Discussions / Discord에서 발견되는 경우가 많다.

---

🐛 자주 보이는 트러블슈팅

Q1. mp4 export가 안 돼요

원인	해결
FFmpeg 미설치	brew install ffmpeg (mac) / apt install ffmpeg (Linux)
FFmpeg PATH 미설정	절대 경로로 환경변수 FFMPEG_PATH 설정
코덱 미지원	FFmpeg 재설치 (full 버전)

Q2. 에디터가 안 열려요 (포트 충돌)

# 다른 포트로 실행
npm run start -- --port 9014

또는 vite.config.ts에서 server.port 변경.

Q3. 한글/일본어 폰트가 깨져요

• WOFF2 폰트 사용 (TTF보다 호환성 좋음)
• @font-face로 명시적 로드
• Google Fonts의 Noto Sans KR 사용 권장

Q4. 한 Scene이 너무 느려요

• 노드 수 줄이기 (100+ 노드는 위험)
• Range를 짧게 분할
• 복잡한 tween은 simplify()로 step 감소

Q5. 빌드 / 타입 에러

# 캐시 삭제
rm -rf node_modules/.vite
npm install

---

🌟 생태계

	설명
Motion Canvas itself	메인 라이브러리 (TypeScript)
@motion-canvas/2d	2D 노드 (Rect, Circle, Txt 등)
@motion-canvas/3d	(실험) 3D 노드
@motion-canvas/vite-plugin	Vite 통합
@motion-canvas/ffmpeg	FFmpeg exporter
create-motion-canvas	프로젝트 scaffolder
VSCode extension	신택스 하이라이트, 자동완성
예제 모음	https://github.com/motion-canvas/examples

---

🤝 기여하고 싶다면

1. Issues에서 good first issue / help wanted 라벨 찾기
2. Fork → branch → PR
3. CI 통과 + 코드리뷰 반영 → merge

문서 기여도 큰 환영. Getting Started / Tutorial 보강이 가장 필요한 영역.

---

🔗 참고 자료

• GitHub: https://github.com/motion-canvas/motion-canvas
• Discord: https://discord.gg/motion-canvas
• 공식 문서: https://motioncanvas.io/docs
• 예제: https://github.com/motion-canvas/examples
• Twitter: https://twitter.com/motion_canvas

상위 문서: ← Motion Canvas 사용 가이드 출처: [주제 가이드 — Motion Canvas 플랫폼/도움말] (자체 조사·작성 2026-07-30) + 1차: Motion Canvas GitHub README 공급사: 자체 작성 + Motion Canvas (motion-canvas 조직) 1차 자료

변경 이력

날짜	변경
2026-07-30	초안 작성 — Type B 자체 정리. GitHub/Discord/문서/트러블슈팅 Q5 + 생태계 표