따라하기

AI 모션그래픽 만들기: 말로 시키는 자막·로고 애니메이션

콕랩 · 2026. 10. 18.

AI 모션그래픽은 "어떤 글자를 몇 초에 어떻게 움직일지"를 말로 적어 AI에게 맡기면 만들어집니다. 2026년 10월 공식 안내 기준으로 무료로 바로 해 볼 수 있는 길은 Claude(클로드)에게 자막·글자 애니메이션을 웹페이지(HTML)로 만들어 달라고 하는 것이고, 편집 가능한 프로젝트 파일까지 원하면 애프터 이펙트와 ChatGPT, 힉스필드 구독이 모두 있어야 하는 힉스필드 AI 모션 디자이너를 씁니다. 어느 쪽이든 남의 로고나 상표를 움직이는 데 쓰면 안 되고, 내 로고나 직접 만든 문구로만 하세요.

Claude, 애프터 이펙트, ChatGPT, 힉스필드 AI 모션 디자이너의 무료·구독 조건은 2026년 10월 각 공식 안내를 보고 적었습니다.

모션그래픽(motion graphics)은 사람이나 풍경을 찍은 영상이 아니라 글자·도형·로고·숫자 같은 그래픽을 움직여 만든 영상입니다. 유튜브 영상 첫머리에 채널 이름이 튀어나오는 장면, 쇼츠 화면 아래에서 미끄러져 올라오는 자막 띠, 가게 로고가 반짝이며 나타나는 장면이 모두 여기에 듭니다. 글자 자체가 리듬에 맞춰 커지고 흩어지고 모이는 것은 따로 키네틱 타이포그래피(kinetic typography, 움직이는 글자)라고 부릅니다.

예전에는 애프터 이펙트 같은 전문 프로그램을 배워야 했던 일인데, 2026년 가을 들어 "말로 설명하면 AI가 대신 움직여 준다"는 방법이 여럿 나왔습니다. 다만 방법마다 필요한 프로그램과 요금제가 달라서, 시작하기 전에 내가 가진 것으로 어디까지 되는지를 먼저 알아야 헛돈을 쓰지 않습니다. 이 글은 그 조건부터 표로 정리하고, 실제로 붙여 넣을 장면표 프롬프트와 고치는 요령을 붙였습니다. 사람이 나오는 광고 영상은 AI 광고 영상 글에서 따로 다룹니다.

AI 모션그래픽 만들기, 어떤 방법이 있나요

AI 모션그래픽을 만드는 방법은 크게 넷입니다. 대화형 AI에게 움직이는 웹페이지를 짜게 하는 방법, 애프터 이펙트 안에서 AI가 직접 작업하게 하는 방법, 영상 생성 AI에 로고 그림을 넣어 움직이게 하는 방법, 편집 앱의 자막 효과를 쓰는 방법입니다.

무엇을 만들고 싶은지로 고르면 쉽습니다. 쇼츠 첫 3초에 채널 이름이나 오늘의 제목을 띄우는 정도라면 클로드나 편집 앱으로 충분합니다. 거래처에 넘길 광고 영상처럼 나중에 디자이너가 손을 대야 하는 작업이라면 애프터 이펙트 프로젝트로 남는 힉스필드 쪽이 맞습니다. 로고가 빛을 뿜으며 떠오르는 식의 화려한 장면은 영상 생성 AI가 잘하지만, 로고 모양이 틀어지지 않았는지 꼭 확인해야 합니다.

클로드로 자막·글자 애니메이션 만들기 (무료)

클로드로 자막·글자 애니메이션을 만들려면 대화창에 화면 크기, 길이, 색, 글자, 그리고 몇 초에 무엇이 어떻게 움직일지를 적어 "HTML 애니메이션으로 만들어 줘"라고 보내면 됩니다. 클로드가 대화 옆 창에 결과를 띄우면 바로 재생해 보고, 마음에 안 드는 곳만 말로 고칩니다.

