목차
[예시작품]
•
수업자료를 기반으로 한 모션 그래픽
[참고 사이트]
1.심플_최신 모델의 성능을 활용
1-1 작업 기법: 해줘!
•
모션 그래픽의 설계부터 렌더링과정까지 AI Agent의 추론 능력을 바탕으로 작업 진행
•
토큰이 남아돌고, 작업 시간에 여유가 있다면 추천(Simple is Best!)
•
예시 프롬프트
source폴더에 있는 파일 내용을 학생들에게 집약적으로 설명할 모션 그래픽을 만들꺼야.
1.키네틱타이포+도형으로 구성, 필요한 경우 벡터이미지,간단아이콘, 3D이미지 등 활용
2.블랙+화이트+형광 퍼플 포인트
3.16:9화면비율
4.urban 힙합비트의 묵직하고 트렌디한 사운드, 상업적 무료음악 활용하거나 너가 직접 생성: https://pixabay.com/ko/music/
5.마지막 부분에 강렬한 메시지를 포함하여 15초
JavaScript
복사
•
작업 시작 단계에서 사용자가 설정해야 할 것들이 많음
•
그에 따른 작업 소요시간도 상당히 증가
•
확실하게 스킬을 사용할 때 보다 적 시작 단계에서 상당히 오랜시간 추론작업을 먼저 진행하는 것이 관찰됨
1-2 장점이자 단점
•
결과물의 독창성이 크고, 요청 소스에 따라 확연한 차이가 남
•
특히, 어떤 플랫폼과 모델, 추론강도 등을 사용하는가에 따라 그 때 그때 다른 결과물을 받을 수 있음
•
즉, “저점과 고점이 매우 낮고 높다”라는 결론에 다다름
•
특히, 아무것도 없는 상태에서 모션그래픽의 핵심 요소인 음악을 처음부터 생성할 경우, 더더욱 오랜 작업시간과 토큰 소모를 감내해야 됨-_-;;
•
실제 음악생성에만 약 15분 정도가 소모됨
•
동일한 프롬프트로 작업시, 클로드코드가 가장 많은 시간이 소요되었음
2.퀄리티 UP
2-1.전문가 작품들에서 프롬프트 영감얻기
•
이곳에 상상을 초월하는 모션 그래픽 작품(AI로 만들어진, 정확히는 클로드 opus5.5)들의 프롬프트를 활용하는 방법
Repurpose this source video into a fresh short-form video. Keep the core idea and pacing, but make the visuals, script, and structure original.
Source video: https://cdn.revid.ai/static/claude-motion-graphics/stephanlivera-2103315922098470926.mp4
JavaScript
복사
•
대략 이런 프롬프트를 통해 만들어볼 수 있음
이 원본 영상을 활용하여 새로운 숏폼 영상을 제작해 주세요. 핵심 아이디어와 전개 속도는 유지하되, 비주얼, 대본, 구성은 독창적으로 만들어 주시기 바랍니다.
원본 영상: https://cdn.revid.ai/static/claude-motion-graphics/stephanlivera-2103315922098470926.mp4
새로운 숏폼 영상의 주제: 병역문제로 정신못차리는 축구 국가대표들
JavaScript
복사
2-2.하네스틱하게 접근하기
•
기억해야 할 포인트: 다음 방식의 프롬프트
•
핵심은 바로 렌더링으로 들어가지 말고, 중간 스토리보드로 점검하기
스토리보드 먼저 뽑고 내 허락을 받은 다음 최종 제작
JavaScript
복사
[예시 프롬프트]
폴더에 있는 파일 내용을 학생들에게 집약적으로 설명할 모션 그래픽을 만들꺼야.
1.키네틱타이포+도형으로 구성, 필요한 경우 벡터이미지,간단아이콘, 3D이미지 등 활용
2.블랙+화이트+형광 퍼플 포인트
3.16:9화면비율
4.urban 힙합비트의 묵직하고 트렌디한 사운드, 상업적 무료음악 활용하거나 너가 직접 생성: https://pixabay.com/ko/music/
5.마지막 부분에 강렬한 메시지 포함하여 30초
스토리보드 먼저 뽑고 내 허락을 받은 다음 최종 렌더링 진행하자
JavaScript
복사
3. 최신 모델에서 갑자기 모션그래픽이 잘되는 이유?
[추정]영상을 "그리는" 모델이 아니라 영상을 "코드로 짜서 굽는" 모델이 됐고, 그 코드를 짜는 실력이 디자이너급으로 올라왔기 때문인가?
프론티어 모델이 직접 영상을 만드는 것이 아님!(확정)3-1. 프론티어 모델이 모션그래픽에 특화된 코드 작성 능력 향상
•
Opus 5.5는 텍스트만 출력하고, 애니메이션 코드를 쓰면 헤드리스 브라우저가 프레임을 한 장씩 캡처하고 ffmpeg가 MP4로 합침
•
설명자료
•
비유: 모델은 감독 겸 작가이고, 실제 촬영은 브라우저가 하는 구조
◦
Claude Opus 5.5는 비디오를 직접 생성하는 것이 절대 아님
◦
동영상은 헤드리스 브라우저가 프레임별로 렌더링하는 애니메이션 코드를 작성하고, ffmpeg가 이를 MP4로 인코딩하여 생성
•
Deedy Das(@deedydas)는 JavaScript, 헤드리스 브라우저 및 ffmpeg을 사용하여 코드로 렌더링된 비디오를 시연
•
LaunchVideo 팀은 이 시연을 영감의 원천으로 삼았다고 함
•
그래서 Sora나 Veo 같은 영상 생성 모델과 달리 글자가 깨지지 않고, 수정도 코드 한 줄이면 됨
•
Opus 5.5가 애니메이션을 코드로 쓰고 프레임을 설계해 렌더링까지 한다revid.ai는 설명도 같은 얘기
3-2. 모델이 Remotion, HyperFrames을 적극적으로 활용
Remotion, HyperFrames, Manim은 선택적으로 사용할 수 있는 프레임워크•
Remotion은 npx skills add remotion-dev/skills로 설치하는 에이전트용 스킬을 따로 배포
•
HyperFrames도 플러그인이나 스킬로 설치하고, Node.js 22+와 FFmpeg가 필요
•
실 사용자 후기: Opus 5.5가 터미널에서 필요한 스크립트를 모두 쓰고 스킬까지 스스로 설치한다고 분석
•
Remotion, HyperFrames과 같은 도구 없이도 가능한 방법?
◦
Playwright+ffmpeg로 HTML 한 파일을 렌더링하는 방식은 프레임워크 없이도 가능
3-3. 왜 지금 모션그래픽 쪽이 핫한가?
모델 쪽 변화
도구는 예전부터 있었고, 최근 달라진 것은 모델이 이를 혼자 세팅하고 다룰 수 있게 된 것•
Opus 5.5는 에이전트 코딩, 컴퓨터 사용, 지식노동에서 선두이고, Anthropic이 테스트 사례로 "그래픽과 완성도"로 최고점을 받은 게임 제작을 들었음
•
모션그래픽은 "코드 작성 + 렌더링 + 결과 확인 + 수정"의 반복이라, 긴 작업을 끝까지 끌고 가는 에이전트 능력이 곧 영상 품질에 결정적 역할
•
출시 전 외부 평가에 디자인 전문 평가기관(Frontier Design)이 포함됨
3-4. 관련 증거 (선별된 사례라는 점 포함)
•
•
대표 프롬프트는 울의 생각보다 길지 않음
◦
"15초 모션그래픽, 모션 디자이너 쇼릴처럼, 다 쏟아부어"skillry.dev 같은 한 줄
•
사용 라이브러리는 다양
◦
같은 사례 모음에서 Remotion과 함께 Three.js, GSAP, SVG, Canvasskillry.dev가 표기됨
3-5. AI기반 모션그래픽의 한계
•
코드 기반 장면은 모션그래픽이지 실사 영상이 아님
•
즉, html이나 리액트로 특정 장면을 만들어, 장면별로 연결해가면 render를 통해 mp4가 만들어지는 것
•
•
PPTX의 슬라이드처럼 보일 수 있고, 긴 작업은 장면 연결이 깨질수 있음
4. 플랫폼별 차이(ClaudeCode, Codex, Antigravity)
•
되도록 Agent에서 작업
•
26년 10월초 작업 퀄리티: ClaudeCode> Codex> Antigravity
•
온전히 모델의 성능은 언제든 뒤바뀔수 있고, 사용자 각 개인의 맞춤설정에 따른 차이도 발생할 수 있음
4-1.클로드 코드_Opus5.5, 추론강도 중
•
아래 코덱스와 비교해봤을때에도 확실히 모션 그래픽 다운 느낌이 살아있음
4-2. 코덱스_Astra6, 추론 강도High
•
위 클로드코드 결과물과 비교해봤을때에 모션그래픽보다는 유튜버들의 HTML렌더링 파일에 가까운 느낌을 받았음
[참고]모션 그래픽 생성시 참고 사이트
•
무료 음원 활용: https://pixabay.com/ko/music/
•
gemini활용 음원생성:https://ai.google.dev/gemini-api/docs/music-generation
•
•
•
•
•
모션그래픽 래퍼런스2:https://elements.envato.com/video-templates