Claude Code로 15초 한글 모션그래픽 쇼릴 만들기 — 영상도 소리도 코드로

완성본 — 15초, 1920×1080, 60fps, 스테레오 사운드, 17MB. MP4 받기 · 소스 저장소

어떤 문제를 해결하나 link

모션그래픽 쇼릴은 보통 After Effects 로 키프레임을 하나씩 잡고, 음악을 따로 구해 박자에 맞춰 편집합니다. 15초짜리도 하루는 걸리고, 수정이 생기면 다시 손으로 옮겨야 합니다.

Claude Code 에 한 줄로 “이력서용 쇼릴처럼, 전력을 다해서” 라고만 했습니다. 영상 도구가 하나도 없는 클라우드 컨테이너였고, 결과는 모든 프레임을 코드로 그리고 사운드트랙까지 코드로 합성한 MP4 입니다. 타이밍은 JSON 파일 하나에 있어서, 박자나 장면 길이를 바꾸면 영상과 소리가 같이 따라옵니다.

코드로 만들고 렌더해서 눈으로 검수하는 흐름은 보고서 수치를 PPT로 만든 사례와 같습니다. 여기서는 그 대상이 영상입니다.

사전 준비 link

• Claude Code (웹 또는 CLI). 이 사례는 claude.ai/code 클라우드 세션에서 했습니다
• Node.js, Python 3 — 나머지(ffmpeg, 폰트, Playwright)는 Claude 가 알아서 설치합니다
• 4코어 기준 전체 렌더 10~12분을 기다릴 시간

단계별 사용법 link

1

한 줄로 요청하면 환경부터 점검한다

content_copy 입력 프롬프트

  당신이 얼마나 놀라운 모션 그래픽 디자이너인지 보여주는 역동적인 한글버전 15초 모션그래픽 비디오를 만들어 보세요. 이력서용 쇼릴 처럼요. 전력을 다해요.
  

Claude 는 코드를 쓰기 전에 도구부터 확인합니다. 여기서 두 번 막혔습니다.

• ffmpeg 가 없다. Playwright 가 들고 온 ffmpeg 는 VP8 인코더만 있어 MP4 를 못 만듭니다 → pip install imageio-ffmpeg 에 들어 있는 정적 빌드(libx264, aac 포함)를 씁니다
• 한글 폰트 CDN 이 막혀 있다. jsDelivr 는 403, npm 레지스트리는 200 → Pretendard(가변 폰트), Black Han Sans, JetBrains Mono 를 npm 패키지로 받습니다

가변 폰트를 고른 데는 이유가 있습니다. 글자 굵기를 100→800 으로 연속으로 움직이는 애니메이션은 가변 폰트라야 됩니다.

2

타이밍 파일 하나를 영상과 소리가 같이 읽게 설계한다

구조는 세 덩어리입니다.

파일	줄 수	하는 일
src/timeline.json	49	128 BPM(32박 = 정확히 15초), 장면 7개 시작 박자, 임팩트·타이핑·휘시·라이저·무음 큐
src/reel.js + post.js	1,745	Canvas 2D 로 장면을 그리고 WebGL2 셰이더로 후처리
scripts/audio.py	421	numpy 만으로 킥·베이스·패드를 합성하고 믹스

핵심 규칙은 모든 프레임이 시간 t 만의 함수라는 것입니다. 프레임 사이에 상태가 없으니 헤드리스 Chromium 4개가 프레임을 나눠 그릴 수 있고, 한 프레임을 셔터가 열린 동안 6번 그려 겹치는 진짜 모션 블러도 됩니다. 난수도 시드 고정이라 몇 번을 렌더해도 같은 영상이 나옵니다.

글자가 한 자씩 뜰 때 나는 “틱” 소리, 드롭의 임팩트, 13초의 16분음표 하나 정적이 모두 같은 JSON 에서 나오므로 소리와 화면이 샘플 단위로 맞습니다.

3

전체 렌더 전에 스틸 컷으로 검수하고 고친다

900프레임을 다 렌더하면 10분이 걸립니다. 그래서 장면마다 몇 장씩 스틸만 뽑아 컨택트 시트로 묶어 봅니다. 7장 렌더에 6.8초입니다.

node scripts/render.mjs --stills 8.2,8.75,9.05,9.25

