Remotion The Fundamentals

Remotion의 핵심 개념 — React 컴포넌트, 프레임, Composition, Sequence — 을 한 페이지에서 정리한다. 영상의 본질은 "시간에 따른 이미지의 함수"다.

---

🧩 React 컴포넌트 = 영상의 프레임

Remotion은 "프레임 번호 + 캔버스"를 React에 넘겨주고, 사용자가 React로 무엇이든 렌더링하게 한다. 기본 예제:

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

프레임마다 다른 값을 렌더링하면 → 애니메이션이 된다.

---

🎬 영상의 4가지 속성

속성	의미
width	가로 픽셀
height	세로 픽셀
durationInFrames	총 프레임 수
fps	초당 프레임 수

이 값은 useVideoConfig() 훅으로 가져올 수 있다:

import { AbsoluteFill, useVideoConfig } from "remotion";

export const MyComposition = () => {
  const { fps, durationInFrames, width, height } = useVideoConfig();
  return (
    <AbsoluteFill style={{ /* ... */ }}>
      This {width}x{height}px video is {durationInFrames / fps} seconds long.
    </AbsoluteFill>
  );
};

📌 첫 프레임은 0, 마지막 프레임은 durationInFrames - 1이다.

---

📐 Composition

Composition = React 컴포넌트 + 영상 메타데이터의 결합이다. src/Root.tsx에서 <Composition>으로 등록한다:

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComposition"
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      component={MyComposition}
    />
  );
};

여러 컴포지션을 등록할 때는 React Fragment로 감싼다:

<>
  <Composition ... />
  <Composition ... />
</>

---

📚 영역 구분

• 애니메이션 적용: Remotion Animating Properties
• 컴포넌트 재사용: Remotion Reuse Components
• 한글 hub: Remotion 시작하기

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

변경 이력

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