클로드로 영상 만들기: 리모션 없이 HTML 애니메이션을 15초 릴스 mp4로 (요청문 공개)

가게 신메뉴를 알리는 짧은 세로 영상이 필요한데, 편집 프로그램을 배울 시간은 없는 경우가 많습니다. Claude Code가 잘 만드는 움직이는 웹페이지를 한 장면씩 찍어 이어 붙이면 mp4 영상이 됩니다. 저는 가상의 동네 카페 정보 파일 하나를 주고 같은 요청으로 15초 인스타그램 릴스를 네 번 만들었습니다. 두 번은 만드는 방법을 말하지 않았고, 두 번은 “HTML 애니메이션을 만들어 한 프레임씩 캡처하라”고 정해 줬습니다. 프로그램 값은 무료지만 Claude 구독 사용량이 나갑니다.

같은 요청으로 만든 영상 네 개

네 편 모두 첫 장면에 “가을이 오는 모퉁이에서, 새 메뉴 세 가지”, 이어서 메뉴 세 가지가 이름·가격·한 줄 소개와 함께 3초 안팎씩, 마지막에 가게 이름과 위치가 나옵니다. 메뉴 그림과 떨어지는 낙엽은 사진 없이 Claude가 코드로 그렸습니다.

직접 눌러 보기: 네 영상의 원본 HTML을 브라우저에서 재생. 원본에 15초를 되풀이하는 재생 코드 한 줄만 덧붙였습니다.

따라 해 보기: 요청문과 실습 재료

실습 재료(zip)를 빈 폴더에 풀면 input/가게정보.txt(가상 카페)와 요청문 두 개가 생깁니다. 그 폴더에서 Claude Code를 열고 아래 요청을 붙여 넣으세요. 처음이라면 클로드 코드 설치 방법부터 보세요.

input/가게정보.txt에 있는 동네 카페의 가을 신메뉴를 알리는 인스타그램 릴스용 15초 세로 영상(1080×1920)을 만들어 줘.
- 메뉴 세 가지가 차례로 나오고, 메뉴마다 이름·가격·한 줄 소개가 보이게
- 마지막 장면에는 가게 이름과 위치
- 글자는 모두 한국어로, 가게 정보 파일에 없는 내용은 지어내지 말 것
만드는 방법: 장면을 HTML·CSS 애니메이션 한 페이지로 만들고, 브라우저에서 시간을 한 프레임씩 넘기며 화면을 캡처한 뒤 ffmpeg로 묶어 줘.
다 만들면 out/ 폴더에 mp4로 저장해 줘.

내 가게로 바꾸려면 가게정보.txt의 이름·메뉴·색만 고치면 됩니다. 좋은 답이라면 out/에 15초짜리 mp4가 생기고, Claude가 장면 시간표와 “HTML을 고친 뒤 이 명령을 다시 실행하면 영상이 새로 만들어진다”는 안내를 남깁니다. 이번 네 번은 모두 그렇게 끝났습니다.

웹페이지가 어떻게 mp4가 되나

네 번 모두 같은 세 단계였습니다. 영상 한 편은 1초에 30장, 15초면 450장의 그림입니다.

1. 장면 만들기: 15초 동안 움직이는 웹페이지 한 장을 만듭니다. 화면 크기는 1080×1920입니다.
2. 한 장씩 찍기: 브라우저를 화면 없이 띄우고, 시간을 0초, 1/30초, 2/30초…로 옮기며 450번 찍습니다.
3. 묶기: ffmpeg가 450장을 1초에 30장씩 이어 mp4로 만듭니다.

핵심은 두 번째 단계입니다. 화면을 그대로 녹화하면 컴퓨터가 바쁠 때 장면이 건너뛰거나 늘어질 수 있습니다. 그래서 Claude는 매번 “지금은 3.5초다”라고 시간을 정해 놓고 찍었습니다. HTML 방식을 정해 준 두 번은 CSS 애니메이션을 멈춘 뒤 원하는 시점으로 옮겼습니다(getAnimations). 방법을 말하지 않은 두 번은 처음부터 “t초일 때 화면”을 그리는 자바스크립트 함수를 짰습니다. HTML 방식을 정해 준 1회차가 만든 코드에서 시간을 옮기는 부분입니다.

window.seek = (t) => {
  for (const an of document.getAnimations()) { an.pause(); an.currentTime = t * 1000; }
};

찍고 묶는 스크립트(render.py)는 Claude가 남겨 둡니다. 문구를 고친 뒤 다시 돌리면 같은 영상이 새로 나옵니다.

