Claude Code로 영상 만드는 방법(단계별 안내, 2026)

네, Claude Code로 영상을 만들 수 있습니다. 애니메이션을 코드로 작성하고 내 컴퓨터에서 MP4로 렌더링합니다. 흔히 쓰는 방법은 Remotion 에이전트 스킬, HyperFrames, 또는 영상 전체를 기획하고 음악을 만들고 렌더링하는 Motion Skills 완성 영상 스킬입니다. Claude Code는 Claude Pro와 Max에 포함되어 있으며, Claude Motion은 필요하지 않습니다. Claude Motion은 Team과 Enterprise 플랜의 Claude에서 제공되는 별도의 베타 기능입니다.

아래에서는 네 가지 방법을 나란히 비교하고, 무료 스킬인 Motion Director로 설치부터 MP4까지 단계별로 진행해 보고, 실제 영상 한 편을 브리프부터 마지막 수정까지 살펴봅니다.

2026년 10월 29일 기준 Claude의 요금 페이지, Claude Code 빠른 시작 문서, Remotion의 코딩 에이전트 가이드, HyperFrames README로 확인했습니다.

Claude Code로 영상을 만드는 네 가지 방법

방법	내가 작성하는 것	결과물	설정	비용
Opus에 프롬프트 하나	없음. Claude가 HTML 애니메이션을 작성	브라우저에서 움직이는 페이지. 녹화나 렌더링은 직접 해야 함	없음	내 Claude 플랜
Remotion + 에이전트 스킬	Claude가 작성하는 React 컴포넌트	계속 보관하는 Remotion 프로젝트에서 나온 MP4	`npx create-video` 후 `npx remotion skills add`	Remotion 자체 라이선스(라이선스 페이지 참고)
HyperFrames	Claude가 작성하는 HTML, CSS, GSAP	헤드리스 Chrome과 FFmpeg로 렌더링한 MP4	`npx hyperframes init` 또는 Claude Code 플러그인	오픈 소스(Apache 2.0)
Motion Skills 완성 영상 스킬	내 자료와 문장 하나	영상 한 편 전체: 연출 방향, 오리지널 음악, 검사, MP4	아래의 한 문장 설치	Motion Director는 무료. 스킬당 $4.90, 또는 플랜

Opus에 프롬프트 하나는 Claude가 어떤 애니메이션을 만들 수 있는지 가장 빨리 확인하는 방법입니다. "내 앱을 위한 15초짜리 애니메이션 타이틀을 HTML 파일 하나로"라고 요청하고 열어 보세요. 결과는 실행할 때마다 달라지고, MP4로 바꾸는 것은 직접 해야 합니다. 저희 Claude Motion 프롬프트 페이지에는 바로 이런 용도로 사람들이 공유한 프롬프트가 있습니다.

Remotion은 React로 영상을 만드는 자리 잡은 프레임워크입니다. 코딩 에이전트 가이드에 따르면 npx create-video --yes --blank my-video로 프로젝트를 만들고, npx remotion skills add로 에이전트 스킬을 추가하고, npm run dev로 미리 보고, 두 번째 터미널에서 Claude Code를 시작합니다. 모든 컴포넌트를 직접 제어하고 싶은 개발자에게 알맞습니다. 업무에 쓰기 전에 Remotion 라이선스를 확인하세요. 에이전트 스킬과 완성 영상 스킬의 차이는 Remotion 에이전트 스킬과 Motion Skills 비교를 보세요.

HyperFrames는 HeyGen이 만든 오픈 소스 프레임워크로, "HTML, CSS, 미디어, 탐색 가능한 애니메이션"을 MP4 파일로 바꿉니다. Claude Code 플러그인으로 설치하거나, npx hyperframes init my-video로 프로젝트를 시작하고 npx hyperframes render로 렌더링할 수 있습니다. 지금은 예시로 남겨 둔 저희의 예전 모션 템플릿도 HyperFrames로 만들었습니다. 두 엔진의 비교는 HyperFrames vs. Remotion을 참고하세요.

Motion Skills 완성 영상 스킬은 에이전트가 불러오는 스킬입니다. 컴포넌트를 작성할 필요는 없습니다. 프로젝트, 메모, 데이터, 스크립트를 주고 영상의 용도를 말하면 됩니다. 스킬은 연출 방향을 정해 키 프레임을 보여 주고, 영상을 코드로 작성하고, 음악을 작곡하고, 모든 프레임을 검사한 뒤 저희 오픈 엔진인 motion-skills(mo)로 MP4를 렌더링합니다. 이 가이드의 나머지 부분은 이 방법을 따릅니다.

