Claude Code 오픈소스 영상 제작 도구 3선: 픽셀 아트부터 제품 홍보 영상까지

오픈소스 프로젝트들이 코딩 에이전트를 영상 제작과 모션 그래픽 워크플로에 활용하고 있습니다. Claude Code 또는 관련 에이전트 워크플로와 연계해 영상 효과, 제품 출시 프로모션, 모션 디자인을 제작하는 검증된 오픈소스 도구 3종을 정리했습니다.

이미지 출처: https://github.com/patch-gg/pixelfx

세 프로젝트는 서로 다른 코드 기반 워크플로를 제공합니다. pixelfx는 스프라이트 시트를 출력할 수 있고, huashu-motion과 mg-styles-15는 브라우저 기반 화면 렌더링과 로컬 오디오 생성을 지원합니다. 공개된 소스는 코드 수준 수정을 가능하게 합니다.

pixelfx: 244종 코드 기반 픽셀 효과와 스프라이트 시트 익스포트

patch-gg/pixelfx는 MIT 라이선스로 배포되는 픽셀 아트 효과 및 애니메이션 라이브러리입니다. 화염, 폭발, 마법, 충격 등 244종의 시각 효과를 외부 종속성 없는 자바스크립트 코드로 구현했습니다.

• Claude Code 전용 스킬 제공: /plugin marketplace add patch-gg/pixelfx 명령이나 skills/pixelfx 경로 설치를 통해 Claude Code 안에서 직접 신규 효과 초안 작성, 렌더링, 시각적 검증 루프를 자동화할 수 있습니다.
• 게임 엔진용 스프라이트 시트 출력: node tools/render.mjs ice/frost-nova --sheet 명령으로 투명 PNG 시트와 Aseprite 호환 JSON 메타데이터를 내보냅니다. Godot, Unity, Phaser 등 주요 엔진으로 즉시 가져올 수 있습니다.
• 액팅 및 타이밍 제어: 61종의 캐릭터 상호작용 효과는 동작 준비(wind-up), 타격 정지(hit freeze), 반동, 회복 단계가 데이터로 정의되어 있습니다. 커스텀 캐릭터에는 공개된 타이밍 데이터를 적용할 수 있으며, 기본 캐릭터 몸체에 그려지는 효과는 배포 전에 다시 생성해야 할 수 있습니다.

huashu-motion: 브라우저 편집기와 로컬 오디오 합성 기반 제품 출시 영상

alchaincyf/huashu-motion은 코딩 에이전트를 위한 제품 홍보 영상 제작 전용 스킬입니다. Claude Code 및 Codex 환경에서 에이전트 스킬 프로토콜을 준수하며 실행됩니다.

• 원클릭 파이프라인: 제품 분석 후 3가지 콘셉트 제안, ABC 텍스트 기보법 기반 배경음악 작곡, GSAP, Canvas, Three.js 등을 사용할 수 있는 index.html 생성까지 자동으로 수행합니다.
• 인브라우저 포인트 앤 클릭 수정: 웹 브라우저 기반 스튜디오 에디터에서 화면 요소를 직접 클릭하고 수정 지시를 남기면, 에이전트가 해당 타임라인과 프레임 스크린샷을 분석해 특정 소스 코드 위치만 정밀 수정합니다.
• 로컬 렌더링 환경 요구사항: 로컬에 설치된 Chrome, Chromium 또는 Edge를 이용해 프레임을 캡처하고 FFmpeg로 영상을 내보내고 오디오를 합성합니다. 실행을 위해 Node.js 22 이상, 호환 브라우저, FFmpeg 설치가 필요합니다. 배경음악은 외부 유료 API 호출 없이 기기 로컬에서 생성됩니다.

mg-styles-15: Claude Opus 5.5가 코드로 구현한 15가지 모션 그래픽 스타일

Vincentwei1021/mg-styles-15는 Claude Opus 5.5가 단일 프롬프트에서 코드로 생성한 10초 분량 모션 디자인 영상 15종과 전체 소스 코드, 프롬프트를 공개한 프로젝트입니다.

• 완전 공개된 구현체: 프레임 바이 프레임 라인 보일(Line Boil), 아이소메트릭 2.5D, 플랫 벡터, 사이버펑크 HUD, 네온 신스웨이브 등 15가지 서로 다른 장르 스타일의 HTML 소스와 스타일 명세서가 포함되어 있습니다.
• 코드 기반 비디오 및 사운드: 비디오 생성 모델을 사용하지 않고 SVG, Canvas, WebGL을 웹 브라우저에서 실행해 매 프레임을 캡처합니다. 오디오 역시 103개 악기 샘플을 활용하는 audio.py 스크립트를 통해 로컬에서 합성됩니다.
• 렌더링 의존성: 브라우저 렌더러로 동작하는 14개 스타일과 달리, 3D 렌더 스타일(04-3d-render)은 블렌더(Blender) 실행 환경을 요구하며 생성된 영상 위에 웹 기반 타이포그래피와 필름 그레인을 합성하는 구조를 취합니다.

출처

• patch-gg/pixelfx GitHub 저장소: https://github.com/patch-gg/pixelfx
• alchaincyf/huashu-motion GitHub 저장소: https://github.com/alchaincyf/huashu-motion
• Vincentwei1021/mg-styles-15 GitHub 저장소: https://github.com/Vincentwei1021/mg-styles-15
• 원문 X 게시글 (@creatorzz): https://x.com/creatorzz/status/2116853589339771342