실행 기록 · HTML 방식 지정 1회차 폴더에서 다시 만들기

$ python3 render.py
0s / 15s
…
14s / 15s
저장: <작업 폴더>/out/moongi_autumn_menu.mp4
$ ffprobe -v error -show_entries stream=width,height,r_frame_rate -show_entries format=duration -of compact out/moongi_autumn_menu.mp4
stream|width=1080|height=1920|r_frame_rate=30/1
format|duration=15.000000

이렇게 나오면 성공 width=1080|height=1920|r_frame_rate=30/1, duration=15.000000

한눈에 비교

조건	고른 방법	걸린 시간	사용량(API 단가)	결과
방법 지정 없음 · 1회	HTML + 시간 함수 + Node.js Playwright	2분 반	0.92달러	15초 · 1080×1920 · 재생됨
방법 지정 없음 · 2회	HTML + 시간 함수 + 파이썬 Playwright	3분 반	1.08달러	15초 · 1080×1920 · 재생됨
HTML 방식 지정 · 1회	CSS 애니메이션 + 파이썬 Playwright	4분	0.95달러	15초 · 1080×1920 · 재생됨
HTML 방식 지정 · 2회	CSS 애니메이션 + 파이썬 Playwright	6분	1.09달러	15초 · 1080×1920 · 재생됨

채점 기준은 실행 전에 정했습니다. 길이·해상도는 ffprobe로 재고, “재생됨”은 맥의 기본 재생 엔진(AVFoundation)이 재생할 수 있다고 판단한 파일입니다. 한글이 네모로 깨진 장면, 메뉴 순서가 틀린 장면, 파일에 없는 할인·영업시간 문구는 네 편 모두 없었습니다.

제가 보기에 방법을 정해 주는 효과는 결과보다 예측 가능성에 있었습니다. 방법을 말하지 않은 1회차는 작업 폴더에 Playwright를 새로 내려받고 브라우저 내려받기까지 시도했습니다(제 설정에서 막혀 이미 깔린 크롬으로 찍었습니다). 정해 준 두 번과 방법을 말하지 않은 2회차는 컴퓨터에 있던 도구를 그대로 썼습니다. 네 번 중 한 번의 차이라 크게 볼 일은 아닙니다.

네 편이 서로 달랐던 곳

• 인스타그램 아이디: 가게 정보에 있던 영문 아이디를 세 편은 “글자는 모두 한국어로” 조건 때문에 뺐고, 한 편만 마지막 장면에 넣었습니다. 넣을지 말지는 요청문에 적어 주는 편이 낫습니다.
• 소리: 네 편 모두 배경음악이 없습니다. 한 편은 업로드 호환을 이유로 무음 소리 트랙을 넣었습니다. 음악은 인스타그램 앱에서 붙이면 됩니다.
• 스스로 고친 곳: 처음 넣은 “NEW 01” 같은 영어 표기를 “신메뉴 1/3”, “첫 번째 메뉴”로 바꾼 경우가 있었고, 낙엽이 글자를 가려 글자 뒤에 카드를 깐 경우도 있었습니다. Claude가 만든 장면을 직접 열어 보고 고친 것입니다.
• 남은 파일: 한 편은 지우기 명령이 막혀 찍은 그림 450장이 frames/ 폴더에 남았습니다. 필요 없으면 지워도 됩니다.

1단계. 준비물 확인 (약 1분)

터미널에서 실행합니다. Claude Code에게 “ffmpeg와 Playwright가 있는지 확인해 줘”라고 해도 됩니다.

ffmpeg -version
python3 -c "import playwright; print('playwright ok')"

이렇게 나오면 성공 ffmpeg version 8.1 …, playwright ok

• command not found: ffmpeg가 나오면: 맥은 홈브루로 brew install ffmpeg, 윈도우는 ffmpeg 공식 사이트의 빌드를 씁니다. 이 부분은 공식 문서 기준입니다.
• No module named playwright가 나오면: pip install playwright 뒤 playwright install chromium으로 브라우저를 받습니다(수백 MB). 이 부분도 공식 문서 기준입니다.
• 둘 다 컴퓨터 전체에 깔리는 프로그램입니다. Claude에게 맡길 때는 “설치가 필요하면 먼저 물어봐”라고 적어 두세요.

필요 없으면 이렇게 지웁니다: brew uninstall ffmpeg, pip uninstall playwright. 받아 둔 브라우저는 ~/Library/Caches/ms-playwright(맥)에 있습니다.

