편집 앱 없이 코드로 런칭 영상을? 클로드 코드 스킬 claude-motion-design 정리

클로드
편집 앱 없이 코드만으로 런칭 영상을 뽑아 주는 클로드 코드 스킬이 X에서 화제가 됐어요. 오픈소스 「claude-motion-design」이 무엇이고 어떻게 쓰는지, 비용에서 주의할 점은 무엇인지 카드로 정리했어요.

무엇인가: HTML로 그리고, 프레임 단위로 렌더링

claude-motion-design은 클로드 코드(Claude Code)에 설치하는 모션 디자인 스킬이에요. HTML로 화면을 짜고 Playwright로 프레임을 하나씩 캡처한 뒤 ffmpeg로 합쳐 영상을 만들어요. 애프터이펙트 같은 편집 앱 없이 코드로 영상을 뽑는 구조예요.

작동 방식: 모션블러부터 효과음 타이밍까지

프레임마다 모션블러를 넣고, 음악의 실제 드롭 지점에 맞춰 장면을 전환해요. 효과음은 소리의 피크 지점에 맞춰 배치해요. 컷 편집과 사운드 타이밍까지 코드로 처리하는 셈이에요.

제작 사례: 런칭 영상 24초, 60fps

깃허브에 공개된 예시 영상은 24초, 60fps예요. 개발사 Howseen은 이 스킬로 자사 런칭 영상을 5번 수정해 완성했고 「Claude Opus 5.5」를 썼다고 설명해요. 이 두 가지는 개발사의 주장이라 따로 확인되지는 않았어요.

설치 3단계

• skill/motion-design 폴더를 ~/.claude/skills 에 복사해요.
• playwright, numpy 같은 패키지와 크로미움을 설치해요.
• 클로드 코드에서 영상을 요청하거나 /motion-design 을 실행해요.

비용과 주의점

저장소는 MIT 라이선스라 도구 자체는 무료예요. 하지만 클로드 코드 사용료는 따로 들어요. 또 예시에 쓰인 음악, 효과음, 로고는 그대로 쓰기 전에 라이선스를 꼭 확인해야 해요. 깃허브 스타는 원문 게시 시점에 627개였고, 2026년 10월 25일 기준 642개예요.

마무리

말로 고쳐 가며 영상을 만드는 방식이 실제로 어디까지 쓸 만한지는 직접 돌려 봐야 알 수 있어요. 편집 앱 대신 코드로 영상 만들어 볼 생각 있으세요? 의견이나 경험을 댓글로 나눠 주세요.

출처

원문 게시물 (X): @dopamine_crypto

깃허브: howseen-ai/claude-motion-design (MIT 라이선스)
이미지는 AI 생성 (표지·2번 카드 사진)