Claude Motion — 내 자료를 움직이는 자료화면으로 만들기

글이나 데이터, 아이디어를 넣으면 짧은 애니메이션 영상으로 만들어 주는 기능 — Anthropic이 Claude에 새로 추가한 Motion입니다. 별도의 스킬을 설치하거나 편집 프로그램을 쓰지 않아도, Claude 안에서 모션 그래픽을 만들고 쉽게 수정할 수 있습니다. 대본만 넣은 간단한 요청부터 구체적인 프롬프트, 레퍼런스 스크린샷, SRT로 내레이션 타이밍 맞추기까지 — 실제 영상에 쓸 자료화면을 만드는 전 과정을 정리한 가이드입니다. 영상에서 사용한 프롬프트를 전부 담았습니다.

📺 영상 채널: Aiden의 친절한 AI (https://www.youtube.com/@Aiden_channel)

이 가이드로 하는 것

Motion이 영상 생성 AI와 어떻게 다른지 — 코드로 만들어지는 모션 그래픽 — 이해한다
대본만 넣고 간단하게 요청해 보고, 결과의 한계를 확인한다
장면·색·움직임을 구체적으로 요청해 퀄리티를 끌어올린다
Tweaks와 댓글로 글자, 장면 길이, 세부 요소를 수정한다
레퍼런스 스크린샷으로 원하는 스타일을 빠르게 전달한다
Gemini로 만든 SRT 파일로 내 목소리에 타이밍을 맞추고 MP4로 내보낸다

준비물

Claude 데스크톱 앱 — 현재 Motion은 팀·엔터프라이즈 계정에 한해 베타로 제공
자료화면으로 만들 대본 — 영상에서는 Claude Code 모드 기능을 다룬 지난 영상의 대본 일부를 사용
(선택) 레퍼런스 스크린샷 — 마음에 드는 모션 그래픽 장면 몇 장
(선택) 대본을 읽은 음성 파일 + Gemini — 타이밍을 맞출 SRT 파일 생성용

시작 전에 — Motion은 무엇이고, 영상 생성 AI와 뭐가 다른가

⭐ Motion을 한 문장으로 — 내 자료를 움직이는 영상으로 바꿔 주는 기능입니다.

보고서를 정리한 회의용 요약 영상, 발표 자료에 넣을 움직이는 차트, 제품 사용법 안내 같은 다양한 영상을 만들 수 있습니다.

다만 화면을 새로 그려내는 영상 생성 AI와는 방식이 다릅니다.

	영상 생성 AI	Claude Motion
만드는 방식	화면 자체를 새로 생성	글자·차트·도형·이미지가 움직이도록 Claude가 코드를 짜고, 그 결과가 짧은 영상처럼 재생
수정	다시 생성하면 전체가 달라질 수 있음	숫자 하나, 단어 하나, 장면 길이 하나만 바꿔 달라고 하면 딱 그 부분만 바뀌고 나머지는 유지

💡 코드로 만들어지기 때문에 수정이 쉽다 — 이게 Motion의 가장 큰 장점이고, 뒤에서 보여드릴 Tweaks·댓글 수정도 모두 이 덕분입니다.

STEP 1. Motion 열기

Claude 데스크톱 앱 실행
왼쪽 Artifacts 메뉴 → Motion 선택
What do you want to animate? 문구와 함께 나오는 입력창에 요청을 입력

💡 현재 Motion은 팀·엔터프라이즈 계정에 한해 베타로 제공됩니다. 다만 이번 발표에서 그동안 베타였던 문서·슬라이드·디자인 기능이 정식 출시되며 무료 플랜까지 풀렸기 때문에, Motion도 머지않아 개인 플랜에서 쓸 수 있게 되지 않을까 예상합니다.

STEP 2. 대본만 넣고 간단하게 요청하기

먼저 대본만 넣고, 글자를 최소화한 모션 그래픽으로 만들어 달라고만 요청해 봅니다.

모델: Opus 5.5
추론 강도: 높음

스크립트 훅은 특정 이벤트가 발생할 때마다 별도의 프로그램을 실행하고, 그 결과를 클로드 코드에 돌려주는 방식입니다. 같은 이벤트가 다시 발생하면 프로그램도 다시 실행되는 거죠.
반면 모드는 클로드 코드 내부에 기능을 불러와두고, 필요한 이벤트가 발생할 때마다 그 기능이 동작하는 방식입니다.
할 수 있는 일의 차이는 화면을 보면 더 쉽게 이해할 수 있어요. 스크립트 훅으로도 작업을 자동으로 실행하거나, 지원되는 이벤트에서는 화면에 표시할 글자를 바꿀 수 있습니다.
모드는 여기서 더 나아가, 클로드 코드 화면 안에 패널이나 버튼을 직접 추가할 수 있어요. 버튼을 눌러 기능을 실행하거나, 마우스를 올렸을 때 숨겨진 정보를 보여주는 식으로, 사용자가 직접 조작할 수 있는 화면을 만드는 거죠.
이 대본을 텍스트는 최소한으로 넣고 모션그래픽으로 만들어줘

결과

좋았던 점	아쉬운 점
글자 최소화 요청을 잘 지킴	창 안이 회색 줄로만 채워져 화면 디테일이 추상적
한글이 깨짐 없이 깔끔하게 표시	색감과 애니메이션 효과가 단조로움
대본 내용을 직관적으로 표현해 이해하기 쉬움	요소가 서서히 나타나고 테두리에 색이 들어오는 정도의 움직임 — 자료화면으로는 심심함

💡 왜 이렇게 나올까? 대본만 주고 간단하게 부탁하면, 화면을 어떻게 꾸밀지는 Claude가 알아서 정하게 됩니다. 그래서 결과가 깔끔하긴 하지만 어디서 본 듯한 무난한 스타일에 머무르는 거죠.

STEP 3. 장면·색·움직임을 구체적으로 요청하기 ⭐

같은 대본으로, 장면마다 무엇을 보여 줄지, 어떤 색과 움직임을 원하는지 구체적으로 부탁해 봅니다. 모델과 추론 강도는 이전과 똑같이 Opus 5.5 / 높음.

아래 대본에 맞는 자료화면용 모션 그래픽을 만들어 줘. 클로드 코드의 "스크립트 훅"과 "모드"가 어떻게 다른지 처음 보는 사람도 한눈에 이해할 수 있어야 해.

[길이]
- 전체 길이는 35초. 30초보다 짧거나 40초보다 길면 안 돼.
- 장면별 시간: 1번 8초, 2번 6초, 3번 6초, 4번 9초, 5번 6초.

[전체 스타일]
- 배경은 아주 연한 회색(#F2F2F0)에 작은 점들이 일정한 간격으로 찍힌 점 격자 무늬를 깔아 줘. 점은 연한 회색으로, 눈에 거슬리지 않을 만큼 은은하게.
- 터미널 창, 카드, 패널은 흰색(#FFFFFF) 바탕에 굵은 검은색 외곽선과 둥근 모서리로 그려서 배경 위에 또렷하게 떠 보이게 해 줘.
- 색은 선명하고 진하게: 포인트는 진한 주황(#E8590C), 보조 색은 진한 청록(#0B8A7D)과 진한 남색(#1E3A8A). 연한 파스텔이나 흐린 색은 쓰지 마.
- 스크립트 훅 장면은 주황, 모드 장면은 청록을 중심 색으로 써서 장면 구분이 바로 되게 해 줘.

[글꼴]
- 모든 한글은 굵은 고딕체로. Pretendard를 쓰고, 안 되면 Noto Sans KR로.
- 장면 제목("스크립트 훅", "모드", "훅으로 할 수 있는 일" 등)은 아주 굵게(800 이상), 크게, 검은색으로.
- 명조체, 세리프체, 손글씨체는 쓰지 마.
- 터미널 안의 글자만 고정폭 글꼴로.

[화면 디테일]
- 회색 줄 같은 빈 자리표시 대신, 실제 앱처럼 보이는 깔끔한 화면을 그려 줘.
- 클로드 코드는 밝은 테마의 터미널 창으로. 안에는 사용자가 입력하는 줄(">"로 시작), "파일 읽는 중…" 같은 짧은 상태 문구, 답변 내용이 실제 글자로 보이게. 터미널 안의 줄은 장면마다 2~3줄만.
- 버튼을 누르는 장면에는 검은 외곽선의 손 모양 커서가 등장해서 직접 누르게.

[장면 구성]
1. 스크립트 훅: 터미널에서 이벤트가 생기면 신호가 창 바깥에 있는 작은 카드(hook.sh)로 이동하고, 실행된 뒤 결과가 다시 터미널로 돌아와. 이벤트가 한 번 더 생기면 같은 과정이 빠르게 반복되고, 카드 옆 실행 횟수가 1회에서 2회로 올라가.
2. 모드: 기능 카드가 터미널 창 안으로 쏙 들어가 자리 잡고, 이벤트가 생기면 바깥으로 나가지 않고 그 자리에서 바로 동작해.
3. 스크립트 훅으로 할 수 있는 일: 작업이 자동으로 실행되고, 터미널 답변의 글자 일부가 다른 글자로 바뀌어 표시돼.
4. 모드로 할 수 있는 일: 터미널 오른쪽에 패널과 주황색 버튼이 새로 생기고, 손 커서가 버튼을 누르면 기능이 실행돼. 이어서 커서를 올리면 숨겨진 정보 카드가 부드럽게 펼쳐져.
5. 정리: 화면을 반으로 나눠 왼쪽엔 "스크립트 훅: 실행하고 결과를 돌려준다", 오른쪽엔 "모드: 화면을 직접 만든다".

[움직임]
- 요소는 살짝 튀어 오르듯 무게감 있게 자리 잡게.
- 신호는 선을 따라 작은 점이 이동하는 모습으로.
- 장면 전환은 0.5초 안팎으로 짧게, 카메라가 부드럽게 다가가거나 옆으로 미끄러지듯.
- 버튼은 눌리는 느낌이 보이게, 숫자는 갑자기 바뀌지 말고 올라가게.
- 템포는 경쾌하게. 장면 안에서 불필요하게 멈춰 있는 시간은 없애고, 제목만 1초 정도 읽을 시간을 줘.

[화면 배치]
- 확대하거나 이동할 때도 터미널 창과 제목이 화면 밖으로 잘리지 않게, 항상 화면 안에 다 보이게 해 줘.
- 장면 제목이 다 나타난 다음에 다음 장면으로 넘어가게.

[피할 것]
- 어두운 배경, 베이지·아이보리 배경, 연한 파스텔, 명조체·세리프체, 회색 줄로만 채운 빈 화면, 흔한 템플릿 디자인, 이모지, 실제 회사 로고나 브랜드 마크, 긴 설명 문장.

대본:
스크립트 훅은 특정 이벤트가 발생할 때마다 별도의 프로그램을 실행하고, 그 결과를 클로드 코드에 돌려주는 방식입니다. 같은 이벤트가 다시 발생하면 프로그램도 다시 실행되는 거죠.
반면 모드는 클로드 코드 내부에 기능을 불러와두고, 필요한 이벤트가 발생할 때마다 그 기능이 동작하는 방식입니다.
할 수 있는 일의 차이는 화면을 보면 더 쉽게 이해할 수 있어요. 스크립트 훅으로도 작업을 자동으로 실행하거나, 지원되는 이벤트에서는 화면에 표시할 글자를 바꿀 수 있습니다.
모드는 여기서 더 나아가, 클로드 코드 화면 안에 패널이나 버튼을 직접 추가할 수 있어요. 버튼을 눌러 기능을 실행하거나, 마우스를 올렸을 때 숨겨진 정보를 보여주는 식으로, 사용자가 직접 조작할 수 있는 화면을 만드는 거죠.

⭐ 이 프롬프트의 구성

[길이] — 전체 35초와 장면별 시간까지 지정

[전체 스타일] — 배경·카드 모양과 색을 색상 코드로 지정, 스크립트 훅은 주황·모드는 청록으로 장면 구분

[글꼴] — 굵은 고딕체(Pretendard), 제목 굵기, 터미널만 고정폭

[화면 디테일] — 회색 줄 대신 실제 앱처럼 보이는 화면, 터미널 안의 실제 글자, 손 모양 커서

[장면 구성] — 5개 장면마다 무엇이 어떻게 움직일지

[움직임] — 튀어 오르는 등장, 신호 이동, 짧은 장면 전환, 숫자가 올라가는 방식

[화면 배치] — 확대·이동 중에도 창과 제목이 잘리지 않게

[피할 것] — 어두운 배경, 파스텔, 세리프체, 회색 줄 화면, 템플릿 디자인, 이모지, 로고

마지막에 STEP 2와 똑같은 대본을 그대로

💡 이 긴 프롬프트도 직접 쓴 게 아닙니다. 첫 번째 결과에서 아쉬웠던 점을 Claude에게 설명하고, 그걸 보완하는 프롬프트를 써 달라고 해서 만든 거예요. 길게 쓰기 어렵다면 원하는 걸 말로 설명하고 Claude에게 프롬프트를 써 달라고 하세요.

결과

같은 대본인데 첫 번째 영상과는 완전히 달라졌습니다.

	STEP 2 (간단한 요청)	STEP 3 (구체적인 요청)
창 안의 화면	회색 줄뿐	실제 내용이 들어가 무슨 장면인지 바로 이해됨
디자인	단조로움	깔끔해짐
움직임	서서히 나타나기, 테두리 색 정도	풍성해짐

STEP 4. 다시 요청하지 않고 고치기 — Tweaks와 댓글

간단한 수정은 프롬프트를 다시 쓸 필요가 없습니다.

고치고 싶은 것	방법
영상 속 글자	화면 오른쪽 아래 Tweaks → 글자 바로 수정. More text를 누르면 화면에 나오는 모든 글자를 한눈에 볼 수 있음
장면 길이	Tweaks에서 바로 조절 — 빠르게 느껴지는 부분은 늘려서 여유 있게, 반대로 줄여서 더 빠르게
글자가 아닌 요소	오른쪽 아래 말풍선 버튼(댓글) → 수정할 부분 선택 → 댓글로 요청

Tweaks로 고치면 해당 부분만 바로 바뀌고 나머지 장면과 움직임은 그대로 유지됩니다.

댓글 수정 예시

영상에서는 세부 정보 장면에서 손 커서가 정보 카드의 글자를 살짝 가리고 있었습니다. 해당 부분을 선택하고 이렇게 댓글을 남깁니다.

커서가 글자를 가리지 않게 위치를 옮겨 줘

→ Claude가 그 부분만 찾아서 고쳐, 커서가 글자를 가리지 않게 옮겨졌습니다.

💡 이렇게 부분만 쉽게 고칠 수 있는 것도 영상이 코드로 만들어지기 때문입니다.

STEP 5. 말 대신 레퍼런스로 — 스크린샷으로 스타일 전달하기 ⭐

이번에는 스타일을 말로 설명하는 대신, 마음에 드는 레퍼런스를 스크린샷으로 보여 줍니다.

레퍼런스 찾기 — 영상에서는 skillry.dev에 올라온 Opus 5.5로 만든 모션 그래픽 예시 중 첫 번째 영상을 사용
마음에 드는 장면에서 스크린샷 몇 장 캡처
Claude 데스크톱 앱 → Motion 탭에서 스크린샷을 첨부하고 요청

대본은 이전 시연과 같은 대본을 넣고, 스타일은 하나하나 설명하지 않고 스크린샷의 스타일을 참고해 달라고만 짧게 적었습니다.

첨부한 스크린샷의 스타일을 참고해서, 아래 대본에 맞는 자료화면용 모션 그래픽을 30초 길이로 만들어 줘.

* 배경, 색, 선의 질감, 해칭 무늬, 글꼴 굵기, 움직임 느낌을 스크린샷에 최대한 맞춰 줘.
* 스크린샷의 "FIG. 01 — DRAFT" 같은 장면 라벨은 "그림 01 — 스크립트 훅"처럼 한국어로 바꿔서 써 줘.
* 스크린샷에 있는 "CLAUDE" 글자, 캐릭터, 그 밖의 문구는 가져오지 말고, 내용은 대본만 써 줘.
* 화면 글자는 한국어로 써줘

대본:
스크립트 훅은 특정 이벤트가 발생할 때마다 별도의 프로그램을 실행하고, 그 결과를 클로드 코드에 돌려주는 방식입니다. 같은 이벤트가 다시 발생하면 프로그램도 다시 실행되는 거죠.
반면 모드는 클로드 코드 내부에 기능을 불러와두고, 필요한 이벤트가 발생할 때마다 그 기능이 동작하는 방식입니다.
할 수 있는 일의 차이는 화면을 보면 더 쉽게 이해할 수 있어요. 스크립트 훅으로도 작업을 자동으로 실행하거나, 지원되는 이벤트에서는 화면에 표시할 글자를 바꿀 수 있습니다.
모드는 여기서 더 나아가, 클로드 코드 화면 안에 패널이나 버튼을 직접 추가할 수 있어요. 버튼을 눌러 기능을 실행하거나, 마우스를 올렸을 때 숨겨진 정보를 보여주는 식으로, 사용자가 직접 조작할 수 있는 화면을 만드는 거죠.

💡 스타일은 가져오되 레퍼런스 속 글자·캐릭터·문구는 가져오지 말라고 명시한 점, 장면 라벨처럼 살리고 싶은 요소는 한국어로 바꿔 쓰게 한 점이 포인트입니다.

결과

모눈종이 배경에 손으로 그린 듯한 선까지, 스크린샷의 느낌이 그대로 살아 있습니다. 스타일을 말로 길게 설명하지 않았는데도, 스크린샷 몇 장과 대본만으로 이 정도 결과가 나왔습니다.

⭐ 원하는 느낌을 말로 표현하기 어렵다면, 마음에 드는 레퍼런스를 찾아 보여 주는 게 가장 빠른 방법입니다.

STEP 6. 내 목소리에 맞추기 ① — Gemini로 SRT 만들기

자료화면을 실제 영상에 쓰려면 한 가지가 더 필요합니다. 바로 내 목소리와 타이밍을 맞추는 것. 지금 영상은 Claude가 대본만 보고 알아서 장면 길이를 정했기 때문에, 실제로 읽는 속도와는 맞지 않습니다.

💡 SRT 파일이란? 몇 초부터 몇 초까지 무슨 말을 했는지가 적힌 자막 파일입니다. 이걸 함께 주면 Claude가 말의 타이밍에 맞춰 장면을 조정해 줍니다.

SRT 만드는 방법	설명
편집 프로그램	자동 자막 기능에서 SRT로 바로 내보내기
Gemini (무료)	영상에서 사용한 방법 — 아래 참고

Gemini로 만들기

영상에서 이 대본을 읽은 부분만 잘라 음성 파일로 준비
Gemini에 음성 파일 + 대본을 함께 올리고 SRT로 만들어 달라고 요청

첨부한 파일의 내레이션으로 SRT 자막 파일을 만들어 줘.

* 아래 대본이 실제로 읽은 내용이니, 글자는 대본을 그대로 쓰고 시간만 맞춰 줘.
* 한 줄은 한 문장 또는 짧은 구절 단위로 나눠 줘.
* 시간 형식은 00:00:00,000 --> 00:00:00,000 으로.
* 설명 없이 SRT 내용만 출력해 줘.

대본:
스크립트 훅은 특정 이벤트가 발생할 때마다 별도의 프로그램을 실행하고, 그 결과를 클로드 코드에 돌려주는 방식입니다. 같은 이벤트가 다시 발생하면 프로그램도 다시 실행되는 거죠.
반면 모드는 클로드 코드 내부에 기능을 불러와두고, 필요한 이벤트가 발생할 때마다 그 기능이 동작하는 방식입니다.
할 수 있는 일의 차이는 화면을 보면 더 쉽게 이해할 수 있어요. 스크립트 훅으로도 작업을 자동으로 실행하거나, 지원되는 이벤트에서는 화면에 표시할 글자를 바꿀 수 있습니다.
모드는 여기서 더 나아가, 클로드 코드 화면 안에 패널이나 버튼을 직접 추가할 수 있어요. 버튼을 눌러 기능을 실행하거나, 마우스를 올렸을 때 숨겨진 정보를 보여주는 식으로, 사용자가 직접 조작할 수 있는 화면을 만드는 거죠.

⭐ 대본도 같이 넣어 주세요. 용어를 잘못 알아듣는 일 없이 더 정확한 SRT를 만들어 줍니다.

→ 문장마다 시작하고 끝나는 시간이 적힌 SRT가 나오면, 내용을 복사해 둡니다.

STEP 7. 내 목소리에 맞추기 ② — SRT로 타이밍 조정 후 MP4 내보내기

Motion으로 돌아가, STEP 5에서 만든 영상에 복사한 SRT를 넣고 요청합니다. 스타일과 장면 구성은 그대로 두고, 타이밍만 SRT에 맞춰 고쳐 달라는 요청입니다.

지금 영상의 스타일과 장면 구성은 그대로 유지하고, 타이밍만 아래 SRT에 맞춰 수정해 줘.
이 SRT는 같은 대본을 내가 실제로 읽은 내레이션이야.

* 각 문장이 시작되는 시간에 해당 장면이 시작되게 해 줘.
* 전체 길이는 마지막 자막이 끝나는 시간에 맞춰 줘.
* 장면이 길어지는 만큼, 움직임이 멈춰 보이지 않게 자연스럽게 늘려 줘.

SRT:
1
00:00:00,000 --> 00:00:07,500
스크립트 훅은 특정 이벤트가 발생할 때마다 별도의 프로그램을 실행하고, 그 결과를 클로드 코드에 돌려주는 방식입니다.

2
00:00:07,500 --> 00:00:11,500
같은 이벤트가 다시 발생하면 프로그램도 다시 실행되는 거죠.

3
00:00:12,000 --> 00:00:19,500
반면 모드는 클로드 코드 내부에 기능을 불러와두고, 필요한 이벤트가 발생할 때마다 그 기능이 동작하는 방식입니다.

4
00:00:20,000 --> 00:00:23,800
할 수 있는 일의 차이는 화면을 보면 더 쉽게 이해할 수 있어요.

5
00:00:23,800 --> 00:00:30,500
스크립트 훅으로도 작업을 자동으로 실행하거나, 지원되는 이벤트에서는 화면에 표시할 글자를 바꿀 수 있습니다.

6
00:00:31,000 --> 00:00:37,500
모드는 여기서 더 나아가, 클로드 코드 화면 안에 패널이나 버튼을 직접 추가할 수 있어요.

7
00:00:37,500 --> 00:00:46,000
버튼을 눌러 기능을 실행하거나, 마우스를 올렸을 때 숨겨진 정보를 보여주는 식으로, 사용자가 직접 조작할 수 있는 화면을 만드는 거죠.

결과

내레이션과 함께 보면, 말하는 내용에 맞춰 알맞은 화면 구성이 나타나도록 타이밍이 잘 조절됐습니다.

실제 영상에 쓰기

MP4로 내보내기
편집 프로그램에 내레이션과 함께 올리기

→ 실제 영상에 바로 쓸 수 있는 자료화면 완성.

자료화면 말고도 — 다른 활용

분기 보고서·엑셀 데이터 → 숫자가 차트로 움직이는 회의용 요약 영상
채널 로고 → 로고가 등장하는 짧은 인트로
새로 만든 앱·서비스 → 소개용 티저 영상

💡 글이든, 숫자든, 이미지든 — 내가 가진 자료를 넣으면 움직이는 영상으로 바꿔 줍니다. 구체적으로 요청하고, 레퍼런스를 보여 주면 어떤 주제든 원하는 결과에 가깝게 만들 수 있습니다.

정리

구분	내용
정체	내 자료(글·데이터·이미지)를 짧은 애니메이션 영상으로 만드는 Claude 기능
방식	영상 생성이 아니라 Claude가 코드로 모션 그래픽을 만듦 → 부분 수정이 쉬움
환경	Claude 데스크톱 앱 → Artifacts → Motion · 현재 팀·엔터프라이즈 베타
간단한 요청	깔끔하지만 무난한 스타일에 머묾
구체적인 요청	길이·스타일·장면·움직임·피할 것을 명시 → 퀄리티 상승 (프롬프트는 Claude에게 써 달라고 해도 됨)
레퍼런스	스크린샷 몇 장 + “이 스타일 참고” → 말로 설명하기 어려운 느낌을 빠르게 전달
수정	Tweaks(글자·장면 길이) · 댓글(그 외 요소) — 해당 부분만 바뀜
타이밍	Gemini로 SRT 생성(음성 + 대본) → “타이밍만 SRT에 맞춰” → MP4 내보내기

참고 링크

모션 그래픽 레퍼런스 예시: skillry.dev

Aiden의 친절한 AI