Pixel2Motion은 래스터 로고 이미지를 깨끗한 SVG 구조로 재구성한 뒤, 그 SVG에 모션을 입혀 HTML 쇼케이스와 GIF·비디오 프리뷰까지 만드는 AI 스킬이다. Codex와 Claude가 읽는 SKILL.md, 참조 문서, 렌더링·QA 스크립트를 함께 제공해 “이미지 하나 → 검증 가능한 로고 모션 패키지” 흐름을 표준화한다.
처리 흐름
Pixel2Motion은 단순히 이미지를 자동 벡터화하는 도구가 아니다. 정적 벡터 피팅과 모션 설계를 분리해, 마지막 프레임으로 쓸 SVG가 먼저 품질 기준을 통과해야 애니메이션을 얹는다.
- 래스터 로고를 분석해 부품, 기준선, 획 두께, 점 위치를 파악한다.
logo.svg를 만들고 원본 이미지와 오버레이 렌더를 비교한다.- SVG path의 부드러움과 구조를 점검한다.
motion.css로 semantic SVG id에 맞춘 안무를 작성한다.logo_motion.html, 프레임 캡처, 모션 스트립, QA 리포트를 생성한다.
산출물
| 파일 | 역할 |
|---|---|
logo.svg | 모션 가능한 최종 정적 벡터 |
motion.css | 파트별 타임라인, easing, reveal 규칙 |
logo_motion.html | replay, slow motion, 속도 조절이 있는 HTML 데모 |
motion_spec.md | 모션 브리프와 QA 노트 |
outputs/fit_iterations/*.png | 원본 대비 벡터 피팅 증거 |
outputs/motion_frames/*.png | 결정론적 모션 프레임 캡처 |
이 산출물 구성은 브랜드 작업에서 중요하다. “AI가 그럴듯하게 움직였다”가 아니라, 로고 정합성·최종 프레임·전환 구간을 검토할 수 있는 증거가 남는다.
적합한 사용 사례
Pixel2Motion은 다음 작업에 유용하다.
- 스타트업·제품 로고의 간단한 reveal 애니메이션 제작
- 정적 로고를 웹 랜딩 페이지, 데모 영상, 소셜 클립에 쓸 모션 자산으로 변환
- AI가 만든 SVG가 원본 로고와 얼마나 맞는지 검증 가능한 워크플로 구축
- 디자이너와 개발자가 같은 HTML·CSS 산출물을 두고 리뷰하는 브랜드 모션 작업
복잡한 캐릭터 애니메이션, 3D 로고, 고급 모션그래픽 편집을 대체하는 도구는 아니다. 강점은 “작고 구조적인 로고 모션”을 반복 가능한 파일 세트로 만드는 데 있다.
관련 문서
- agent-skills — AI 에이전트의 능력을 확장하는 스킬 시스템
- stitch-skills — Google Stitch 워크플로를 에이전트에 주입하는 스킬 라이브러리
- motion-anything — 자연어 기반 모션 생성 엔진
참고 자료
- nolangz/pixel2motion — GitHub 공식 저장소