주요 콘텐츠로 건너뛰기
AI 튜토리얼

Motion Video Director로 모션 그래픽과 편집 영상 제작

Claude Code, Codex 또는 Cursor와 함께 Motion Video Director를 설치하고 사용하는 방법을 알아보세요. After Effects나 Premiere Pro 없이 로컬에서 완성도 높은 영상을 기획하고, 애니메이션을 적용하고, 편집하고, 음성을 추가하고, 사운드를 디자인하고, 미리 보고, 렌더링할 수 있습니다.

약 10분 소요
Motion Video Director로 모션 그래픽과 편집 영상 제작

Motion Video Director는 코딩 에이전트를 모션 디자이너, 영상 편집자, 디렉터, 사운드 디자이너로 전환하는 프로덕션 스킬입니다. 코드를 사용해 애니메이션 설명 영상을 만들고, 토킹헤드 영상을 편집하고, 보이스오버 스크립트를 준비하고, 효과음을 동기화하고, 세로형, 와이드스크린 또는 정사각형 형식의 최종 MP4 영상을 렌더링할 수 있습니다.

이 프로젝트는 도우미 스크립트와 함께 SKILL.md의 프로덕션 플레이북을 사용합니다. 에이전트는 완성된 영상을 즉시 렌더링하는 대신 스크립트, 계획, 프리뷰에 대한 승인 단계를 따릅니다.

Motion Video Director 프로젝트 미리보기

Motion Video Director의 기능

이 스킬은 완전히 생성된 모션 그래픽과 기존 영상을 기반으로 한 편집을 모두 지원합니다. 애니메이션은 Canvas, SVG, Three.js 또는 GSAP으로 작성할 수 있으며, 영상 프로젝트에서는 컷, 펀치 줌, 자막, B-roll, 피사체 뒤에 배치되는 텍스트를 조합할 수 있습니다.

  • 모션 그래픽: 키네틱 타이포그래피, UI 목업, 커서 애니메이션, 스티커, 파티클, Lottie 요소, 3D 장면을 만듭니다.
  • 영상 편집: 컷, 자막, 펀치 줌, 속도 램프, 피사체 분리를 사용해 토킹헤드 클립을 편집합니다.
  • 보이스오버 기획: ElevenLabs에 맞는 스크립트를 작성하고 샷을 단어 단위 타이밍에 맞춥니다.
  • 사운드 디자인: 프레임에 동기화된 라이저, 임팩트, 휙 소리를 추가하고 보이스오버 구간의 음량을 낮추며 플랫폼 권장 음량을 목표로 합니다.
  • 로컬 렌더링: 코드, 헤드리스 Chrome, ffmpeg를 사용해 9:16, 16:9 또는 1:1 형식의 MP4 영상을 내보냅니다.

스킬 설치

옵션 1: 빠른 설치

권장 설치 방법은 npx skills 명령을 사용하는 것입니다. 프로젝트 폴더에서 실행하세요.

npx skills add Miftahul-Islam-Efaz/Motion-graphics-skill

Node.js가 설치되어 있어야 합니다. 설치 프로그램에서 사용하는 에이전트를 선택하면 스킬이 적절한 위치에 복사됩니다. 이 방법은 Claude Code, Codex, Cursor 및 스킬을 지원하는 기타 에이전트를 지원합니다.

옵션 2: Claude Code 플러그인

Claude Code에서 마켓플레이스 항목과 플러그인을 설치하세요.

/plugin marketplace add Miftahul-Islam-Efaz/Motion-graphics-skill
/plugin install motion-video-director@motion-graphics-skill

설치가 완료되면 Claude Code를 다시 시작하세요.

옵션 3: 수동 설치

  1. Code와 Download ZIP을 사용해 저장소를 다운로드한 다음 압축을 풉니다.
  2. 여러 프로젝트에서 사용하려면 skills/motion-video-director 폴더를 ~/.claude/skills/로 복사합니다.
  3. 특정 프로젝트에서만 사용하려면 프로젝트 내부의 .claude/skills/로 복사합니다.
  4. Claude Code를 다시 시작합니다.

