모션 그래픽, 이제 누구나 — 이 영상 모션 코드 그대로 드려요

애프터 이펙트도, 키프레임도 없이 말로만 만든 모션 그래픽이에요. 글자가 머리 위로 쾅! 떨어지고, 화면이 찌그러지고, 로봇이 뛰어다니는 40초짜리 움직임이 HTML 파일 하나에 들어 있어요.

디렉터스AI 릴스 VOL.05 모션 그래픽, 이제 누구나 — 대표 이미지

릴스에 ‘모션’ 댓글을 남기신 분께 DM으로 보내 드린 페이지예요.

② 받기

이 영상 모션 코드 받기 (zip, 0.95MB)

얼굴 영상과 목소리는 빠져 있어요. ‘YOUR VIDEO’ 자리표시 영상이 들어 있어서 받자마자 그대로 렌더돼요. 그 자리에 내 영상을 넣으면 돼요.

PC에서 받는 걸 추천해요. 휴대폰에서 받았다면 PC로 옮겨서 여세요.

index.html영상 전체(세로 1080×1920, 40초). 맨 위 장면 시각표 A 와 자막 CAPS 만 고치면 내 목소리에 맞춰져요
assets/face.mp4자리표시 영상 — 내 영상으로 바꿔 넣기
assets/fx.wav · sfx.py효과음(딸깍·휙·쾅·띠용·지직·딩). 녹음 없이 코드로 만든 소리, 시각을 바꾸면 다시 만들어요
make_words.py내 목소리를 받아써서 단어마다 시각을 뽑아요(faster-whisper)
build.py받아쓰기로 장면 시각·자막·길이·효과음을 한 번에 다시 맞춰요
PROMPT.md클로드 코드에 그대로 붙여 넣는 말 모음
README.md · LICENSE쓰는 법 · 이용 조건

③ 3단계로 실행

  1. 압축을 풀고, 그 폴더에서 클로드 코드를 열어요.
    유료 요금제(Claude Pro 이상)가 필요해요.
  2. 아래 말을 붙여 넣어요.
  3. 내 영상을 assets/face.mp4 로 바꿔 넣고, ⑤의 ‘내 영상에 맞추기’ 말을 붙여 넣어요.

실행하는 말

이 폴더는 HyperFrames 모션 그래픽 프로젝트야. README.md 를 읽고, Node.js 22 이상·FFmpeg·렌더용 크롬이 준비됐는지 npx --yes hyperframes@0.8.156 doctor 로 확인해 줘. 없는 게 있으면 설치하고, 자리표시 영상 그대로 한 번 렌더해서 out.mp4 를 만들어 줘.

직접 하고 싶은 분

Node.js 22 이상과 FFmpeg를 설치하고 폴더에서 npx --yes hyperframes@0.8.156 render . -o out.mp4 (미리 보기는 npx --yes hyperframes@0.8.156 preview).

④ 이 영상의 핵심 움직임 7가지

쾅! 장면 연속컷 — 글자가 머리 위로 떨어지고, 닿는 순간 영상 창이 납작해졌다가 튕겨 돌아오는 9장면

쾅! 장면 연속컷 — 옆으로 밀어 보세요.

1스쿼시 & 스트레치 떨어뜨리기

'쾅!' 글자가 0.4초 동안 점점 빨라지며 떨어지고(가속), 닿는 순간 영상 창이 바닥을 기준으로 높이 1/3, 옆으로 1.5배로 납작해졌다가, 띠용~ 하고 원래대로 튕겨 돌아와요. 글자도 같이 납작해졌다 튀어 올라요. "무게감"은 이 납작-튕김에서 나와요.

2화면 흔들림

닿는 순간 화면 전체를 0.035초마다 10번, 점점 약하게 흔들어요. 흔들림 크기는 매번 같은 값이 나오게 '씨앗 고정 난수'로 정해요.

3번쩍(플래시)

흰 화면을 0.9 밝기로 깔았다가 0.2초 만에 사라지게. 한 프레임의 충격.

4충격파 고리

닿은 자리에서 동그라미 3개가 0.06초 간격으로 9~17배까지 커지며 사라져요. 먼지 22개는 위쪽 반원 방향으로 튀어요.

5속도선

떨어지기 직전 0.38초 동안 세로 줄 12개가 위에서 아래로 쏟아져요. "빠르게 떨어진다"는 느낌.

6코드 타자 · 취소선

코드 줄이 왼쪽부터 한 칸씩 끊어서(steps) 나타나 타자처럼 보이고, 필요 없는 import 네 줄은 빨간 줄이 0.14초 만에 그어지며 지워져요. 그다음 0 KEYFRAMES 도장이 쾅.

7seek 안전 규칙(깨지지 않는 영상의 조건)

