Remotion Studio

Remotion Studio는 Remotion 프로젝트의 로컬 개발 환경이다. React Fast Refresh로 코드 수정 즉시 반영되며, 컴포지션 단위로 미리보기·렌더 트리거가 가능하다.

🚀 Studio 실행

# 일반 템플릿
npm run dev

# 또는
npx remotion studio

http://localhost:3000에서 열린다 (포트 충돌 시 더 높은 번호).

🖥️ UI 구성

┌──────────────────────────────────────────────┐
│  [Sidebar]    [Canvas]      [Props Editor]  │
│  Comp 1                       Title: "..."  │
│  Comp 2                       Color: #...   │
│  Comp 3                                     │
├──────────────────────────────────────────────┤
│  [Timeline]  [Playback Controls]             │
│  0 ─── 30 ─── 60 ─── 90 ─── 120 ─── 150     │
└──────────────────────────────────────────────┘

Sidebar — src/Root.tsx에 등록된 컴포지션 목록
Canvas — 현재 프레임 미리보기
Props Editor — 컴포지션의 inputProps를 폼으로 편집
Timeline — 프레임 단위 탐색
Playback Controls — 재생·일시정지·앞뒤 이동

⌨️ 단축키

키	동작
`Space`	재생/일시정지
`←` / `→`	1프레임 뒤/앞
`Shift + ←/→`	10프레임 뒤/앞
`Home` / `End`	시작/끝 프레임으로
`J` / `K` / `L`	역재생 / 일시정지 / 재생
`Ctrl/Cmd + S`	defaultProps 저장

전체 단축키: https://www.remotion.dev/docs/studio/shortcuts

🎯 Studio API (Programmatic)

Remotion 4.0+부터 Studio는 iframe으로 임베드 가능하고, JavaScript API로 제어할 수 있다.

import { Studio } from "@remotion/studio";

<Studio
  // 선택 옵션
  defaultCompositionId="MyComposition"
  readOnly={false}
/>

외부에서 Studio 제어

import { seek, play, pause } from "@remotion/studio";

await seek({ compositionId: "MyComposition", frame: 60 });
await play();
await pause();

자세한 API: https://www.remotion.dev/docs/studio/api

🖼️ Static 파일 (public/)

public/ 디렉터리의 파일은 staticFile()로 참조:

import { staticFile, Img } from "remotion";

<Img src={staticFile("logo.png")} />

Studio는 변경 시 자동 리로드.

🔄 Hot Reload (Fast Refresh)

코드 수정 → 자동으로 Studio 리로드 + 캔버스 갱신. 매번 npm run dev 재실행할 필요 없음.

🚢 Studio 배포 (Studio-into-app)

Remotion Studio를 앱에 임베드해 디버깅·편집 도구로 사용:

# 또는 프로그래밍 방식
import { Studio } from "@remotion/studio";

자세한 가이드: https://www.remotion.dev/docs/studio-into-app

⚠️ 알아둘 점

첫 실행 — 의존성 설치 + Chromium 체크 등 5~10초 소요
메모리 — 기본 ~200MB, 큰 컴포지션은 더 사용
디버깅 — Chrome DevTools로 React 컴포넌트 디버깅 가능 (Studio 자체는 Chromium 기반)
Studio는 프로덕션 도구 아님 — 일반 사용자에게 노출하지 말 것

📚 영역 구분

Player 임베드: Remotion Player
앱 통합: Remotion Building Apps
Pro 도구: Remotion Editor Starter (Pro), Timeline (Pro)
한글 hub: Remotion Studio & Player

상위 문서: ← Remotion Studio & Player 출처: Remotion 공식 문서 — Studio 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

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