개요
Pixel2Motion은 PNG·JPG·WebP·화면 캡처처럼 래스터로만 남은 로고를 매끄러운 SVG로 재구성하고, 모션을 입힌 HTML·GIF·영상 프리뷰까지 만드는 오픈소스 스킬이다. Codex와 Claude 같은 코딩 에이전트가 SKILL.md와 참조 문서를 읽고, 저장소의 Python 스크립트로 벡터 피팅·렌더링·모션 캡처를 수행하도록 설계됐다. 정적 벡터를 먼저 원본 래스터와 대조해 QA한 뒤 애니메이션을 작성하며, IoU 점수보다 곡선의 매끄러움과 구조를 최종 판단 기준으로 둔다. 결과물과 함께 피팅 오버레이, 모션 프레임, 모션 스트립 등 검증 근거도 남긴다.
핵심 포인트
- 입력 래스터에서 최소·매끄러운 SVG를 만들고, 마크·점·워드마크를 독립적으로 다룰 수 있는 시맨틱 요소로 분리한다.
- 벡터 후보를 원본과 겹쳐 크기, 점 위치, 워드마크 베이스라인, 획 굵기를 반복 확인한다.
- IoU는 진단 지표로 활용하지만, IoU가 높아도 들쭉날쭉한 트레이스는 반려하고 더 단순하면서 매끄러운 벡터를 선택한다.
logo.svg,motion.css, 의존성 없는logo_motion.html, 모션 브리프·타임라인·이징 토큰을 담은motion_spec.md를 생성한다.outputs/fit_iterations/,outputs/motion_frames/,outputs/motion_strip.png,outputs/final_render.png등에 피팅 및 모션 QA 증거를 저장한다.- Python 3.10 이상, Pillow·NumPy·Playwright, Chrome 또는 Chromium이 필요하며 MIT 라이선스로 공개됐다.
왜 중요한가
로고의 벡터화와 애니메이션을 별개 작업으로 처리하는 대신, 원본 일치성 검증과 모션 품질 검사를 포함한 하나의 에이전트 워크플로우로 묶었다. 특히 수치 지표만 높이는 것이 아니라 곡선의 매끄러움과 구조를 함께 판단하고, 중간 산출물을 증거로 남기는 방식은 시각 결과물을 생성하는 스킬의 품질 기준을 더 검토 가능하게 만든다.
후속 링크와 키워드
- 원문: https://discuss.pytorch.kr/t/pixel2motion-svg-ai/11239
- GitHub 저장소: https://github.com/nolangz/pixel2motion
- 인터랙티브 데모: https://nolangz.github.io/pixel2motion/
- 홈페이지: https://www.pixel2motion.com
- 자매 프로젝트(Pixel2SVG-HTML): https://github.com/nolangz/pixel2svg-html
- 라이선스: https://github.com/nolangz/pixel2motion/blob/main/LICENSE
- 관련 노트: 2026-07-13-pytorchkr-topic-11206-skills-for-design-engineers-ui, 2026-07-10-emilkowalski-skills-for-design-engineers, moc-ai-coding, moc-dev-tools
- 키워드:
raster-to-vector,SVG,logo animation,agent skill,SKILL.md,semantic SVG,IoU,Playwright,deterministic QA