2026년 10월 13일 기준

이 글에는 제휴 링크가 없고 소개한 회사들과 아무 관계가 없습니다. 세 방법은 2026년 10월 13일 Windows 11에서 직접 만들었고, 요금·출시·지원 범위는 각 회사 공식 페이지(같은 날 조회)와 대조했습니다. 캐릭터 그림과 영상 모델 결과는 AI 생성, 도식은 직접 제작했습니다.

AI 모션그래픽 만드는 법, 영상 모델과 코드 직접 비교

AI 모션그래픽 만드는 법 — 영상 모델 vs 코드, 직접 비교 (캐릭터는 AI 이미지 생성)

글자가 톡 튀어나오고 도형이 미끄러지는 짧은 영상, 요즘 릴스와 회사 소개 영상에 자주 보이죠. “이거 AI로 만들 수 있다는데, 뭘 써야 하지?” 하고 검색만 하다 멈춘 분이 많을 거예요.

AI로 모션그래픽을 만드는 길은 크게 두 갈래예요. 하나는 화가에게 그림을 부탁하듯 영상 모델에 장면을 맡기는 길, 다른 하나는 설계도를 주고 조립을 맡기듯 AI에게 애니메이션 코드를 쓰게 하는 길이에요.
글자와 숫자가 정확해야 하면 설계도 쪽, 실사 같은 분위기가 중요하면 화가 쪽이에요.

그림을 그리는 로봇과 설계도를 보며 블록을 쌓는 로봇 — 영상 모델과 코드 방식 (AI 이미지 생성)

1. 모션그래픽, 왜 요즘 AI로 만들까

모션그래픽은 글자·도형·아이콘·차트가 움직이는 영상이에요. 카메라로 찍는 실사 영상과 달리 화면 요소를 하나하나 움직여 만들어요. 쇼츠 첫 3초 인트로, 기능 발표 영상, 차트 설명, 로고 애니메이션이 모두 여기에 들어가요.

예전에는 애프터이펙트 같은 전문 도구로 시간을 들여 만들었어요. 요즘은 AI가 이 일을 두 방식으로 대신해요. 영상 모델이 장면을 통째로 그리거나, AI가 애니메이션 코드를 써서 영상으로 뽑아요.

2026년 10월 8일에는 앤트로픽이 ‘클로드 모션(Claude Motion)’ 베타를 내놨어요. 공식 도움말은 이 기능이 영상 생성 모델을 쓰지 않고, 글자·차트·도형·그림을 움직이는 코드로 짧은 애니메이션을 만들어 MP4로 내보낸다고 설명해요. 코드로 만드는 방식이 그만큼 자리를 잡았다는 신호예요.

2. 만드는 방법은 세 가지

영상 생성 모델, 코드(AI가 작성), 편집 툴의 AI 기능 — 세 가지로 나눠 보면 고르기 쉬워요. 잘하는 것과 약한 것을 표로 모았어요.

코드 쪽 도구로는 리액트로 영상을 만드는 리모션(Remotion), HTML을 영상으로 바꾸는 헤이젠의 하이퍼프레임즈(HyperFrames)가 대표적이에요. 리모션은 개인과 3명 이하 회사라면 상업적 용도까지 무료예요(공식 라이선스). 하이퍼프레임즈는 아파치 2.0 오픈소스예요.

3. 같은 장면을 세 방법으로 만들어 봤어요

같은 6초짜리 소개 장면을 세 방법으로 직접 만들었어요. 한글 글자에서 차이가 가장 크게 났어요. 로고가 튀어 오르고, ‘SECOND SYNTAX’가 한 글자씩 올라온 뒤, 한 줄 소개와 알약 모양 이름표 3개가 뜨는 장면이에요.

① 코드로 그린 모션그래픽 — 클로드 코드가 쓴 HTML·CSS를 6초 MP4로 렌더, 글자가 정확해요 (직접 제작)

① 코드: 클로드 코드에 요청해 받은 HTML을 영상으로 뽑는 데 33초가 걸렸어요. 렌더에 따로 드는 돈은 없었어요.

② 완성된 장면 그림을 Kling 2.5 Turbo로 5초 동안 움직인 결과 — 글자는 그대로, 움직임은 작아요 (AI 영상 생성)

② 그림 → 영상: 코드로 만든 마지막 장면을 Kling 2.5 Turbo에 넣었더니 98초 뒤에 5초 영상이 나왔어요. 요금은 0.35달러였어요. 넣은 그림 속 글자는 그대로 남았지만, 움직임은 로고가 살짝 흔들리고 빛이 지나가는 정도였어요.

③ 글로만 설명해 Veo 3.1 Fast로 만든 8초 영상 — 영어는 맞고 한글은 깨졌어요 (AI 영상 생성)

③ 글 → 영상: 같은 장면을 글로만 설명해 Veo 3.1 Fast에 맡겼어요. 70초, 0.80달러가 들었어요. ‘SECOND SYNTAX’는 정확했지만 ‘AI와 일하는 두 번째 문법’은 ‘AI절헌 억음 구온…’처럼 뜻 없는 글자로 바뀌었어요. 정사각형을 부탁했는데 가로 영상으로 나왔어요.