HyperFrames는 영상을 한 프레임씩 '시간을 지정해서' 찍어요. 그래서 ① 타임라인은 하나(멈춘 상태로 만들기) ② 화면은 시간만 보고 그리기(현재 시각·무작위 금지 → 씨앗 고정 난수) ③ 나타남/사라짐도 시각에 고정 ④ 다 만든 뒤 마지막에 등록. 이걸 지키면 몇 번을 뽑아도 똑같은 영상이 나와요.

실제 코드는 zip 안 index.html 의 ⑥번 블록과 README.md의 ‘쾅! 떨어뜨리기’ 설명에 있어요.

⑤ 클로드 코드에 시키는 말

버튼 한 번으로 통째로 복사돼요. 압축 푼 폴더에서 클로드 코드에 붙여 넣으세요. [ ] 자리만 내 내용으로 바꾸면 돼요.

내 영상에 맞추기 (제일 중요)

assets/face.mp4 를 내 영상으로 바꿔 넣었어. 이 폴더의 index.html 을 내 영상(face.mp4)과 내 목소리 받아쓰기에 맞춰 장면 시각을 다시 맞춰 줘. make_words.py 로 받아쓰고, A 주석을 보고 내 대본에서 같은 뜻의 말이 시작하는 시각으로 A 를 다시 정해 줘. 자막 CAPS 도 내 말로 새로 만들고(README 자막 규칙대로), 길이가 바뀌면 data-duration 도 같이 바꾸고 python sfx.py 로 효과음도 다시 만들어 줘. check 로 오류 0개 확인하고 렌더해서 주요 장면을 보여 줘.

쾅! 을 내 움찔에 맞추기

글자가 내 머리 위로 쾅 떨어지게, 내가 움찔하는 순간에 맞춰 줘. '쾅'이라고 말하는 시각 앞뒤에서 얼굴 움직임이 갑자기 커지는 첫 프레임을 찾아 A.drop 으로 정하고, 쾅 글자가 정확히 내 머리 꼭대기에 닿게 떨어지는 위치도 고쳐 줘. 바꾼 뒤 drop 직전·직후 프레임을 뽑아서 확인해 줘.

목소리가 영상 안에 있을 때

내 목소리는 face.mp4 영상 안에 들어 있어. 영상 소리가 나오게 바꾸고(muted 빼고 data-has-audio="true"), 효과음은 목소리보다 작게 해 줘.

더 세게

쾅! 을 더 세게: 찌그러짐을 높이 1/4까지, 화면 흔들림은 1.5배, 먼지는 40개로 해 줘.

글자·문구 바꾸기

쾅! 글자를 '짠!'으로 바꾸고, 화면 위쪽 채널 이름과 마지막 로고를 [내 채널 이름]으로, 댓글 카드 문구를 '[댓글에 ○○ 남기면 DM으로 보내 드려요]'로 바꿔 줘.

지우는 줄 바꾸기

import 로 지우는 네 줄을 [프리미어, 자막 템플릿, 색보정, 키프레임]으로 바꾸고, 빨간 줄 길이도 글자 길이에 맞춰 줘.

새 대본에 같은 방식으로

이 폴더의 index.html 구조(편집기 화면 + 미리보기 창 + 장면 시각표 A + 자막 CAPS)를 그대로 써서, 내 새 대본 [대본 붙여 넣기] 에 맞는 장면을 새로 짜 줘. 문장마다 화면에 무엇이 움직일지 먼저 표로 보여 주고, 내가 OK 하면 만들어 줘.

더 많은 말은 zip 안 PROMPT.md 에 있어요.

⑥ 자막 규칙 (우리가 쓰는 기준)

  1. 줄은 띄어쓰기에서만 바꿔요.
    단어 중간에서 끊지 않기.
  2. 한 줄 12자 이하(띄어쓰기 빼고).
    넘치면 앞뒤 길이를 비슷하게 나눠요.
  3. 1~3자짜리 꼬리를 혼자 띄우지 않기
    앞 자막의 두 번째 줄로 붙여요.
  4. 마침표·쉼표 없음.
    강조할 단어 하나만 노란 상자로.

zip 안 build.py 가 이 규칙대로 자막을 자동으로 나눠 줘요.

⑦ 장면 구성

0초모션 그래픽, 이제 누구나코드 타자 motion("누구나") · 누구나 OK
3.3초애프터 이펙트, 모션 템플릿, 플러그인, 키프레임import 네 줄이 한 줄씩 타자
6.8초이 영상엔 하나도 안 썼어요빨간 취소선 → 0 KEYFRAMES 도장
9.0초지금 움직이는 거 전부 코드거든요화면 전체가 코드 벽으로 뒤집힘 + 글리치
11.5초그래프 에디터도 마스크 그리기도 없었어요그래프 곡선이 지워지고 + say("말로 끝")
14.0초저는 글자가 제 머리 위로 쾅 떨어지게 말만 했어요말풍선 → drop("쾅!") → Run → 쾅! (찌그러짐·번쩍·흔들림·먼지·고리·속도선)
18.6초클로드가 그 말을 움직임으로 바꾸고클로드 로봇이 달리고 공중제비
21.0초소리까지 박자에 맞췄어요파형 막대 + 박자마다 미니 쾅
23.3초모션 디자이너한테 맡긴 것 같죠?얼굴 천천히 확대
25.2초모션도 이제 손이 아니라 말로 하는 겁니다마우스에 ✕ → '말로' 말풍선
28.2초이 영상 모션 코드 그대로 드릴게요git clone 진행 막대 → FREE 카드
30.8초주변에 … 공유해 주세요 · 댓글 달면 자료 보내드릴게요공유 아바타 → 댓글 → DM 카드
37.0초이제 편집실에서 밤새우지 맙시다밤, 달, editingRoom.sleep()

