클로드 모션그래픽 4가지 방법: 아티팩트·리모션·하이퍼프레임즈 비교
목차
클로드나 챗GPT로 모션그래픽을 만드는 방법은 AI에게 애니메이션 코드를 받아 영상 파일로 뽑는 것이며, 길은 네 가지입니다. 무료로는 클로드 아티팩트에서 재생한 애니메이션을 화면 녹화하는 방법이 있고, 제대로 만들려면 클로드 코드·코덱스와 리모션(Remotion), HTML을 그대로 영상으로 바꾸려면 하이퍼프레임즈(HyperFrames)를 씁니다. 회사 계정이라면 Team·Enterprise 베타인 Claude Motion도 있습니다. 유튜브 영상 위에 얹을 때는 투명 배경을 담을 수 있는 ProRes 4444 MOV로 내보내는 것이 핵심입니다.
이 글은 앤트로픽 Claude 지원 센터, Remotion Docs, HyperFrames 저장소·문서, OpenAI·YouTube 도움말, CapCut 크로마키 가이드를 2026년 11월 4일 확인한 내용 기준으로 정리했습니다. 작동 원리, 방법별 비교, 각 방법의 순서, 편집 프로그램에 얹는 법과 주의점, 프롬프트 작성 요령과 활용 사례를 차례로 다룹니다.
모션그래픽 AI가 영상 생성 AI와 다른 점
클로드로 만드는 모션그래픽은 소라나 클링 같은 영상 생성 AI와 원리가 다릅니다. AI가 HTML·CSS·자바스크립트 같은 애니메이션 코드를 작성하고, 그 코드를 프레임 단위로 그려 영상으로 만듭니다. 앤트로픽 도움말도 Claude Motion이 비디오 생성 모델을 쓰지 않는다고 설명합니다.
Claude Motion은 영상 생성 모델 대신 코드로 애니메이션을 만들어, 단어·숫자·타이밍 하나만 고쳐도 나머지가 유지된다는 공식 설명 (출처: Claude 지원 센터 ‘Claude Motion 시작하기’, 2026년 11월 4일 확인)
코드 방식의 장점은 수정이 정확하다는 점입니다. 숫자 하나, 글자 하나, 등장 시점 0.5초만 바꿔도 나머지 장면은 그대로 남고, 매번 결과가 달라지는 생성형 영상과 달리 한글 자막이 깨질 걱정도 적습니다. 대신 사람이나 실사 장면은 만들 수 없습니다. 챗GPT의 영상 생성 앱 소라는 2026년 4월 26일, 소라 API는 9월 24일 종료됐으므로 챗GPT로 모션그래픽을 만들 때도 코드를 거치는 방법을 써야 합니다.
네 가지 제작 방법 비교
| 방법 | 비용 | 결과물 |
|---|---|---|
| 클로드 아티팩트 + 화면 녹화 | 무료 플랜 가능 | 초록 배경 녹화본 |
| 클로드 코드·코덱스 + 리모션 | 에이전트 요금, 리모션은 개인 무료 | MP4, 투명 MOV |
| 하이퍼프레임즈 | 내 컴퓨터 렌더링 무료 | MP4, 투명 MOV·WebM |
| Claude Motion | Team·Enterprise 베타 | MP4 다운로드 |
Claude Motion은 앤트로픽이 10월 8일 공개한 기능으로, 채팅에서 바로 애니메이션을 만들고 MP4로 받을 수 있습니다. 확인 시점에는 Team·Enterprise 플랜 베타라 개인 계정에서는 쓸 수 없었습니다.
무료로 시작하기: 아티팩트와 화면 녹화
공식 도움말 기준으로 아티팩트는 무료 플랜을 포함한 모든 요금제에서 만들 수 있고, 채팅 옆 창에서 HTML 애니메이션이 바로 재생됩니다.
- “1920x1080, 배경은 00FF00 초록 단색, 숫자가 0에서 10,000까지 3초 동안 올라가는 HTML 애니메이션”처럼 크기와 배경을 지정해 요청합니다.
- 아티팩트 창에서 재생해 보고 “마지막에 더 천천히 멈추게”처럼 말로 수정합니다.
- 윈도우에서는 캡처 도구 단축키 Win+Shift+R로 아티팩트 영역만 녹화합니다.
- 캡컷에서 원본 영상 위 트랙에 녹화 파일을 놓고 배경 제거의 크로마키로 초록색을 지웁니다.
클로드로 만든 ‘구독자 1만 명’ 카운트업 예시를 시간대별로 나눈 장면, 초록 배경은 크로마키로 지우는 용도
초록 배경을 쓰는 이유는 화면 녹화로는 투명 배경을 얻을 수 없기 때문입니다. 실시간 녹화라 컴퓨터가 느리면 프레임이 끊길 수 있고 해상도도 모니터 크기에 묶이므로, 맛보기에는 충분하지만 꾸준히 쓰기에는 한계가 있습니다.
리모션과 하이퍼프레임즈로 영상 파일 뽑기
리모션은 리액트 코드로 영상을 만드는 오픈소스 도구입니다. 공식 문서가 코딩 에이전트로 프롬프트만 써서 영상을 만들 수 있다고 안내하며, 클로드 코드·코덱스와 잘 맞는다고 적어 두었습니다.
코딩 에이전트로 영상을 만드는 리모션 공식 문서, 준비물은 Node.js와 코딩 에이전트 (출처: Remotion Docs, 2026년 11월 4일 확인)
- Node.js를 설치하고 클로드 코드나 코덱스를 준비합니다.
- 터미널에서
npx create-video --yes --blank my-video로 프로젝트를 만들고cd my-video로 이동합니다. npx remotion skills add로 애니메이션·자막·렌더 요령이 담긴 리모션 전용 스킬을 설치합니다.npm run dev로 리모션 스튜디오를 띄우고, 다른 터미널 창에서 클로드 코드를 실행해 원하는 장면을 설명합니다.
비용은 두 가지를 따로 봐야 합니다. 리모션은 개인이나 3명 이하 팀이면 상업용도 무료이고, 그보다 큰 회사는 좌석당 월 25달러 라이선스가 필요합니다. 클로드 코드는 유료 플랜에 포함되며, 챗GPT의 코덱스는 무료 플랜에도 사용량 제한을 두고 들어 있습니다(2026년 11월 4일 확인 기준). 자세한 순서는 리모션 코딩 에이전트 문서에 있습니다.
클로드가 짠 HTML 애니메이션을 그대로 영상으로 만들고 싶다면 헤이젠이 공개한 하이퍼프레임즈가 맞습니다. HTML·CSS 애니메이션을 같은 입력이면 같은 결과가 나오는 MP4로 렌더링하는 오픈소스입니다.
HTML을 영상으로 렌더링하고, 클로드 코드·코덱스에서는 스킬 설치 후 요청하면 된다는 저장소 소개 (출처: GitHub heygen-com/hyperframes, 2026년 11월 4일 확인)
라이선스는 아파치 2.0이며 내 컴퓨터에서 렌더링하면 계정 없이 무료입니다. Node.js 22 이상과 FFmpeg가 필요하고, MP4 외에 투명 배경 MOV·WebM도 뽑을 수 있습니다. 윈도우에서는 WebM의 투명 배경이 빠지는 이슈가 보고돼 있어 MOV를 고르는 편이 안전합니다.
유튜브 영상에 얹을 때의 형식과 주의점
흔히 쓰는 H.264 MP4는 투명 정보를 담지 못해, 원본 위에 얹으면 배경이 검게 나옵니다. 용도별로 형식을 고르면 됩니다.
| 용도 | 권장 형식 | 비고 |
|---|---|---|
| 편집 프로그램에서 원본 위에 얹기 | ProRes 4444 MOV | 리모션 문서도 편집용으로 ProRes 권장 |
| 단독 장면으로 쓰기 | MP4 | 배경까지 모두 그린 경우 |
| 화면 녹화로 만든 경우 | 초록 배경 녹화본 | 편집기에서 크로마키로 제거 |
편집기에서는 원본을 아래 트랙, 모션그래픽을 위 트랙에 둡니다. 다빈치 리졸브에서 배경이 검게 보이면 클립 속성의 알파 모드를 Straight로 바꿔 보고, 투명 WebM을 읽지 못하는 경우가 있으니 MOV로 넣는 편이 낫습니다.
작업 전에 알아 둘 점도 있습니다. 무료 폰트라도 영상·로고 사용 범위가 정해진 경우가 있어, 구글 폰트 외의 폰트는 라이선스를 확인하고 AI가 코드에 어떤 폰트를 넣었는지 직접 봐야 합니다. 유튜브는 사실처럼 보이는 AI 콘텐츠에만 공개 의무를 두고, 애니메이션 같은 비사실적 콘텐츠는 의무가 없다고 안내합니다. 그림자·흐림 효과가 많으면 렌더가 느려지므로 저화질로 먼저 확인한 뒤 마지막에 고화질로 뽑습니다. 리모션에서 구글 폰트를 통째로 불러오면 렌더가 멈출 수 있어, 필요한 굵기만 불러오도록 다시 요청하면 됩니다.
프롬프트 작성 요령과 활용 사례
화면 크기, 길이, 프레임 수, 색, 폰트, 장면별 시간을 적을수록 결과가 안정적이고, 장면표를 먼저 받아 확인한 뒤 만들게 하는 방법도 유용합니다.
- 숫자 카운트업: 1920x1080, 30fps, 5초, 배경 00FF00. 0에서 10,000까지 3초간 올라가며 끝에서 감속하고, 0.5초 뒤 ‘구독자 1만 명 감사합니다’가 아래에서 올라오게, 폰트는 Noto Sans KR Bold.
- 유튜브 인트로: 4초. 0
1초 원이 커지며 로고 등장, 12.5초 채널명 한 글자씩 타이핑, 2.5~4초 살짝 확대되며 사라짐. 장면표를 먼저 보여 달라고 요청. - 막대 차트: 1월 120, 2월 180, 3월 260, 4월 410으로 8초짜리 차트. 막대가 0.3초 간격으로 자라고 숫자도 함께 올라가며, 마지막 1초는 가장 큰 막대만 강조색. 투명 배경 ProRes 4444 MOV 렌더 명령까지 요청.
리모션 공식 X 계정이 1월 20일 클로드 코드만으로 영상을 만든다며 스킬을 공개한 게시물은 11월 4일 기준 조회수 1,880만 회를 넘겼습니다. 구독자 24만 명대 유튜버 Matt Loui는 영상 속 모션그래픽을 클로드 코드와 리모션으로 만들고 캡컷에서 마무리한 과정을 공개했고(조회수 약 10.6만 회), 라라벨 개발자 커뮤니티 담당 Christoph Rumpel은 릴리스 티저를 만들며 “직접 코딩도 편집도 안 했고, 몇 번 고쳐 달라고 했을 뿐”이라고 적었습니다. 국내에서는 AI매터스가 클로드 데스크톱 앱으로 30초 인포그래픽과 쇼릴을 만드는 과정을, 유튜버 AI 치트키가 하이퍼프레임즈 장면을 파이널컷 그린스크린 키어로 합성하는 방법을 소개했습니다. 리모션을 만든 Jonny Burger는 아직 거칠지만 코드라서 사람이 언제든 손댈 수 있다는 점을 강조했습니다. 타임라인 없이 AI 에이전트에게 컷 편집을 맡기는 흐름은 AI 에이전트 영상 편집 가이드에서 다룹니다.
자주 묻는 질문
완전히 무료로도 만들 수 있나요?
맛보기 수준은 가능합니다. 클로드 아티팩트는 무료 플랜에서도 만들 수 있고, 화면 녹화와 캡컷 크로마키까지 무료로 이어집니다. 코덱스도 무료 플랜에 제한된 사용량이 있지만, 클로드 코드와 Claude Motion은 유료 플랜이나 회사 플랜이 필요합니다.
챗GPT로는 어떻게 만드나요?
소라가 종료돼 코드 방식으로 만들어야 합니다. 챗GPT 채팅의 코드 블록 미리보기로 HTML 애니메이션을 볼 수 있고, 챗GPT 데스크톱 앱 플러그인 탭에서 리모션을 설치하면 코덱스로 리모션 프로젝트를 만들 수 있습니다.
애프터 이펙트를 배울 필요가 없어졌나요?
숫자, 차트, 자막, 인트로처럼 규칙이 분명한 그래픽은 AI 코드로 충분히 만들 수 있습니다. 캐릭터 애니메이션이나 복잡한 합성은 아직 전문 도구가 유리하므로, AI로 먼저 만들어 보고 한계에 부딪힐 때 배우는 순서가 효율적입니다.
MP4로 뽑았더니 배경이 검게 나와요.
H.264 MP4는 투명 정보를 담지 못하기 때문입니다. 원본 위에 얹을 그래픽은 ProRes 4444 MOV로 다시 렌더링하거나, 초록 배경으로 만든 뒤 크로마키로 지우면 됩니다.
참고한 자료
- Claude 지원 센터 ‘Claude Motion 시작하기’, 아티팩트 도움말 (2026년 11월 4일 확인)
- 앤트로픽 Claude Motion 발표 (2026년 10월 8일)
- Remotion Docs: Prompting videos with coding agents, Agent Skills, License, ProRes·투명 영상 문서 (2026년 11월 4일 확인)
- HyperFrames 저장소 및 문서 (2026년 11월 4일 확인)
- OpenAI 도움말(Sora 종료 안내, 코드 블록, Codex 플랜), YouTube 도움말(생성형 AI 콘텐츠 공개), CapCut 크로마키 가이드
- X @Remotion, @JNYBGR, @christophrumpel 게시물, YouTube Matt Loui·AI 치트키 영상, AI매터스(2026년 10월 7일)