같은 장면을 코드, 그림 → 영상, 글 → 영상으로 만든 결과 비교 — 시간·요금·한글 정확도 (직접 제작)

4. 코드 방식, 프롬프트 두 줄로 뽑기

AI에게 크기·길이·글자·순서·색을 정해 주면 코드를 써 주고, 그 코드를 영상 파일로까지 뽑아 줘요.

타임라인 위 키프레임을 보며 도형들을 움직이는 로봇 — 코드로 정한 순서대로 움직이는 모션그래픽 (AI 이미지 생성)

1. 빈 폴더를 만들고 로고 그림 파일을 넣으세요.→ AI가 그림 파일 이름으로 찾아 써요.
2. 그 폴더에서 클로드 코드나 코덱스를 켜세요.→ 입력 칸이 뜨면 준비가 끝나요.
3. 아래 첫 번째 프롬프트를 바꿔 넣고 보내세요.→ HTML 파일이 생기고, 브라우저로 열면 애니메이션이 돌아가요.
4. 움직임을 보고 고칠 점을 말로 요청하세요.→ 고친 파일이 같은 이름으로 다시 저장돼요.
5. 두 번째 프롬프트로 영상 파일을 요청하세요.→ 폴더에 MP4 파일이 생겨요.

📋 그대로 복사해 쓰세요

1080×1080, 6초 모션그래픽을 HTML·CSS 애니메이션으로 만들어줘. [로고 파일]이 튀어 오르고, [회사명]이 한 글자씩 올라온 뒤 [한 줄 소개]가 서서히 나타나게. 색은 [브랜드 색]

이 애니메이션을 6초짜리 MP4로 저장해줘. 끊기지 않게 프레임마다 시간을 맞춰 찍어줘

두 번째 줄이 중요해요. 화면을 녹화하듯 뽑으면 컴퓨터가 느릴 때 영상이 뚝뚝 끊겨요. 프레임마다 시간을 맞춰 찍으면 몇 번을 뽑아도 같은 영상이 나와요. 이번 6초 영상은 180장을 찍어 이었어요.

고칠 때는 느낌 대신 숫자로 말해야 한 번에 끝나요.

❌ 이렇게 말고

더 멋지게 고쳐줘

무엇을 바꿀지 몰라서 AI가 전체를 새로 짜고, 좋던 부분까지 바뀌어요.

⭕ 이렇게

로고가 나타나는 시간을 1초로 늘리고, 글자는 0.1초 간격으로 올라오게 바꿔줘

긴 영상을 자주 만든다면 리모션 공식 에이전트 스킬을 깔아 두세요. 공식 문서는 클로드 코드·코덱스·커서 같은 AI 도구에서 쓸 수 있다고 안내해요.

npx skills add remotion-dev/skills

5. 영상 모델 고르기와 요금

영상 모델은 1초마다 요금이 붙으니, 짧게 시험한 뒤 늘리는 게 아끼는 길이에요. 구글 Gemini API 공식 요금표(2026년 10월 9일 갱신)의 Veo 3.1 가격이에요. 1초당 요금이고 소리가 함께 만들어져요.

Veo 3.1 공식 문서에 나온 비율은 가로 16:9와 세로 9:16 두 가지예요. 길이는 4·6·8초 중에서 골라요. 정사각형 피드용이 필요하면 세로로 만든 뒤 잘라 쓰거나, 정사각형이 되는 다른 모델을 쓰세요.

이번에 쓴 Kling 2.5 Turbo는 5초에 0.35달러였어요. 글자가 든 완성 그림을 살짝 움직이는 용도라면 비싼 모델이 필요 없었어요. 오픈AI는 Sora 2 영상 API를 2026년 9월 24일에 닫았어요(공식 공지). 예전 글에서 Sora를 추천받았다면 다른 모델을 고르세요.

6. 어디에 쓰면 좋을까

글자가 주인공이면 코드, 장면이 주인공이면 영상 모델, 이미 만든 디자인이 있으면 편집 툴이에요.

AI 모션그래픽 방법 고르기 — 글자가 중요하면 코드, 분위기가 중요하면 영상 모델, 디자인 툴에서는 편집 툴 AI 기능 (직접 제작)

쇼츠·릴스 첫 3초 인트로, 신기능 발표, 숫자가 늘어나는 차트 설명은 글자가 정확해야 해서 코드 방식이 잘 맞아요. 같은 틀에 이름과 숫자만 바꿔 여러 편을 뽑을 때도 코드가 편해요. 프롬프트로 값만 바꿔 다시 뽑으면 돼요.

우리 나들이 인스타 계정은 영상이 없는 맛집 글의 첫 장면에 영상 모델을 써요. 직접 찍은 음식 사진을 5초 동안 살짝 움직이고, 인스타의 ‘AI 레이블’을 켠 뒤 올려요.

막힐 때

