AI 모션그래픽 만들기 — 클로드 코드와 Remotion으로 첫 영상까지

영상 생성 AI와 무엇이 다른가

영상 생성 AI는 글을 받으면 화면의 점 하나하나를 모델이 직접 그린다. 결과가 그럴듯해도 화면 속 글자 한 자, 막대그래프 숫자 하나만 바꾸고 싶을 때가 문제다. 다시 뽑으면 다른 부분까지 같이 바뀐다.

코드로 만드는 모션그래픽은 반대다. AI는 «몇 번째 프레임에 이 글자가 어디에 있고, 얼마나 투명한가»를 적은 코드를 쓴다. 렌더러가 그 코드를 프레임마다 실행해 그림으로 찍고, 찍은 프레임을 이어 붙여 영상 파일을 만든다. Anthropic 도움말은 Claude Motion을 이렇게 설명한다. 요청을 받으면 그 안의 글자 · 차트 · 도형 · 그림을 움직이는 코드로 애니메이션을 만들고, 코드이기 때문에 낱말 하나, 숫자 하나, 타이밍 하나만 바꿔도 나머지는 그대로 남는다. 같은 도움말은 Claude Motion이 영상 생성 모델을 쓰지 않아서 실제 촬영 같은 화면이나 사람은 만들지 않는다고 적었다.

Remotion은 이 일을 React로 한다. 공식 문서의 기본 개념 쪽에서 «컴포지션»은 React 컴포넌트와 영상 정보를 묶은 것이고, 영상 정보는 가로 · 세로 크기(픽셀), 초당 프레임 수(fps), 전체 프레임 수(durationInFrames) 같은 값이다. 첫 프레임은 0번이고 마지막 프레임은 «전체 프레임 수 - 1»번이다. 컴포넌트는 지금 몇 번째 프레임인지 받아서 그 순간의 화면을 그린다. 결국 영상 전체가 «프레임 번호를 넣으면 화면이 나오는 함수» 하나가 된다.

Claude Motion은 누가 쓸 수 있나

2026년 10월 18일에 연 도움말 기준으로 Claude Motion은 Team 요금제와 Enterprise 요금제의 베타 기능이다. Team은 기본으로 켜져 있고, Enterprise는 조직 소유자가 켜기 전까지 꺼져 있다. 켜고 끄는 곳은 조직 설정의 Artifacts 항목이다. 만든 애니메이션은 «Export»에서 MP4로 내보내고, 길거나 복잡한 애니메이션은 보통 메시지보다 사용 한도를 더 쓴다고 적혀 있다.

도움말이 대상으로 적은 것은 이 두 요금제뿐이라, 혼자 쓰는 Free · Pro · Max 계정에서는 메뉴가 보이지 않는다고 보면 된다. 그렇다고 방법이 막힌 것은 아니다. Claude Motion이 하는 일은 «코드로 움직임을 쓰고 MP4로 굽기»이고, 이것은 클로드 코드와 오픈 영상 프레임워크로도 할 수 있다. 차이는 화면 안에서 끝나느냐, 내 PC에 개발 도구를 깔고 터미널을 쓰느냐다.

개인이 고르는 네 갈래

코드로 영상을 만드는 길은 «무엇을 움직이나»에 따라 넷으로 나눠 보면 고르기 쉽다. 아래 네 갈래는 글쓴이가 나눈 틀이고, 도구에 관한 사실은 각 공식 문서에서 가져왔다.

처음이라면 B가 가장 짧다. 장면 나누기, 길이 계산, 렌더 명령을 틀이 이미 갖고 있어서 AI가 «장면 코드»만 쓰면 된다. B 안에서는 두 도구가 자주 비교된다.

Remotion은 Node 16 이상 또는 Bun 1.0.3 이상이 필요하다고 문서에 적었고, HyperFrames는 README에 Node.js 22 이상과 FFmpeg를 요구 조건으로 적었다. HyperFrames는 Apache 2.0 라이선스로 공개돼 있다. 이 글은 공식 Claude Code 플러그인 설명이 짧고 분명한 Remotion으로 따라간다.

Remotion 라이선스 — 무료 범위부터 확인

설치 전에 볼 것이 라이선스다. Remotion은 누구에게나 조건 없이 무료인 프로그램이 아니다. 2026년 10월 18일에 연 LICENSE.md 원문은 무료 라이선스 대상을 네 가지로 적었다.

