클로드로 공짜로 뽑은 모션그래픽 100개 — 종류별 요청문까지
한눈에 보기
100개 전부 · 두 줄(20개)씩 HyperFrames · Remotion · 3D · 수식 설명 · 움직이는 배경
| 번호 | 종류 | 개수 | 만든 도구 |
|---|---|---|---|
| 01–07 | 키네틱 타이포 | 7 | HyperFrames |
| 08–14 | 로고 리빌 | 7 | HyperFrames |
| 15–20 | 썸네일 애니메이션 | 6 | HyperFrames |
| 21–25 | 자막 템플릿 | 5 | Remotion |
| 26–33 | 막대·선 차트 | 8 | Remotion |
| 34–37 | 숫자 카운터 | 4 | Remotion |
| 38–40 | 전환 효과 | 3 | Remotion |
| 41–54 | 3D 오브젝트 | 14 | HyperFrames |
| 55–60 | 제품 카드 슬라이드 | 6 | HyperFrames |
| 61–74 | 그래프·수식 설명 | 14 | HyperFrames |
| 75–80 | 진행 바 | 6 | HyperFrames |
| 81–100 | 움직이는 배경 | 20 | HyperFrames |
시작 전에
- 스킬 설치는 모션그래픽 스킬 5개 가이드에 정리해 뒀어요. 이 글의 100개는 HyperFrames 와 Remotion 두 개만 있으면 됩니다.
- 요청문은 클로드 코드 입력줄에 그대로 붙여 넣고, [대괄호]만 내 상황으로 바꾸면 돼요.
- 처음엔 1개만 뽑아 보고, 마음에 들면 맨 아래 「100개 한 번에 뽑는 요청문」으로 늘리세요.
01–07 키네틱 타이포 · HyperFrames
01 쌓아 올리기 · 02 펀치 · 03 한 글자씩 낙하 · 04 반반 갈라지기 · 05 외곽선 채우기 · 06 회전 교체 · 07 흐르는 띠
글자 자체가 움직이는 영상이에요.
릴스 첫 화면, 공지, 할인 안내에 바로 씁니다.
/hyperframes 로 9:16 세로 2초짜리 키네틱 타이포 영상을 만들어 주세요. 문구는 [문구, 예: 지금 / 바로 / 시작], 바탕은 [바탕색, 예: 검정], 강조색은 [강조색, 예: 주황]이에요. 같은 문구로 등장 방식만 바꾼 7가지(쌓아 올리기, 펀치, 한 글자씩 떨어지기, 반반 갈라지기, 외곽선이 채워지기, 회전하며 바뀌기, 흐르는 띠)를 각각 렌더해 주세요.
08–14 로고 리빌 · HyperFrames
08 원 확산 · 09 선 그리기 · 10 아래서 올라오기 · 11 튀어 떨어지기 · 12 글리치 · 13 회전 등장 · 14 조각 모이기
영상 맨 앞이나 끝에 붙이는 로고 등장 컷이에요.
/hyperframes 로 [브랜드 이름, 예: NOVA] 로고가 나타나는 영상을 9:16 세로 2초로 만들어 주세요. 원이 퍼지며 나타나기, 선으로 그려지기, 아래에서 올라오기, 튀어 떨어지기, 글리치, 회전하며 등장, 조각이 모이기 7가지로 각각 렌더해 주세요. 색은 [브랜드 색, 예: #FF7A45] 하나만 써 주세요.
15–20 썸네일 애니메이션 · HyperFrames
15 이거 모르면 손해 · 16 10분 만에 끝내는 법 · 17 월 100 아끼는 법 · 18 TOP 5 무료 툴 · 19 BEFORE AFTER · 20 결과가 충격
정지 썸네일 대신 2초 동안 움직이는 표지예요.
배지·화살표·빨간 동그라미가 시선을 끌어요.
/hyperframes 로 움직이는 썸네일을 9:16 세로 2초로 만들어 주세요. 위에는 그림 카드가 확대되며 들어오고, 아래에는 [두 줄 제목, 예: 이거 모르면 / 손해]가 튀어 오르고, 오른쪽 위에 [배지, 예: NEW]가 붙게 해 주세요. 화살표 강조, 빨간 동그라미 강조 버전도 같이 만들어 [개수, 예: 6]개를 렌더해 주세요.
21–25 자막 템플릿 · Remotion
21 단어 박스 강조 · 22 팝 강조 · 23 밑줄 강조 · 24 검은 판 자막 · 25 가라오케 채움
말하는 순서대로 단어가 하나씩 강조되는 자막이에요.
문장만 바꾸면 계속 다시 쓸 수 있어요.
/remotion-best-practices 를 지켜서 Remotion 으로 단어가 하나씩 강조되는 자막 템플릿을 만들어 주세요. 9:16 세로 2초, 문장은 [문장, 예: 이 다섯 개면 영상 100개]예요. 강조 방식은 박스, 팝, 밑줄, 검은 판, 가라오케 채움 5가지로 컴포지션을 하나씩 만들고, 문장과 색은 props 로 받게 해 주세요.
26–33 막대·선 차트 · Remotion
26 월별 매출 · 27 채널별 유입 · 28 요일별 조회수 · 29 도구 만족도 · 30 팔로워 추이 · 31 주간 흐름 · 32 방문자 수 · 33 월 비용
숫자를 보여 주는 영상은 차트 하나로 설득력이 달라져요.
데이터만 바꿔 계속 뽑을 수 있어요.
/remotion-best-practices 를 지켜서 Remotion 으로 데이터가 올라가는 차트 영상을 9:16 세로 2초로 만들어 주세요. 데이터는 [데이터, 예: 6월 30 · 7월 42 · 8월 55 · 9월 61 · 10월 96]이에요. 세로 막대, 가로 막대, 선, 면을 채운 선 4가지로 만들고, 데이터·제목·색은 props 로 빼서 다른 데이터로도 바로 다시 렌더할 수 있게 해 주세요.
34–37 숫자 카운터 · Remotion
34 조회수 · 35 매출 · 36 완료율 · 37 팔로워
/remotion-best-practices 를 지켜서 Remotion 으로 숫자가 0에서 [목표 숫자, 예: 1,000,000]까지 올라가는 카운터 영상을 9:16 세로 2초로 만들어 주세요. 앞뒤 기호(₩, %, +)와 아래 설명 문구를 props 로 받게 하고, 숫자가 다 올라가면 한 번 튀게 해 주세요.
38–40 전환 효과 · Remotion
38 슬라이드 · 39 와이프 · 40 플립
/remotion-best-practices 를 지켜서 @remotion/transitions 로 장면 A에서 장면 B로 넘어가는 영상을 9:16 세로 2초로 만들어 주세요. slide, wipe, flip 세 가지로 각각 렌더하고, 장면 문구는 [A·B 문구, 예: BEFORE / AFTER]로 넣어 주세요.
41–54 3D 오브젝트 · HyperFrames
41–48 음료 캔 턴테이블 8색 · 49–54 회전 큐브 6종
블렌더 없이 HyperFrames 의 CSS 3D만으로 만든 3D 컷이에요.
제품 소개, 상세페이지 영상에 씁니다.
/hyperframes 로 CSS 3D만 써서 음료 캔이 한 바퀴 도는 제품 턴테이블 영상을 9:16 세로 2초로 만들어 주세요. 캔 색은 [색 목록, 예: 주황 · 민트 · 베리 · 빨강 · 파랑 · 노랑 · 보라 · 하늘] 8가지로 각각 렌더해 주세요. 같은 방식으로 면마다 색과 글자가 다른 큐브가 회전하는 영상도 6개 만들어 주세요.
55–60 제품 카드 슬라이드 · HyperFrames
55 신상 굿즈 · 56 오늘의 추천 · 57 시즌 한정 · 58 BEST 3 · 59 NEW IN · 60 특가 상품
/hyperframes 로 상품 카드가 옆으로 넘어가는 제품 슬라이드 영상을 9:16 세로 2초로 만들어 주세요. 상품은 [상품 목록, 예: 머그 12,000원 · 에코백 18,000원 · 키링 6,000원 · 캡 24,000원]이에요. 카드가 넘어갈 때 살짝 기울고, 아래 점 표시가 따라 움직이게 해 주세요.
61–74 그래프·수식 설명 · HyperFrames
61–68 함수 그래프 8개 · 69 원→정사각형 · 70 피타고라스 · 71 벡터 더하기 · 72 수직선 점프 · 73 미분 식 바뀌기 · 74 단위원 사인
3Blue1Brown 처럼 검은 바탕에 선이 그려지는 설명 컷이에요.
강의, 개념 설명 영상에 씁니다.
/hyperframes 로 3Blue1Brown 같은 설명 애니메이션을 9:16 세로 2초로 만들어 주세요. 검은 바탕에 좌표축이 먼저 그려지고, [함수 목록, 예: y=x² · sin x · x³ · eˣ · |x| · cos 2x · √x · 시그모이드] 곡선이 차례로 그려지며 점이 곡선을 따라가게 해 주세요. 원이 정사각형으로 바뀌기, 피타고라스, 벡터 더하기, 수직선 점프, 미분 식 바뀌기, 단위원 사인도 같은 색감으로 만들어 주세요.
75–80 진행 바 · HyperFrames
75 가로 막대 · 76 칸 채우기 · 77 원형 링 · 78 단계 표시 · 79 배터리 · 80 로딩 점
/hyperframes 로 진행 표시 영상을 9:16 세로 2초로 만들어 주세요. 가로 막대, 칸 채우기, 원형 링, 단계 표시, 배터리, 로딩 점 6가지로 만들고, 숫자가 0%에서 [목표, 예: 100%]까지 같이 올라가게 해 주세요.
81–100 움직이는 배경 · HyperFrames
81–87 흐름장 입자 · 88–92 궤도 입자 · 93–96 노이즈 웨이브 · 97–100 도트 그리드
algorithmic-art 스킬처럼 시드 값과 노이즈로 그리는 배경이에요.
시드만 바꾸면 무늬가 계속 새로 나와요.
글자 뒤에 깔면 영상이 덜 심심해 보여요.
/hyperframes 로 canvas 코드로 그리는 움직이는 배경을 9:16 세로 2초로 만들어 주세요. 시드 값이 같으면 같은 그림이 다시 나오게 하고, 흐름장 입자, 궤도 입자, 노이즈 웨이브, 도트 그리드 4가지를 [팔레트, 예: 주황 · 하늘 · 분홍] 색 조합과 시드만 바꿔 20개 렌더해 주세요.
100개 한 번에 뽑는 요청문
한 종류를 마음에 들게 만들었다면, 바뀌는 자리만 변수로 빼서 한꺼번에 렌더합니다.
HyperFrames 와 Remotion 둘 다 같은 요청문으로 됩니다.
방금 만든 장면을 템플릿으로 바꿔 주세요. 문구·강조 색·아이콘·데이터처럼 바뀌는 자리를 변수로 빼고, [변형 목록, 예: 문구 20개가 든 CSV]를 읽어 변형 영상을 한 번에 렌더하는 스크립트를 만들어 주세요. 처음엔 216×384 작은 크기로 뽑아 확인하고, 글자가 화면 밖으로 넘치는 변형은 렌더하지 말고 목록으로 따로 알려 주세요.
자주 막히는 곳
한글 글꼴이 다르게 나옵니다.
쓰고 싶은 글꼴 파일을 프로젝트 폴더에 넣고, 그 파일로 연결해 달라고 요청하세요.
시스템 글꼴은 렌더할 때 바뀔 수 있어요.
렌더가 오래 걸립니다.
처음에는 작은 크기·짧은 길이로 뽑아 보고, 마음에 드는 것만 1080×1920으로 다시 렌더하세요.
스킬이 안 보입니다.
설치 명령은 모션그래픽 스킬 5개 가이드에 있어요.
설치한 뒤 클로드 코드를 다시 켜면 보입니다.
이메일 남기고 전체 바로 보기