필요한 것

Claude Code: Claude Pro 또는 Max(Team, Enterprise, Claude Console 계정도 가능. 무료 플랜에는 없음).
Node.js 22 이상.
FFmpeg(macOS에서는 brew install ffmpeg).
Google Chrome. 렌더러가 헤드리스 모드로 구동합니다.

엔진은 처음 렌더링할 때 npx로 스스로 설치되며, API 키는 필요하지 않습니다. 스킬의 첫 단계인 mo doctor가 세 가지를 모두 확인하고 무엇이 빠졌는지 알려 줍니다. 스킬을 어디에 두는지는 에이전트 스킬 설치 방법을 참고하세요.

Motion Director로 단계별 진행하기

Motion Director는 무료이며 Google 로그인만 하면 됩니다. 모든 유형의 10–20초 영상 한 편을 만듭니다. 런칭 티저, 숫자 하나를 강조하는 영상, 아이디어 하나를 설명하는 영상, 세로형 훅 영상 등입니다.

1. 한 문장으로 설치하기

폴더(내 프로젝트 또는 빈 폴더)에서 Claude Code를 열고 다음을 붙여 넣으세요.

Read https://claude-motion.com/skills/motion-director/install.md and follow it to install the "motion-director" skill, then make a first video with it.

Claude Code가 가이드를 읽고 명령 하나, npx motion-skills install motion-director를 실행합니다. 처음에는 브라우저에 페이지가 열립니다. Google로 로그인하고 터미널에 표시된 코드를 승인하세요. 터미널에서 직접 설치하고 싶다면, 각 스킬 페이지에 Claude Code, Codex, Cursor, Gemini CLI용 명령이 있습니다. 설치 프롬프트 복사를 누르고 터미널로 설치 탭을 여세요.

2. 자료 주기

영상이 무엇에 관한 것인지 말하고, 사용할 자료를 알려 주세요. 지금 작업 중인 저장소, README, CHANGELOG, 스프레드시트, 링크, 스크립트 등입니다. 예를 들면 다음과 같습니다.

README.md와 CHANGELOG.md의 2.0 릴리스 노트로 이 앱의 15초 런칭 티저를 만들어 줘. 16:9, 우리 사이트용.

스킬은 sources.md를 만들기 시작합니다. 화면에 나올 수 있는 모든 문장, 숫자, 이름을 그 출처인 파일이나 URL과 함께 적어 둡니다. 영상이 달라질 만한 것(어디서 재생되는지, 길이, 브랜드)만 묻고, 기본값을 함께 적어 둡니다. 아직 자료가 없다면 스킬에 포함된 샘플 변경 로그를 쓰고, 그렇다고 알려 줍니다.

3. 연출 방향 고르기

무엇이든 만들기 전에 스킬은 영상의 연출 방향 세 가지를 제안합니다. 각각 한 줄 설명과, 그 방향의 스타일과 팔레트로 만든 스틸 한 장입니다(Motion Director에서는 키네틱 타이포그래피, 데이터 스토리, 화이트보드). 하나를 고르거나 섞을 수 있습니다("두 번째 색에 첫 번째 구도"). "그냥 만들어 줘"라고 했다면 가장 강한 안을 골라 어느 것인지 알려 줍니다. 그다음 그 방향으로 짧은 트리트먼트를 씁니다. 훅이 언제 들어가는지, 핵심 메시지가 가장 강한 비트에 언제 맞춰지는지, 마지막에 머무는 장면이 무엇인지입니다. 이것이 스토리보드 확인 단계입니다. 스틸은 완성된 영상보다 훨씬 빨리 바꿀 수 있습니다.

4. 제작, 검사, 음악 맡기기

스킬은 영상을 index.html 하나(HTML과 GSAP)로 작성한 뒤 자신의 작업을 직접 살펴봅니다. 영상 전체의 콘택트 시트를 보고, mo check로 오류를 찾고, mo audit로 화면의 모든 문장에 출처가 있는지 확인하고, 주요 장면의 스틸 이미지를 열어 보고 고칩니다. 주제에 맞는 짧은 모티프가 들어간 오리지널 음악도 씁니다. 소리를 들을 수는 없으므로, 무엇을 썼는지 알려 줍니다.