• 개인
• 직원 3명 이하인 영리 조직
• 비영리 조직
• 아직 상업적으로 쓰지 않고 «잘 맞는지 평가하는 중»인 경우

이 범위 밖의 영리 조직은 회사 라이선스(Company License)가 필요하고, 값은 remotion.pro 쪽 안내를 따른다고 적혀 있다. 같은 파일에는 «Remotion 5.0에서 라이선스가 조금 바뀐다»는 문장도 있다. 혼자 블로그 · SNS용 영상을 만드는 정도라면 개인 범위에 들어가지만, 회사 일로 쓰거나 판 버전이 바뀐 뒤라면 그때의 원문을 다시 읽는다.

따라 하기 — 설치부터 첫 MP4까지

아래는 Remotion과 Claude Code 공식 문서에 있는 명령을 순서대로 묶은 것이다. 명령은 문서에 적힌 글자 그대로 옮겼다.

0. 준비물

• Node.js — Remotion 기준 Node 16 이상 또는 Bun 1.0.3 이상. macOS는 15(Sequoia) 이상, 리눅스는 Libc 2.35 이상이 필요하다고 같은 문서에 있다.
• 클로드 코드 — Remotion 문서는 «대부분의 코딩 에이전트는 유료 구독이 필요하다»고 적었다. 설치와 요금제 고르기는 이어 읽기의 설치 글을 본다.
• 빈 작업 폴더 — 영상 프로젝트 하나에 폴더 하나.

1. 플러그인 설치

터미널에서 두 줄을 차례로 친다.

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

설치가 끝나면 클로드 코드를 다시 시작한다. 데스크톱 앱이라면 Code → Customize → Plugins → Discover에서 «remotion»을 찾아 «remotion-dev/claude-code-plugin»의 Remotion 플러그인을 추가하는 길도 문서에 있다. 이 플러그인은 Remotion 프로젝트를 만들고 고치는 일을 돕고, Remotion Agent Skills를 함께 담고 있다.

플러그인은 Anthropic 공식 마켓플레이스 밖에서 오는 것이라 마켓플레이스를 먼저 추가하는 단계가 있다. Claude Code 문서는 플러그인이 스킬 · 에이전트 · 훅 · MCP 서버를 더할 수 있고, 훅과 MCP 서버는 실제로 명령을 실행할 수 있으니 설치 전에 세부 창을 읽으라고 안내한다. 설치한 뒤에는 셸에서 claude plugin list로 목록과 상태를 볼 수 있다.

2. 프로젝트 만들기

플러그인 명령이 프로젝트를 만들어 주지만, 직접 만들고 싶다면 Remotion 문서의 기본 명령을 쓴다.

npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

마지막 줄이 미리보기 창(Remotion Studio)을 연다. Remotion의 코딩 에이전트 안내는 이 미리보기를 한 터미널에 띄워 두고, 다른 터미널에서 같은 폴더로 들어가 claude를 실행하라고 권한다. 요청할 때마다 미리보기가 바로 바뀌는 것을 보면서 고칠 수 있다.

3. 장면 표부터 쓴다

요청 한 줄로 시작하면 AI가 길이 · 색 · 글자 크기를 전부 짐작으로 채운다. 결과가 마음에 안 들면 무엇을 고칠지도 흐려진다. 그래서 요청 전에 장면 표를 먼저 만든다. 칸은 다섯이면 충분하다.

표가 있으면 요청이 «영상 만들어 줘»에서 «이 표대로 만들어 줘»로 바뀐다. 고칠 때도 «3번 장면 막대 색만 바꿔 줘»처럼 칸 하나를 가리킬 수 있다.

4. 요청문 넣기

플러그인을 깔았다면 /remotion:remotion-create 뒤에 설명을 붙여 시작한다. 문서의 예는 «Make a promo video for a record store»다. 한국어로 써도 되고, 아래 «요청문 틀» 절의 틀에 장면 표를 붙여 넣으면 된다.

5. 미리보기 보며 고치기

첫 결과는 대개 손볼 곳이 있다. 고칠 때는 한 번에 하나씩 말한다.