영상 속 한글이 이상한 글자로 바뀌어요
원인: 영상 모델이 글자를 글자가 아니라 그림처럼 그려서 생겨요.
해결: 글자는 코드나 편집 툴로 나중에 얹으세요. 글자가 든 완성 그림을 ‘그림 → 영상’으로 살짝 움직이면 글자가 덜 망가져요.

정사각형으로 부탁했는데 가로 영상이 나와요
원인: Veo 3.1은 16:9와 9:16 비율만 지원해요.
해결: 9:16으로 만든 뒤 가운데를 잘라 쓰거나, 처음부터 코드 방식으로 1080×1080을 정하세요.

코드로 뽑은 영상이 뚝뚝 끊겨요
원인: 화면 녹화처럼 실제 시간대로 찍으면 컴퓨터가 바쁠 때 장면을 놓쳐요.
해결: ‘프레임마다 시간을 맞춰 찍어줘’라고 다시 요청하세요. 리모션과 하이퍼프레임즈는 처음부터 이렇게 뽑아요.

자주 묻는 질문

AI 영상·코드 도구가 처음이라면 클로드 코드 사용법부터 보세요 → 클로드 코드 사용법, 설치 다음에 꼭 알아야 할 6가지

참고 자료

• Claude Motion 시작하기 (Anthropic 도움말) · support.claude.com/en/articles/17454997
• Gemini API 요금 — Veo 3.1 · ai.google.dev/gemini-api/docs/pricing
• Remotion 라이선스 · remotion.pro/license

이번에 쓴 프롬프트와 코드 전체

클로드 코드에 처음 보낸 요청이에요.

1080×1080, 6초짜리 모션그래픽을 HTML과 CSS 애니메이션으로 만들어줘. 연보라 배경에 로고 그림(logo-face.png)이 통통 튀며 나타나고, 'SECOND SYNTAX' 글자가 한 글자씩 아래에서 올라온 뒤, 'AI와 일하는 두 번째 문법'이 서서히 나타나게. 마지막에 '써 보고 · 만들고 · 정리해요' 알약 모양 3개가 차례로 뜨게. 색은 남색 #3d2f63, 글꼴은 굵은 고딕.

받은 HTML이에요. 같은 폴더에 logo-face.png를 두고 브라우저로 열면 돌아가요.

<!doctype html>
<html lang="ko"><head><meta charset="utf-8">
<style>
  html, body { margin: 0; }
  .stage { width: 1080px; height: 1080px; background: radial-gradient(circle at 50% 38%, #f6f2ff 0%, #ece6fb 60%, #e3dbf7 100%);
           position: relative; overflow: hidden; font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #3d2f63; }
  .logo { position: absolute; left: 50%; top: 170px; width: 300px; margin-left: -150px; animation: pop 1.1s cubic-bezier(.2,1.6,.4,1) 0s both; }
  @keyframes pop { 0% { transform: translateY(260px) scale(.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
  .title { position: absolute; top: 540px; width: 100%; text-align: center; font-size: 104px; font-weight: 800; letter-spacing: .02em; }
  .title span { display: inline-block; animation: rise .5s cubic-bezier(.2,1.2,.4,1) both; }
  @keyframes rise { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sub { position: absolute; top: 690px; width: 100%; text-align: center; font-size: 52px; font-weight: 700; color: #5d5873;
         animation: fade .8s ease-out 2.7s both; }
  @keyframes fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  .chips { position: absolute; top: 820px; width: 100%; display: flex; justify-content: center; gap: 22px; }
  .chip { padding: 16px 34px; border-radius: 999px; background: #3d2f63; color: #fff; font-size: 40px; font-weight: 800;
          animation: chip .45s cubic-bezier(.2,1.5,.4,1) both; }
  .chip:nth-child(2) { background: #1f6b55; } .chip:nth-child(3) { background: #8a5a00; }
  @keyframes chip { from { transform: scale(0); } to { transform: scale(1); } }
</style></head>
<body><div class="stage">
  <img class="logo" src="logo-face.png" alt="">
  <div class="title" id="title"></div>
  <div class="sub">AI와 일하는 두 번째 문법</div>
  <div class="chips"><span class="chip" style="animation-delay:3.6s">써 보고</span><span class="chip" style="animation-delay:3.85s">만들고</span><span class="chip" style="animation-delay:4.1s">정리해요</span></div>
</div>
<script>
  // 글자를 한 글자씩 나눠 0.08초 간격으로 올라오게
  const t = document.getElementById('title');
  [...'SECOND SYNTAX'].forEach((ch, i) => {
    const s = document.createElement('span');
    s.textContent = ch === ' ' ? ' ' : ch;
    s.style.animationDelay = (1.0 + i * 0.08) + 's';
    t.appendChild(s);
  });
</script>
</body></html>

영상으로 뽑을 때는 모든 애니메이션을 멈춘 뒤 시간을 1/30초씩 옮기며 한 장씩 찍고, ffmpeg로 이었어요(6초 = 180장). 핵심은 이 두 줄이에요.

document.getAnimations().forEach(a => a.pause());
document.getAnimations().forEach(a => { a.currentTime = ms; });  // ms = 프레임 번호 × 1000 / 30