2단계. 요청하고 고치기 (영상 한 편에 약 2~6분)

위 요청문을 붙여 넣고 기다리면 됩니다. 결과를 보고 고칠 때는 말로 시키면 됩니다.

메뉴마다 보이는 시간을 4초로 늘리고, 전체 길이는 18초로 바꿔서 out/ 폴더에 다시 만들어 줘. 가게 정보 파일에 없는 문구는 넣지 마.

좋은 답이라면 HTML의 장면 시간과 캡처 스크립트의 길이가 함께 바뀌고 18초 mp4가 새로 생깁니다. 이 수정 요청은 이번 실험에서 돌리지 않은 예시입니다. 자주 쓰는 규칙(가게 색, 글꼴, 길이)은 CLAUDE.md에 적어 두면 매번 쓰지 않아도 됩니다.

Remotion(리모션)과 무엇이 다른가

Remotion은 리액트로 영상을 만드는 전용 도구입니다. 이 글의 방식과 원리는 같고(웹 화면을 프레임마다 찍기), 미리보기 화면과 렌더 명령, 장면 나누기 같은 틀을 갖추고 있습니다. 아래는 공식 문서·라이선스 기준입니다.

이름	다른 점	이럴 때 고르세요
HTML 애니메이션 + 캡처 (이 글)	프로젝트 설치 없음. HTML 한 장과 스크립트 하나. 틀이 없어 결과 구조가 매번 다름	짧은 홍보 영상을 가끔 만들 때
Remotion	리액트 프로젝트를 설치함. 영상 틀·미리보기가 있음. 직원 4명 이상 영리 회사는 회사 라이선스 필요	같은 형식 영상을 계속 찍어 낼 때

Remotion 라이선스는 개인, 직원 3명 이하 영리 회사, 비영리 단체는 상업용도 무료라고 적고 있습니다(LICENSE.md). Remotion 공식 스킬로 같은 카페 영상을 만든 결과는 연재 1편에서 볼 수 있습니다.

한계와 주의할 점

• 네 편 모두 글자와 도형으로 된 영상입니다. 실제 음식 사진이나 사람이 나오는 장면은 사진·영상 파일을 따로 줘야 합니다.
• 네 편 모두 글꼴을 파일로 넣지 않고 맥에 있는 글꼴 이름(Apple SD Gothic Neo)만 적었습니다. 윈도우에서 다시 만들면 다른 글꼴로 나올 수 있습니다. “Noto Sans KR 글꼴 파일을 폴더에 넣고 그걸 써 줘”라고 적으면 됩니다.
• 요청 하나를 두 번씩만 돌렸습니다. 더 긴 영상이나 장면이 많은 영상에서는 시간과 사용량이 늘어납니다.
• 이 맥에는 ffmpeg, Playwright, 브라우저가 이미 있었습니다. 처음 쓰는 컴퓨터라면 1단계 설치가 먼저입니다.

자주 묻는 질문

클로드로 영상 만들기, 돈이 드나요?

ffmpeg와 Playwright는 무료입니다. Claude Code를 쓰려면 Claude 유료 요금제가 필요하고, 이번 영상 한 편은 API 단가로 치면 1달러 안팎의 사용량이었습니다.

클로드 앱(웹·데스크톱 채팅)에서도 되나요?

이번 실험은 Claude Code로만 했습니다. 이 방식은 내 컴퓨터에서 브라우저와 ffmpeg 명령을 실행해야 해서, 명령을 실행할 수 있는 Claude Code가 맞습니다.

배경음악이나 목소리도 넣을 수 있나요?

이번 네 편에는 없습니다. 음악 파일을 폴더에 넣고 “out 영상에 이 음악을 깔아 줘”라고 하면 ffmpeg로 합칠 수 있지만, 이 글에서는 시험하지 않았습니다.

퀴즈

Claude Code에게 방법을 말하지 않고 “15초 mp4 영상을 만들어 줘”라고 하면?
❌ 영상 편집 프로그램을 설치해 직접 편집한다
✅ 이번 실험에서는 두 번 다 웹페이지로 장면을 만들고 브라우저에서 한 프레임씩 찍어 ffmpeg로 묶었다

출처

Playwright 시계(Clock) 문서, Playwright page.screenshot 문서, MDN Document.getAnimations(), Remotion LICENSE.md, Playwright LICENSE, ffmpeg 라이선스 (모두 2026-10-15 확인)