5. 수정 요청하기

렌더링된 영상을 보고 바꿀 점을 평범한 말로 알려 주세요. "로고가 너무 늦게 나와", "우리 초록색을 써 줘", "마지막 문장을 더 오래 보여 줘" 같은 식입니다. 스킬은 그 위치와 시점에서 가장 작은 변경을 하고 다시 렌더링합니다. mo studio를 실행해 실시간 미리 보기를 열고, C를 누른 다음 원하는 프레임을 클릭해 그곳에 수정 사항을 적을 수도 있습니다.

6. MP4 받기

마지막 렌더링 결과는 경로, 길이, 형식과 함께 프로젝트에 저장되며, 스타일과 음악에 대한 한 줄 메모와 handoff.md도 함께 남습니다. 그 유형의 완성 영상(30–90초 런칭 영상, 설명 영상, 데이터 영상)이 필요하면, 해당 영상 유형의 완성 영상 스킬이 같은 폴더에서 이어서 작업합니다.

실제 예시: "Claude Code 세 단계로 시작하기"

이 29초 영상은 저희 사용법 안내 영상 스킬로 만들었습니다. Motion Director와 같은 방식으로 작동하지만, 더 긴 영상을 만들고 스타일도 더 많습니다.

Claude Code 세 단계로 시작하기

설치, 프로젝트에서 시작, 첫 질문. 공식 퀵스타트 그대로이며 버전 표시는 실제 출력입니다.

사용법 안내 영상 예시16:9 · 29초

비공식 안내이며, Anthropic이 만들거나 승인하지 않았습니다.

브리프. "Claude Code를 한 번도 써 본 적 없는 Claude Pro 또는 Max 플랜 사용자를 위한 30초 16:9 온보딩 안내 영상. 우리 사이트와 시작 안내 이메일에서 재생됨. 설치하고, 프로젝트에서 시작하고, 무언가를 물어보는 과정. 공식 빠른 시작 문서만 사용하고, 명령이나 출력을 지어내지 말 것." 자료는 Claude Code의 공개 빠른 시작 페이지와 설정 페이지, 그리고 claude --version을 실제로 한 번 실행한 결과였습니다.

연출 방향. 스킬은 세 가지를 제안했습니다. 단계 표시줄이 있는 큰 터미널, 여러 색면을 가로지르는 끝없는 명령줄 하나, 각 명령이 무엇을 건드리는지 보여 주는 시스템 맵입니다. 스킬은 터미널을 골랐습니다. "메시지는 워크플로이고 인터페이스는 터미널이므로, 가장 강력한 증거는 크게 입력되는 실제 명령이다." 위험 요소도 미리 밝혔습니다. 실제 세션 스크린숏이 없었기 때문에 그 화면은 단순화된 것으로 보여야 했고, 영상에는 "레이아웃 단순화"라는 표시가 붙어 있습니다.

계획. 112 BPM의 마디 단위 트리트먼트입니다. 설치, 시작, 질문 순서로 진행하고, 절정에서 예시 답변을, 엔드 카드에서 설치 명령을 보여 줍니다. 화면의 모든 단어는 sources.md에서 빠른 시작 문서까지 추적되며, 버전 줄은 실제 출력입니다.

수정. 첫 렌더링 후 mo qa에서 1단계 뒤의 3초 정지와 2단계 뒤의 2초 정지가 발견되었는데, 둘 다 필요 없는 구간이었습니다. 2단계와 3단계를 앞당기고 절정을 한 마디 일찍 옮겼기 때문에, 영상은 30초가 아니라 29초입니다.

연출 방향, 트리트먼트, 출처를 포함한 이 영상의 소스는 사용법 안내 영상 스킬에 예시로 들어 있습니다.

영상 유형에 맞는 완성 영상 스킬 고르기

Motion Director는 일부러 20초에서 멈춥니다. 완성 영상을 위해서는 영상 유형마다 스타일이 내장된 전용 완성 영상 스킬이 있습니다.

런칭: 런칭 영상, 사용법 안내 영상, 비교 영상, 브랜드 소개, 행사 홍보, 앱 스토어 미리보기.
교육·설명: 설명 영상, 강의, 논문 설명, 타임라인, 수학 설명.
소셜: 세로형 쇼츠, 토킹 헤드 영상, 타이틀과 전환 효과, 소셜 카드.
업무 보고: 데이터 영상, 팀 업데이트, 세션 리플레이, 내레이션이 들어간 슬라이드, 투자자 업데이트.

