리액트로 영상 편집을 할 수 있다고?

정현·2026년 7월 31일

테크

remotion에 대해 알아보자

영상 편집 툴

Remotion은 리액트를 사용해서 프로그래밍 하듯이 영상을 제작할 수 있는 프레임워크입니다.

원래 영상 편집이라 하면 프리미어프로, 파이널 컷 같은 고급 영상 편집 도구를 사용하여 제작하지만 툴을 잘 다루는 사람이 아니라면 직접 편집하기 힘들기도 하고 툴 자체가 무겁기도 합니다.

하지만 Remotion을 사용한다면 코드로 데이터를 기반으로 동적으로 비디오를 생성할 수 있게 됩니다!

어디에 사용할 수 있을까?

사실 일반적인 영상 편집 도구로 활용하기 보다 영상을 대량으로 생산할때 매우 좋을 것 같습니다.

매일 생성 되어야 하는 영상 자동화나 사용자별로 영상을 각각 제공해줘야 하는 경우(연말 결산, 사용자 특화 영상), 숏폼 하이라이팅 등 데이터 기반 동적 영상 편집이 가능하다 보니 일종의 영상 틀로 들어가는 데이터나 사소한 디테일만 다르게 하여 영상을 가공 및 제공할 수 있는거죠.

렌더링도 일괄로 처리할 수 있기에 특히나 대량 영상 처리에 유용할 것 같습니다.

그리고 결국 영상 편집을 코드화 할 수 있다보니 에이전트에게 영상 편집을 시킬때도 훨씬 AI가 잘 영상 편집을 해줄 것 같습니다.

개념만 빠르게 살펴보자

Remotion은 크게 세 가지 핵심 개념을 기반으로 동작합니다.

코드로 구성

리액트의 컴포넌트 시스템을 그대로 활용하여 복잡한 비디오를 코드로 구성할 수 있습니다.

기존에 리액트로 개발할 때 사용하던 JSX, 훅, props 등의 개념을 그대로 영상 제작에 활용할 수 있습니다.

이러니 개발을 할 줄 안다면 더 쉽게 영상 편집에 접근할 수 있는거죠.

동적으로 편집

비디오를 파라미터화 하여 데이터를 전달할 수 있습니다.

이를 활용하면 사용자 이름, 통계, 이미지 등을 파라미터로 전달하여 같은 템플릿으로 내용만 다른 영상을 쉽게 양산하여 제공할 수 있겠죠?

또한, Remotion Player를 사용하면 웹에서 비디오를 임베드하고, 그 주변에 인터페이스를 구축해둘 수도 있겠습니다.

확장 가능한 렌더링

웹에서만 보여주는게 아닌 비디오를 MP4나 다른 포맷으로 렌더링할 수 있습니다.

특히 Remotion Lambda를 사용하면 AWS Lambda에서 병렬로 비디오를 렌더링하여 대량 영상 처리에 유용할 것 같습니다.

어떻게 동작하는거지

이쪽 도메인을 자세하게 살펴보지 않아서 제가 이해한 내용을 바탕으로 짧게 정리해보겠습니다.

기존 영상 편집 툴

일반적인 영상 편집 툴들은 타임라인을 기준으로 편집해주는 도구라고 보면 됩니다.

영상 편집 툴의 흐름을 살펴보자면

미디어 파일 분석

사용자가 영상 파일을 넣으면 편집기는 먼저 내부 구조를 분석합니다.

mp4를 예시로 보면
H.264 영상 스트림, 오디오 스트림, 메타데이터(시간, 해상도, 키프레임 등)
등 이런식으로 mp4 컨테이너가 가지고 있는 내용을 분석하여

영상과 오디오 스트림을 분리합니다 (Demux)
그리고 난뒤 압축된 H.264 데이터를 실제 픽셀 프레임으로 변환 (Decode)

프로젝트와 타임라인을 데이터로 저장

영상 편집 툴은 원본 영상을 수정하지 않고 사용자가 수행한 편집을 JSON이나 내부 프로젝트 포맷으로 저장합니다. (non destructive editing, 비파괴 편집)

그렇기에 프로젝트에는 타임라인 어디에 놓을지 크기와 위치, 효과와 전환, 키프레임 등의 정보가 저장 되어 있습니다. (기본적인 편집 툴 기준)

그래서 사용자가 헤드를 놓은 위치를 기준으로 그 시간에 활성화된 클립, 각 클립의 원본 영상의 시간, 효과 적용과 어느 순서로 합성되는지 등을 통해 현재 위치에 필요한 프레임을 계산합니다.

오디오 처리

오디오는 각 오디오 클립에서 샘플을 가져와 볼륨, 페이드 인아웃, 재생 속도 등의 효과를 처리합니다.