첫 검수에서 3D 장면의 “공간” 글자가 전혀 읽히지 않았습니다. 글자 픽셀 후보 중 1,400개를 무작위로 뽑은 탓에 획이 듬성듬성했고, 깊이에 따라 색을 섞다 보니 글자 단계에서 색도 탁했습니다.

• 무작위 추출 → 글자 면적에서 격자 간격을 역산해 정확히 약 2,000개가 되게 균일 배치
• 글자 단계에서는 깊이 색을 가장 밝은 쪽으로 고정하고 점을 키움
• 구 → 도넛 → 글자 전환을 0.2~0.3박씩 앞당겨, 모양마다 다 모인 상태로 머무는 시간을 확보

이 장면 말고도 장면마다 스틸을 봤고, 고칠 곳은 여기 하나였습니다.

4

사운드는 스펙트로그램으로 검수한다

사운드도 전부 합성입니다. 킥은 피치가 떨어지는 사인파, 하이햇은 대역 필터를 거친 노이즈, 베이스와 패드는 배음 가중치로 필터를 흉내 낸 톱니파입니다. 리버브는 직접 만든 임펄스 응답을 FFT 로 컨볼루션하고, 킥이 칠 때 다른 소리를 줄이는 사이드체인을 겁니다. 합성에 5초 걸립니다.

Claude 는 소리를 들을 수 없습니다. 그래서 스펙트로그램(ffmpeg showspectrumpic)과 박자별 RMS 음량으로 확인했습니다.

구간	RMS
인트로 (0~3.7초)	-11.3 ~ -13.5 dB
드롭 이후 (3.75~14.5초)	-5.8 ~ -7.7 dB
엔드 카드 페이드 (마지막 박)	-11.4 dB

인트로와 드롭 사이에 6dB 차이가 나야 드롭이 “터지는” 느낌이 납니다. 여기서 킥의 클릭 성분이 전 대역 세로줄로 너무 강하게 보여 한 번 낮췄습니다.

5

전체 렌더 후 용량을 원인부터 잡는다

1차 전체 렌더(9분 35초)의 결과는 235MB 였습니다. 필름 질감을 내려고 넣은 그레인이 매 프레임 무작위로 바뀌어서, 인코더가 프레임 사이를 전혀 재활용하지 못했습니다.

CRF 만 23으로 올리면 14MB 까지 줄지만, 100% 크롭으로 비교하니 3D 장면의 어두운 점들이 사라졌습니다. 원인 쪽을 고쳤습니다.

• 그레인을 30Hz(두 프레임에 한 번)로만 갱신하고 세기를 0.065 → 0.045 로
• 이 김에 모션 블러 서브프레임도 4장 → 6장으로 늘려 빠른 움직임의 계단 현상을 줄임

다시 렌더(약 12분)한 마스터를 CRF 21·22 로 인코딩했습니다. CRF 22 도 100% 크롭에서 마스터와 구분이 안 됐지만, 한 단계 여유를 두고 CRF 21(19.2MB)을 골랐습니다.

6

결과 확인 — 장면별 컨택트 시트

최종 파일에서 다시 프레임을 뽑아 확인합니다. 렌더 결과가 아니라 배포할 파일 자체를 보는 게 요점입니다. 인코딩에서 생긴 문제는 여기서만 보입니다.

장면 구성은 128 BPM 에서 4박(1.875초)씩입니다.

시간	장면	보여주는 기법
0.00	인트로	비트마다 퍼지는 링, 커서가 되는 점, 가변 폰트 굵기 애니메이션, 스프링 플라이인, 슬램 + 에코
3.75	키네틱 타이포	비트에 스냅하는 글자 띠, 사인파 웨이브, 회전하는 원형 텍스트 배지
5.63	셰이프 & 리듬	슬라이스 와이프, 도형 모핑, 스쿼시 & 스트레치
7.50	공간 & 깊이	점 2,000개의 구 → 도넛 → 글자, 원근 투영
9.38	데이터 시각화	휩 팬 전환, 굴러가는 숫자 카운터, 막대·라인 차트
11.25	몽타주	8분음표마다 컷, 16분음표 스터터, 정적 한 박
13.13	엔드 카드	충격파, 파티클, 블록 리빌

