Ch.2 JavaScript 라이브러리 15선

Remotion — 코드로 영상 만들기

lightbulb

핵심 개념

Remotion

React 코드로 영상을 프로그래밍하는 프레임워크


article

핵심 내용

프리미어 없이 React 코드로 영상을 만드는 라이브러리, Remotion을 만나보세요.

Remotion = 코드로 만드는 동영상 편집기. React 컴포넌트를 프레임 단위로 렌더링해서 MP4 영상을 뽑아냅니다. 프리미어 프로나 애프터이펙트 없이, 코드만으로 유튜브 인트로, 데이터 시각화 영상, SNS 릴스를 만들 수 있습니다.

특히 같은 형식의 영상을 대량 생산해야 할 때 빛납니다. 100개의 명언 영상? 프리미어로 100번 작업하는 대신, 코드 한 번 짜고 JSON만 바꾸면 됩니다.

매주 같은 포맷의 영상을 올려야 할 때, 프리미어를 열기 귀찮을 때, 자동화된 영상 파이프라인이 필요할 때.

수동 방식 (프리미어): 텍스트 하나하나 타임라인에 배치. 100개 영상 = 100번 반복. 폰트 바꾸면 전부 다시 수정. 렌더링도 개별로.

Remotion 코드: React 컴포넌트로 템플릿 작성. JSON 데이터만 바꾸면 영상 자동 생성. 1000개 영상도 스크립트 한 번이면 끝.

npx 한 줄로 프로젝트가 생성됩니다. React를 조금이라도 안다면 즉시 시작할 수 있습니다.

npx create-video@latest my-video

핵심 개념은 3가지입니다. useCurrentFrame() = 지금 몇 번째 프레임인지 interpolate() = 프레임에 따라 값을 변환 Composition = 영상의 크기와 길이 설정

import { useCurrentFrame, interpolate } from "remotion";

// 이 컴포넌트가 곧 영상의 한 장면입니다
export const MyTitle: React.FC = () => {
  const frame = useCurrentFrame(); // 현재 프레임 번호 (0, 1, 2, ...)

  // frame이 0→30으로 갈 때, opacity를 0→1로 변환
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <div style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: "100%",
      height: "100%",
      background: "#FFFDF5",
    }}>
      <h1 style={{ fontSize: 80, fontWeight: "bold", opacity }}>
        Hello, Remotion!
      </h1>
    </div>
  );
};

npm start를 실행하면 브라우저에 미리보기가 열립니다. 'Hello, Remotion!' 텍스트가 1초(30프레임)에 걸쳐 서서히 나타납니다. 하단 타임라인을 드래그하면 프레임별로 확인할 수 있습니다.

AI에게 영상을 요청할 때는 총 길이(초), 장면 구성, 애니메이션 방식을 구체적으로 지정하세요.

좋은 프롬프트 예시: "Remotion으로 30초짜리 인트로 영상을 만들어줘. 로고 페이드인 + 텍스트 타이핑 효과 + 배경색 전환. 30fps, 1920x1080. Sequence로 3개 장면 분리."

프롬프트 변형: "장면 1(0~3초): 배경 그라디언트가 서서히 변하면서 로고가 spring 애니메이션으로 등장. 장면 2(3~7초): 채널명이 타자기 효과로 한 글자씩 나타남. 장면 3(7~10초): '구독' 버튼이 바운스하며 등장. 마지막에 MP4 렌더링 명령어도 알려줘."

import {
  useCurrentFrame, spring, interpolate,
  useVideoConfig, Sequence
} from "remotion";

export const Intro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 로고: 위에서 떨어지는 spring 애니메이션
  const logoY = spring({ frame, fps, from: -200, to: 0, config: { damping: 12 } });

  // 부제목: 30프레임 후 페이드인
  const subOpacity = interpolate(frame, [30, 60], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <div style={{
      background: "linear-gradient(135deg, #667eea, #764ba2)",
      width: "100%", height: "100%",
      display: "flex", flexDirection: "column",
      justifyContent: "center", alignItems: "center",
      color: "white",
    }}>
      <Sequence from={0} durationInFrames={90}>
        <h1 style={{ transform: `translateY(${logoY}px)`, fontSize: 72 }}>
          My Channel
        </h1>
      </Sequence>
      <Sequence from={30} durationInFrames={60}>
        <p style={{ opacity: subOpacity, fontSize: 28, marginTop: 20 }}>
          코드로 만드는 세상
        </p>
      </Sequence>
    </div>
  );
};