Windows에서 전역 Claude Code 스킬 디렉터리는 일반적으로 C:\Users\<you>\.claude\skills\입니다. Codex, Cursor 또는 다른 호환 에이전트의 경우 폴더를 프로젝트에 복사한 뒤 다음 지침을 입력하세요.

Read skills/motion-video-director/SKILL.md and follow it for this video project.

환경 확인

Motion Video Director에는 Node.js 18 이상, ffmpeg, ffprobe, 헤드리스 Chrome이 포함된 Playwright가 필요합니다. 선택적 Python 도구를 사용하면 트랜스크립션, 피사체 분리, 스템 분리가 가능합니다.

  • 필수: Node.js 18+, ffmpeg, ffprobe, 헤드리스 Chrome이 포함된 Playwright.
  • 선택 사항: faster-whisper, rembg, demucs가 포함된 Python 3.10+.
  • 선택적 통합: ElevenLabs, Firecrawl, Freesound, Pexels, Pixabay, LottieFiles용 API 키 또는 MCP 서버.

프리플라이트 스크립트를 실행하면 설치된 종속성과 누락된 종속성을 확인할 수 있습니다.

bash skills/motion-video-director/scripts/preflight.sh

API 키는 git에서 제외되는 로컬 .env 파일에 저장됩니다. 저장소에는 빈 키 입력란이 있는 환경 파일을 생성하는 create_env.sh와 기존 키 파일을 정리된 .env로 변환하는 normalize_env.py도 포함되어 있습니다.

첫 영상 만들기

스킬을 설치한 뒤 원하는 영상을 자연어로 설명하세요. 시각적 참고 자료가 있다면 첨부하세요. 예를 들면 다음과 같습니다.

내 SaaS를 위한 30초 9:16 출시 릴 영상을 만들어 줘. 참고 자료를 첨부했어.

기존 영상을 기반으로 편집을 요청할 수도 있습니다.

내 원본 토킹헤드 클립을 자막, 펀치 줌, B-roll이 포함된 릴 영상으로 편집해 줘.

제품 중심 프로젝트라면 원하는 스타일과 길이를 알려주세요.

우리 대시보드를 소개하는 45초 제품 설명 영상을 만들어 줘. 깔끔한 UI 애니메이션과 은은한 사운드 디자인으로.

프로덕션 워크플로 따르기

에이전트는 최종 렌더링 전에 중요한 결정을 검토할 수 있도록 단계별 프로세스를 사용합니다.

  1. 브리프: 에이전트가 참고 자료, 스토리, 타깃 오디언스, 형식, 길이를 수집합니다.
  2. 보이스오버 스크립트: ElevenLabs에 바로 붙여 넣을 수 있는 스크립트를 작성합니다. MP3를 생성해 다시 보내면 됩니다.
  3. 스토리보드: 모든 샷을 보이스오버의 단어에 맞춰 타이밍을 설정합니다.
  4. 제작: 장면을 코드로 애니메이션화하고 제공된 영상이 있으면 편집합니다.
  5. 프리뷰: 전체 렌더링 전에 문제를 발견할 수 있도록 각 장면의 콘택트 시트를 렌더링합니다.
  6. 렌더링 및 믹싱: 사운드 디자인과 음량 정규화를 적용해 최종 영상을 내보낸 후 품질 보증 체크리스트를 진행합니다.

최종 렌더링 전에 스크립트, 기획안, 프리뷰를 승인합니다. 워크플로는 진행 상황을 PROGRESS.md에 기록하므로, 새 세션에서 이전 세션이 중단된 지점부터 계속할 수 있습니다.

주요 제작 기능 살펴보기

연출과 페이싱

이 플레이북은 처음 3초의 훅, 페이싱, 샷 유형, J컷, L컷, 매치 컷, 콜투액션 구성을 다룹니다. 또한 빠른 템포의 릴스부터 절제된 기업용 영상까지, 5단계의 편집 강도를 정의합니다.

애니메이션과 모션 그래픽

