AI로 모션그래픽 만들기 — 쇼릴·서비스 소개·수업 영상까지, 클로드 프롬프트 10개

10월 10, 2026

영상 편집 프로그램을 몰라도 모션그래픽을 만들 수 있는 때가 왔습니다. 클로드 Opus 5.5 같은 최신 모델은 HTML·자바스크립트 코드로 움직이는 화면을 직접 짜 주고, 그 결과가 생각보다 훨씬 그럴듯합니다. 이번에는 프롬프트 한 줄로 시작하는 쇼릴부터 우리 서비스 소개 영상, 수업에 쓰는 랩 교육 영상까지 만드는 방법을 차례로 알려드리겠습니다.

실습 정보

대상	홍보 영상이 필요한 직장인·1인 사업자, 수업 영상을 만들고 싶은 선생님
준비물	클로드(유료 플랜, Opus 5.5 권장) 또는 챗GPT · 음악까지 넣으려면 ElevenLabs 계정
결과물	HTML 파일 하나(브라우저에서 재생) → 화면 녹화로 MP4
프롬프트	영상 세 종류, 한 줄짜리부터 기획안을 먼저 받는 방식까지 10개

한눈에 보기 — HTML 한 파일에서 MP4까지

AI가 만드는 모션그래픽은 동영상이 아니라 HTML 파일 하나입니다. 브라우저에서 재생해 보고 말로 고친 뒤 녹화합니다.

1. 모션그래픽을 "코드로" 만든다는 것

AI가 만드는 모션그래픽은 동영상 파일이 아니라 HTML 파일 하나입니다. 그 안에 글자·도형·화면이 언제 어떻게 움직일지 자바스크립트 코드로 적혀 있고, 크롬 같은 브라우저에서 열면 재생됩니다. 그래서 "3초 장면을 더 빠르게", "글자를 파란색으로"처럼 말로 고치기 쉽고 파일도 가볍습니다.

1쇼릴

모션 실력을 보여 주는 15초 짧은 영상. 감을 잡는 첫 연습으로 좋습니다.

연습용

2서비스 소개 영상

30~40초. 문제 공감 → 해결 화면 → 핵심 기능 강조 순서.

홍보용

3교육용 영상

개념 두세 개를 가사와 움직이는 글자로. 수업 도입 영상에 딱.

수업용

※ MP4가 필요하면 브라우저 전체 화면으로 재생하면서 화면 녹화(윈도우: Win+Alt+R, 맥: Shift+Cmd+5)를 하거나, 처음부터 "녹화하기 좋게 재생 버튼과 전체 화면 버튼을 넣어 줘"라고 요청하세요.

① 한 줄로 시작하는 쇼릴

처음엔 조건 없이 맡겨서 모델이 어디까지 하는지 보는 게 좋습니다. 마음에 들면 조건을 하나씩 붙여 다듬습니다.

간단하게

프롬프트

15초짜리 모션그래픽 영상을 만들어 줘.

실력을 끌어내는 한 줄

프롬프트

15초 길이의 역동적인 모션그래픽을 만들어 줘. 모션 디자이너가 포트폴리오 맨 앞에 넣는 쇼릴이라고 생각하고, 네가 쓸 수 있는 기법을 아낌없이 보여 줘.

조건을 붙여 다듬기

프롬프트

방금 만든 쇼릴을 아래 조건으로 다시 만들어 줘.
- HTML 파일 하나, 16:9(1920×1080)
- 장면 4개, 장면이 바뀔 때 끊기지 않고 이어지게 (예: 도형이 한 점으로 모였다가 터지면서 다음 글자가 되게)
- 색은 남색·하늘색·노란색 세 가지만
- 마지막 2초는 'AI 오토마타' 글자가 모이며 끝나게
- 화면 녹화하기 좋게 [재생] [다시 보기] [전체 화면] 버튼을 구석에 작게

② 우리 서비스·앱 소개 영상

소개 영상은 "무엇을 보여 줄지"가 분명해야 합니다. 기획서·소개 페이지·디자인 가이드처럼 이미 있는 자료를 링크로 주면 AI가 맥락을 훨씬 잘 잡습니다. 처음 결과는 무난하지만 몰입감과 음악이 아쉬운 경우가 많은데, 이때 레퍼런스 영상을 붙이면 확 달라집니다.

자료 링크로 맥락 주기

프롬프트

아래 링크는 우리가 만든 [서비스 이름]의 소개 페이지와 기획 문서야.
이 서비스를 알리는 30~40초짜리 모션그래픽 소개 영상을 만들어 줘.
따로 스킬은 쓰지 말고 기본 기능만으로.

[링크 붙여넣기]

레퍼런스를 붙이고 기획안부터 받기

프롬프트

첨부한 영상은 레퍼런스야. 바로 만들지 말고 먼저 아래 세 가지를 보여 줘.
1) 영상과 음악을 어떤 방향으로 만들지
2) 레퍼런스에서 어떤 부분을, 왜 참고할지
3) 초 단위 타임라인 시트 (시간 | 화면 | 자막 | 움직임 | 음악 강약)
내가 확인하고 고칠 점을 말하면 그다음에 만들어 줘.

고칠 점 반영해서 제작

프롬프트

기획안대로 가되 두 가지만 바꿔 줘.
- 첫 5초는 사용자가 겪는 불편을 짧은 문장 3개로 보여 줘. 보는 사람이 "내 얘기네" 하고 느끼게.
- 음악은 처음엔 잔잔하게 시작해서 핵심 기능이 나올 때 확 올라가게. ElevenLabs로 만들어서 영상 길이와 장면 전환에 맞춰 줘.
완성되면 장면별로 무엇을 레퍼런스에서 가져왔는지 한 줄씩 정리해 줘.

