Communitygithub.com

yanjigb/article-to-motion-graphics

기사나 URL을 세로형 모션 그래픽 비디오(키네틱 타이포그래피, 데이터 차트, 자연스러운 음성 해설 및 배경 음악 포함)로 변환합니다. 블로그 포스트, 연구 논문, 사례 연구 또는 랜딩 페이지 카피를 9:16 소셜 비디오로 만들고자 할 때 사용합니다.

article-to-motion-graphics란 무엇인가요?

이 스킬은 사용자가 제공한 기사, 블로그 게시물, 연구 논문, 사례 연구 또는 랜딩 페이지 URL을 전문적인 세로형 모션 그래픽 비디오로 변환하는 AI 에이전트용 도구입니다. 주로 Claude Code, Cursor, Codex 등 AI 코딩 에이전트 환경에서 작동하며, 명확한 정보 전달과 가독성 좋은 타이포그래피, 자연스러운 속도의 음성 해설을 우선시합니다. 이 스킬은 10단계의 강제 워크플로우를 통해 브리핑 확인, 소스 분석, 스토리보드 작성, 모션 그래픽 제작, 음성 해설 및 배경 음악 생성, 오디오 믹싱, 최종 품질 검사, 결과물 전달을 자동화합니다. 특히 음성 해설 스크립트 작성을 위한 TTS 프롬프터, 음악 생성을 위한 뮤직 프롬프터 등 내장 템플릿과 스크립트를 활용하며, FFmpeg를 이용한 정밀한 오디오 믹싱과 ffprobe를 통한 최종 검증을 지원합니다. 기본적으로 9:16 비율, 1080×1920 해상도, 네이비/차콜 배경에 사이언/블루/오렌지 악센트의 깔끔한 디자인을 적용하며, 모든 데이터와 인용은 원본 소스에 충실합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yanjigb/article-to-motion-video-claude-skills/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

기사 → 모션 그래픽 비디오

기사에서 정보가 명확하고, 타이포그래피가 읽기 쉬우며, 자연스러운 속도의 음성 해설이 포함된 세로형 익스플레이너 비디오를 만듭니다. 사용자가 모션 그래픽만 요청한 경우 실제 인물 영상을 자동으로 사용하지 않습니다.

필수 프로세스

  1. 브리핑 확인. URL 또는 원본 텍스트, 음성 언어, 화면 비율, 플랫폼, 원하는 길이, 음성 해설/음악 필요 여부를 기록합니다. 기본값: 9:16, 1080×1920, 전체 화면 모션 그래픽, 기사 언어의 음성 해설, 가벼운 기악 배경 음악.
  2. 소스 읽기. URL이 있는 경우 적절한 리서치/페치 프로세스를 사용하여 기사 내용을 읽습니다. 숫자, 핵심 주장, 결론을 추출합니다. 데이터를 추측하지 않습니다. 적절한 경우 스토리보드나 엔드 카드에 기사 출처를 인용으로 사용합니다.
  3. 짧은 스토리보드 작성. 6~10개의 정보 상태로 나눕니다. 각 상태에는 예상 길이, 하나의 주요 메시지, 화면 텍스트, 움직임 형태, 해당 음성 해설 문장이 포함되어야 합니다. 한 번에 하나의 초점을 유지합니다. 한 화면에 여러 문장을 넣지 않습니다.
  4. 음성 해설에 따른 길이 선택. 자연스러운 말하기 스크립트를 작성합니다. 에세이 스타일로 쓰지 않습니다. 분당 135~165단어로 추정합니다. 스크립트가 비디오보다 길면 비디오를 늘리거나 스크립트를 줄이는 것을 우선시하며, 사용자가 요청하지 않는 한 속도를 1.1배 이상 높이지 않습니다. 음성 해설은 완전한 문장으로 끝나야 하며, 비디오 마감 시점에서 잘리지 않아야 합니다.
  5. 모션 그래픽 제작. 자체 포함된 소스 코드로 배경, 그리드, 도형, 카운터, 막대, 퍼널, 네트워크 다이어그램 또는 UI 목업을 만듭니다. 유니코드를 지원하는 로컬 폴백 글꼴을 사용합니다. 텍스트를 안전 영역 내에 유지하고, 휴대폰 화면에서 읽을 수 있는 충분한 글자 크기를 사용하며, 마지막에 인용/엔드 카드를 배치합니다.
  6. 음성 해설 생성. 음성 도구를 호출하기 전에 tts-prompter를 읽습니다. 일관된 음성을 사용하고, 올바른 language_code를 설정하며, turns[].text에는 읽을 내용만 포함합니다. 음성 지침은 turns[].style에 넣습니다. 텍스트에 무대 지시나 화자 레이블을 넣지 않습니다.
  7. 배경 음악 생성. 음악 도구를 호출하기 전에 music-prompter를 읽습니다. 내레이션이 있는 비디오의 경우 '악기 전용, 보컬 없음'을 요청하고, 편곡은 성기게 하며, 음성을 압도하는 리드 멜로디가 없어야 합니다. 루프/잘라내기에 충분히 긴 트랙 하나를 만듭니다. 비디오가 180초 미만이면 여러 개로 나누지 않습니다.
  8. 오디오 믹싱. FFmpeg를 사용하여 음악을 비디오 길이에 맞게 자르거나 루프하고, 음성 해설을 자연스러운 속도로 유지하며, 배경 음악을 음성보다 약 12~20% 낮춘 후 amix와 alimiter를 사용합니다. 음성이 비디오보다 길면 비디오를 음성 길이에 맞게 다시 렌더링하거나 스토리보드를 조정합니다. 내레이션 부분을 조용히 잘라내지 않습니다.
  9. 검사. ffprobe를 사용하여 해상도, 길이, 프레임 속도, 코덱, 오디오 스트림을 확인합니다. 최소 첫 번째 프레임, 각 장면 그룹 중간의 프레임, 마지막 프레임을 추출합니다. 텍스트가 잘리지 않았는지, 애니메이션에 읽기 위한 멈춤이 있는지, 음성 해설이 완전한 문장으로 끝나는지, 음악이 음성을 덮지 않는지 확인합니다.
  10. 인계. 완성된 MP4 파일을 먼저 전송합니다. 재사용 가능한 소스를 만든 경우 추가로 소스 스크립트를 전송합니다. 해상도, 비율, 길이, 프레임 속도, 음성 해설 언어, 오디오 상태를 명확히 알립니다.