결과 link

이날 최종 파일은 15초, 1920×1080, 60fps, AAC 256k 스테레오, 19.2MB 였습니다. 소스 2,361줄과 함께 저장소에 커밋했고, npm run build 한 번이면 같은 영상이 다시 나옵니다.

이후 개선 — 두 번째 영상부터 빨라지게 link

다음 영상을 만들 때 같은 시간이 또 들지 않도록 파이프라인을 고쳤습니다. 모두 4코어 실측입니다.

코드를 옮긴 뒤 11개 프레임을 다시 렌더해 기존과 픽셀 단위로 비교했습니다. 차이는 최대 1/255 로, 같은 코드를 두 번 렌더해도 나는 소프트웨어 GPU 의 반올림 오차 수준이었습니다.

이 과정에서 엔드 카드의 먼지 입자 70개가 처음부터 한 번도 그려지지 않던 버그도 찾았습니다. 화면 크기가 정해지기 전에 좌표를 계산해서 전부 NaN 이 되어 있었습니다. 고쳐서 최종본을 다시 렌더했고(10분 52초), 한 번에 인코딩하는 경로로 바뀌면서 파일은 16.6MB 가 됐습니다. 위의 영상과 컨택트 시트는 이 버전입니다.

주의사항 link

• 사운드는 Claude 가 들어 보지 못했습니다. 스펙트로그램과 RMS 로 큐 위치와 음량 차이는 확인했지만, 듣기 좋은지는 사람이 판단해야 합니다. 받으면 먼저 소리를 켜고 보세요.
• 전체 렌더 전에 스틸부터 보라고 시키세요. 이 사례에서 발견한 두 문제(안 읽히는 3D 글자, 235MB)는 모두 “렌더해서 직접 본” 단계에서 나왔습니다. 10분짜리 렌더를 두 번 돌리지 않으려면 스틸 검수가 먼저입니다.
• 필름 그레인·노이즈는 용량을 폭증시킵니다. 프레임마다 바뀌는 노이즈는 압축이 안 됩니다. 갱신 주기를 낮추거나 세기를 줄이고, CRF 를 고를 때는 반드시 어두운 장면을 100% 크롭으로 비교하세요.
• 엔드 카드 문구는 직접 정해 주세요. 이름·직함을 안 주면 모델이 정합니다. 이 쇼릴은 “클로드 / 모션 그래픽 디자이너” 가 됐습니다.
• 클라우드 컨테이너는 네트워크가 제한될 수 있습니다. 이 세션에서는 폰트 CDN(jsDelivr)이 403 으로 막혀 있었고 npm·PyPI 는 열려 있었습니다. 도구를 못 받으면 우회 경로를 찾으라고 한 줄 덧붙이면 됩니다.

응용 link

이 파이프라인은 타이밍 JSON + 장면 함수 + 합성 사운드 세 덩어리라서, 장면과 데이터만 갈아 끼우면 다른 영상이 됩니다. 아래는 이번 쇼릴에서 어떤 장면을 가져다 쓰면 되는지 기준으로 정리한 활용 방향입니다. 실제로 만들어 본 것은 이 쇼릴 하나이고, 나머지는 같은 구조로 가능한 범위를 적었습니다.

브랜드 인트로 link

영상·발표·유튜브 앞에 붙는 37초짜리 서명입니다. 쇼릴의 03.75초(링이 비트마다 퍼지고, 글자가 굵어지며 등장하고, “살아난다” 가 슬램으로 박히는 구간)가 거의 그대로 브랜드 인트로의 뼈대입니다. 바꿀 것은 색 5개, 폰트, 문구 한 줄이고, 사운드는 드롭 한 번과 임팩트 한 번이면 충분합니다. 4박 = 1.875초라 128 BPM 에서 8박이면 3.75초 인트로가 됩니다.

  우리 브랜드 [브랜드명]의 5초 인트로 영상을 만들어줘. 1920×1080 60fps, 사운드 포함.