완성 영상 스킬은 하나에 $4.90이며, 플랜에는 전부 포함됩니다. 플랜은 월 $9.90, 연 $79, 또는 창립 회원 평생 이용권 $169(1회 결제)입니다. 요금을 참고하세요.

문제 해결

"FFmpeg not found" 또는 "Chrome not found". mo doctor(npx --yes motion-skills doctor)를 실행하세요. 무엇이 빠졌는지 알려 줍니다. macOS에서는 brew install ffmpeg를 실행하고, Google Chrome은 Google에서 설치하세요.
Claude Code가 스킬을 쓰지 않습니다. 설치 후 새 Claude Code 세션을 시작해 새 스킬을 읽게 한 다음, 스킬 이름을 넣어 다시 요청하세요. 예: "motion-director 스킬을 사용해 줘".
샌드박스가 브라우저나 로컬 서버를 막습니다. 스킬은 시각 검사를 위해 둘 다 필요합니다. Claude Code가 물어보면 승인하고, 검사를 건너뛰게 하지 마세요.
영상이 20초보다 깁니다. Motion Director는 가장 강력한 20초를 만들고, 완성 영상은 어느 완성 영상 스킬이 만드는지 알려 줍니다.

Claude Code를 쓰지 않나요?

같은 스킬이 Codex, Cursor, Gemini CLI에서도 작동하며, Claude 무료 플랜에서도 이 방법을 쓸 수 있습니다. 각 에이전트가 스킬을 어디에 두는지는 에이전트 스킬 설치 방법에 있습니다. Claude Motion 자체를 찾고 있었다면 Claude Motion이 내 플랜에 없나요?를 참고하세요. 이 에이전트들의 단계별 안내와 각자 읽는 폴더는 Codex, Cursor, Gemini CLI로 영상 만들기에 있습니다.

자주 묻는 질문

Claude Code로 영상을 만들 수 있나요?

네. Claude Code는 애니메이션을 코드로 작성하고 내 컴퓨터에서 MP4로 렌더링할 수 있습니다. 흔히 쓰는 방법은 Remotion 에이전트 스킬(React), HyperFrames(HTML과 GSAP), 또는 영상 전체를 기획하고 음악을 만들고 렌더링하는 Motion Skills 완성 영상 스킬입니다. Claude Code는 Claude Pro와 Max에 포함되어 있습니다.

Claude로 영상을 만들려면 Claude Motion이 필요한가요?

아니요. Claude Motion은 Team과 Enterprise 플랜의 Claude에서 제공되는 별도의 베타 기능입니다. Pro나 Max의 Claude Code도 스킬을 쓰면 같은 종류의 코드 기반 애니메이션을 만들어 내 컴퓨터에서 렌더링할 수 있습니다.

무엇을 설치해야 하나요?

Node.js 22 이상, FFmpeg, Google Chrome입니다. motion-skills 엔진은 처음 렌더링할 때 npx로 스스로 설치되며, API 키는 필요하지 않습니다.

무료인가요?

Motion Director는 무료이며 Google 로그인만 하면 되고 10–20초 영상을 만듭니다. 완성 영상 스킬은 하나에 $4.90이며, 플랜에는 전부 포함됩니다. 플랜은 월 $9.90, 연 $79, 또는 $169 1회 결제입니다. 크레딧은 없으며, 쓰는 것은 Claude 플랜 자체의 사용량뿐입니다.

내 영상이 컴퓨터 밖으로 나가나요?

영상은 내 컴퓨터에서 만들어지고 렌더링됩니다. 렌더링이 끝나면 엔진은 어떤 스킬로 렌더링했는지와 성공했는지만 claude-motion.com에 알리며, 영상에 관한 정보는 보내지 않습니다. MOTION_SKILLS_TELEMETRY=0을 설정하면 이 기능이 꺼집니다.

출처

Anthropic, Claude pricing(Claude Code가 포함된 플랜)
Anthropic, Claude Code quickstart
Remotion, Coding agents
HeyGen, HyperFrames on GitHub

이 가이드는 독립적이며 Anthropic, Remotion, HeyGen과 관련이 없습니다. Claude는 Anthropic, PBC의 상표입니다. 2026년 10월 29일 기준 위 페이지들로 확인했습니다.