클로드 코드로 모션그래픽 영상 만들기: Remotion(리모션) 공식 스킬 있을 때와 없을 때

클로드 코드로 모션그래픽 영상을 만들 때 쓰는 도구 가운데 GitHub 별이 6만 개가 넘는 것이 Remotion(리모션)입니다. Remotion은 영상을 React 코드로 짜고 mp4로 뽑아 주는 도구이고, Remotion 팀이 클로드 코드에서 쓰는 공식 스킬도 내놓았습니다. 동네 카페 신메뉴를 알리는 15초 세로 영상(1080×1920)을 같은 요청으로 스킬 없이 두 번, 공식 스킬을 깔고 두 번 만들어 나란히 비교했습니다. 스킬은 무료이고, Remotion은 개인과 3명 이하 회사까지 무료입니다.

같은 요청으로 만든 영상 네 개, 결과부터 보기

가상의 카페 “모퉁이커피” 정보 파일을 주고, 가을 신메뉴 세 가지를 차례로 보여 주는 인스타그램 릴스용 영상을 부탁했습니다. 아래는 네 결과를 나란히 놓은 것입니다.

영상 파일 하나씩 보기: 스킬 없이 1회 · 스킬 없이 2회 · 공식 스킬 1회 · 공식 스킬 2회. Claude가 렌더한 mp4를 그대로 올렸습니다.

메뉴 이름·가격·한 줄 소개가 메뉴 순서대로 나오고 마지막에 가게 이름과 위치가 나오는 구성도 같았습니다. 화면 글자는 모두 가게 정보 파일의 문장을 그대로 옮겼습니다. 영어로 적힌 인스타그램 계정은 세 번은 빼고, 한 번(스킬 없이 1회)은 넣었습니다.

눈에 띄는 차이는 글자 크기와 배치였습니다. 공식 스킬 쪽은 두 번 다 메뉴 장면의 글자를 왼쪽에 크게 놓았고, 가장 작은 글자가 50px과 44px이었습니다. 스킬 없이 만든 두 개는 가장 작은 글자가 40px이었습니다. 공식 스킬 파일에는 1080px 폭 영상이면 큰 제목은 84px, 중요한 보조 글자는 44px 이상으로 하라는 규칙이 적혀 있습니다.

따라 해 보기: 요청문과 실습 재료

실습 재료(zip)를 내려받아 빈 폴더에 풀면 input/가게정보.txt가 생깁니다. 지어낸 카페의 이름·위치·가게 색·신메뉴 세 가지가 들어 있습니다. 채점 기준(채점기준.md)도 함께 넣었습니다. 그 폴더에서 Claude Code를 열고 아래 요청을 그대로 붙여 넣으세요. 스킬을 깔았든 안 깔았든 같은 요청을 썼고, 스킬 이름은 넣지 않았습니다. Claude Code가 처음이라면 클로드 코드 설치 방법을 먼저 보세요.

input/가게정보.txt에 있는 동네 카페의 가을 신메뉴를 알리는 인스타그램 릴스용 15초 세로 영상(1080×1920)을 Remotion으로 만들어 줘.
- 메뉴 세 가지가 차례로 나오고, 메뉴마다 이름·가격·한 줄 소개가 보이게
- 마지막 장면에는 가게 이름과 위치
- 글자는 모두 한국어로, 가게 정보 파일에 없는 내용은 지어내지 말 것
다 만들면 out/ 폴더에 mp4로 렌더링해 줘.

좋은 답이라면 out/ 폴더에 mp4가 생기고, 답에 “1080×1920, 15초”를 직접 확인했다는 말과 화면에 넣은 글자 목록이 옵니다. 네 번 모두 영상을 렌더한 뒤 ffprobe(영상 정보 확인 도구)로 길이와 크기를 확인하고 끝냈습니다.

1단계. 공식 스킬 깔기 (1분 안쪽)

스킬은 Claude가 일을 시작하기 전에 읽는 설명서 묶음입니다. 자세한 개념은 클로드 스킬 글에 정리했습니다. Remotion 공식 스킬은 12개가 한 묶음으로 들어오고, 그중 remotion-best-practices가 나머지를 상황에 맞게 골라 읽게 하는 길잡이 역할을 합니다. Node.js가 깔려 있어야 합니다.

영상을 만들 폴더에서 터미널에 아래 한 줄을 실행합니다.

npx skills add remotion-dev/skills -a claude-code -y