기본 크리에이티브 설정

  • 스타일: 네이비/차콜 배경, 세련된 그리드, 사이언/블루/오렌지 악센트, 굵은 타이포그래피, 깔끔하고 의도적인 움직임.
  • 소셜 구조: 처음 1~2초에 훅; 이후 숫자나 프로세스; 마지막에 핵심 요점과 출처.
  • 각 장면에는 등장, 읽기 유지, 퇴장/전환이 있습니다. 동시에 관련 없는 여러 애니메이션이 실행되지 않도록 합니다.
  • 원본이 영어인 경우 영어를 우선합니다. 필요한 경우 DR, dofollow, SaaS 같은 기술 용어는 그대로 유지합니다.
  • 로고, 브랜드, 숫자, 인용을 지어내지 않습니다. 정확한 브랜드 자산이 필요하면 요청하거나 제공된 자산을 사용합니다.

스토리보드 예시

Scene 1 — Hook (0:00–0:05)
Visual: 큰 숫자와 전환 화살표.
On-screen: "463 tested → 22 worth submitting to"
VO: 주요 모순을 설명하는 짧은 문장.

Scene 2 — Method (0:05–0:12)
Visual: 퍼널/카운터.
On-screen: 입력 및 중복 제거 후 지표.
VO: 목록 생성 방법 설명.

Scene 3 — Filter (0:12–0:22)
Visual: 제외된 그룹에 대한 막대 차트 또는 카드.
VO: 가장 중요한 그룹만 언급.

Final — Takeaway (비디오 끝)
Visual: 큰 결론 문장, 아래에 작은 출처 인용.
VO: 결론 및 권장 조치.

함께 제공되는 리소스

  • templates/storyboard_prompt_template.md를 사용하여 이미지/비디오 AI 도구용 표준화된 영어 스토리보드 및 프롬프트를 생성하세요. 템플릿에는 타임코드, 정확한 화면 텍스트, 음성 해설, 움직임, 연속성, QA가 필요합니다.
  • examples/saas-demand-generation-flywheel.md를 참조하여 숫자, 주의 사항 및 인용이 포함된 SaaS 사례 연구 기반의 완전한 스토리보드/프롬프트 예제를 확인하세요.
  • scripts/mix_video_audio.sh를 사용하여 음악을 루프/자르고, 배경 음악을 낮추고, 내레이션과 믹싱한 후 출력을 확인하세요. 사용하기 전에 bash scripts/mix_video_audio.sh --help를 실행하세요.

관련 스킬