팔레트는 [#색1, #색2, #색3], 폰트는 [폰트명]. 슬로건 "[슬로건]"이 비트에 맞춰 등장하고 마지막 1초는 로고로 끝나게.
이 쇼릴(learn/showreel)의 인트로 장면 구조를 재사용하고, 스틸 컷으로 검수해서 고쳐줘.
  

로고 애니메이션 link

엔드 카드의 로고 마크(● ■ ▲ 가 스프링으로 튀어나오는 부분)와 셰이프 장면의 폴리곤 모핑이 핵심입니다. 모든 도형을 같은 개수의 점으로 재샘플링해 두면, 원 → 로고 외곽선 → 글자로 자연스럽게 변합니다. 로고가 SVG 라면 패스를 점 목록으로 바꿔 달라고 하면 됩니다. 글자 로고는 쇼릴의 “공간” 처럼 픽셀 샘플링으로 점 구름을 만들 수 있습니다. 이때 이번 사례에서 겪은 대로 무작위 추출이 아니라 격자 배치로 해야 글자가 읽힙니다.

다른 영상 위에 얹을 로고라면 투명 배경이 필요한데, 지금 파이프라인은 불투명 배경을 칠하고 후처리(그레인·비네팅)를 전체에 거는 구조라 투명 출력이 없습니다. 알파 채널 출력(PNG 시퀀스, ProRes 4444)을 따로 요청해야 합니다.

  첨부한 로고 SVG로 3초 로고 애니메이션을 만들어줘. 1080×1080과 1920×1080 두 가지로.
흩어진 점이 모여 로고 외곽선이 되고, 면이 채워진 뒤 워드마크가 블록 리빌로 나오게.
배경 [#색], 끝 프레임은 1초 정지. 투명 배경 버전(ProRes 4444 또는 PNG 시퀀스)도 같이.
  

종합 포트폴리오 link

쇼릴을 30~90초로 늘린 버전입니다. 좌하단의 섹션 라벨(01 박스 + 키네틱 타이포그래피), 타임코드, 진행 바 같은 HUD 가 챕터 구분 역할을 그대로 합니다. 섹션마다 작업물 한두 개를 보여 주고, 몽타주 컷으로 속도를 올린 뒤 엔드 카드로 연락처를 남기는 구성입니다. 지금 코드는 모든 것을 직접 그리기만 하고 외부 이미지·영상을 불러오지 않습니다. 작업물 캡처를 캔버스에 올리는 부분(drawImage, 영상이라면 프레임 추출)을 추가로 요청해야 합니다. 렌더 시간은 길이에 비례해서, 이번 설정(서브프레임 6장, 4코어)이면 60초에 약 50분입니다.

  내 작업물로 60초 포트폴리오 영상을 만들어줘. works/ 폴더의 이미지 12장과 영상 3개를 써.
섹션은 [브랜딩 / UI / 모션 / 3D] 4개, 섹션마다 라벨이 뜨고 작업물 2~3개가 비트에 맞춰 전환.
마지막은 이름·직함·이메일 엔드 카드. 긴 렌더 전에 섹션마다 스틸로 먼저 보여줘.
  

동적 광고 link

광고는 같은 틀로 여러 벌을 뽑는 일이 많습니다. 문구·가격·색·비율만 다른 A/B 버전이나, 상품별 버전입니다. 코드로 만든 영상은 이 부분이 가장 강합니다. 문구와 가격을 JSON 한 줄로 빼 두면, 줄 수만큼 렌더를 돌리면 됩니다. 쇼릴의 키네틱 타이포(비트마다 스냅하는 글자 띠), 16분음표 스터터, 롤링 카운터(가격 표시)가 그대로 쓰입니다. 9:16·1:1 은 좌표를 다시 잡아야 합니다. 지금 장면 배치는 1920×1080 기준 픽셀 좌표로 들어 있습니다.

  ads.json의 상품 5개로 15초 광고를 상품마다 만들어줘. 비율은 9:16과 1:1 두 가지, 총 10개 파일.
상품명은 키네틱 타이포로, 가격은 롤링 카운터로, 마지막 2초는 CTA "[문구]"와 로고.
문구 길이가 다 달라서 넘치는 게 없는지 파일마다 마지막 프레임 스틸로 확인해줘.
  

IR 지표 영상 link

투자자 설명회나 실적 발표 앞에 트는 20~40초 영상입니다. 쇼릴 04 장면(데이터 시각화)의 롤링 카운터 + 막대 차트 + 라인 차트 + 값 트래커가 IR 영상의 기본 문법 그대로입니다. 매출이 굴러 올라가고, 분기별 막대가 스프링으로 솟고, 성장률 라인이 그려집니다. 지금 쇼릴의 수치는 연출용이라 코드 안에 들어 있습니다. IR 에 쓰려면 지표를 JSON 으로 분리하고, 화면마다 출처와 기준일을 표기하라고 함께 요청해야 합니다. 숫자가 틀리면 영상 전체가 쓸모없어지는 분야라, 렌더 전에 수치 표를 먼저 보여 달라고 하는 게 안전합니다.

  metrics.json의 2025년 분기 실적으로 30초 IR 오프닝 영상을 만들어줘. 1920×1080, 사운드는 차분하게.
매출·영업이익은 롤링 카운터, 분기 매출은 막대 차트, 성장률은 라인 차트로.
화면마다 하단에 "출처: [자료명], 기준일 [YYYY-MM-DD]"를 넣고, 렌더 전에 화면에 나갈 숫자 표를 먼저 보여줘.
  

통계/데이터 숏폼 link

릴스·쇼츠용 15~30초 세로 영상입니다. “한국인이 하루에 스마트폰을 몇 시간 쓸까” 같은 질문 하나에 숫자 하나로 답하는 형식이 잘 맞습니다. 쇼릴의 카운터, 차트, 3D 점 글자(점이 모여 숫자나 단어가 되는 장면)가 훅으로 좋습니다. 1080×1920 세로는 레이아웃을 새로 잡아야 하고, 소리 없이 보는 경우가 많아 자막 영역을 비워 두는 게 좋습니다. 데이터 출처 표기는 IR 과 같은 이유로 필수입니다.

  "[질문]"에 답하는 20초 세로 숏폼을 만들어줘. 1080×1920 60fps, 사운드 포함, 하단 20%는 자막 영역으로 비워둬.
첫 2초는 질문을 키네틱 타이포로, 핵심 숫자는 점이 모여 숫자가 되는 3D 장면으로, 비교는 막대 차트로.
데이터는 [출처]의 [연도] 통계를 쓰고 화면에 출처를 표기해줘.
  

공통으로 챙길 것 link

• 스틸 먼저, 전체 렌더는 나중에. 길이가 길어질수록 효과가 커집니다. 이 사례도 두 문제 모두 스틸·크롭 비교에서 잡았습니다
• 바뀌는 값은 JSON 으로. 문구·수치·색을 코드 밖으로 빼 두면, 다음 버전은 프롬프트 없이 JSON 만 고쳐 다시 렌더하면 됩니다
• 폰트는 재배포 가능한 것만. 브랜드 폰트는 라이선스를 확인하세요. 이 쇼릴은 OFL 폰트(Pretendard, Black Han Sans, JetBrains Mono)만 썼습니다
• 비율이 바뀌면 레이아웃도 바뀝니다. 해상도 값은 timeline.json 에 있지만 장면 배치는 16:9 좌표라서, 세로·정사각형은 장면별로 다시 잡아야 합니다
• 길이가 바뀌면 음악도 바뀝니다. 장면 타이밍은 박자 단위라 따라오지만, 사운드트랙의 마디 배치는 audio.py 안에 15초 기준으로 짜여 있습니다

아래는 이 쇼릴 자체를 다시 만들 때 쓰는 전체 템플릿입니다.

  [용도]용 [길이]초 [언어] 모션그래픽 [쇼릴]을 만들어줘.
- 스펙: 1920×1080, 60fps MP4, 사운드 포함
- 리듬: [BPM] 비트에 컷·효과·사운드를 맞춰서
- 구성: 키네틱 타이포 → 셰이프 모핑 → 3D → 데이터 시각화 → 몽타주 → 엔드 카드
- 트랜지션은 매번 다르게, 이징·스프링·모션 블러로 움직임 품질을 높게
- 스타일: [배경 톤], 팔레트 [색1, 색2, 색3], 폰트 [폰트명]
- 엔드 카드 문구: [이름 / 직함 / 한 줄 소개]
- 코드로 생성하고, 중간에 스틸 컷을 렌더해서 직접 검수하고 고쳐줘
- 완성되면 repo에 커밋하고 README에 영상 링크 추가
전력을 다해서.