생성형 비주얼의 경우 이 스킬은 키네틱 타이포그래피, 3D 텍스트, UI 목업, 커서 애니메이션, 스티커, 파티클, Lottie 콘텐츠, Three.js 제품 샷을 지원합니다. 또한 이징, 스태거링, 오버슈트 같은 애니메이션 원칙을 적용합니다.

영상 소스와 피사체 처리

촬영 영상의 경우 이 워크플로는 RVM 및 SAM2 같은 도구를 사용해 펀치 줌, 캡션, 속도 램프, 피사체 분리를 추가할 수 있습니다. 편집 의도에 따라 피사체 뒤에 캡션을 배치할 수도 있습니다.

색상, 레이아웃, 접근성

가이드에는 60-30-10 색상 접근법, WCAG 대비 기준, 9:16 플랫폼을 위한 안전 영역이 포함되어 있습니다. 이러한 고려 사항은 플랫폼에 맞는 형식에서 중요한 텍스트와 시각 요소를 읽기 쉽게 유지하는 데 도움이 됩니다.

보이스오버와 사운드

보이스오버 스크립트는 ElevenLabs용으로 준비하고, faster-whisper는 단어 단위 타임스탬프를 제공할 수 있습니다. 사운드 디자인에는 개별 프레임에 동기화된 라이저, 임팩트, 휙 소리가 포함될 수 있으며, 음성 아래에 덕킹을 적용하고 -14 LUFS 및 -1.5 dBTP를 목표 믹스로 사용합니다.

헬퍼 스크립트 사용

저장소에는 제작 워크플로를 지원하는 여러 스크립트가 포함되어 있습니다.

  • preflight.sh는 Node.js, ffmpeg, Playwright, Python 도구, API 키를 확인합니다.
  • preview.mjs는 선택한 시간 범위를 빠르게 검토할 수 있도록 콘택트 시트로 렌더링합니다.
  • analyze_ref.sh는 레퍼런스 영상을 프레임, 컷, 오디오로 분해합니다.
  • create_env.sh는 비어 있는 API 키 입력란이 있는 .env 파일을 생성합니다.
  • normalize_env.py는 기존 키 파일을 정리된 .env로 변환합니다.

더 나은 결과를 위한 고급 팁

  • 레퍼런스를 일찍 제공하세요: 시각적 예시를 첨부해 브리프와 스토리보드가 의도한 스타일을 반영하도록 하세요.
  • 출력 형식을 지정하세요: 영상이 9:16, 16:9, 1:1 중 어떤 형식이어야 하는지 밝히고 원하는 길이도 포함하세요.
  • 단계별로 검토하세요: 전체 렌더링 전에 스크립트, 스토리보드, 콘택트 시트 프리뷰 승인 단계를 사용해 문제를 발견하세요.
  • 소스 에셋을 정리해 두세요: 에이전트가 영상, 오디오, 로고, 글꼴 및 기타 레퍼런스를 정확하게 반영할 수 있도록 명확히 구분하세요.
  • 필요할 때 선택 도구를 사용하세요: 트랜스크립션에는 faster-whisper, 분리 작업에는 rembg, 스템 분리에는 demucs를 추가하세요.
  • 빌드 전에 환경을 확인하세요: 프로젝트 후반에 렌더링 종속성 누락을 발견하지 않도록 먼저 프리플라이트 스크립트를 실행하세요.
  • 진행 로그를 바탕으로 계속 작업하세요: 새 세션에서 작업을 재개할 때 PROGRESS.md를 확인하세요.

결론

Motion Video Director는 Claude Code, Codex, Cursor 또는 터미널을 사용할 수 있는 다른 코딩 에이전트로 완성도 높은 영상을 제작하는 구조화된 방법을 제공합니다. 스킬을 설치하고 프로젝트를 설명한 다음, 스크립트와 스토리보드를 검토하고 프리뷰를 확인하면 로컬 렌더링 워크플로가 최종 영상을 제작합니다. After Effects나 Premiere Pro 없이도 코드로 생성한 모션 그래픽과 편집 영상을 모두 지원합니다.