시각은 원래 속도 기준이에요. 올린 영상은 1.4배속이라 더 빨라요.

⑧ 꼭 알아 둘 것

2026년 10월 기준(HyperFrames 0.8.156)이에요. 버전이 바뀌면 클로드 코드에게 “최신 버전에 맞게 고쳐 줘”라고 하면 돼요.

LUMIÈRE BETA

편집은 이제 손이 아니라 말로 — 뤼미에르 베타

촬영본을 넣으면 컷·자막·확대·효과음·썸네일까지, 단계마다 품질 검사를 붙여 자동으로 편집해 주는 시스템이에요. 쓸수록 내 스타일로 자라요.

정가 ₩200,000₩99,000베타 20명 선착순 한정

Claude Pro 이상 구독이 필요합니다(별도 결제). 뤼미에르 가격에 Claude 이용료는 포함되지 않습니다.

베타 버전입니다. 윈도우 전용이며, 한국어 영상에 맞춰져 있습니다.

뤼미에르 베타 보기 →

회사·채널의 영상 스타일과 일하는 방식에 맞춘 뤼미에르가 필요하신가요?

뤼미에르 커스터마이징(기업형 맞춤 시스템) 문의

artgourmet.official@gmail.com

Claude는 Anthropic의 상표입니다. 뤼미에르는 Anthropic과 제휴하거나 보증받은 제품이 아닙니다.

⑨ 자주 묻는 질문

정말 무료예요?

네. 코드·효과음·설명 전부 무료예요. HyperFrames와 GSAP도 무료예요. 클로드 코드로 고쳐 쓰려면 Claude 유료 요금제(Pro 이상)가 필요해요.

뭐가 필요해요?

Node.js 22 이상, FFmpeg, 렌더용 크롬(없으면 npx --yes hyperframes@0.8.156 browser ensure 가 받아 줘요). 받아쓰기·효과음 코드를 쓰려면 Python도. 렌더할 때 인터넷 연결이 필요해요(글꼴·GSAP 불러오기).

윈도우·맥 둘 다 돼요?

네, 둘 다 돼요.

HyperFrames가 뭐예요?

HTML로 만든 화면을 한 프레임씩 찍어서 mp4로 만들어 주는 오픈소스 영상 도구예요. 코드로 만든 움직임을 그대로 영상 파일로 뽑을 수 있어요.

코딩 몰라도 돼요?

네. ⑤의 말을 클로드 코드에 붙여 넣으면 돼요.

영상 없이 돌려 봐도 돼요?

네. 'YOUR VIDEO' 자리표시 영상이 들어 있어서 받자마자 렌더돼요.

어디서 실행돼요?

내 컴퓨터에서요. 내 영상이 밖으로 올라가지 않아요.

휴대폰에서 받았는데 열리지 않아요.

이 파일은 PC에서 클로드 코드로 여는 코드 묶음이에요. 휴대폰에서 받으셨다면 PC로 옮기거나, PC에서 이 페이지를 다시 열어 받아 주세요. 인스타그램 앱 안에서 다운로드가 안 되면 화면 오른쪽 위 메뉴(⋯)에서 "브라우저에서 열기"를 눌러 보세요.

⑩ 영상으로 보기

릴스 · VOL.05 모션 그래픽, 이제 누구나영상 준비 중

디렉터스AI — 말로만 만든 모션 그래픽, 쾅! 떨어뜨리기·찌그러짐·로봇

문의

돌려 보다 막히는 부분이 있으면 이메일 주세요. 같이 풀어 드릴게요.

artgourmet.official@gmail.com

문의하기 페이지 →

더 보고 싶으시다면

▶ 디렉터스AI 유튜브 보러 가기

홈페이지의 다른 자료도 둘러보세요.

인사이트AI와 함께 회사를 운영하며 겪은 일을 기록한 글 모음전자책 · AI 회사를 만들었습니다코드를 못 쓰는 사람이 AI로 회사를 만든 넉 달의 이야기 (2권 세트)실용 도구 모음설치 없이 바로 쓰는 작은 도구들무료 심리테스트회원가입 없이 가볍게 해 보는 성향 테스트