topic★★★★★난이도

Remotion — 코드로 영상 제작

React 컴포넌트로 영상을 만드는 라이브러리. 프레임 단위 제어, MP4 렌더링까지.

#Remotion#영상#React#MP4

왜 배우는가

프리미어 프로를 배울 필요 없다. React를 알면 유튜브 인트로, 데이터 시각화 영상, SNS 동영상을 코드로 찍어낼 수 있다. 프로그래머의 영상 편집기.

Remotion은 프로그래머의 영상 편집기다. After Effects 대신 React 컴포넌트로 장면을 구성하고, `useCurrentFrame()` 훅으로 현재 프레임을 받아 애니메이션을 만든다. 최종 결과물은 MP4로 렌더링.

용도	설명
유튜브 인트로	텍스트 애니메이션 + 배경 효과
데이터 영상	차트가 성장하는 애니메이션
SNS 콘텐츠	인스타 릴스, 틱톡 영상 자동 생성
교육 영상	코드가 한 줄씩 나타나는 코딩 튜토리얼

javascript

// npm install remotion @remotion/cli
import { useCurrentFrame, AbsoluteFill } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame(); // 현재 프레임 (30fps)
  const opacity = Math.min(1, frame / 30); // 1초간 페이드인

  return (
    <AbsoluteFill style={{ backgroundColor: "#0f172a", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ color: "white", fontSize: 80, opacity }}>Hello, Remotion!</h1>
    </AbsoluteFill>
  );
};

`useCurrentFrame()`이 매 프레임마다 호출되어 값이 바뀐다. React 컴포넌트 구조 그대로 사용하며, `npx remotion render`로 MP4를 출력한다.

Claude Code 팁: "Remotion으로 카운트다운 타이머 영상 만들어줘"처럼 구체적인 장면을 지시하면 프레임 계산, 이징 함수까지 포함된 코드를 생성한다.