목차
14강-스킬 없이 모션그래픽을 만드는 경우에 비해 랜덤성을 줄이고 퀄리티를 비슷하게 하는 목적이 있음
- 특이점: 텍스트 +벡터 이미지 위주, 색상 조합 변경 가능, 음악 생성 가능 등 사용자 선택폭이 넓어
[권장 사용 모델]1순위: Opus5.5 , 2순위: Astra 6, 3순위:gemini 3.8flash
[깃허브 저장소]
0. 스킬이 필요한 이유
•
아무 셋팅이 되어있지 않은 환경에서 Agent 들에게 다음과 같은 프롬프트를 통해 모션 그래픽을 생성할 수 있을까?
•
이 스킬은 모델의 성능이 좀 부족하거나, 컴퓨터 렌더링 성능이 부족한 경우를 대비해서도 최대한 가성비 있는 모션 그래픽을 만들기 위해 제작된 스킬
•
내가 토큰 부자로, 사용료 부담없이 유료 AI모델을 호출할 수 있다면 굳이 사용할 필요성은 느낄 수 없음
•
스킬의 타겟: 무료 모델로 가성비 있게 모션그래픽을 생성하고 싶은 일반 Light 사용
소스파일을 중심으로 키네틱타이포+도형으로 이루어진 환상적인 모션그래픽 만들어줘. 블랙+화이트+형광 핑크 포인트, 경쾌한 리듬감의 상업적 무료 음악 찾아서 넣어줘. 모션을 비트에 맞춰줘. 16:9 15초
JavaScript
복사
[구글 안티그래비티에서 진행한 결과]
•
잠시만 기다릴다가 보통 10분 이상 기달리수 있음
•
만들어지긴 한다 
한글이 깨지거나, 모션그래픽(타이포 그래픽)임에도 너무 많은 텍스트가 들어가는 것을 한눈에 볼 수 있음
한글이 깨지거나, 모션그래픽(타이포 그래픽)임에도 너무 많은 텍스트가 들어가는 것을 한눈에 볼 수 있음
1.어떤 스킬인가?
•
yangphago-motion 스킬은 수업 자료(PDF·PPTX·DOCX)나 주제를 입력받아 빠른 시간안에 모션 그래픽 영상을 생성하는 스킬임
•
핵심 설계는 Claude가 직접 작성하는 파일을 storyboard.json 1개로 줄인 것.
•
장면 코드, 키프레임 이미지, 스토리보드 페이지, 음악 편곡, mp4 렌더링은 모두 스크립트가 처리함.
따라서 토큰을 아끼면서 결과물 품질도 매번 일정하게 유지하는 스킬[샘플작업 결과1]클로드로 스킬을 만들고, Antigravity 로 모션그래픽 작업
•
테슬라 오토파일럿 관련 모션 그래픽
•
스킬 작동과정 중 뽑아낸 스토리 보드
1-1. 제작 목표
•
PDF·MD·PPTX·HWPX 등의 소스를 짧은 텍스트 중심 영상으로 제작함.
•
전문가가 만든 원본 영상 10개를 기준으로 텍스트 움직임·전환·배경 흐름을 재구성함.
•
사용자의 선택을 줄이고, 반복 작업은 스크립트로 처리하는 속도 중심 워크플로를 목표로 함.
1-2.스킬의 특이사항
•
모션그래픽을 한번에 만들지 않고, 아래 그림처럼 만들 스토리보드를 사용자에게 미리보여주고 검수를 받은 다음 모션그래픽으로 렌더링 시작
스토리보드 검수 시트 — 장면별 키프레임을 한 장으로 확인
박진감 규칙 적용 후 (v2) — 문구 약 36개, 1박·반 박 단위 교체
2. 스킬 사용 흐름
[A단계] 소스·샘플·길이 선택
•
사용자가 소스 문서를 제공하고 브라우저에서 원본 영상의 썸네일·재생 화면을 확인한 뒤 하나를 선택함.
•
영상 길이는 15초, 30초, 50~60초, 직접 입력 중 선택함.
•
선택 완료 시 브라우저 탭을 닫아 달라는 안내가 표시되고, Codex가 선택한 길이에 맞춰 문구량과 장면을 구성함.
[B단계] 음악·미리보기·최종 생성
•
Codex가 스토리보드와 주제에 맞는 Pixabay 음악 후보를 준비해 검토 화면으로 제공함.
•
음악은 상업적 무료 이용 근거, 주제 적합성, 묵직하고 트렌디한 urban 힙합 비트를 기준으로 검토함.
•
사용자가 음악과 수정사항을 선택하고, 수정된 미리보기를 승인하면 MP4를 생성함.
•
음악 포함 30fps 미리보기와 최종 출력에 같은 렌더러를 사용함.
[렌더링 결과물 출력위치]
•
완성된 mp4는 outputs/<프로젝트명>/ 폴더에 저장됨
3. 스킬 분석하기
자체 하이퍼프레임을 이용한 작업과 거의 흡사
[하이퍼프레임 관련스킬]
3-1.스킬 작업 흐름 상세
1.
접수: 영상 길이, 음악, 스타일과 글꼴, 엔딩 문구, 색감, 레퍼런스 영상 여부를 확인
2.
준비: 폰트와 템플릿을 복사하고 extract_text.py로 자료 텍스트를 UTF-8 파일로 추출
3.
음악: 라이브러리 곡, 파이썬 합성, Pixabay 검색, Lyria AI 생성 중 선택. arrange.py가 곡을 영상 길이에 맞게 편곡하고 박자 지도(beatmap.js)를 생성함.
4.
스토리보드: storyboard.json을 작성하면 make_storyboard.py가 키프레임과 검수 시트를 생성함. 브라우저 미리보기 페이지에서 음악을 들으며 장면을 확인함.
5.
렌더: 승인 후에만 render.js가 30fps mp4를 생성해 outputs/<프로젝트명>/ 폴더에 저장함.
3-2. 엔딩 문구 선택
•
작업 시작 단계에서 마지막 문구를 질문함. 원하는 문구를 넣거나 엔딩 없이 본문만 끝까지 이어지게 설정 가능.
•
엔딩이 없으면 마지막 장면을 음악의 임팩트 지점에 맞춤.
3-3. 색감 3가지 선택
•
총 3가지의 선택 옵션을 제공함
◦
① 기본 색감
◦
② AI 추천 색감
◦
③ 사용자 지정 색감(배경·주 색깔·강조·보조)
•
중 선택하도록 변경함.
•
storyboard.json에 palette 4색만 적으면 배경, 글자, 반전 화면, 강조, 글로우가 함께 바뀜.
AI 추천 색감 적용 예 — 먹색·한지·주홍·벚꽃 (일본 여행 주제)
3-4. 음악 선택의 시간·토큰 비교
•
음악 선택 시 착오가 없도록 선택지마다 시간, 토큰, 품질, 저작권을 함께 표시함.
[꼭 알아두기]
선택지 | 시간 | 토큰 | 특징 |
라이브러리 곡 | 수 초 | 약 1천 | 검증된 곡, 저작권 확인 완료 |
파이썬 합성 | 수 초~1분 | 약 1천 | 박자 완벽, 저작권 자유, 단조로움 |
Pixabay 검색 | 3~5분 | 5천~8천 | 질감과 분위기가 가장 풍부, 콘텐츠 ID 확인 필요 |
Lyria AI 생성 | 1~3분 | 약 3천 | 유료, API 키 필요 |
3-5. 모션 그래픽 완성까지의 예상 소요 시간과 토큰
30초 영상 기준구간 | 시간 | 토큰 |
접수 → 미리보기 | 라이브러리·합성 5~8분 / Pixabay 10~15분 | 2만~4만 |
승인 → mp4 | 2~3분 | 3천~5천 |
수정 1회 | 3~5분 | 5천~1만 |
•
시간과 토큰 대부분은 음악 탐색과 장면 설계에 사용됨.
•
렌더링은 시간이 걸리지만 토큰은 생각보다 많이 사용되지 않음.
4.모션 그래픽 생성시 참고 사이트
•
무료 음원 활용: https://pixabay.com/ko/music/
•
gemini활용 음원생성:https://ai.google.dev/gemini-api/docs/music-generation
•
•
•
•
•
모션그래픽 래퍼런스2:https://elements.envato.com/video-templates