영상은 30, 60프레임처럼 프레임 단위로 처리하지만 오디오는 일반적으로 초당 약 4만개 이상의 샘플을 처리하기 때문에 시간 체계를 잘 맞춰주는 것이 중요합니다.

최종 렌더링

프리뷰에서는 바로 재생되는 것이 중요하기 때문에 저해상도나 프록시 파일을 사용할 수 있습니다.

그러나 최종 내보내기에서는 모든 프레임을 정확하게 다시 계산합니다.

30프레임의 5분 영상을 기준으로 보면
5 × 60 × 30 = 9,000프레임

프레임 0~8999 계산 -> 각 프레임 인코딩 -> 오디오 인코딩 -> mp4에 mux

절차를 거친다고 보면 되겠습니다.

그렇다면 이제 remotion을 보자

영상은 React 컴포넌트

Remotion에서는 영상을 리액트 컴포넌트로 정의합니다.
그래서 기본적인 정의는 아래와 같습니다.

frame = 0  → React 화면 생성
frame = 1  → React 화면 생성
frame = 2  → React 화면 생성

시간에 따라 상태가 흘러간다기 보다 각 프레임을 독립적으로 계산합니다.

Remotion의 useCurrentFrame()은 현재 렌더링할 프레임 번호를 돌려줍니다. 첫 프레임은 0이며, 시퀀스 내부에서는 해당 시퀀스 시작점을 기준으로 상대 프레임이 제공됩니다.

const frame = useCurrentFrame();

기본 구성과 시퀀스

영상의 해상도, FPS, 길이 등을 등록합니다.

<Composition
  id="MyVideo"
  component={MyVideo}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={300}
/>

아래의 시퀀스 구성 코드는 일반 편집기의 클립 배치와 비슷한 개념이라고 보시면 됩니다.

const Video = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={60}>
        <Intro />
      </Sequence>

      <Sequence from={60} durationInFrames={150}>
        <Main />
      </Sequence>

      <Sequence from={210} durationInFrames={90}>
        <Outro />
      </Sequence>
    </>
  );
};

생각해야하는점

일반적인 재생 코드는 다음과 같이 생각하기 쉽습니다.

position += velocity;
opacity += 0.01;

이 코드는 이전 상태에 의존합니다.

하지만 Remotion에서는 프레임 100을 프레임 0부터 순서대로 재생하지 않고 바로 렌더링할 수 있어야 합니다.

const x = interpolate(frame, [0, 100], [0, 1000]);

이런식으로 말이죠.
이전 프레임 상태 → 다음 프레임 상태 (X)
프레임 번호 + 입력 데이터 → 현재 화면 (O)

FrameImage = render(frameNumber, props)

여러 서버가 분산 렌더링을 할 수 있도록 위 함수에 같은 프레임과 같은 props를 넣으면 항상 같은 결과가 나오는 것이 이상적입니다.

렌더링 과정

Remotion의 서버 렌더링을 단순화하자면

React 코드에서 Remotion Bundle 생성 →
Chromium에서 특정 프레임 렌더 →
프레임 이미지 생성 →
오디오 처리 및 영상 인코딩 →
MP4 완성

쉽게 말하자면 브라우저 DOM과 CSS를 영상 프레임 생성 엔진처럼 사용한다고 보면 됩니다.

정리

remotion

remotion은 프리미어프로, 파이널컷처럼 고퀄리티 영상 편집 도구가 아닙니다.

공식 사이트에서도

React를 사용하여 실제 MP4 비디오를 제작하세요.
코딩 에이전트를 활용하고, 앱을 구축하고, 일괄 렌더링하세요.

위의 기능들을 강조하고 있습니다.

그렇기에

내가 영상 편집을 할줄 모르는데 영상 처리가 필요하다?
→ 코딩 에이전트에게 코드 생성 시키듯이 영상 편집을 맡겨보자!

여러 사람에게 내용만 조금씩 다른 영상을 제공해야 하거나 주기적인 영상 제작이 필요하다?
→ 코드화된 틀을 사용하여 일괄 렌더링 및 자동화 시켜보자!

함께쓰는 모션(애니메이션) 에셋을 만들어서 공유 및 팀원에게 뿌리고 싶다?
→ 조직을 위한 애니메이션 에셋 라이브러리를 만들어서 공유해보자!

remotion을 활용한 서비스 내 간단한 편집 도구, 드래그 앤 드롭을 통한 인터렉티브한 비디오 등등 이런 방향성으로 remotion 라이브러리를 활용하면 좋을 것 같습니다!

또한 제가 소개드린 기능 외에 remotion에서 제공되는 기능(Remotion Studio, Editor Starter)들은 더 많으니 직접 공식 문서를 보며 활용해도 좋을 것 같습니다!

긴 글 읽어주셔서 감사합니다 :)

기타

Remotion 설치

npx create-video@latest