모션그래픽이라고 하면 보통 전문 프로그램과 긴 학습 기간이 먼저 떠오릅니다. 키프레임, 이징, 레이어 같은 용어만 들어도 손이 멈추기 쉽습니다. 그런데 요즘은 대화형 AI에게 원하는 장면을 글로 설명하면, AI가 브라우저에서 바로 움직이는 애니메이션 코드를 만들어 줍니다. 이 글에서는 클로드(Claude) 같은 AI에 프롬프트를 붙여 넣어 모션그래픽을 만드는 흐름을 정리합니다. 준비물, 프롬프트 짜는 법, 결과물을 영상 파일로 바꾸는 방법, 자주 막히는 지점까지 순서대로 다룹니다.
왜 AI로 모션그래픽이 쉬워졌을까
모션그래픽을 꼭 영상 편집 프로그램으로만 만들어야 하는 것은 아닙니다. 웹 브라우저는 이미 훌륭한 애니메이션 도구입니다. HTML로 화면 구조를 잡고, CSS로 색과 움직임을 주고, 자바스크립트로 타이밍을 조절하면 글자가 튀어 오르거나 도형이 회전하거나 숫자가 올라가는 장면을 얼마든지 만들 수 있습니다. SVG를 쓰면 선이 그려지는 효과도 표현됩니다.
문제는 이 코드를 직접 짜려면 공부가 필요하다는 점이었습니다. 대화형 AI가 바로 이 부분을 대신해 줍니다. 사용자는 "제목 글자가 한 글자씩 아래에서 올라오고, 배경은 짙은 남색, 3초 뒤 로고가 나타나게"처럼 장면을 말로 설명하고, AI는 그 설명을 코드로 옮깁니다. 결과물을 브라우저에서 열면 바로 움직이는 화면을 확인할 수 있습니다.
즉, 핵심 능력이 '프로그램 조작'에서 '장면을 구체적으로 설명하는 능력'으로 옮겨 간 셈입니다. 디자인 감각이 있는 사람이라면 코드를 몰라도 충분히 시도해 볼 만합니다.
시작하기 전에 준비할 것
준비물은 단출합니다.
- 대화형 AI 계정: 클로드를 비롯해 코드를 잘 생성하는 AI면 됩니다. 모델 이름과 버전은 자주 바뀌므로, 지금 사용할 수 있는 최신 상위 모델을 확인해서 쓰는 편이 좋습니다. 무료 요금제와 유료 요금제의 사용 한도나 기능도 서비스마다 달라질 수 있으니 공식 안내를 확인하세요.
- 코드를 실행해 볼 곳: 클로드에는 생성한 코드를 대화창 옆에서 바로 미리 볼 수 있는 기능이 제공되기도 합니다. 그렇지 않다면 HTML을 붙여 넣으면 즉시 실행해 주는 온라인 코드 편집기를 쓰거나, 메모장에 코드를 붙여 넣고 확장자를 .html로 저장한 뒤 브라우저로 열면 됩니다.
- 화면 녹화 도구: 완성된 애니메이션을 영상 파일로 남기려면 녹화가 필요합니다. 운영체제에 기본으로 들어 있는 화면 녹화 기능이나 무료 녹화 프로그램으로 충분합니다.
- 만들고 싶은 장면의 메모: 몇 초짜리인지, 화면 비율은 가로인지 세로인지, 어떤 문구가 들어가는지 미리 적어 두면 프롬프트가 훨씬 정확해집니다.
복붙해서 쓰는 프롬프트의 구조
'복붙하면 끝'이라는 말이 가능한 이유는 좋은 프롬프트에 일정한 뼈대가 있기 때문입니다. 아래 항목을 채워서 붙여 넣으면 결과물의 품질이 눈에 띄게 안정됩니다.
- 결과물 형식: "하나의 HTML 파일로, 외부 라이브러리 없이 CSS와 자바스크립트만 사용해 줘"처럼 실행 환경을 정해 줍니다. 파일이 하나로 묶여 있어야 붙여 넣고 바로 열기 편합니다.
- 화면 크기와 비율: 유튜브용이면 1920×1080 가로, 쇼츠나 릴스용이면 1080×1920 세로처럼 지정합니다.
- 전체 길이와 타임라인: "총 6초. 0~1초 배경 등장, 1~3초 제목 글자 순차 등장, 3~5초 부제 페이드인, 5~6초 정지"처럼 시간 순서로 적습니다.
- 스타일: 배경색, 글꼴 느낌(굵은 고딕, 둥근 손글씨 등), 강조색, 분위기(미니멀, 네온, 따뜻한 파스텔)를 적습니다.
- 움직임의 질감: "튕기듯", "부드럽게 감속하며", "빠르게 들어와 천천히 멈추게" 같은 표현이 이징(속도 곡선)으로 번역됩니다.
- 반복 여부: 한 번만 재생할지, 끝나면 처음부터 다시 반복할지 정합니다. 녹화할 때는 반복 재생이 편합니다.
예를 들면 이렇게 쓸 수 있습니다.
1920×1080 크기의 단일 HTML 파일로 모션그래픽을 만들어 줘. 외부 라이브러리는 쓰지 마. 배경은 짙은 남색에서 보라색으로 천천히 바뀌는 그라데이션. 1초 뒤 화면 중앙에 '오늘의 IT 소식'이라는 굵은 흰색 글자가 한 글자씩 아래에서 튀어 오르듯 등장하고, 그 아래로 노란 밑줄이 왼쪽에서 오른쪽으로 그려져. 4초에 작은 부제 '3분 요약'이 서서히 나타나고, 7초에 모든 요소가 위로 사라진 뒤 처음부터 반복해 줘.
이 정도만 적어도 AI는 꽤 그럴듯한 화면을 만들어 냅니다. 처음부터 완벽한 문장을 쓰려고 애쓸 필요는 없습니다. 일단 만들게 하고, 고쳐 나가는 쪽이 빠릅니다.
위 영상은 '문외인 Layperson' 채널에서 클로드에 프롬프트를 붙여 넣어 모션그래픽을 만드는 과정을 다룬 것으로, 제목에 따르면 함께 활용할 수 있는 무료 사이트도 소개합니다. 글로 정리한 흐름을 실제 화면으로 따라가 보고 싶다면 함께 보는 것을 권합니다. 다만 영상에서 언급되는 모델 이름이나 사이트 조건은 시점에 따라 달라질 수 있으니, 직접 쓸 때 현재 상태를 한 번 더 확인하세요.
결과물을 다듬는 대화 요령
첫 결과물이 마음에 쏙 드는 경우는 드뭅니다. 여기서부터가 진짜 작업입니다. 수정 요청은 아래 원칙을 따르면 효율이 좋습니다.
- 한 번에 한두 가지만 고칩니다. "글자를 더 크게, 색도 바꾸고, 속도도 느리게, 배경에 입자도 추가"처럼 한꺼번에 요구하면 잘 되던 부분이 망가지기도 합니다.
- 숫자로 말합니다. "조금 느리게"보다 "등장 시간을 0.4초에서 0.8초로"가 정확합니다. 색도 "밝은 파랑"보다 색상 코드를 주면 원하는 결과에 가깝게 나옵니다.
- 문제를 그대로 묘사합니다. "글자가 화면 밖으로 잘려", "두 번째 반복부터 밑줄이 안 그려져"처럼 본 것을 그대로 전하면 AI가 원인을 찾기 쉽습니다.
- 전체 코드를 다시 달라고 요청합니다. 부분 수정본만 받으면 어디에 붙여야 할지 헷갈립니다. "수정한 전체 HTML을 다시 줘"라고 하면 그대로 교체하면 됩니다.
- 잘된 버전은 따로 저장합니다. 수정하다 보면 이전 버전이 더 나았던 경우가 생깁니다. 마음에 드는 단계마다 파일로 남겨 두세요.
한글 글꼴이 의도와 다르게 보이는 경우도 많습니다. 컴퓨터에 설치된 글꼴에 따라 표시가 달라지기 때문입니다. 이럴 때는 무료로 배포되는 웹 글꼴을 불러오도록 요청하거나, 시스템 기본 글꼴 중에서 고르도록 지정하면 됩니다.
영상 파일로 만드는 방법
브라우저에서 움직이는 화면을 실제 편집에 쓰려면 영상 파일로 바꿔야 합니다. 가장 간단한 방법은 화면 녹화입니다.
- 브라우저를 전체 화면으로 띄우고, 확대 비율을 100%로 맞춥니다.
- 애니메이션이 반복 재생되도록 해 두고 녹화를 시작합니다.
- 한 사이클 이상을 녹화한 뒤, 편집 프로그램에서 깔끔하게 시작과 끝을 잘라냅니다.
배경을 투명하게 써서 다른 영상 위에 얹고 싶다면 조금 까다롭습니다. 일반 화면 녹화는 투명도를 담지 못하기 때문입니다. 이럴 때는 배경을 초록색 같은 단색으로 만들어 달라고 요청한 뒤, 편집 프로그램의 크로마키 기능으로 배경을 지우는 방법이 현실적입니다. 더 정교한 방식으로는 코드 기반 영상 제작 도구를 이용해 프레임 단위로 렌더링하는 방법도 있지만, 설치와 설정이 필요하므로 익숙해진 뒤에 도전해도 늦지 않습니다.
녹화 품질이 떨어진다면 녹화 프로그램의 해상도와 프레임 설정을 확인하세요. 애니메이션이 끊겨 보이면 브라우저에 다른 탭이 많이 열려 있지는 않은지도 살펴볼 만합니다.
알아 두면 좋은 한계와 주의점
AI로 만든 모션그래픽은 빠르고 편하지만, 모든 작업을 대신하지는 못합니다.
- 복잡한 캐릭터 애니메이션이나 3D 연출은 코드만으로 구현하기 어렵거나 결과가 어색할 수 있습니다. 타이틀, 자막 효과, 인포그래픽, 숫자 카운트, 로고 등장처럼 도형과 글자 중심의 연출에서 강점이 큽니다.
- 결과가 매번 조금씩 다릅니다. 같은 프롬프트라도 다른 결과가 나올 수 있으니, 시리즈물처럼 통일감이 필요하다면 마음에 드는 코드를 템플릿 삼아 문구만 바꿔 달라고 요청하는 편이 안정적입니다.
- 저작권을 확인합니다. 로고, 글꼴, 이미지를 넣을 때는 사용 권한이 있는지 살펴야 합니다. 상업적으로 쓸 계획이라면 해당 글꼴과 소재의 라이선스, 그리고 AI 서비스 이용약관을 확인하는 것이 안전합니다.
- 감각은 여전히 사람의 몫입니다. 어떤 타이밍이 보기 좋은지, 색이 메시지와 어울리는지는 결국 만드는 사람이 판단합니다. 마음에 드는 모션그래픽을 보면 몇 초에 무엇이 움직이는지 메모해 두는 습관이 프롬프트 실력으로 이어집니다.
처음에는 5초짜리 제목 애니메이션 하나로 시작해 보세요. 프롬프트를 붙여 넣고, 브라우저로 열어 보고, 한 가지씩 고쳐 나가다 보면 '모션그래픽은 전문가만 하는 일'이라는 생각이 꽤 빨리 사라질 것입니다.