• «2번 장면 숫자가 너무 빨리 올라가. 3초 동안 고르게 올라가게 해 줘.»
• «제목 글자가 화면 가장자리에 붙어. 가장자리에서 충분히 띄워 줘.»
• «전환 효과를 장면마다 다르게 하지 말고 하나로 통일해 줘.»

여러 군데를 한 문장에 몰아 말하면 고친 곳과 안 고친 곳이 섞이고, 무엇이 바뀌었는지 미리보기에서 찾기 어렵다.

6. 렌더

마음에 들면 MP4로 굽는다.

npx remotion render

컴포지션 이름 없이 치면 고르는 화면이 뜨고, npx remotion render HelloWorld처럼 이름을 붙이면 그 컴포지션만 렌더한다. 출력 위치를 따로 주지 않으면 결과는 out 폴더에 생기고, 코덱을 지정하지 않으면 H.264로 인코딩한다. 일부 구간만 보고 싶으면 --frames로 프레임 번호나 범위를 준다. 윈도 셸에서는 --props에 JSON 글자를 바로 넣을 수 없어서 값을 파일로 만들어 넘기라고 문서에 적혀 있다.

7. 렌더 검사

«렌더가 끝났다»와 «영상이 괜찮다»는 다른 말이다. 파일을 열어 보기 전에 기계로 걸러 낼 수 있는 것이 세 가지 있다. 규격(해상도 · 프레임 수 · 길이), 빈 화면 구간, 첫 장면과 끝 장면이다. 파일 이름은 out 폴더에 실제로 생긴 이름으로 바꿔 넣는다.

ffprobe -v error -select_streams v:0 -show_entries stream=width,height,r_frame_rate,duration -of default=nw=1 out/video.mp4
ffmpeg -i out/video.mp4 -vf blackdetect=d=0.5:pix_th=0.10 -an -f null -
ffmpeg -ss 0 -i out/video.mp4 -frames:v 1 first.png
ffmpeg -sseof -0.1 -i out/video.mp4 -frames:v 1 last.png

첫 줄은 가로 · 세로 · 초당 프레임 · 길이를 찍는다. 둘째 줄의 blackdetect는 거의 검은 구간을 찾는 FFmpeg 필터다. 기본값은 최소 길이 2초, 검은 화면 비율 0.98, 검은 픽셀 기준 0.1이라 짧은 빈 화면은 놓친다. 그래서 위 명령은 최소 길이를 0.5초로 줄였다. 이 기본값은 이 블로그 서버에 깔린 FFmpeg의 내장 도움말에서도 같게 나오는 것을 대조했다. 셋째 · 넷째 줄은 첫 프레임과 끝 프레임을 그림으로 뽑는다. 첫 화면에 제목이 이미 보이는지, 끝 화면이 잘리지 않았는지를 그림 두 장으로 확인한다.

요청문 틀 — 복사해서 채우기

아래 틀의 대괄호를 채우고 장면 표를 붙여 넣는다. 숫자 · 글자를 «표에 적은 것만» 쓰라고 못 박는 줄과, 검사하지 않은 항목을 통과로 적지 말라는 줄이 핵심이다.

Remotion 프로젝트로 세로 영상 하나를 만들어 줘.

[규격]
- 크기 1080x1920, 30fps, 전체 길이 [10]초
- 배경 [흰색], 강조색은 [청록] 한 가지만
- 글꼴은 [프로젝트에 있는 한글 글꼴], 글자는 화면 가장자리에서 충분히 띄움

[장면 표]
(여기에 장면 · 글자 · 움직임 · 길이 · 메모 표를 붙여 넣기)

[지킬 것]
- 화면에 나오는 글자와 숫자는 장면 표에 적은 것만 쓴다. 없는 숫자를 만들지 않는다.
- 전환 효과는 한 종류로 통일한다.
- 사람 얼굴 · 실존 인물 · 로고는 넣지 않는다.

[끝나면]
- 컴포지션 이름과 렌더 명령을 알려 줘.
- 장면마다 몇 번째 프레임에서 시작하는지 표로 알려 줘.
- 확인하지 않은 항목은 «확인 안 함»으로 적고, 통과했다고 쓰지 마.

장면마다 시작 프레임을 표로 받아 두면, 나중에 «2번 장면만 1초 늘려 줘» 같은 요청을 할 때 AI와 같은 기준으로 말할 수 있다. 초당 30프레임이면 1초는 30프레임이다.

