Remotion Preview Your Video

Remotion Studio는 로컬에서 영상을 실시간으로 미리보기할 수 있는 개발 환경이다. React Fast Refresh로 코드 수정 즉시 반영된다.

---

🚀 Studio 실행

템플릿 종류	명령
일반 (Regular)	npm run dev
Next.js / React Router 7	npm run remotion

이 명령은 다음 CLI의 축약형이다:

npx remotion studio

http://localhost:3000 (포트가 사용 중이면 더 높은 번호)에서 Remotion Studio가 열린다.

---

🎬 Studio UI

좌측 사이드바에 등록된 컴포지션 목록, 중앙에 비디오 캔버스, 하단에 타임라인이 표시된다:

• 타임라인 드래그 — 특정 프레임으로 이동
• Space — 재생/일시정지
• J/K/L — 단축키 (Studio 가이드 참고)

---

🔄 Hot Reload

React Fast Refresh 덕분에 소스 코드 저장 시 자동으로 다시 로드된다. 매번 npm run dev 재실행할 필요 없음.

---

🆚 다른 미리보기 방법

방법	적합
Remotion Studio	일반적인 개발·디버깅
<Player> 컴포넌트	React 앱에 임베드된 미리보기
CLI render	실제 mp4 파일 출력 (가장 느림)

자세한 Studio 기능: /docs/studio

---

📚 영역 구분

• Studio 고급 기능: Remotion Studio & Player
• 실제 렌더링: Remotion 렌더링 → CLI Render
• 한글 hub: Remotion 시작하기

상위 문서: ← Remotion 시작하기 출처: Remotion 공식 문서 — Preview your video 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Preview your video 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동