2026년 10월 Claude 고객센터는 아티팩트가 무료·프로·맥스·팀·기업 요금제 모두에서 쓸 수 있고, 아티팩트를 쓰려면 코드 실행과 파일 만들기가 켜져 있어야 한다고 안내합니다. 무료·프로·맥스는 내 설정의 기능(Capabilities)에서 켜고, 팀·기업 요금제는 관리자가 조직 설정의 기능(Capabilities)에서 켭니다. 같은 안내는 클로드가 문서, 코드, 한 장짜리 웹사이트, 다이어그램, 작은 대화형 도구 같은 것을 아티팩트로 만들 수 있다고 적고 있습니다. 글자가 움직이는 웹페이지도 여기에 들어갑니다.

1. claude.ai 나 클로드 데스크톱 앱에 로그인합니다.
2. 설정 → 기능(Capabilities)에서 코드 실행과 파일 만들기가 켜져 있는지 확인합니다. 팀·기업 요금제라면 조직 설정에서 관리자가 켜 두었는지 확인합니다.
3. 새 대화에 아래 "장면표 틀"을 채워 붙여 넣습니다. 맨 끝에 "브라우저에서 바로 재생되는 HTML 한 장으로 만들어 줘"를 적습니다.
4. 옆 창에 결과가 뜨면 처음부터 끝까지 재생해 봅니다.
5. 고칠 곳을 하나씩 말합니다. "2초에 나오는 제목을 0.5초 늦게", "배경을 남색으로"처럼 시간과 대상을 짚어 말하면 그 부분만 바뀝니다.

이 방법의 좋은 점은 글자가 깨지지 않는다는 것입니다. 영상 생성 AI는 글자를 그림으로 그리기 때문에 한글 자막이 뭉개지기 쉽지만, HTML 애니메이션은 글자를 진짜 글자로 띄우고 움직임만 계산합니다. 맞춤법을 고칠 때도 다시 뽑을 필요 없이 그 낱말만 바꾸라고 하면 됩니다.

처음부터 30초짜리를 부탁하지 말고 3초짜리 한 장면부터 만들어 보세요. 짧은 장면 하나가 마음에 들면 "같은 글꼴·색·움직임 방식으로 두 번째 장면을 이어 붙여 줘"라고 늘려 가는 편이 결과가 고르게 나옵니다. 긴 영상을 한 번에 시키면 앞부분은 정성스럽고 뒤로 갈수록 대충 끝나는 일이 생기고, 어디를 고쳐야 할지도 찾기 어렵습니다.

아래 카드는 이미지 모델용이지만, 움직임을 적는 법이 모션그래픽 프롬프트와 그대로 통합니다. 초콜릿 바 광고 사진 한 장과 재료 분해 인포그래픽 한 장을 만들고, 맨 앞에 "초콜릿이 둥글게 돌기 시작하고, 재료들이 줄과 크기를 유지한 채 부드럽고 정확하게 갈라져 나온다, 움직임은 매끄럽고 다른 효과는 넣지 않는다"는 움직임 문장을 따로 붙였습니다. 카드 그림은 코코아 가루, 우유, 카카오 콩, 초콜릿 조각, 포장지가 위에서 아래로 떠 있고 각각 영어 이름표가 붙은 분해 인포그래픽입니다. 이 "처음 모습, 끝 모습, 그 사이의 움직임, 넣지 말 것" 네 칸이 장면표의 뼈대입니다.

초콜릿 바 광고 사진과 분해 인포그래픽𝐌 · Nano Banana Pro · 한국어 읽기본

움직임 프롬프트: 초콜릿이 둥글게 돌기 시작하고, 재료들이 줄과 크기를 유지한 채 부드럽고 정확하게 갈라져 나옵니다. 움직임은 매끄럽고 다른 효과는 넣지 않습니다.

이미지 1: 바로 먹을 수 있게 준비된 아주 사실적인 고급 밀크 초콜릿 바. 반쯤 벗긴 은박지 위에 반들거리는 초콜릿 조각이 가지런히 나뉘어 놓여 있습니다. 은은하게 빛나는 매끈한 초콜릿 표면, 깊고 따뜻한 갈색, 실제 같은 두께와 날카로운 모서리. 깨끗한 흰 스튜디오 배경, 고급 식품 광고 조명, 부드럽게 퍼진 하이라이트, 자연스러운 옅은 그림자, 얕은 피사계 심도, DSLR 매크로 사진, 아주 선명한 초점, 고급 과자 미감, 단순한 구도, 글자 없음, 라벨 없음, 재료는 보이지 않게, 8K 실사.