이렇게 나오면 성공 Installed 12 skills가 나오고, ls .claude/skills를 치면 remotion-best-practices부터 remotion-upgrade까지 12개 폴더가 보입니다.

• -a claude-code -y를 빼면 어느 에이전트에 깔지 등을 묻는 질문이 나옵니다(명령 도움말 기준). Remotion 공식 문서는 옵션 없이 npx skills add remotion-dev/skills로 안내합니다.
• Remotion 시작 안내의 “코딩 에이전트에 붙여 넣는 문장”에는 -g가 붙어 있습니다. -g는 컴퓨터 전체(모든 폴더)에 까는 옵션입니다. 영상 폴더에만 쓰려면 빼세요.
• npx가 처음이면 패키지를 설치할지 묻는 질문(Ok to proceed? (y))이 나올 수 있습니다. y를 누르면 됩니다.

새 프로젝트를 명령으로 직접 만드는 방법도 공식 문서에 있습니다. npx create-video@latest --yes --blank my-video로 빈 프로젝트를 만들고, 그 폴더에서 npx remotion skills add를 실행하는 순서입니다. 이 방법은 이번에 해 보지 않았습니다.

필요 없어지면 같은 폴더에서 아래 명령으로 지웁니다.

npx skills remove --all

이렇게 나오면 성공 Successfully removed 12 skill(s). 폴더에 남는 skills-lock.json은 직접 지워도 됩니다.

2단계. 요청 붙여 넣고 기다리기 (3분 반~6분쯤)

요청을 넣은 뒤에는 Claude가 프로젝트 만들기부터 렌더까지 혼자 진행합니다. 두 조건에서 순서가 조금 달랐습니다.

순서	스킬 없이	공식 스킬
프로젝트 만들기	package.json을 직접 쓰고 remotion·글꼴 패키지를 npm i로 설치	스킬이 시킨 대로 npx create-video@latest --yes --blank --no-tailwind cafe-reel로 빈 프로젝트를 만들고 설치
미리보기	켜지 않음	Remotion Studio(미리보기 화면)를 먼저 켜 둠
장면 짜기	장면 전체를 파일 하나(400줄 남짓)에, 문구는 따로 데이터 파일 하나에 모음	인트로·메뉴·마지막 장면을 파일 세 개로 나누고 장면 사이에 전환 효과
확인	장면마다 정지 화면을 뽑아 Claude가 직접 확인	같음
렌더	npx remotion render → ffprobe로 확인	같음

처음 렌더할 때 Remotion이 렌더용 크롬(Chrome Headless Shell)을 프로젝트 안 node_modules/.remotion/에 내려받습니다. 이번에는 약 570MB였고, 영상 프로젝트 폴더 하나가 약 1GB가 됐습니다. 렌더용 크롬은 홈 폴더가 아니라 프로젝트 폴더 안에만 받았습니다.

3단계. Remotion Studio에서 미리 보기 (약 1분)

