클로드로 모션그래픽 만드는 프롬프트 8가지
Quick Start
"영상 만들어줘" 한 줄로는 글자만 둥둥 떠다니는 화면이 나옵니다.
장면 표를 먼저 짜고, 글자·아이콘·그래프·전환을 따로 맡긴 뒤 마지막에 한 장면을 템플릿으로 바꿔 100개로 늘리세요.
- 01~02에서 장면 표와 장면별 정지 화면을 확정합니다.
- 03~06에서 글자·아이콘·그래프·전환 애니메이션을 하나씩 붙입니다.
- 07~08에서 템플릿으로 바꿔 변형을 뽑고, 렌더 후 빈 화면을 검사합니다.
STEP 1 · 5분장면 표부터 짠다
[주제]와 [길이]를 넣습니다.
세로 쇼츠라면 15~30초가 적당합니다.
결과는 아래 "장면 표 양식"으로 받으면 이후 모든 단계에서 그대로 씁니다.
Motion Director 역할을 맡아줘. [주제]를 설명하는 [길이]초 모션그래픽을 기획해줘. 장면을 3~6개로 나누고 장면마다 화면에 나올 글자, 움직임, 길이를 표로 적어줘. 첫 1초 안에 무엇을 보여줄지 따로 정해줘.
성공하면 장면 3~6개짜리 표와 첫 1초 계획이 나옵니다.
STEP 2 · 10분움직이기 전 정지 화면을 만든다
01의 장면 표와 [브랜드 컬러]·[폰트]를 넣습니다.
받은 HTML을 브라우저로 열어 장면마다 글자가 잘리지 않는지 먼저 봅니다.
움직임은 그다음입니다.
Style Frame Designer 역할을 맡아줘. 앞의 장면 표를 기준으로 [브랜드 컬러]와 [폰트]를 써서 장면별 정지 화면을 1080×1920 HTML로 만들어줘. 글자는 화면 가장자리 80px 안쪽에만 두고, 한 장면에 강조 색은 하나만 써줘.
성공하면 장면별 1080×1920 정지 화면 HTML이 나옵니다.
STEP 3 · 10분낱말 단위로 튀어나오는 글자를 만든다
[핵심 문장]과 [초]를 넣습니다.
타이밍 표의 숫자만 바꿔 다시 넣으면 속도를 조절할 수 있습니다.
아래 "GSAP 코드 예시"가 결과의 모양입니다.
Kinetic Typography 담당으로 일해줘. [핵심 문장]을 낱말 단위로 나눠 등장시키는 애니메이션을 GSAP 타임라인 코드로 만들어줘. 강조 낱말은 크기와 색을 바꾸고 전체 길이는 [초]에 맞춰줘. 타이밍 값을 표로 함께 줘서 내가 고칠 수 있게 해줘.
성공하면 GSAP 타임라인 코드와 낱말별 등장 시각 표가 나옵니다.
STEP 4 · 5분선으로 그려지는 아이콘을 만든다
[설명할 개념 3개]를 넣습니다.
선 굵기와 모서리를 통일해야 세 아이콘이 한 세트로 보입니다.
Icon Animator 역할을 맡아줘. [설명할 개념 3개]를 각각 SVG 아이콘으로 그리고, 선이 그려지며 등장하는 애니메이션을 넣어줘. 아이콘끼리 선 굵기와 모서리 모양을 통일하고, 아이콘마다 코드를 따로 복사할 수 있게 나눠줘.
성공하면 같은 선 굵기의 SVG 아이콘 3개와 아이콘별 애니메이션 코드가 나옵니다.
STEP 5 · 5분자라나는 그래프와 숫자를 만든다
[데이터 표]에는 내 숫자를 그대로 붙여 넣습니다.
숫자는 크게, 축 글자도 휴대폰에서 읽히게 크게 해 두었습니다.
Data Motion 담당으로 일해줘. [데이터 표]로 막대그래프를 만들고, 막대가 0에서 자라며 숫자가 함께 올라가는 애니메이션을 만들어줘. 축 글자는 모바일에서도 읽히게 크게 하고, 데이터는 내가 준 값만 써줘.
성공하면 막대와 숫자가 함께 올라가는 그래프 애니메이션 코드가 나옵니다.
STEP 6 · 5분장면 사이를 잇는 전환을 붙인다
01의 장면 표와 지금까지 만든 장면 코드를 넣습니다.
전환이 화려할수록 글자 읽을 시간이 줄어듭니다.
0.4초 안팎으로 맞춰 두었습니다.
Transition Designer 역할을 맡아줘. 장면 표의 장면 사이 전환을 3종류 이하로 정해 코드로 만들어줘. 같은 전환이 3번 연속 나오지 않게 배치하고, 전환 길이는 0.4초 안팎으로 맞춰줘. 전환 때문에 글자를 읽을 시간이 줄지 않게 해줘.
성공하면 전환 3종류 이하와 장면별 배치가 들어간 코드가 나옵니다.
STEP 7 · 10분한 장면을 100개로 늘린다
완성한 장면 하나와 [변형 목록 CSV]를 넣습니다.
한 번에 100개를 뽑을 수 있습니다.
아래 "100개 변형 스크립트"처럼 CSV의 줄만 바꾸면 새 영상이 됩니다.
Variation Generator 역할을 맡아줘. 완성한 장면 하나를 템플릿으로 바꿔 글자·색·아이콘만 갈아 끼우면 새 영상이 되게 해줘. [변형 목록 CSV]를 읽어 100개 변형을 한 번에 만드는 스크립트를 짜고, 글자가 넘치는 변형은 목록으로 따로 알려줘.
성공하면 템플릿 파일, 변형 생성 스크립트, 글자가 넘치는 변형 목록이 나옵니다.
STEP 8 · 10분렌더하고 빈 화면을 잡는다
렌더는 시간이 걸리니 한 번에 다 돌리기 전에 1~2개로 먼저 검사합니다.
첫 프레임이 비어 있으면 인스타 미리보기도 비어 보입니다.
Render Checker 역할을 맡아줘. 완성된 장면을 1080×1920·30fps MP4로 렌더하는 명령을 정리하고, 렌더 뒤 첫 프레임·마지막 프레임·글자 넘침·빈 화면을 검사하는 스크립트를 만들어줘. 검사하지 않은 항목은 통과로 쓰지 마.
성공하면 렌더 명령과 검사 스크립트, 항목별 검사 결과가 나옵니다.
장면 표 양식
01에서 이 틀로 받아 두면 02~08 모든 단계에 그대로 붙여 넣습니다.
기획부터 렌더까지 이 한 장이 기준입니다.
| 장면 | 시간(초) | 화면 글자 | 움직임 | 강조 색 | 전환(다음 장면으로) |
|---|---|---|---|---|---|
| 1 | 0.0~1.0 | 첫 1초 후킹 문장 | 낱말 단위 등장 | #FF7A45 | 밀기 0.4초 |
| 2 | 1.0~4.0 | 핵심 개념 1 | 아이콘 선 그리기 | #FF7A45 | 페이드 0.4초 |
| 3 | 4.0~8.0 | 숫자·그래프 | 막대 자라기 | #FF7A45 | 확대 0.4초 |
| 4 | 8.0~10.0 | 마무리 한 문장 | 낱말 단위 등장 | #FF7A45 | — |
GSAP 코드 예시
03 Kinetic Typography 결과의 모양입니다.
아래 코드를 kinetic.html 로 저장하고 브라우저로 열면 바로 움직입니다.
SENTENCE 와 EMPH 만 바꿔 보세요.
<!doctype html>
<html lang="ko"><head><meta charset="utf-8">
<style>
html, body { margin: 0; height: 100%; background: #0E0E0E; }
.stage { width: 1080px; height: 1920px; transform-origin: 0 0; display: flex; flex-wrap: wrap;
align-content: center; justify-content: center; gap: 24px 28px; padding: 0 80px; box-sizing: border-box;
font-family: Pretendard, "Noto Sans KR", sans-serif; }
.w { color: #fff; font-size: 120px; font-weight: 900; letter-spacing: -0.03em; opacity: 0; }
.w.em { color: #FF7A45; }
</style></head><body>
<div class="stage" id="stage"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
const SENTENCE = "클로드로 모션그래픽 100개 한 번에";
const EMPH = ["100개"];
const stage = document.getElementById("stage");
const scale = Math.min(innerWidth / 1080, innerHeight / 1920);
stage.style.transform = "scale(" + scale + ")";
SENTENCE.split(" ").forEach(function (t) {
const s = document.createElement("span");
s.className = "w" + (EMPH.includes(t) ? " em" : "");
s.textContent = t;
stage.appendChild(s);
});
const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
tl.fromTo(".w", { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, ease: "back.out(2)", stagger: 0.18 })
.to(".w.em", { scale: 1.25, duration: 0.25, ease: "power2.out" }, "+=0.1")
.to(".w", { opacity: 0, duration: 0.3 }, "+=1.2");
</script>
</body></html>
| 값 | 뜻 | 바꾸면 |
|---|---|---|
| duration: 0.35 | 낱말 하나가 올라오는 시간 | 작게 하면 더 빠르게 튀어나옴 |
| stagger: 0.18 | 낱말 사이 간격 | 크게 하면 한 낱말씩 또박또박 |
| scale: 1.25 | 강조 낱말 확대 비율 | 1.5까지 올리면 더 세게 강조 |
| "+=1.2" | 다 나온 뒤 멈춰 있는 시간 | 문장이 길면 늘리기 |
100개 변형 스크립트
07 Variation Generator 결과의 모양입니다.
템플릿 HTML 하나와 CSV 하나로 변형 HTML을 한 번에 만듭니다.
CSV 줄을 100줄로 늘리면 100개가 나옵니다.
만든 HTML은 08의 렌더 명령으로 MP4로 뽑습니다.
먼저 위 kinetic.html 을 복사해 template.html 로 저장하고, 바꿀 자리 세 곳을 이렇게 고칩니다.
.w.em { color: {{color}}; }
const SENTENCE = "{{sentence}}";
const EMPH = ["{{emph}}"];
id,sentence,emph,color 001,클로드로 모션그래픽 100개 한 번에,100개,#FF7A45 002,말로 설명하면 영상이 됩니다,영상,#4F8CFF 003,장면 표 하나로 기획 끝,장면 표,#2BB673
import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
const MAX_CHARS = 22;
const template = readFileSync("template.html", "utf8");
const [header, ...rows] = readFileSync("variants.csv", "utf8").trim().split(/\r?\n/);
const keys = header.split(",").map((k) => k.trim());
mkdirSync("out", { recursive: true });
const overflow = [];
for (const row of rows) {
const cells = row.split(",").map((c) => c.trim());
const v = Object.fromEntries(keys.map((k, i) => [k, cells[i] ?? ""]));
const html = template.replace(/\{\{(\w+)\}\}/g, (_, k) => (v[k] ?? "").replace(/["\\]/g, "\\$&"));
writeFileSync(`out/${v.id}.html`, html);
if (v.sentence.length > MAX_CHARS) overflow.push(`${v.id} (${v.sentence.length}자) ${v.sentence}`);
}
console.log(`변형 ${rows.length}개를 out/ 에 만들었습니다.`);
if (overflow.length) console.log(`글자가 넘칠 수 있는 변형 ${overflow.length}개:\n` + overflow.join("\n"));
CSV 칸 안에는 쉼표를 쓰지 마세요.
쉼표가 필요하면 07 프롬프트에 "쉼표가 든 칸도 읽게 고쳐줘"라고 덧붙이면 됩니다.
자주 막히는 곳
kinetic.html 을 열었는데 아무것도 안 움직입니다.
인터넷이 연결돼 있어야 GSAP 파일을 불러옵니다.
오프라인이라면 GSAP 파일을 내려받아 같은 폴더에 두고 src 를 그 파일 이름으로 바꾸세요.
화면이 너무 커서 일부만 보입니다.
코드가 창 크기에 맞춰 줄여 보여 주도록 돼 있습니다.
창 크기를 바꿨다면 새로고침하세요.
make-variants.mjs 실행이 안 됩니다.
컴퓨터에 Node.js가 설치돼 있어야 합니다.
터미널에서 node -v 를 쳐서 버전이 나오는지 먼저 확인하세요.
FAQ
HTML을 MP4로는 어떻게 바꾸나요? 08 Render Checker에 "내 컴퓨터 환경에 맞는 렌더 방법부터 골라줘"라고 붙이면, 설치할 도구와 명령을 함께 정리해 줍니다.
영상 편집 툴이 없어도 되나요? 됩니다.
이 흐름은 코드로 장면을 만들고 바로 MP4로 렌더하는 방식이라 편집 툴 없이 끝납니다.
공식 참고 자료
이메일 남기고 전체 바로 보기