클로드로 모션 그래픽 만들기｜코드로 만든 10초 영상, 구글 Vids와 비교 (실제 제작기)

결론부터: 클로드로 모션 그래픽을 만들 수 있습니다. 다만 영상 생성 AI처럼 그림을 그리는 것이 아니라, 움직이는 그래픽을 코드(HTML·CSS)로 써 주는 방식입니다. 이번에 로또 가뭄번호 10초 영상을 실제로 만들어 보니, 한국어 글자와 숫자가 정확하고 숫자만 바꿔 매주 재사용할 수 있다는 점이 가장 큰 장점이었습니다.

지난번 구글 Vids 무료 사용법 글에서 같은 내용의 영상을 Vids의 AI 동영상 기능으로 만들었습니다. 이번에는 같은 기획을 클로드에게 코드로 만들게 하고, 그 코드를 영상 파일로 뽑기까지의 과정과 겪은 문제를 그대로 정리합니다.

1. 클로드 모션 그래픽 vs 영상 생성 AI

2. 완성된 영상 (16:9 · 10초)

📌 업데이트 (2026년 10월 14일): 하단 자막과 정보 카드(마지막 출현 회차·역대 출현 횟수), 마무리 통계 사이트 카드를 추가한 새 버전으로 교체했습니다. 자막·카드 문구도 코드의 데이터에서 자동으로 만들어져, 매주 숫자만 바꾸면 함께 바뀝니다.

공 색깔은 동행복권 공식 규칙(1~10 노랑, 21~30 빨강, 41~45 초록 등)에 맞춰 번호에 따라 자동으로 정해지게 했습니다.

3. 만든 과정 4단계

① 클로드에게 요청하기

구글 Vids에 넣었던 장면 구성(4장면·9초·문구·효과)을 그대로 주고, 이렇게 요청했습니다.

로또 가뭄번호 영상을 코드 기반 모션 그래픽으로 만들어줘.
16:9, 10초, 숫자 공이 튀며 등장. 매주 회차와 숫자만 바꾸면
새 영상이 나오게 데이터를 한곳에 모아줘.

② 클로드가 만든 HTML 구조

클로드는 1920×1080 무대 위에 장면 4개를 CSS 애니메이션으로 배치하고, 바꿀 값을 맨 아래 한 곳에 모았습니다.

const DATA = {
  round: 1244, date: "2026-10-03",
  first:  { num: 5,  weeks: 31 },
  others: [ { num: 27, weeks: 20 }, { num: 45, weeks: 20 } ],
};

브라우저에서 열면 바로 재생되고, "다시 재생"·"효과음 켜기" 버튼도 들어 있습니다. 효과음은 파일 없이 웹 오디오로 합성합니다.

③ 프레임마다 캡처하기 (Playwright)

애니메이션을 실시간으로 녹화하면 PC 상태에 따라 끊길 수 있어서, 애니메이션 시간을 직접 지정해 한 장씩 캡처하는 방식을 썼습니다. 30fps × 10초 = 300장을 찍습니다.

// 원하는 순간(ms)으로 모든 애니메이션을 멈춰 세움
window.seek = ms => document.getAnimations().forEach(a => { a.pause(); a.currentTime = ms; });

④ 영상 파일로 합치기 (webm)

캡처한 프레임을 Playwright에 함께 들어 있는 ffmpeg로 합쳐 1920×1080, 10초 webm을 만들었습니다(첫 버전 3.5MB, 자막·카드 추가 버전 4.8MB).

🔧 실제로 막혔던 부분: Playwright에 포함된 ffmpeg는 녹화 전용으로 최소 기능만 들어 있어서, PNG 파일을 읽지 못했고 표준 입력 지정 방식(-)도 통하지 않았습니다. 프레임을 JPEG로 캡처하고 입력을 pipe:0으로 바꿔 넘기자 정상적으로 만들어졌습니다. 이 ffmpeg는 mp4(H.264)를 만들 수 없어 결과물은 webm입니다.

4. 같은 기획, 구글 Vids 결과와 비교

한 번 만들고 끝나는 영상이면 Vids가 빠르고 소리까지 한 번에 나옵니다. 매주 같은 형식으로 숫자만 바뀌는 영상이라면 클로드 코드 방식이 훨씬 관리하기 쉽습니다. Vids로 만든 결과물은 구글 Vids 무료 사용법의 실전 예제에서 볼 수 있습니다.

5. 매주 새 영상 만드는 법

1. index.html 맨 아래 DATA의 회차·날짜·번호·주수를 바꿉니다.
2. 렌더링 스크립트(python render.py)를 실행합니다.
3. 새 webm과 대표 장면 이미지가 만들어집니다.

🎱 최신 회차의 오래 안 나온 번호는 역대 로또 번호 통계 – 미출현 번호·궁합수에서 확인해 넣으면 됩니다.

6. 알아 둘 한계

• mp4가 필요하면 추가 설치: 유튜브 쇼츠·SNS 업로드용 mp4가 필요하면 정식 ffmpeg나 Remotion(React로 영상을 만드는 도구)을 설치해야 합니다.
• 영상 파일에 소리 없음: 화면을 캡처하는 방식이라 효과음은 HTML에서만 나옵니다. 소리를 넣으려면 오디오를 따로 합치는 단계가 필요합니다.
• 실사 장면은 불가: 사람·풍경이 필요하면 힉스필드나 구글 Veo 같은 영상 생성 AI를 쓰세요.

결론

클로드 모션 그래픽은 "그리는 AI"가 아니라 "움직임을 설계하는 코드"입니다. 덕분에 한국어 글자·숫자가 정확하고, 데이터만 바꿔 같은 영상을 계속 찍어 낼 수 있다는 점에서 정보형 숏폼·인포그래픽 영상에 특히 잘 맞습니다. 실사 장면이 필요한 영상은 영상 생성 AI와 나눠 쓰는 것이 가장 효율적입니다.

함께 보면 좋은 AI 영상 글

• 구글 Vids 무료 사용법｜AI 아바타·Gemini Omni로 동영상 만들기
• 클로드 코드 모바일 사용법｜스마트폰으로 PC 작업 이어가기
• 힉스필드 요금제 크레딧 계산｜영상 1개 가격과 계산기
• AI 영상 & 프롬프트 카테고리 전체 보기