리모션(Remotion) 설치 가이드

왜 리모션인가

리모션은 React 코드로 영상을 만드는 도구입니다. 애프터이펙트처럼 마우스로 키프레임을 찍는 대신, useCurrentFrame() 같은 함수로 "몇 번째 프레임에 뭐가 보일지"를 코드로 정합니다. 그래서 데이터만 바꿔주면 같은 디자인으로 카드뉴스·쇼츠 영상을 대량으로 자동 생성할 수 있고, Git으로 버전 관리하면서 여러 명이 같은 템플릿을 나눠 작업할 수 있습니다.

노트북에 리모션을 처음 설치한다 프로젝트를 하나 만들어서 미리보기 화면을 띄운다 mp4로 한 번 렌더링까지 해본다

1

Node.js 설치

리모션은 Node.js 위에서 돌아갑니다. 18버전 이상이 필요하며, 최신 LTS(장기지원) 버전을 설치하면 됩니다.

nodejs.org에 접속해 LTS 버튼의 Windows 설치파일(.msi)을 내려받습니다.
설치파일을 실행하고 계속 Next만 눌러 기본값으로 설치합니다.
설치가 끝나면 시작 메뉴 → cmd(명령 프롬프트)를 열어 버전을 확인합니다.

nodejs.org에 접속해 LTS 버튼의 macOS 설치파일(.pkg)을 내려받습니다.
설치파일을 실행하고 계속 계속만 눌러 기본값으로 설치합니다.
설치가 끝나면 Spotlight(⌘+Space) → Terminal을 열어 버전을 확인합니다.

명령 프롬프트 Terminal

$ node -v
v20.x.x
$ npm -v
10.x.x

확인 포인트 버전 번호가 뜨면 성공입니다. "찾을 수 없는 명령"이라고 뜨면 설치 후 터미널을 새로 열지 않았을 가능성이 큽니다. 터미널을 완전히 껐다 다시 열어보세요.

2

코드 에디터 (VS Code) 설치

코드를 보고 수정하려면 에디터가 필요합니다. 리모션 공식 문서도 VS Code를 기준으로 안내합니다.

code.visualstudio.com에서 본인 OS용 설치파일을 내려받아 설치합니다.
실행 후 상단 메뉴 Terminal → New Terminal로 내장 터미널을 열어두면 이후 모든 명령어를 VS Code 안에서 실행할 수 있습니다.

3

리모션 프로젝트 생성

프로젝트를 만들 폴더로 이동한 뒤, 아래 한 줄이면 리모션이 필요한 파일을 전부 자동으로 만들어줍니다.

터미널

$ npx create-video@latest

템플릿을 고르라고 나오면 처음에는 Blank / Hello World 계열을 선택합니다.
프로젝트 이름을 입력합니다 (예: sosin-remotion).
설치가 끝나면 안내대로 폴더로 이동합니다.

터미널

$ cd sosin-remotion

처음 실행 시 주의 내부적으로 화면 렌더링용 헤드리스 크롬을 자동으로 내려받습니다. 인터넷 연결이 필요하고, 회사 와이파이가 아닌 개인 핫스팟이면 시간이 조금 더 걸릴 수 있습니다.

4

미리보기 실행 (Remotion Studio)

프로젝트 폴더 안에서 개발 서버를 켜면 브라우저 창이 자동으로 열리고, 코드를 저장할 때마다 화면이 바로 갱신됩니다.

터미널

$ npm run dev
// 자동으로 브라우저가 열리고 localhost:3000 에서 미리보기가 뜹니다

화면 왼쪽에서 만들어진 컴포지션(장면) 목록을 볼 수 있고, 하단 타임라인을 드래그하면 원하는 프레임으로 바로 이동해 확인할 수 있습니다.

5

영상 렌더링 (mp4로 뽑기)

두 가지 방법이 있습니다. 크루 대부분은 방법 A만 알면 충분합니다.

방법 A · Studio 화면에서 클릭으로 렌더링
Studio 화면 오른쪽 위 Render 버튼을 누르고 저장 위치를 확인하면 진행률이 표시되며 mp4가 만들어집니다.

방법 B · 터미널 명령어로 렌더링 (자동화할 때)

터미널

$ npx remotion render

참고 정확한 npm 스크립트 이름은 템플릿마다 조금씩 다를 수 있습니다. 프로젝트의 package.json의 "scripts" 항목을 한 번 열어보면 dev, render 같은 이름을 확인할 수 있습니다.

6

자주 발생하는 에러

증상	원인 · 해결
버전 관련 에러 문구	Node.js가 18버전보다 낮은 경우가 많습니다. `node -v`로 확인 후 LTS로 재설치
`port 3000 already in use`	이미 열려 있는 미리보기 창이 있는지 확인. 안 쓰는 터미널 창을 모두 닫고 다시 `npm run dev`
권한 오류 / 설치 중 멈춤	PowerShell을 관리자 권한으로 실행 후 한 번만 재시도
`git` 관련 안내창	Xcode Command Line Tools 설치 필요. `xcode-select --install` 실행 후 재시도
렌더링이 유독 느림	정상입니다 — 무거운 SVG 필터(`feTurbulence`, `feDisplacementMap`)를 쓰면 프레임마다 다시 계산되어 느려집니다. 해상도를 낮춰 테스트 렌더링 먼저

7

보너스 — SVG 필터를 리모션에 적용하기

codingapple1/svg-filters 저장소는 설치할 라이브러리가 아니라 복사해서 쓰는 SVG 필터 예제 모음입니다 (구름, 손글씨, 말랑말랑한 goo, 홀로그램, 물결 왜곡 효과). 다만 예제들은 브라우저의 <animate> 태그나 CSS @keyframes로 움직이는데, 이 방식은 리모션의 "프레임 단위 렌더링"과 맞지 않아 그대로 쓰면 렌더링 시 애니메이션이 멈추거나 깨질 수 있습니다.

핵심: SVG 마크업(필터 구조)은 그대로 재사용하고, 애니메이션만 useCurrentFrame() 계산으로 바꿔주면 됩니다.

Before · 브라우저용 (svg-filters/turbulence)

squiggle-text.html

<filter id="squiggle">
  <feTurbulence type="fractalNoise"
    baseFrequency="0.2" numOctaves="1"
    seed="1">
    <animate attributeName="seed"
      values="1;2;3;4;5" dur="0.4s"
      repeatCount="indefinite" />
  </feTurbulence>
  <feDisplacementMap in="SourceGraphic"
    in2="noise" scale="0.7" />
</filter>

After · 리모션 컴포넌트

SquiggleText.tsx

const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const framesPerStep = Math.round((fps * 0.4) / 5);
const seed = (Math.floor(frame / framesPerStep) % 5) + 1;

<feTurbulence type="fractalNoise"
  baseFrequency="0.2" numOctaves="1"
  seed={seed} />

<animate> 태그를 지우고, SMIL의 dur(초)을 fps 기준 프레임 수로 환산해 직접 계산합니다.
repeatCount="indefinite"로 반복되던 효과는 frame % 반복프레임수 형태로 순환시킵니다.
이미지(예: doro.png, water.png)는 리모션의 staticFile()로 public 폴더에 넣고 불러옵니다.
같은 필터 컴포넌트를 한 영상에 여러 번 쓸 계획이면 id="squiggle" 같은 고정 id가 서로 충돌하니, 컴포넌트마다 고유 id를 만들어줘야 합니다.
feTurbulence · feDisplacementMap은 무거운 필터라 실제 해상도로 렌더 속도를 미리 확인하세요.