이미지 2: 아주 사실적인 초콜릿 바 분해 인포그래픽을 디자인해 주세요. 맨 위에는 공중에 떠 있는 코코아 가루, 그 아래에는 멈춘 듯한 우유 튀김, 카카오 콩, 초콜릿 조각, 맨 아래에 포장지. 깊은 갈색, 깨끗한 흰 배경, 고급 식품 광고 조명, 윤기 나는 질감, 부드러운 그림자, 이름표가 붙은 인포그래픽 스타일, 극사실 사진 화질, 8K 해상도.

내 걸로 만들기 →원문 보기

키네틱 타이포 프롬프트: 장면표로 쓰는 법

키네틱 타이포 프롬프트는 "몇 초에, 무엇이, 어디서 어디로, 어떻게" 움직이는지를 줄마다 하나씩 적은 장면표로 쓰면 원하는 결과에 가장 가깝게 나옵니다. "멋지게 움직여 줘"처럼 느낌만 적으면 AI가 움직임을 지어내서 매번 다른 결과가 나옵니다.

장면표 틀

세로 9:16(1080×1920), 길이 [길이]초, 배경 [배경색], 글자색 [글자색], 굵고 단순한 고딕 글꼴. 장면은 아래 순서대로. 0~[초]초: [글자1]이 [움직임1]. [초]~[초]초: [글자2]가 [움직임2]. [초]~[끝]초: [마무리 움직임] 뒤 화면 정지. 움직임은 부드럽게 가속했다가 감속하게. 화면 위아래 10%는 비워 둬. 사진, 사람, 남의 로고나 상표는 넣지 마. 브라우저에서 바로 재생되는 HTML 한 장으로 만들어 줘.

HTML 애니메이션이 어색할 때 고치는 법

처음 결과가 마음에 안 들어도 장면표를 처음부터 다시 쓰지 마세요. 어색한 곳 하나를 시간과 함께 짚어 "그것만 바꾸고 나머지는 그대로"라고 보내는 편이 빠르고, 이미 잘된 장면이 흔들리지 않습니다.

반복 재생은 녹화할 때도 쓸모가 있습니다. 끝나고 처음으로 돌아가는 애니메이션은 녹화 버튼을 늦게 눌러도 다음 바퀴를 처음부터 담을 수 있습니다.

장면표를 쓸 때 시간 계산이 막막하면, 먼저 말할 문구를 소리 내어 읽어 보세요. 읽는 데 걸린 시간이 그 글자가 화면에 머물러야 하는 최소 시간입니다. 글자가 다 읽히기 전에 사라지면 아무리 움직임이 좋아도 남는 것이 없습니다.

움직임을 고르는 말은 몇 가지만 알아 두면 됩니다. 아래쪽에서 자막 띠가 올라오는 것은 흔히 "하단 자막 띠(lower third)"라고 부르고, 로고가 가려져 있다가 드러나는 것은 "로고 리빌(logo reveal)", 장면과 장면 사이를 잇는 움직임은 "트랜지션(transition)"입니다. 이 말들을 프롬프트에 넣으면 AI가 무엇을 원하는지 빨리 알아듣습니다. 영상 카메라 쪽 용어는 카메라 용어 글에 따로 있습니다.

아래 카드는 글자 자체가 화면의 주인공인 포스터의 예입니다. 빨간 배경에 금색과 흰색으로 크게 쓴 숫자와 "Xmas SALE" 글자, 눈송이와 선물 상자 장식, 그 사이에 겨울 옷차림의 여성이 서 있습니다. 원문 프롬프트는 행사 이름과 배경색을 빈칸으로 둔 짧은 문장뿐인데, 이런 한 장을 장면표의 "마지막 화면"으로 정해 두고 "숫자가 먼저 커지며 등장, 그다음 아래 글자가 한 줄씩 미끄러져 올라와 이 화면에서 멈춤"처럼 거꾸로 움직임을 적어 나가면 키네틱 타이포 장면이 됩니다. 할인율 같은 숫자는 실제 행사 조건과 같은지 반드시 맞추세요.

빨간 배경 크리스마스 세일 포스터ミヤマ · Nano Banana Pro · 한국어 읽기본

