Remotion Timeline (Pro)

Remotion Timeline은 Pro 제품으로, 드래그 가능한 비주얼 타임라인 UI 컴포넌트를 제공한다. 사용자가 직접 씬·트랙·자막을 조작하는 영상 에디터 SaaS에 적합.

---

💡 왜 Timeline 컴포넌트가 필요한가

Remotion은 기본적으로 컴포지션 단위로 작동한다. 하지만 사용자가 씬 단위로 자르고 드래그하며 편집하려면 비주얼 타임라인 UI가 필수. Timeline은 이를 위한 React 컴포넌트 모음을 제공한다.

---

🛒 접근

Timeline은 Remotion Pro 라이선스 필요:

• https://remotion.pro/store
• 구매 후 GitHub repo 접근

---

🧩 핵심 컴포넌트

컴포넌트	역할
<Timeline />	메인 타임라인 컨테이너
<Timeline.Track />	한 트랙 (영상/오디오/자막)
<Timeline.Item />	트랙 내 한 항목 (씬)
<Timeline.Playhead />	현재 시간 인디케이터
<Timeline.Scrubber />	드래그 가능한 시간 표시

---

🚀 기본 사용법

import { Timeline } from "@remotion/timeline";

const items = [
  { id: 1, from: 0, duration: 60, content: <Scene1 /> },
  { id: 2, from: 60, duration: 90, content: <Scene2 /> },
  { id: 3, from: 150, duration: 60, content: <Scene3 /> },
];

<Timeline.Root
  duration={210}            // 전체 길이 (frames)
  fps={30}
>
  <Timeline.Track trackId="main">
    {items.map((item) => (
      <Timeline.Item
        key={item.id}
        from={item.from}
        duration={item.duration}
        content={item.content}
      />
    ))}
  </Timeline.Track>
  <Timeline.Playhead />
</Timeline.Root>

---

🎨 커스터마이즈

트랙 추가 (자막, 오디오 등)

<Timeline.Root duration={210} fps={30}>
  <Timeline.Track trackId="video">
    {scenes.map((s) => <Timeline.Item key={s.id} {...s} />)}
  </Timeline.Track>

  <Timeline.Track trackId="audio">
    {audioClips.map((c) => <Timeline.Item key={c.id} {...c} />)}
  </Timeline.Track>

  <Timeline.Track trackId="captions">
    {captions.map((c) => <Timeline.Item key={c.id} {...c} />)}
  </Timeline.Track>
</Timeline.Root>

드래그·리사이즈

Timeline은 기본적으로 드래그로 from 변경, 양쪽 핸들로 duration 변경 지원:

<Timeline.Item
  from={item.from}
  duration={item.duration}
  draggable            // 사용자가 위치 변경 가능
  resizable            // 사용자가 길이 변경 가능
  onChange={(newFrom, newDuration) => {
    // 상태 업데이트
  }}
/>

---

🎬 타임라인과 Player 연결

const [frame, setFrame] = useState(0);

<Timeline.Root duration={210} fps={30} onFrameChange={setFrame}>
  {/* ... */}
</Timeline.Root>

<Player
  ref={playerRef}
  component={Composition}
  durationInFrames={210}
  compositionWidth={1920}
  compositionHeight={1080}
  fps={30}
/>

// 타임라인 클릭 시 Player 시킹
useEffect(() => {
  playerRef.current?.seekTo(frame);
}, [frame]);

---

🎯 실전 패턴: 영상 에디터 SaaS

[Left Sidebar]   [Center: Preview]              [Right: Properties]
   Scenes         <Player />                     Item: "Scene 2"
   Audio                                            From: 60
   Captions                                          Duration: 90
                                                     Color: #f5576c

   ─────────────────────────────────────────────────
   [Timeline - 드래그/리사이즈 가능]
   Video:  [Scene 1] [Scene 2][Scene 3]
   Audio:       [BGM              ]
   Captions:   [안녕하세요] [반갑습니다]
   ─────────────────────────────────────────────────
   [Render Button]

---

⚠️ 알아둘 점

• Pro 라이선스 — 구매 필요
• Remotion 4.0+ — Timeline은 최신 Remotion API 기반
• 상태 관리 — 외부에서 items 상태 관리 (Redux / Zustand / Recoil 등)
• 렌더 통합 — Timeline에서 만든 items를 <Composition> + inputProps로 변환해 Lambda/SSR 렌더

---

📚 영역 구분

• 에디터 SaaS 전체: Remotion Editor Starter (Pro)
• 단순 Player: Remotion Player
• 앱 통합: Remotion Building Apps
• 한글 hub: Remotion Studio & Player

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

변경 이력

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