Remotion 사용 가이드

Remotion은 React 컴포넌트로 프로그래밍 방식의 비디오 제작을 가능하게 하는 프레임워크다. 공식 문서는 30여 개 카테고리, 350+ 페이지 규모로 매우 방대하여, 학습·참조 효율을 위해 다음 6개 영역 sub-hub × 6 children = 43 페이지 구조로 그룹핑한다.

📚 하위 페이지

#	Sub-hub 제목	영문 카테고리	핵심 주제
1	Remotion 시작하기	Getting started	설치, 기본 개념, 애니메이션, 컴포넌트 재사용, 미리보기, 업그레이드
2	Remotion 비주얼 & 미디어	Designing visuals / Videos / Audio / Captions / Transitions / Parameterized	레이어·도형, 영상, 오디오, 자막, 트랜지션, 파라미터
3	Remotion 렌더링	Rendering / SSR / Client-side / Lambda / Cloud	렌더링 개요, CLI, SSR, 브라우저, Lambda, 클라우드 호스팅
4	Remotion Studio & Player	Studio / Player / Building apps / Pro 도구	Studio, Player, 앱 통합, Recorder, Editor Starter, Timeline
5	Remotion AI & 도구	AI / Coding Agents / Tooling	AI 통합, 코딩 에이전트, MCP/Skills, Tailwind, TypeScript, WebCodecs
6	Remotion 트러블슈팅 & 운영	Troubleshooting / FAQ / Terminology / License / Resources	트러블슈팅, FAQ, 용어집, 라이선스, 리소스

📋 Sub-hub별 children 설계안

1️⃣ Remotion 시작하기 (Getting started)

Remotion Installation — npx create-video, 시스템 요구사항, 템플릿
Remotion The Fundamentals — 컴포지션, 시퀀스, useCurrentFrame, 절대 좌표
Remotion Animating Properties — interpolate, spring, Easing
Remotion Reuse Components — 컴포넌트 재사용 패턴, props
Remotion Preview Your Video — Studio 실시간 미리보기, 단축키
Remotion Upgrading — 2.0~5.0 마이그레이션 가이드

2️⃣ Remotion 비주얼 & 미디어 (Visuals & Media)

Remotion Adding Video — <Video>, 시퀀스, 변환
Remotion Adding Audio — <Audio>, 볼륨/속도/뮤트/시각화
Remotion Designing Visuals (Layers) — <AbsoluteFill>, 도형, 이미지, 3D
Remotion Captions — Whisper 트랜스크립션, 표시, SRT, TikTok 스타일
Remotion Transitions — 트랜지션 시리즈, 프리셋
Remotion Parameterized Videos — inputProps, calculateMetadata

3️⃣ Remotion 렌더링 (Rendering)

Remotion Rendering Overview — 렌더링 모델, 번들, serve URL
Remotion CLI Render — npx remotion render, ffmpeg 옵션
Remotion Server-side Rendering (SSR) — @remotion/renderer, Node API
Remotion Client-side Rendering — 브라우저 내 렌더링
Remotion Lambda — AWS Lambda 기반 클라우드 렌더
Remotion Cloud Hosting — Vercel / Cloud Run / Azure / Cloudflare

4️⃣ Remotion Studio & Player (Studio·Player)

Remotion Studio — 로컬 개발 환경, UI, 단축키
Remotion Player — 임베디드 재생 컴포넌트, controls
Remotion Building Apps — Next.js, brownfield, 기존 앱 통합
Remotion Recorder — 화면 녹화 + Remotion
Remotion Editor Starter (Pro) — 화이트라벨 영상 에디터
Remotion Timeline (Pro) — 타임라인 UI 컴포넌트

5️⃣ Remotion AI & 도구 (AI & Tooling)

Remotion AI Integration — AI로 영상 생성, 프롬프트 → 모션 그래픽
Remotion Coding Agents — Claude Code / Codex / Kimi Code 플러그인
Remotion MCP & Skills — MCP 서버, Agent Skills
Remotion Tailwind & Styling — Tailwind v4 통합
Remotion TypeScript & Bundler — TS 설정, Webpack/Vite 번들러
Remotion WebCodecs (deprecated) — WebCodecs API (deprecated, 참고용)

6️⃣ Remotion 트러블슈팅 & 운영 (Operations)

Remotion Troubleshooting Overview — 일반 오류, 렌더 실패 디버그
Remotion FAQ — 자주 묻는 질문
Remotion Snippets — 코드 스니펫 모음
Remotion Terminology — 용어 사전 (Composition, Sequence, Bundle 등)
Remotion License & Pricing — 라이선스, 가격, 컴플라이언스
Remotion Resources & Community — 쇼케이스, 디스코드, 블로그

⚡ 빠른 시작 (5분 만에 첫 영상)

npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev

브라우저에서 http://localhost:3000 접속 → Remotion Studio에서 실시간 미리보기.

📞 추가 리소스

공식 문서: https://www.remotion.dev/docs
템플릿 갤러리: https://www.remotion.dev/templates
GitHub: https://github.com/remotion-dev/remotion
디스코드: https://remotion.dev/discord
프롬프트 쇼케이스: https://www.remotion.dev/prompts

🚦 다음 단계 (승인 후 진행)

6개 sub-hub 페이지 생성 (parent_id = 908, hub 콘텐츠 업로드)
각 sub-hub별로 6개 child 페이지 작성 (한/영 병기, 공식 문서 한글화)
upload-remotion-hubs.py 스크립트로 일괄 업로드
검증 및 보고

상위 문서: 없음 (Remotion 루트 hub) 출처: Remotion 공식 문서 한글화 설계안 (2026-07-29) 공급사: Remotion AG (스위스)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Remotion 공식 문서 카테고리 매핑 → 6 hub × 6 children 구조안
2026-07-29	메타데이터 블록을 본문 하단으로 이동