{argument name="event_name_en" default="Christmas Sale"}를 위한 현대적이고 세련된 그래픽 디자인 포스터, 활기차고 경쾌한 에너지.
배경은 단색의 선명하고 축제 분위기 나는 연말 {argument name="background_color_en" default="red"}.

내 걸로 만들기 →원문 보기

만든 모션그래픽을 영상 파일로 내보내는 법

HTML로 만든 모션그래픽을 영상 파일로 담는 가장 손쉬운 방법은 브라우저에서 재생되는 화면을 화면 녹화로 찍는 것입니다. 2026년 10월 Claude 고객센터 기준으로 MP4 내보내기가 안내된 것은 팀·기업 요금제의 모션 템플릿(베타)이라, 그 밖의 요금제에서는 녹화가 현실적인 길입니다.

1. 완성된 아티팩트를 크게 열고, 재생 화면이 9:16이나 16:9 비율로 꽉 차게 창 크기를 맞춥니다.
2. 컴퓨터의 화면 녹화 기능(윈도우의 캡처 도구, 맥의 화면 기록 등)으로 재생 영역만 골라 녹화를 시작합니다.
3. 애니메이션을 처음부터 재생하고 끝나면 녹화를 멈춥니다.
4. 녹화 파일의 앞뒤 빈 부분을 편집 앱에서 잘라 냅니다.
5. 쇼츠·릴스에 올린다면 휴대폰으로 옮겨 한 번 재생해 보고, 글자가 작아 안 읽히는 곳이 없는지 봅니다.

Claude 고객센터는 모션 템플릿을 내 자료로 만드는 움직이는 설명 영상·차트·안내 영상으로 소개하고, 낱말 하나·숫자 하나·타이밍처럼 한 곳을 고쳐 달라고 하면 나머지는 그대로 둔다고 적고 있습니다. 회사에서 팀·기업 요금제를 쓴다면 관리자가 이 템플릿을 켰는지 먼저 확인하세요. 같은 안내에 따르면 팀 요금제는 기본으로 켜져 있고 기업 요금제는 관리자가 켜기 전까지 꺼져 있습니다.

코드를 다룰 줄 아는 분이라면 클로드 데스크톱 앱의 Code(코드) 탭에서 내 컴퓨터의 작업 폴더를 열고, 애니메이션 파일과 영상 변환 작업을 함께 맡기는 방법도 있습니다. Claude Code 공식 문서는 데스크톱 앱의 Code 탭이 내 컴퓨터 폴더의 코드를 다루게 해 주는 기능이고, 프로·맥스·팀·기업 구독이 필요하다고 안내합니다. 터미널이 처음이라면 터미널 첫걸음 글부터 보세요.

애프터이펙트 AI: 힉스필드 AI 모션 디자이너 쓰는 법과 요금

힉스필드 AI 모션 디자이너는 ChatGPT 대화창에서 원하는 움직임을 말하면 AI가 내 컴퓨터에 열린 애프터 이펙트 컴포지션 안에 직접 타이틀·트랜지션·로고 리빌을 만들어 주는 기능입니다. 힉스필드는 2026년 9월 10일 공식 블로그에서 이 기능을 공개했고, 쓰려면 힉스필드·GPT·Adobe After Effects의 활성 구독이 모두 필요하다고 밝혔습니다.

1. ChatGPT에서 플러그인 메뉴를 열고 Higgsfield를 검색해 추가합니다.
2. 애프터 이펙트에서 작업할 컴포지션을 열어 둡니다.
3. ChatGPT 대화창에 "@Higgsfield /use-after-effects" 뒤에 만들고 싶은 움직임을 설명합니다. 예: "/use-after-effects 가운데 로고가 빛줄기와 함께 나타나는 3초짜리 로고 리빌을 만들어 줘."
4. 애프터 이펙트에 만들어진 레이어를 재생해 보고, 고칠 곳을 다시 대화로 말하거나 애프터 이펙트에서 직접 고칩니다.

