코딩 몰라도 따라하는 Remotion 첫걸음 (Shorts 자동화 2편)

도입

1편에서는 macOS와 Oracle A1 서버에 Remotion을 돌릴 준비를 마쳤습니다.

Shorts 자동화 툴을 Vrew에서 Remotion으로 바꾸면서 생긴 일들

 

이번 편부터는 진짜 코딩이 들어갑니다. 단, 개발 경험이 없어도 명령어를 그대로 따라 치면 같은 결과가 나오도록, 나오는 용어는 도마마다 풀어서 설명했습니다. 서버 없이 로컬(macOS)만으로도 이번 편 실습은 다 따라할 수 있습니다.

Remotion, 한 문장으로 말하면

Remotion은 "화면에 무언가를 그리는 코드를 쓰면, 그 화면을 그대로 녹화해서 mp4 파일로 만들어주는 도구"입니다. 웹페이지를 만드는 코드(React)로 영상을 만든다고 생각하면 됩니다. 직접 마우스로 타임라인을 드래그하는 영상 편집 툴(프리미어프로 같은)과 달리, 숫자와 코드로 "몇 번째 초에 이게 나온다"를 직접 지정하는 방식입니다. 처음에는 낯설게 느껴질 수 있지만, 대본만 바꾸면 영상이 통채로 나오는 자동화를 만들 수 있는 게 핵심 장점입니다.

시작 전 준비물