③ 수업에 쓰는 랩 교육 영상

개념 설명 영상은 가사와 움직이는 글자(키네틱 타이포그래피)를 합치면 학생들이 오래 기억합니다. 핵심은 가사 → 음악 → 영상 순서로 나눠서 시키는 것입니다. 아래 예시는 UX 디자인의 두 원칙(상태를 보여 주기, 일관성)을 썼지만 [ ] 안을 수업 주제로 바꾸면 됩니다.

1단계: 가사부터

프롬프트

[UX 디자인 휴리스틱] 중 핵심 개념 두 가지 [시스템 상태를 보여 주기, 일관성]을 랩으로 가르치는 1분짜리 교육 영상을 만들고 싶어.
먼저 가사만 써 줘.
- 개념마다 학생이 겪어 봤을 생활 속 예시 하나씩
- 따라 부르기 쉬운 짧은 후렴
- 어려운 용어는 쉬운 말로 풀어서

2단계: 구성 정하고 음악 만들기

프롬프트

인트로와 1절은 랩, 후렴은 노래로 가자.
ElevenLabs로 이 가사의 음악을 2~3가지 버전으로 만들어 줘.
- 템포 90~100BPM, 한국어
- 버전마다 분위기를 다르게 (신나게 / 차분하게 / 힙하게)

3단계: 고른 음악으로 영상 만들기

프롬프트

2번 버전 음악을 써서 키네틱 타이포그래피 모션그래픽을 만들어 줘.
- 가사가 나오는 타이밍에 맞춰 글자가 등장
- 단어의 뜻을 움직임으로 연기 (예: '돌아'는 회전, '하나로'는 흩어진 글자가 합쳐짐, '보여'는 확대)
- 아래 레퍼런스 모음에서 어울리는 것 2~3개를 골라 참고하고, 무엇을 왜 골랐는지 먼저 알려 줘
- 장면 전환은 끊기지 않게

[레퍼런스 모음 링크]

덤: ElevenLabs 배경음악 프롬프트

프롬프트

30초 서비스 소개 영상용 배경음악을 만들어 줘.
- 처음 10초: 잔잔한 신스 패드
- 10초부터 드럼이 들어오며 점점 고조, 25초에 가장 크게
- 마지막 3초는 깔끔하게 마무리
- 보컬 없음, 밝고 미래적인 분위기, 120BPM

한 번에 완성하지 않습니다. 한 줄 요청에서 시작해 조건, 자료 링크, 레퍼런스를 차례로 붙입니다.

2. 음악 — AI가 레퍼런스에서 읽는 것, 못 읽는 것

레퍼런스 영상의 음악을 따라 하라고 할 때, AI가 알아듣는 부분과 직접 알려 줘야 하는 부분이 있습니다.

항목	AI가 읽을 수 있나	이렇게 보완
음량 변화 (커졌다 작아짐)	읽음	"레퍼런스처럼 강약을 줘"로 충분
박자 · 빠르기	읽음	BPM 숫자를 적으면 더 정확
장면별 소리 처리 (효과음 타이밍)	읽음	타임라인 시트에 함께 적게
어떤 악기를 썼는지	못 읽음	원하는 악기를 직접 적어 주기

악기만은 AI가 알아보지 못하니 직접 적어 줍니다. 배경음악은 아래처럼 강약을 초 단위로 적어 요청합니다.

3. 알아 두면 좋은 해외 사이트

🎞️keyframe.gallery제품·서비스(SaaS) 모션그래픽 레퍼런스 모음. 소개 영상을 만들기 전에 마음에 드는 영상을 골라 레퍼런스로 붙이세요.https://keyframe.gallery/바로가기 ↗🎵ElevenLabs Music글로 설명하면 랩·노래·배경음악을 만들어 줍니다. 클로드 설정 › 커넥터에서 ElevenLabs를 연결하면 대화창 안에서 바로 음악을 만들 수 있습니다(가입 먼저, 유료 요금제 있음).https://elevenlabs.io/music바로가기 ↗🗃️awesome-opus-5.5-video (GitHub)클로드 Opus 5.5로 만든 모션그래픽·영상과 프롬프트를 모아 둔 저장소. "레퍼런스 모음 링크" 자리에 넣어 쓰기 좋습니다.https://github.com/zhuyansen/awesome-opus-5.5-video바로가기 ↗

이 사이트들은 다음에 사용법을 따로 자세히 정리해 드리겠습니다.

4. 만들기 전에 확인할 것

레퍼런스는 참고만: 구성·리듬·전환 방식을 배우는 것이지, 남의 영상 장면이나 로고를 그대로 베끼면 안 됩니다.
음악 사용 범위: AI로 만든 음악도 서비스마다 상업적 이용 조건이 다릅니다. 홍보 영상에 쓰기 전 약관을 확인하세요.
브라우저 확인: 코드로 만든 영상은 브라우저마다 조금 다르게 보일 수 있습니다. 크롬에서 재생해 보고 녹화하세요.
한 번에 끝내려 하지 않기: 한 줄 → 레퍼런스 → 음악 순서로 단계마다 확인하며 고치는 쪽이 결과가 좋습니다.

함께 보면 좋은 글

작성 2026.10 · AI오토마타. 모델·서비스 이름과 요금은 2026년 10월 기준이며 바뀔 수 있습니다.

AI 오토마타