힉스필드 공식 페이지는 에이전트가 만든 텍스트·색·레이어·타이밍·애니메이션이 모두 애프터 이펙트의 기본 요소로 남아 직접 고칠 수 있다고 안내합니다. 결과가 영상 파일 한 개로 끝나는 다른 방법과 가장 크게 다른 점입니다. 같은 에이전트를 힉스필드 MCP(AI 도구끼리 연결하는 방식)로 Claude나 Cursor 같은 다른 도구에서 부를 수도 있다고 적혀 있습니다.

요금은 한 줄로 정리되지 않습니다. 힉스필드 블로그는 힉스필드 안에서 그림이나 영상을 생성하면 웹에서와 같은 요율로 힉스필드 크레딧이 쓰이고, ChatGPT나 MCP 사용량은 쓰는 요금제와 프로그램에 따라 달라진다고 적었습니다. 그림·영상을 생성하지 않고 애프터 이펙트 안의 움직임만 만들 때 크레딧이 드는지, 한 번 만들 때 얼마나 드는지는 공식 숫자를 찾지 못했습니다. 모션 디자이너 페이지의 "Install plugin" 단추가 이어지는 힉스필드 애프터 이펙트 플러그인 페이지는 2026년 10월 기준 After Effects 2025(25.0) 이상, 윈도우 10·11(64비트)이나 macOS가 필요하고, AI 처리가 힉스필드 서버에서 돌아가 생성하는 동안 인터넷 연결이 필요하다고 적고 있습니다. 2026년 7월 힉스필드 블로그 글에는 After Effects 2024(24.0) 이상으로 적혀 있었으니, 예전 안내를 보셨다면 버전을 다시 확인하세요. 모션 디자이너 페이지와 블로그의 사용 순서에는 애프터 이펙트 쪽에 무엇을 따로 설치하라는 단계가 적혀 있지 않아, 설치 전에 플러그인 페이지의 안내를 한 번 더 보세요. 힉스필드 사이트는 여기제휴 링크에서 열 수 있습니다.

부탁하는 말은 클로드 장면표와 같은 방식으로 쓰면 됩니다. 힉스필드 공식 페이지의 예처럼 "로고 리빌 만들기", "이 타이틀에 애니메이션 넣기", "트랜지션 추가하기"처럼 할 일을 먼저 말하고, 그 뒤에 길이·색·움직임 순서를 붙이세요. 결과가 애프터 이펙트 안에 레이어로 남기 때문에, 대화로 다시 부탁하지 않고 그 레이어의 글자나 타이밍을 직접 손볼 수 있다는 것도 이 방법의 장점입니다. 다시 부탁할 때는 "제목 글자만 1초 늦게"처럼 고칠 대상을 짚어 말하세요.

이 방법은 이미 애프터 이펙트를 쓰는 사람, 혹은 결과물을 디자이너에게 넘겨야 하는 사람에게 맞습니다. 쇼츠 자막 몇 개를 위해 구독 셋을 새로 시작하는 것은 대개 배보다 배꼽이 큽니다.

영상 AI로 로고 애니메이션 만들 때 조심할 것

영상 생성 AI로 로고 애니메이션을 만들 때는 로고 그림을 시작 장면으로 넣고 "로고 모양과 글자는 바꾸지 말고, 빛과 배경만 움직여"라고 적어야 합니다. 영상 AI는 매 장면을 다시 그리기 때문에, 로고 자체를 움직이라고 하면 획이 휘거나 글자가 다른 글자로 바뀌기 쉽습니다.

클링(Kling)은 이미지를 영상으로 바꾸는 기능을, 구글 Flow는 시작 프레임을 넣어 영상을 만드는 기능을 공식 안내에 두고 있습니다. 2026년 10월 Flow 고객센터 기준으로 Veo 3.1은 가로와 세로 모드, 4·6·8초 길이를 고를 수 있고, 구글 원(Google One) 무료·플러스·프로 등급에서 만든 동영상에는 Veo로 만들었다는 워터마크가 표시됩니다. 클링 공식 안내는 무료 크레딧과 생성 한도가 계정과 그때의 행사에 따라 다르고, 일부 고급 모델·높은 해상도·워터마크 없는 내려받기는 유료일 수 있다고 적었습니다. 두 서비스의 요금과 무료 범위는 AI 영상 사이트 비교 글에 정리돼 있습니다.