점검표

렌더한 영상을 올리기 전에 아래를 차례로 본다.

• 규격 — ffprobe로 본 가로 · 세로 · 초당 프레임 · 길이가 요청과 같은가
• 첫 화면 — 첫 프레임 그림에 제목이 이미 보이는가(검은 화면으로 시작하지 않는가)
• 빈 화면 — blackdetect 결과에 의도하지 않은 검은 구간이 없는가
• 글자 넘침 — 긴 낱말이 화면 밖으로 나가거나 두 줄로 어색하게 꺾이지 않는가(눈으로 확인)
• 숫자 — 화면 속 숫자가 장면 표의 값과 같은가
• 끝 화면 — 끝 프레임 그림에서 마무리 문장이 다 보이는가
• 소리 — 배경음을 넣었다면 쓸 권리가 있는 음원인가
• 라이선스 — 내 상황이 Remotion 무료 범위 안인가

«한 줄 요청으로 끝»이 아닌 이유

SNS에서 «프롬프트 한 줄이면 모션그래픽 완성» 같은 문구를 자주 보지만, 공식 문서들이 깔아 둔 순서를 보면 그렇게 설계돼 있지 않다. Remotion 안내가 미리보기와 에이전트를 나란히 띄우라고 권하는 것 자체가 «보면서 여러 번 고친다»는 전제다. 플러그인이 Agent Skills를 따로 담고 있는 것도, 모델이 Remotion의 쓰는 법을 미리 알고 시작하게 하려는 장치로 읽힌다. Claude Motion 도움말도 길고 복잡한 애니메이션일수록 한도를 더 쓴다고 적었다. 한 번에 맞히기보다 장면 표로 범위를 좁히고, 고칠 곳을 하나씩 짚는 쪽이 결과도 빠르고 한도도 덜 든다.

AI가 써 준 코드도 결국 내 폴더에 남는 프로그램이다. 렌더 명령이 무엇을 실행하는지, 어떤 파일을 새로 만들었는지 한 번은 훑어본다. AI 자동화에서 «지시문만 믿지 않고 확인 장치를 두는 이유»는 지침은 뚫리고 코드는 막았다 편에 정리했다.

자주 묻는 것

개인 요금제(Pro · Max)에서 Claude Motion을 쓸 수 있나요?

2026년 10월 18일에 연 Anthropic 도움말 기준으로 Claude Motion은 Team · Enterprise 요금제의 베타 기능이고, 개인 요금제는 대상에 적혀 있지 않습니다. 개인이라면 클로드 코드에 Remotion 공식 플러그인을 깔아 같은 «코드로 움직이는 영상»을 만들 수 있습니다. 대상 요금제는 바뀔 수 있으니 쓰기 전에 도움말을 다시 확인합니다.

Remotion은 무료인가요?

조건부로 무료입니다. LICENSE.md는 개인, 직원 3명 이하 영리 조직, 비영리 조직, 상업적으로 쓰기 전 평가 단계를 무료 대상으로 적었고, 그 밖의 영리 조직은 회사 라이선스가 필요하다고 적었습니다. 5.0에서 라이선스가 조금 바뀐다는 예고가 있어 판 버전이 바뀌면 원문을 다시 봅니다.

코딩을 몰라도 만들 수 있나요?

장면 코드는 클로드 코드가 쓰기 때문에 React를 몰라도 시작은 됩니다. 다만 터미널에서 명령을 치고, Node.js를 깔고, 미리보기를 보며 무엇이 틀렸는지 말로 짚는 일은 직접 해야 합니다. 렌더 오류가 나면 오류 문구를 그대로 클로드 코드에 붙여 넣어 묻는 것이 가장 빠릅니다.

Remotion과 HyperFrames 중 무엇을 고르나요?

React로 장면을 쓰고 공식 Claude Code 플러그인 안내를 따라가고 싶으면 Remotion, HTML · CSS로 쓰고 라이선스 조건이 없는 쪽을 원하면 Apache 2.0인 HyperFrames가 맞습니다. HyperFrames는 Node.js 22 이상과 FFmpeg가 필요하다고 README에 적혀 있습니다. 둘 다 결과는 MP4입니다.