Remotion Studio는 브라우저에서 영상을 재생하며 장면을 고르는 미리보기 화면입니다. 프로젝트 폴더에서 아래 명령을 실행하고, 터미널에 나오는 주소(예: http://localhost:3000)를 브라우저로 엽니다.

npm run dev

이렇게 나오면 성공 Server ready - Local: http://localhost:로 시작하는 줄이 나옵니다. 스킬 없이 만든 프로젝트는 Claude가 명령 이름을 studio로 붙여서 npm run studio였습니다.

두 프로젝트를 Studio로 열어 보니 차이가 분명했습니다. 공식 스킬 쪽은 두 번 다 타임라인에 장면 이름이 붙었습니다. 1회차는 Intro, Menu 1처럼 영어로, 2회차는 인트로, 메뉴 1처럼 한국어로 달았습니다. 장면을 누르면 오른쪽 칸에 위치·크기·투명도를 숫자로 바꾸는 칸이 나왔고, 2회차는 고칠 수 있는 항목 이름도 “메뉴 이름”, “가격”처럼 한국어였습니다. 스킬 없이 만든 쪽은 이름 없는 Sequence(장면 구간) 줄만 이어졌습니다.

Remotion 스킬 문서는 이렇게 짜야 Studio에서 고친 값이 코드에 그대로 저장된다고 설명합니다. 이번에 Studio에서 값을 고쳐 저장해 보지는 않았습니다.

4단계. 다시 렌더하기 (1분 안쪽)

문구를 고친 뒤에는 프로젝트 폴더에서 다시 렌더합니다. CafeReel 자리에는 Studio 왼쪽 목록에 보이는 영상 이름을 넣습니다.

npx remotion render CafeReel out/video.mp4

이렇게 나오면 성공 Encoded 450/450 다음 줄에 저장된 파일 이름과 크기가 나옵니다. 네 프로젝트 모두 1분이 안 걸렸습니다.

• 한글 구글 글꼴을 쓰면 렌더 중에 “글꼴을 불러오느라 네트워크 요청을 수백 번 했다, 굵기나 글자 범위를 줄여 보라”는 영어 경고가 나올 수 있습니다(이번에는 많게는 372번). 한글 글꼴은 파일이 잘게 나뉘어 있어서 그렇고, 영상에는 문제가 없었습니다.
• 글꼴을 렌더할 때마다 구글 폰트에서 받으므로 인터넷이 연결돼 있어야 합니다.

실행 기록 · 작업 폴더 · 조건마다 아래 형식으로 두 번씩 실행

$ npx -y skills@1.7.2 add remotion-dev/skills -a claude-code -y
◇  Installed 12 skills
$ claude -p "<요청>" --model claude-opus-5-5 --effort medium --setting-sources project,local --permission-mode acceptEdits --allowedTools "Bash(npm:*)" "Bash(npx:*)" ... < /dev/null
# 폴더: <작업 폴더>/noskill-1, noskill-2 (스킬 없음), skill-1, skill-2 (공식 스킬)
# 불린 스킬: skill-1 remotion-create, skill-2 remotion-best-practices / 스킬 없음 0회
$ ffprobe -v error -show_entries stream=width,height:format=duration -of compact out/*.mp4
stream|width=1080|height=1920
format|duration=15.000000
$ npx remotion render CafeReel ../out/모퉁이커피_가을신메뉴_릴스.mp4 --codec=h264
Encoded 450/450
+                    ../out/모퉁이커피_가을신메뉴_릴스.mp4 888.3 kB

스킬 있을 때와 없을 때, 한눈에 비교

채점 기준은 실행 전에 Remotion 공식 문서에서 뽑아 고정했습니다. 결과 영상은 1초 간격으로 프레임을 뽑아 확인했고, 코드는 직접 읽었습니다.

항목	스킬 없이 (1회·2회)	공식 스킬 (1회·2회)
렌더 성공·15초·1080×1920	✅ ✅	✅ ✅
한글 표시	✅ ✅	✅ ✅
메뉴 순서·가게 정보 그대로	✅ ✅	✅ ✅
움직임을 프레임 기준으로 계산(useCurrentFrame·interpolate, CSS 애니메이션 없음)	✅ ✅	✅ ✅
글꼴을 코드에서 불러옴(@remotion/google-fonts)	✅ ✅ (고운바탕·Noto Sans KR)	✅ ✅ (Noto Serif KR·Noto Sans KR / Noto Sans KR)
장면 나누기	Sequence	TransitionSeries(장면 사이 전환 효과)
가장 작은 글자	40px · 40px	50px · 44px
Studio 장면 이름	없음	있음
걸린 시간	5분 · 3분 반	6분 남짓 · 4분 반
사용량(API 단가)	1.06 · 0.77달러	1.19 · 1.11달러

스킬 없이 만든 2회차는 인트로에서 첫 메뉴로 넘어갈 때 아주 잠깐 빈 화면이 지나갔습니다. 공식 스킬 쪽은 장면이 겹치거나 밀려나며 넘어가서 빈 화면이 없었습니다.

반대로 스킬 없이 만든 쪽이 나은 점도 있었습니다. 두 번 다 메뉴 이름·가격·문구를 데이터 파일 하나에 모아 두어, 다음 달 메뉴로 바꿀 때 그 파일만 고치면 됩니다. 공식 스킬 쪽은 문구가 장면을 배치하는 코드 안에 들어 있어서, Studio 화면에서 고치는 쪽에 맞춰져 있습니다.

제가 보기에는 “한 번 만들고 끝”이면 스킬 없이도 충분합니다. Studio에서 장면을 보며 손으로 다듬을 생각이라면 공식 스킬이 낫습니다. 장면 이름이 붙고 글자가 처음부터 영상 크기에 맞게 커서 고칠 곳이 적습니다.

한계와 주의할 점

• 15초짜리 글자 영상 하나를 조건마다 두 번씩만 만들었습니다. 사진·음악·자막이 들어간 영상이나 긴 영상에서는 차이가 다를 수 있습니다.
• 한 번 묻고 끝내는 방식(claude -p)으로 실행했습니다. 공식 스킬은 두 번 다 Studio를 띄워 둔 채 작업을 끝냈는데, 이 방식에서는 Studio가 클로드 코드의 백그라운드 실행 시간 한도에 걸려 몇 분 뒤 꺼졌고, 그때 Claude가 “Studio가 꺼졌다”고 한 번 더 알려 왔습니다. 대화창에서 쓰면 Studio를 계속 띄워 두고 보면서 고칠 수 있습니다.
• 스킬 없이 만든 쪽은 여러 명령을 한 줄로 잇거나 허용 목록에 없는 명령을 써서 두 번씩 막혔습니다. 대화창에서 쓰면 실행 전에 허락을 묻습니다.
• 맥에서만 렌더했습니다. 네 번 모두 글꼴을 코드에서 불러왔기 때문에 다른 컴퓨터에서도 같은 글꼴로 나올 것으로 보지만, 시스템 글꼴 이름만 적은 코드라면 컴퓨터마다 한글 모양이 달라질 수 있습니다(Remotion 글꼴 문서).
• 실습 재료는 지어낸 가게라 이름·위치·인스타그램 계정이 가짜입니다.

대안

방법	다른 점	이럴 때 고르세요
Remotion + 공식 스킬(이 글)	장면이 나뉘고 Studio에서 고르기 쉬움. 사용량이 조금 더 듦	Studio로 보면서 다듬을 때
Remotion만(스킬 없이)	설치할 것 없음. 이번에는 이것만으로도 렌더가 끝까지 됐음	한 번 만들고 끝낼 때
HTML 애니메이션 → mp4(연재 2편)	Remotion 설치 없이 웹페이지 애니메이션을 한 프레임씩 찍어 mp4로	프로젝트 1GB가 부담될 때
Manim(연재 3편 준비 중)	수식·도형이 움직이는 설명 영상에 강함	수학·과학 설명 영상
인포그래픽 쇼츠(연재 4편 준비 중)	표·순위 데이터를 세로 영상으로	숫자가 많은 정보 영상

자주 묻는 질문

리모션(Remotion)은 무료인가요?

개인, 3명 이하 회사, 비영리 단체는 상업용 영상이라도 무료입니다. 4명 이상 회사는 영상을 만드는 사람마다 월 25달러, 렌더를 자동으로 돌리는 서비스라면 렌더 1건 0.01달러(월 최소 100달러)입니다. 직원 20명 회사에서 한 명만 써도 유료라고 FAQ에 적혀 있습니다(라이선스 FAQ, 2026-10-15 확인).

클로드로 만든 Remotion 영상에서 한글이 깨지나요?

이번 네 번은 모두 깨지지 않았습니다. 네 번 다 Claude가 구글 한글 글꼴(Noto Sans KR 등)을 코드에서 불러왔습니다. 요청에 “글자는 모두 한국어로”를 넣어 두면 좋습니다.

공식 스킬 없이도 Remotion 영상이 되나요?

이번에는 됐습니다. 스킬 없이 두 번 모두 15초 mp4가 한 번에 나왔고, 공식 문서가 권하는 움직임 방식과 글꼴 불러오기도 지켰습니다.

렌더한 mp4를 인스타그램이나 유튜브 쇼츠에 바로 올려도 되나요?

네 결과 모두 1080×1920 세로, H.264 형식의 mp4로 나왔습니다. 음악은 넣지 않았으니 올릴 때 앱에서 고르면 됩니다.

윈도우에서도 되나요?

이번에는 맥에서만 해 봤습니다. 렌더용 크롬은 Remotion이 운영체제에 맞는 것을 프로젝트 안에 내려받습니다(공식 문서).

퀴즈

직원 5명인 카페 운영 회사가 Remotion으로 신메뉴 홍보 영상을 직접 만들어 올리려고 합니다. 맞는 것은?
❌ 홍보 영상은 상업용이 아니니 무료다
✅ 3명을 넘는 회사라 영상을 만드는 사람 수만큼 유료 라이선스(사람당 월 25달러)가 필요하다

출처

Remotion 공식 스킬 문서, remotion-dev/skills 저장소, Remotion 시작 안내, 렌더용 크롬 문서, Remotion 라이선스 원문, 라이선스 FAQ, 이용 약관 (모두 2026-10-15 확인, GitHub 별 remotion 64,170개·skills 5,160개)