kaventro/motion-designer

어떤 프로젝트인가요?

핵심 기능

• 01앱의 실제 인터페이스를 HTML로 재구성해 기기 프레임이나 창 안에 넣습니다.
• 02마디 단위로 정확하게 편집하고 음악의 박자에 맞춰 움직임을 조정합니다.
• 03렌더링 전에 타이머, 난수, 반복 재생 오류가 있는지 프레임을 검사합니다.
• 04headless Chrome과 ffmpeg를 사용해 H.264 동영상을 렌더링하고, 음소거 루프 영상과 포스터도 생성합니다.
• 05Chatterbox나 Kokoro 같은 로컬 모델로 보이스오버를 추가하고, 음악 볼륨을 낮춘 상태에서 -16 LUFS로 믹싱합니다.

활용 사례

• iOS 앱이나 데스크톱 앱의 웹사이트에 사용할 30초짜리 출시 영상 제작
• 캐릭터와 회원 가입 유도 문구가 포함된 짧은 스토리형 광고 제작
• 곡의 드롭 부분에 핵심 장면이 맞춰지도록 홍보 동영상 편집
• 동영상 편집기 대신 코드로 데이터 영상이나 설명 영상 제작

빠른 시작

1. 1

   Claude Code용 스킬 설치하기

   npx skills add kaventro/motion-designer
2. 2

   이 컴퓨터에 어떤 도구가 설치되어 있는지 확인하기

   bash skills/motion-designer/scripts/doctor.sh
3. 3

   앱의 저장소에서 스킬 실행하기

   /motion-designer

사용 전 알아둘 점

• !영상을 렌더링하려면 Node 22 이상, Chrome, ffmpeg, Python 3이 미리 설치되어 있어야 합니다.
• !선택 사항인 오리지널 음악(약 11GB)과 보이스오버 모델(약 4GB 이상)은 다운로드 용량이 큽니다.

토픽

자주 묻는 질문

motion-designer은(는) 무엇인가요?

Claude Code와 Codex용 에이전트 스킬로, 앱의 실제 UI를 음악에 맞춰 편집하고 로컬에서 렌더링해 출시 영상과 짧은 동영상을 만듭니다. motion-designer는 코드로 출시 영상, 타이틀, 설명 영상, 데이터 영상과 음악에 맞춘 그래픽을 제작하는 에이전트 스킬입니다. 앱의 인터페이스를 HTML로 재구성해 iPhone 프레임이나 노트북 창 안에 배치하고, 음악의 박자에 맞춰 움직임을 조정합니다. 결과물을 프레임 단위로 확인한 뒤 headless Chrome과 ffmpeg로 동영상 렌더링을 진행합니다.

motion-designer은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

motion-designer은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

motion-designer은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. motion-designer의 마지막 커밋은 2026년 10월 1일입니다.

motion-designer은(는) 어디에 사용할 수 있나요?

iOS 앱이나 데스크톱 앱의 웹사이트에 사용할 30초짜리 출시 영상 제작 캐릭터와 회원 가입 유도 문구가 포함된 짧은 스토리형 광고 제작 곡의 드롭 부분에 핵심 장면이 맞춰지도록 홍보 동영상 편집 동영상 편집기 대신 코드로 데이터 영상이나 설명 영상 제작

motion-designer는 어떻게 설치하나요?

Claude Code용 스킬 설치하기: npx skills add kaventro/motion-designer 이 컴퓨터에 어떤 도구가 설치되어 있는지 확인하기: bash skills/motion-designer/scripts/doctor.sh 앱의 저장소에서 스킬 실행하기: /motion-designer

motion-designer은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/kaventro/motion-designer