클로드 모션 그래픽 만들기, AI 티 안 나게 하는 5가지 방법
클로드(Claude)로 모션 그래픽을 만들 때 "딱 봐도 AI가 만든 것" 같은 티를 지우는 방법 다섯 가지를 정리했습니다. 모션 그래픽은 글자, 도형, 차트 같은 요소가 움직이는 영상 그래픽을 말합니다. 데이터 애니메이션, 폰트, 외부 자산, 영상 타임스탬프, 클로드 스킬까지 항목마다 바로 넣어 쓸 수 있는 프롬프트 예시를 붙였습니다.
방법을 공개한 사람은 테크 스타트업을 매각한 뒤 지금은 AI 하나로 디자인 작업 방식을 바꾸고 있다는 인물, 잭입니다. 원본은 7분짜리 영상입니다. 클로드 모션 그래픽 만들기를 시도하고 있다면 다섯 가지 방향을 먼저 잡고 시작하면 됩니다.
1. 데이터 기반 애니메이션
클로드에 시각화하고 싶은 실제 수치 데이터를 그대로 입력합니다. 그러면 색감이 살아있는 인터랙티브 바 차트가 즉석에서 만들어집니다. 인터랙티브 차트는 마우스를 올리거나 누르면 반응하는 그래프를 말합니다. 여기서 중요한 건 "그럴듯한 그림"이 아니라 데이터가 실제로 움직이는 시각화라는 점입니다.
숫자만 던지면 기본형 차트가 나옵니다. 움직임까지 지정해야 결과가 달라집니다. 이런 식으로 넣습니다.
아래 분기 매출을 인터랙티브 막대 차트로 만들어줘.
1분기 1200, 2분기 1850, 3분기 1640, 4분기 2310 (단위: 만원)
- 막대는 왼쪽부터 0.12초씩 시차를 두고 올라오게
- 올라오는 속도는 처음 빠르고 끝에서 감속(ease-out)
- 막대에 마우스를 올리면 정확한 값이 뜨게
- 1080x1920 세로 화면 기준, 단일 HTML 파일로
단일 HTML 파일은 더블클릭하면 브라우저에서 바로 열리는 웹페이지 파일 하나를 뜻합니다. 따로 프로그램을 설치하지 않아도 결과를 바로 확인할 수 있어서 처음 해보는 사람에게 편합니다.
2. 폰트로 AI 느낌 지우기
디자인 완성도를 가르는 요소는 결국 폰트입니다. 마음에 드는 사이트에서 쓰인 폰트를 분석해 클로드에 그대로 적용하면, AI 특유의 느낌이 사라지고 프리미엄한 감성이 붙습니다.
그 사이트가 무슨 글꼴을 쓰는지 알아내는 방법은 간단합니다. 크롬 브라우저 기준으로 이렇게 합니다.
- 마음에 드는 사이트를 엽니다.
- 궁금한 글자 위에서 마우스 오른쪽 버튼을 누르고 "검사"를 고릅니다. 화면 옆이나 아래에 개발자도구(웹페이지의 구조를 들여다보는 창)가 열립니다.
- 개발자도구 오른쪽 영역에서 Computed 탭을 누릅니다.
- 목록에서 font-family 값을 찾습니다. 거기 맨 앞에 뜨는 이름이 실제로 화면에 그려진 글꼴입니다.
이름을 알아냈으면 이렇게 넘깁니다.
제목은 Pretendard Bold, 본문은 Pretendard Regular로 갈 거야.
- 제목과 본문의 크기 비율, 자간, 행간을 이 조합에 맞게 잡아줘
- 굵기는 두 단계만 써서 위계를 만들어줘
- 웹폰트를 CSS @font-face로 불러오는 코드도 같이 써줘
웹폰트는 컴퓨터에 설치하지 않고 인터넷에서 불러와 쓰는 글꼴입니다.
3. 로티·아이콘 같은 외부 자산 결합
클로드 자체 애셋(그림, 아이콘 같은 재료 파일)에만 기대지 않습니다. 로티(Lottie) 애니메이션이나 고급 아이콘 팩을 가져와 붙이고, 여기에 AI로 생성한 고퀄리티 이미지까지 더하면 인스타그램 릴스나 프레젠테이션의 완성도가 확 올라갑니다. 로티는 가볍게 재생되는 애니메이션 파일 형식입니다.
자산은 이렇게 구합니다. 로티는 공개 로티 저장소에서 JSON 파일로 내려받습니다. 아이콘은 Lucide나 Phosphor, Heroicons처럼 SVG(확대해도 깨지지 않는 그림 파일) 묶음으로 통째 내려받을 수 있는 팩이 다루기 편합니다. 내려받은 파일은 작업 폴더에 모아두고 클로드에 그 폴더 경로를 알려줍니다. 웹 클로드를 쓴다면 파일을 대화창에 그대로 첨부하면 됩니다.
4. 비디오 타임스탬프 추출
편집하려는 영상 파일이나 유튜브 링크를 클로드에 주면, 대화 내용과 정확한 시간을 연결한 대본을 만들어줍니다. 타임스탬프는 "몇 분 몇 초에 이 말이 나온다"는 시각 표시입니다. 이 단계가 끝나야 영상의 어느 부분에 어떤 그래픽을 넣을지 자동으로 배치할 수 있습니다. 순서가 고정되어 있다는 점은 기억해둘 만합니다.
요청 문장은 이 정도면 충분합니다.
이 영상의 자막을 받아서 말한 내용과 시작 시각을 묶은 대본을 만들어줘.
- 형식은 [00:00:00] 문장, 한 줄에 하나씩
- 화제가 바뀌는 지점마다 빈 줄로 끊어줘
- 마지막에 그래픽을 넣으면 좋을 구간 5곳을 시각과 함께 골라줘
5. 클로드 스킬로 모션 그래픽 자동화
클로드 스킬, 즉 에이전트를 실행하면 웹에 있는 최신 데이터를 보강하면서 영상 내용에 딱 맞는 애니메이션을 자동으로 만들어줍니다. 에이전트는 지시 한 번에 여러 단계를 알아서 처리하는 AI 기능입니다. 불필요한 데이터는 걸러내는 방식입니다. 그래서 토큰(AI가 글을 처리하는 단위이자 사용량의 기준)을 93%나 아끼면서도 정확한 시각 자료를 담을 수 있다는 게 잭의 설명입니다.
스킬은 별도 프로그램이 아니라 폴더 하나에 든 SKILL.md 파일입니다. 클로드에게 특정 작업의 순서와 규칙을 적어 준 설명서라고 보면 됩니다. 설치 위치는 어떤 클로드를 쓰느냐에 따라 다릅니다.
- 클로드 코드: 터미널(글자로 명령을 넣는 창)에서 쓰는 클로드입니다. 터미널은 맥에서 응용 프로그램 > 유틸리티 > 터미널, 윈도우에서 시작 메뉴의 PowerShell로 엽니다. 개인용 스킬은
~/.claude/skills/<스킬이름>/SKILL.md, 특정 프로젝트에서만 쓸 것은 그 프로젝트 폴더 안의.claude/skills/<스킬이름>/SKILL.md에 둡니다. - 웹이나 데스크톱 클로드: 왼쪽 사이드바의 사용자 지정 화면에서 스킬 메뉴를 열고 파일을 올리면 설치됩니다.
설치한 뒤에는 스킬 이름을 부르거나 그 스킬이 맡은 일을 그대로 말하면 클로드가 알아서 불러옵니다.
클로드 모션 그래픽 시작 전 준비물과 비용
다섯 가지 방법을 실제로 써보려면 미리 준비해둘 게 있습니다.
- 시각화할 실제 수치 데이터
- 폰트를 참고할 사이트
- 로티 애니메이션이나 아이콘 팩·AI 이미지
- 편집할 영상 파일이나 링크
- 클로드 스킬을 쓸 수 있는 환경
비용은 이렇게 나뉩니다. 클로드는 무료 요금제로도 시작할 수 있고, 대화량이 늘면 유료 구독으로 한도를 올립니다. 터미널의 클로드 코드는 같은 구독으로 쓰거나 API 종량제(쓴 만큼 요금을 내는 방식)로 붙입니다. 로티와 아이콘은 무료 배포본만으로도 충분합니다. 실제로 돈이 나가는 쪽은 상업용 글꼴 라이선스와 AI 이미지 생성 크레딧 둘입니다. 요금표는 자주 바뀌니 금액 자체는 각 서비스의 요금 안내에서 확인하세요.
영상에 없는 배경 (편집자 정리)
여기부터는 영상에서 다루지 않은 내용입니다. 실제로 따라 해보려면 알아야 하는 것들을 따로 정리했습니다.
AI 티가 난다는 게 구체적으로 무엇인지
영상은 "AI 특유의 느낌"이라고만 하고 넘어갑니다. 실제로 그렇게 보이는 이유는 몇 가지로 좁혀집니다. 시스템 기본 글꼴을 그대로 쓴 경우, 모든 요소가 같은 시점에 같은 속도로 등장하는 경우, 여백이 사방으로 균등해서 시선이 머물 곳이 없는 경우입니다. 사람이 다듬은 모션은 요소마다 등장 시점을 조금씩 어긋나게 두고, 시작과 끝의 속도를 다르게 줍니다. 앞의 것을 스태거, 뒤의 것을 이징이라고 부릅니다. 클로드에 요청할 때 이 두 단어를 넣어 구체적으로 지시하면 결과가 눈에 띄게 달라집니다.
로티(Lottie)가 무엇인지
로티는 애프터이펙트(어도비의 모션 그래픽 제작 프로그램)에서 만든 벡터 애니메이션을 JSON 파일로 내보내 웹이나 앱에서 재생하는 형식입니다. 내보낼 때는 bodymovin 계열 플러그인(애프터이펙트에 덧붙이는 확장 기능)을 쓰고, 웹에서는 로티 재생 라이브러리를 불러 화면에 띄웁니다. 파일이 가볍고 확대해도 깨지지 않는 대신 사진처럼 복잡한 이미지는 담지 못합니다. 무료로 공개된 로티 파일이 많지만 상업적 사용 조건은 제각각이라 내려받기 전에 라이선스를 확인해야 합니다.
폰트를 가져올 때 확인할 것
이름을 알아냈다고 그대로 쓸 수 있는 것은 아닙니다. 웹폰트 라이선스는 웹페이지 사용, 앱 내부 포함, 영상에 얹는 사용이 각각 다르게 허용됩니다. 한글은 오픈 라이선스로 배포되는 글꼴 중에도 완성도가 높은 것이 있고, Pretendard처럼 조건이 명확한 글꼴을 쓰면 나중에 문제가 생길 여지가 줄어듭니다. 국내 무료 폰트는 배포처에 적힌 사용 범위를 매번 확인하는 편이 안전합니다.
유튜브 링크만 주면 대본이 나온다는 부분
클로드가 영상을 직접 재생해서 보는 것은 아닙니다. 대개 자막 데이터를 받아오는 도구가 중간에 끼어 있고, 그 텍스트를 넘겨받아 시간과 내용을 묶습니다. 그래서 자동 자막조차 없는 영상은 이 단계에서 통째로 막힙니다. 그럴 때는 음성인식을 따로 돌려 자막을 먼저 만들어야 합니다. 자동 자막은 고유명사와 숫자를 자주 틀리기 때문에, 시간을 맞춰 그래픽을 배치할 계획이라면 대본을 눈으로 한 번 훑어 고치는 단계가 필요합니다.
만들어진 결과물이 곧 영상 파일은 아닙니다
클로드가 뽑아주는 모션 그래픽은 대개 HTML과 CSS, 자바스크립트(웹페이지를 만드는 세 가지 언어)로 브라우저에서 움직이는 형태입니다. 릴스나 유튜브에 올리려면 이것을 영상 파일로 바꾸는 단계가 따로 필요합니다. 화면 녹화로 찍는 방법이 가장 간단합니다. 맥은 Shift+Command+5, 윈도우는 Win+Alt+R(게임 바 녹화)로 화면을 녹화할 수 있습니다. 프레임을 하나씩 뽑아 합치면 더 깔끔하지만 손이 더 갑니다. 세로 영상은 9 대 16 비율이므로 처음부터 그 크기로 만들어야 나중에 잘라내는 일이 없습니다.
토큰과 93퍼센트
토큰은 모델이 글을 처리할 때 쓰는 단위이고, 입력과 출력의 토큰 양이 곧 비용이자 한 번에 다룰 수 있는 분량의 한도가 됩니다. 긴 자막을 통째로 넣는 대신 필요한 구간만 골라 넣으면 토큰이 줄어드는 것은 맞습니다. 다만 93퍼센트라는 수치는 어떤 영상을 어떤 방식과 비교했는지에 따라 완전히 달라지는 값이라, 그대로 기대할 숫자는 아닙니다.
다섯 가지 방법의 작업 순서
다섯 가지는 나열이지만 실제 작업에서는 순서가 있습니다. 대본과 시간 정보가 먼저 나와야 어느 구간에 무엇을 넣을지 정할 수 있고, 그다음에 폰트와 색을 정해야 만든 그래픽이 서로 어긋나지 않습니다. 로티나 아이콘 같은 외부 자산은 배치가 정해진 뒤에 채워 넣는 편이 낭비가 적습니다. 반대로 자산부터 모아두고 시작하면 쓰지 않는 파일만 늘어납니다.
자주 묻는 질문
클로드로 모션 그래픽을 만들 수 있나요?
만들 수 있습니다. 클로드는 HTML, CSS, 자바스크립트 코드로 브라우저에서 움직이는 그래픽을 만들어 줍니다. 데이터와 움직임 조건(시차, 속도 변화, 화면 크기)을 구체적으로 적을수록 AI 티가 덜 나는 결과가 나옵니다.
클로드 스킬은 어디에 설치하나요?
클로드 코드를 쓴다면 개인용은 ~/.claude/skills/ 아래, 프로젝트용은 프로젝트 폴더 안 .claude/skills/ 아래에 스킬 이름으로 폴더를 만들고 SKILL.md 파일을 넣습니다. 웹이나 데스크톱 클로드라면 사이드바의 사용자 지정 화면에서 스킬 메뉴를 열어 파일을 올리면 됩니다.
로티(Lottie) 파일은 무료로 써도 되나요?
무료로 공개된 파일이 많지만 상업적으로 써도 되는지는 파일마다 조건이 다릅니다. 광고나 판매용 영상에 넣을 계획이라면 내려받기 전에 배포처의 라이선스 안내를 확인해야 합니다.
클로드로 만든 모션 그래픽을 릴스 영상으로 바꾸려면 어떻게 하나요?
브라우저에서 재생되는 결과물을 화면 녹화로 찍는 방법이 가장 간단합니다. 맥은 Shift+Command+5, 윈도우는 Win+Alt+R로 녹화할 수 있습니다. 처음부터 1080x1920 같은 9 대 16 세로 크기로 만들어 달라고 요청하면 나중에 잘라낼 필요가 없습니다.
이 글은 잭의 7분짜리 원본 영상을 정리한 쇼츠를 자막 기반으로 다시 옮긴 것입니다.
출처: youtube.com/…