사람이 나오는 영상도 이 방법으로 되나요?

코드 방식은 글자 · 차트 · 도형 · 그림을 움직이는 데 맞고, Claude Motion 도움말도 실사 화면과 사람은 만들지 않는다고 적었습니다. 캐릭터가 나와야 하면 인물 그림은 이미지 생성 모델로 만들고 글자 · 전환은 코드로 얹는 방식을 씁니다. 이때 장면마다 얼굴이 달라지지 않게 캐릭터 참조 그림을 먼저 만들어 두는 것이 따로 할 일이고, 그 순서는 캐릭터 시트 한 장 먼저 만드는 법에 정리했습니다.

참고 자료

1. Anthropic Help Center. Get started with Claude Motion — Team · Enterprise 베타, Team은 기본 켜짐 · Enterprise는 소유자가 켬(조직 설정 > Artifacts), 글자 · 차트 · 도형 · 그림을 코드로 움직임, 한 낱말 · 숫자 · 타이밍만 바꿀 수 있음, 영상 생성 모델을 쓰지 않아 실사 화면 · 사람을 만들지 않음, MP4 내보내기, 길고 복잡한 애니메이션은 사용 한도를 더 씀(2026-10-18 확인). support.claude.com
2. Remotion. Claude Code plugin — 설치 명령 두 줄(claude plugin marketplace add remotion-dev/claude-code-plugin · claude plugin install remotion@remotion), 설치 뒤 재시작, /remotion:remotion-create 사용 예, Remotion Agent Skills 포함, 데스크톱 앱 Code → Customize → Plugins → Discover 경로(2026-10-18 확인). remotion.dev
3. Remotion. Prompting videos with coding agents — npx create-video --yes --blank, npx remotion skills add, npm run dev 미리보기와 다른 터미널에서 claude 실행, «대부분의 코딩 에이전트는 유료 구독이 필요»(2026-10-18 확인 · 옛 주소 /docs/ai/claude-code 에서 넘어옴). remotion.dev
4. Remotion. Creating a new project — Node 16 이상 또는 Bun 1.0.3 이상, macOS 15 이상, 리눅스 Libc 2.35 이상, npx create-video@latest --yes --blank my-video, npm run dev 로 Studio(2026-10-18 확인). remotion.dev
5. Remotion. The fundamentals — 컴포지션 = React 컴포넌트 + 영상 정보, width · height(픽셀) · fps · durationInFrames, 첫 프레임 0 · 끝 프레임 durationInFrames - 1, useCurrentFrame(2026-10-18 확인). remotion.dev
6. Remotion. CLI render — 출력 위치를 안 주면 out 폴더, --codec 을 안 주면 H.264, --frames 로 일부 프레임, 윈도 셸에서는 --props 에 JSON 글자를 바로 못 넣고 파일로(2026-10-18 확인). remotion.dev
7. Remotion. LICENSE.md — 무료 사용 대상(개인 · 직원 3명 이하 영리 조직 · 비영리 · 상업 사용 전 평가), 그 밖의 영리 조직은 회사 라이선스, «Remotion 5.0에서 라이선스가 조금 바뀐다»(2026-10-18 확인). github.com
8. HeyGen. HyperFrames README — HTML · CSS · 미디어 · 애니메이션을 MP4로 바꾸는 공개 프레임워크, Apache 2.0, Node.js 22 이상 · FFmpeg 필요, Claude Code 플러그인 · 여러 코딩 에이전트용 스킬(2026-10-18 확인). github.com
9. Claude Code Docs. Install and manage plugins — 플러그인은 스킬 · 에이전트 · 훅 · MCP 서버를 더함, 훅과 MCP 서버를 실행할 수 있어 설치 전 세부 창을 읽으라는 안내, 공식 마켓플레이스 밖 플러그인은 마켓플레이스 추가가 먼저, claude plugin list 로 확인(2026-10-18 확인). code.claude.com
10. FFmpeg. Filters documentation — blackdetect — 거의 검은 구간을 찾는 필터, 최소 길이 d 기본 2초 · 검은 화면 비율 pic_th 기본 0.98 · 검은 픽셀 기준 pix_th 기본 0.1(이 블로그 서버 FFmpeg 9.0.1 내장 도움말로 2026-10-18 같은 값 확인). ffmpeg.org