그래도 로고 글자가 흔들리면 방법을 나누세요. 빛과 입자가 움직이는 배경 영상만 영상 AI로 뽑고, 로고는 편집 앱에서 그 위에 그림으로 얹는 것입니다. 로고가 원본 그림 그대로 남으니 모양이 틀어질 일이 없습니다. 아래 카드는 그런 배경으로 쓰기 좋은 한 장입니다. 무광 검정 바탕에 네온 노랑 빛이 사선으로 지나가고 오른쪽에 노란 리본을 맨 검정 선물 상자 세 개가 있으며, 왼쪽 3분의 2를 제목 자리로 비워 두고 글자·로고·상표·워터마크를 넣지 말라고 적었습니다. 이 그림을 영상 AI의 시작 프레임으로 넣고 "빛줄기만 천천히 움직이게"라고 하면, 비워 둔 자리에 나중에 내 문구를 얹을 배경 영상이 됩니다.

세일 배너 배경, 검정과 네온 노랑FRAME · GPT Image (Codex) · 한국어 읽기본

온라인 쇼핑몰 세일 배너용 가로 배경. 무광 검정 바탕에 네온 노랑 빛이 사선으로 지나가고, 오른쪽 3분의 1에 노란 리본을 맨 검정 선물 상자 세 개. 왼쪽 3분의 2는 제목을 넣을 수 있게 비움. 스튜디오 조명, 깔끔한 광고 사진. 글자·로고·상표·워터마크 없음.

내 걸로 만들기 →원문 보기

아래 그림은 FRAME이 로고 리빌의 시작 장면으로 쓰려고 지어낸 도형 문양입니다. 실제 회사 로고가 아니고 글자도 없습니다. 내 가게 로고로 해 볼 때는 이 자리에 실제 로고 파일을 넣으면 됩니다.

자막 애니메이션만 필요하다면 편집 앱으로

찍은 영상 위에 움직이는 자막만 얹으면 되는 경우라면 편집 앱의 자막 기능이 가장 빠릅니다. 캡컷(CapCut) 공식 안내는 자동 캡션으로 말소리를 자막으로 바꾼 뒤 텍스트 스타일·형식·글꼴·색·효과·움직임을 바꿀 수 있다고 소개합니다.

편집 앱 자막은 정해진 효과 목록에서 고르는 방식이라 자유도는 낮지만, 영상 길이와 말소리에 자막이 자동으로 맞춰진다는 장점이 있습니다. 쇼츠 대부분은 이 정도로 충분합니다. 캡컷에서 자동 자막을 넣고 꾸미는 순서는 캡컷 AI 사용법 글에 있습니다.

둘을 섞어 쓸 수도 있습니다. 영상 첫 3초의 제목 장면만 클로드로 HTML 애니메이션을 만들어 녹화하고, 본문 자막은 편집 앱의 자동 캡션으로 넣는 식입니다. 첫 장면은 눈에 띄게, 나머지는 읽기 쉽게 가는 조합입니다.

아래 그림은 쇼츠 화면 아래쪽에 자막 띠가 들어갈 자리를 비워 둔 예시입니다. FRAME이 지어낸 인물로 만들었고, 그림에는 글자를 넣지 않았습니다. 이런 화면 위에 하단 자막 띠가 아래에서 미끄러져 올라오게 하면 됩니다.

남의 로고·상표로 만들면 안 되는 이유

모션그래픽 연습이라도 남의 로고·상표·캐릭터를 움직이는 데 쓰면 안 됩니다. 로고는 그 회사가 자기를 알리는 표시라서, 허락 없이 움직이는 영상으로 만들어 올리면 그 회사가 만든 것처럼 보이거나 그 회사와 관계 있는 것처럼 오해를 부를 수 있습니다.

내 로고가 아직 없다면 로고부터 만드는 것이 순서입니다. AI로 로고 시안을 뽑는 요령과 상표 확인은 AI 로고 만들기 글에 있습니다. 로고가 정해지면 이 글의 장면표에 그 로고를 넣어 "가운데에서 작게 나타나 커지며 멈춤" 한 줄부터 시작해 보세요. 3초짜리 하나가 마음에 들면, 그 움직임을 채널 모든 영상의 첫머리에 똑같이 쓰는 것만으로도 영상들이 한 채널처럼 보이기 시작합니다.