영상을 코드로 적으면 생기는 일
편집 프로그램으로 만든 영상은 AI가 손댈 수 없습니다. 결과물이 픽셀 덩어리라서, 한 글자를 고치려면 사람이 타임라인을 다시 열어야 합니다.
Remotion은 영상을 React 컴포넌트로 만듭니다. 화면에 무엇을 그릴지 코드로 적고, 프레임 번호를 넣으면 그 순간의 그림이 나옵니다. 코드니까 Claude가 읽고 고칠 수 있습니다.
| 편집 프로그램 | Remotion | |
|---|---|---|
| 만드는 법 | 타임라인에 클립을 놓는다 | React 컴포넌트를 쓴다 |
| 고치기 | 사람이 프로그램을 연다 | "3초 지점 자막 바꿔줘" |
| 100개 만들기 | 100번 반복 | 데이터를 넘겨 반복 렌더 |
| 버전 관리 | 파일을 통째로 | git diff로 한 줄씩 |
프레임 번호 하나로 그린다
문법은 셋만 알면 읽힙니다.
| 이름 | 하는 일 |
|---|---|
| Composition | 영상 한 편의 규격 — 가로 · 세로 · fps · durationInFrames |
| useCurrentFrame() | 지금이 몇 번째 프레임인지. 0부터 시작합니다 |
| Root.tsx | 만든 영상을 등록하는 자리. 여기 있어야 미리보기·렌더가 됩니다 |
import {AbsoluteFill, useCurrentFrame} from "remotion";
export const Title = () => {
const frame = useCurrentFrame(); // 0, 1, 2, 3 …
return (
<AbsoluteFill style={{justifyContent:"center", alignItems:"center"}}>
<h1 style={{opacity: Math.min(1, frame / 30)}}>안녕하세요</h1>
</AbsoluteFill>
);
};30fps라면 frame / 30은 1초에 걸쳐 0에서 1이 되는 값입니다. 그래서 이 코드는 "1초 동안 서서히 나타나는 제목"이 됩니다. 애니메이션이 시간이 아니라 프레임 번호의 함수인 것이 Remotion의 전부입니다.
Remotion 스킬 붙이기
그냥 시키면 Claude는 웹 페이지 만들듯 짭니다. Remotion 팀이 만든 공식 스킬은 프레임·타이밍·미디어 규칙을 미리 알려줘서 이 실수를 줄입니다. 설치는 두 가지이고, 하나만 하면 됩니다.
# ① 스킬만 설치 — Claude Code · Codex · Cursor · Kimi Code 공용 npx skills add remotion-dev/skills # ② Claude Code 플러그인으로 설치 (설치 후 Claude Code 재시작) claude plugin marketplace add remotion-dev/claude-code-plugin claude plugin install remotion@remotion
새 프로젝트를 만들 때 스킬을 같이 넣을지 물어보기도 합니다. 들어 있는 스킬은 11개입니다.
| 스킬 | 언제 쓰이나 |
|---|---|
| /remotion-best-practices | 나머지를 전부 포함하는 기본. 보통 이것 하나면 됩니다 |
| /remotion-create | 새 프로젝트 · 새 영상을 만들 때 |
| /remotion-markup | 컴포넌트를 짜는 방식 |
| /remotion-render | 영상 · 스틸 이미지로 뽑을 때 |
| /remotion-captions | 자막을 넣을 때 |
| /remotion-multimedia | 오디오 · 비디오 길이와 메타데이터를 다룰 때 |
| /remotion-maps | 지도 애니메이션 |
| /remotion-interactivity | 스튜디오에서 값을 편집할 수 있게 만들 때 |
| /remotion-saas | 서비스에 영상 생성 기능을 붙일 때 |
| /remotion-docs | 공식 문서를 찾아볼 때 |
| /remotion-upgrade | 패키지와 스킬 버전을 올릴 때 |
프롬프트 하나로 영상 만들기
프로젝트를 만든다
npx create-video@latest — 템플릿을 고르면 폴더가 생깁니다. (Node.js 필요)
스킬을 넣는다
위 두 방법 중 하나. 프로젝트 폴더 안에서 실행합니다.
말로 시킨다
몇 초에 무엇이 일어나는지 구간으로 끊어 적을수록 결과가 안정적입니다.
보고 뽑는다
스튜디오에서 프레임 단위로 확인하고, 이상 없으면 렌더합니다.
/remotion-best-practices 10초짜리 인트로 영상을 만들어줘. - 1080x1080, 30fps - 0~2초: 로고가 가운데에서 페이드 인 - 2~7초: "2026 상반기 실적" 제목이 아래에서 올라옴 - 7~10초: 매출·영업이익 두 숫자가 0부터 실제 값까지 올라감 - 색과 폰트는 DESIGN.md를 따라줘
색·폰트를 매번 지정하기 싫다면 디자인 페이지의 DESIGN.md와 함께 쓰면 됩니다. 만든 뒤에는 두 명령만 씁니다.
npx remotion studio # 브라우저에서 프레임 단위로 확인 npx remotion render <composition-id> out/video.mp4 # 파일로 뽑기
composition-id는 Root.tsx에 등록한 이름입니다. 빼고 실행하면 목록에서 고르라고 물어보고, 출력 경로를 빼면 out 폴더에 저장됩니다.
- 영상이 프레임 번호의 함수라는 것을 설명할 수 있다
- 스킬을 설치했다 (npx skills add 또는 플러그인)
- 프롬프트로 영상을 만들어 studio에서 확인했다
- npx remotion render로 파일을 뽑았다
- 라이선스 조건을 확인했다