spring() = 자연스럽게 튀는 움직임 (damping으로 탄성 조절) interpolate() = 프레임→값 매핑 (선형 변환) Sequence = 장면 분리 (from으로 시작 시점 지정) 이 3가지만 알면 대부분의 모션 그래픽을 표현할 수 있습니다.

유튜브 인트로 영상을 만들어봅시다. 로고 등장 → 채널명 → 슬로건 3단계 구성입니다.

import {
  useCurrentFrame, spring, interpolate,
  useVideoConfig, Sequence, Composition
} from "remotion";

// ── 장면 1: 로고 등장 ──
const LogoScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = spring({ frame, fps, from: 0, to: 1, config: { damping: 8 } });

  return (
    <div style={{
      display: "flex", justifyContent: "center", alignItems: "center",
      width: "100%", height: "100%",
      background: "linear-gradient(135deg, #1a1a2e, #16213e)",
    }}>
      <div style={{
        width: 120, height: 120, borderRadius: 30,
        background: "linear-gradient(135deg, #e94560, #ff6b6b)",
        transform: `scale(${scale})`,
        display: "flex", justifyContent: "center", alignItems: "center",
        fontSize: 48, color: "white", fontWeight: "bold",
      }}>
        VC
      </div>
    </div>
  );
};

// ── 장면 2: 채널명 타이핑 ──
const TitleScene: React.FC = () => {
  const frame = useCurrentFrame();
  const text = "Vibe Coding";
  const charsToShow = Math.min(Math.floor(frame / 3), text.length);

  return (
    <div style={{
      display: "flex", justifyContent: "center", alignItems: "center",
      width: "100%", height: "100%",
      background: "linear-gradient(135deg, #1a1a2e, #16213e)",
      color: "white", fontSize: 64, fontWeight: "bold",
      fontFamily: "monospace",
    }}>
      {text.slice(0, charsToShow)}
      <span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
    </div>
  );
};

// ── 장면 3: 슬로건 페이드인 ──
const SloganScene: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1]);
  const y = interpolate(frame, [0, 20], [30, 0]);

  return (
    <div style={{
      display: "flex", flexDirection: "column",
      justifyContent: "center", alignItems: "center",
      width: "100%", height: "100%",
      background: "linear-gradient(135deg, #1a1a2e, #16213e)",
      color: "#ccc", fontSize: 28,
    }}>
      <p style={{ opacity, transform: `translateY(${y}px)` }}>
        코드 한 줄로 세상을 만든다
      </p>
    </div>
  );
};

// ── 메인 합성 ──
export const YoutubeIntro: React.FC = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={60}><LogoScene /></Sequence>
      <Sequence from={60} durationInFrames={60}><TitleScene /></Sequence>
      <Sequence from={120} durationInFrames={60}><SloganScene /></Sequence>
    </>
  );
};

// Root에 등록 (index.ts)
// <Composition id="YoutubeIntro" component={YoutubeIntro}
//   width={1920} height={1080} fps={30} durationInFrames={180} />

npm start로 미리보기를 확인한 뒤, 아래 명령어로 MP4를 출력합니다. npx remotion render src/index.ts YoutubeIntro out/intro.mp4 6초(180프레임) 짜리 인트로 영상이 out 폴더에 생성됩니다.

채널명과 색상을 props로 받게 만들면 재사용 템플릿이 됩니다. AI에게 "채널명을 props로 받아서 다른 채널에도 쓸 수 있게 수정해줘"라고 요청해보세요.

key

핵심 용어

🎬

Remotion

React 코드로 영상을 프로그래밍하는 프레임워크

유튜브 인트로

채널명, 배경색, 로고만 바꾸면 되는 인트로 영상 자동 생성

데이터 영상

주간 매출 데이터를 받아 차트가 움직이는 보고 영상 제작

SNS 릴스/숏츠

명언, 뉴스 요약을 카드형 영상으로 변환해 대량 생산

제품 데모

앱 화면 캡처 + 자막 + 전환 효과가 들어간 소개 영상

check_circle

핵심 정리

  • 1Remotion은 React 컴포넌트를 프레임 단위로 렌더링해 MP4 영상을 만드는 라이브러리다
  • 2useCurrentFrame()으로 현재 프레임, interpolate()로 값 보간, spring()으로 자연스러운 바운스를 구현한다
  • 3Sequence 컴포넌트로 장면을 분리하고, from/durationInFrames로 각 장면의 타이밍을 제어한다
  • 4npx remotion render 명령어로 브라우저 미리보기 없이 MP4 파일을 바로 출력할 수 있다
  • 5props를 활용하면 하나의 템플릿으로 수백 개의 변형 영상을 자동 생성할 수 있다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작