• macOS에 Node.js가 설치되어 있어야 합니다 (1편에서 node -v로 확인한 부분입니다)
• "터미널"(또는 "콘솔")이라는 검은 화면이 난생하다면: macOS의 기본 앱 중 "터미널(Terminal)"을 실행하면 나오는 글자만 있는 창입니다. 여기에 명령어를 타이핑하거나 붙여넣고 Enter를 누르면 그 명령이 실행됩니다. 이 글의 `bash 코드블록은 도부분이 이 터미널에 그대로 붙여넣는 명령어입니다.

프로젝트 만들기

터미널에서 작업하고 싶은 폴더로 이동한 뒤, 아래 명령을 실행합니다.

npx create-video@latest

npx는 "이 도구를 따로 설치하지 않고 임시로 다운받아서 바로 실행"하라는 Node.js의 명령어입니다. 실행하면 물음 말품이 순차로 나오는데, 아래처럼 선택하면 됩니다.

• 템플릿: Hello World (가장 기본적인 샘플)
• TailwindCSS: No
• Agent Skills: No

설치가 끝나면 생성된 폴더로 들어가서 아래를 실행합니다.

npm i
npm run dev

npm i는 프로젝트에 필요한 부품들(라이브러리)을 설치하는 명령이고, npm run dev는 미리보기 프로그램(Remotion Studio)을 켜는 명령입니다. 실행하면 브라우저가 자동으로 열리면서 localhost:3000으로 시작하는 주소에 미리보기 화면이 나타납니다. 이 화면에서 코드를 고칠 때마다 영상이 실시간으로 바뀌는 걸 볼 수 있습니다.

프로젝트 안에 뭐가 생겼나요

Hello World 템플릿을 고르면 아래와 비슷한 파일들이 생깁니다.

src/
├── HelloWorld.tsx        ← 영상 하나를 그리는 설계도
├── HelloWorld/           ← 그 안에 들어가는 부품들(제목, 로고 등)
├── index.ts
└── Root.tsx              ← "이 프로젝트에 어떤 영상들이 있다"를 등록해두는 목록파

파일을 다 외울 필요는 없고, Root.tsx에 영상이 하나 "등록"되어 있고, 그 영상의 설계도가 HelloWorld.tsx에 있다는 구조만 기억해두면 됩니다.

핵심 개념 5가지, 쉬운 말로 풀면

개념 쉽게 말하면

Composition	영상 하나의 "설정표". 몇 초짜리인지, 가로×세로 크기는 어떻게 되는지를 적어놓은 카드라고 생각하면 됩니다
useCurrentFrame()	"지금 몇 번째 그림(프레임)인지" 알려주는 시계. 영상은 사진을 초당 수십 장씩 빠르게 넘기는 건데, 그 장수 번호를 알려주는 역할입니다
interpolate()	"값을 서서히 바꿔주는 계산기". 예를 들어 "프레임 0일 때는 투명도 0, 프레임 30일 때는 투명도 1"처럼 점점 변하는 값을 만듭니다
spring()	탄성 있게 "톡" 튀는 움직임을 계산해주는 함수. 경직하게 움직이는 것보다 자연스럽게 보입니다
Sequence	"특정 시점부터 등장시키는 무대 장치". <Sequence from={75}>라고 쓰면 75번째 프레임부터 그 안의 내용이 나타납니다

실습 1 — 영상 길이 바꿔보기

src/Root.tsx 파일을 열어서 durationInFrames={150} 부분을 durationInFrames={90}로 고치고 저장해보세요. 저장하자마자 Studio 화면이 자동으로 새로고침되면서 영상 길이가 5초에서 3초로 줄어든 걸 확인할 수 있습니다. 계산은 간단합니다 — "프레임 수 ÷ fps = 초"입니다 (150÷30=5초, 90÷30=3초). 같은 원리로 fps값을 바꾸면 같은 프레임 수라도 영상 길이가 달라집니다.

실습 2 — 세로 영상(9:16)으로 바꾸기

Shorts는 세로 영상이므로, 같은 파일에서 가로×세로 값을 바꿔봅니다.

width={1080}
height={1920}

기존에 1920x1080(가로)이었던 값을 위처럼 바꾸면 Studio 미리보기가 세로 화면으로 바뀌는 걸 확인할 수 있습니다.

실습 3 — 이미지 넣어보기

Remotion은 public 폴더에 넣은 파일을 영상 안에 불러올 수 있게 해줍니다. 테스트용 이미지(test.png)를 public 폴더에 넣은 뒤, 코드에 아래처럼 추가합니다.

import { staticFile, Img } from "remotion";

<Img src={staticFile("test.png")} style={{ width: 300, position: "absolute", top: 20, left: 20 }} />

staticFile()은 "public 폴더 안의 이 파일을 가리키라"는 뜻이고, <Img>는 그 파일을 화면에 그려달라는 태그입니다. 저장하면 Studio 화면 좌상단에 이미지가 나타납니다.

실습 4 — 오디오 넣어보기

테스트용 음성이 없다면, macOS에 기본 내장된 음성 합성 기능으로 간단히 만들 수 있습니다.

say -o public/test.wav --data-format=LEI16@44100 "안녕하세요 테스트입니다"

코드에 <Audio src={staticFile("test.wav")} />를 추가하면 Studio 재생 버튼으로 음성이 재생되는 걸 확인할 수 있습니다.

로컬에서 진짜 mp4로 뽑아보기

Studio 화면에서 미리보는 것과, 실제 영상 파일로 만드는 건 다른 단계입니다. 터미널에서 아래 명령을 실행합니다.

npx remotion render HelloWorld

처음 실행할 때는 영상 녹화용 헤드리스 Chromium을 다운로드하는데 시간이 조금 걸릴 수 있습니다(인터넷 연결 필요). 다 끝나면 out/HelloWorld.mp4 파일이 생기고, 아래 명령으로 바로 열어볼 수 있습니다.

open out/HelloWorld.mp4

앞서 넣었던 이미지와 오디오가 영상 안에 그대로 들어가 있는 걸 확인할 수 있습니다.

주의사항 / 흔한 실수

• 파일을 고칠 때는 따옴표나 중괄호 단위를 정확히 맞춰야 합니다. 하나라도 어긋나면 Studio 화면에 빨간 에러가 나타나지만, 대부분 어느 줄이 문제인지 명확히 알려줍니다.
• npm run dev를 종료하려면 터미널에서 Control+C를 누르면 됩니다.
• 처음 npx remotion render를 실행할 때만 Chromium 다운로드로 시간이 걸리고, 그 다음부터는 수 초 안에 끝납니다.

마무리

이번 편에서는 Remotion 프로젝트를 처음 만들고, Composition·useCurrentFrame·interpolate·spring·Sequence라는 다섯 개념을 쉬운 말로 익혔습니다. 영상 길이와 비율을 바꿔보고, 이미지·오디오를 넣어본 뒤 로컬에서 mp4로 뽑아보기까지 끝냈습니다. 다음 편에서는 코드를 전혀 안 건드리고 JSON 파일만 바꾼 새 대본으로 영상이 바뀌게 만드는 방법을 다룹니다.

대본만 바꾸면 영상이 바뀐다: Remotion 데이터 주입 구조 만들기 (Shorts 자동화 3편)

 

---

[핵심요약] Remotion 프로젝트 만들기와 핵심 개념 5가지 익히기