# \#logo-animation **URL:** https://discuss.pytorch.kr/tag/logo-animation/8484.md [최신](https://discuss.pytorch.kr/latest.md) · [카테고리](https://discuss.pytorch.kr/categories.md) · [태그](https://discuss.pytorch.kr/tags.md) --- ## [Pixel2Motion: 래스터 로고를 매끄러운 SVG 애니메이션으로 바꾸는 AI 스킬](https://discuss.pytorch.kr/t/pixel2motion-svg-ai/11239)
**Author:** [@9bow](https://discuss.pytorch.kr/u/9bow)\ **댓글:** 0\ **마지막 업데이트:** [7월 15, 2026, 9:30오전 UTC](https://discuss.pytorch.kr/t/pixel2motion-svg-ai/11239 "2026-07-15T09:30:25Z")
Pixel2Motion 소개 Pixel2Motion은 PNG, JPG, WebP나 화면 캡처처럼 래스터 형태로만 존재하는 로고를 매끄러운 SVG로 재구성하고, 그 위에 모션을 입혀 애니메이션 HTML과 GIF, 영상 프리뷰까지 만들어내는 오픈소스 스킬입니다. 로고가 벡터 원본 없이 이미지 파일로만 남아 있는 경우는 흔한데, 이를 손으로 다시 벡터로 따고 애니메이션까지 붙이는 작업은 시간이 많이 듭니다. Pixel2Motion은 이 과정을 래스터 입력에서 시작해 벡터 변환, 모션 안무, 프리뷰 생성까지 하나의 워크플로우로 이어 줍니다. Pixel2Motion은 Codex와 Claude 같은 코딩 에이전트가 실행하도록 만들어진 스킬(skill)이라는 점이 특징입니다. 에이전트는 저장소의 SKILL.md 와 참조 문서를 읽어 애니메이션 원칙과 모션 성격을 파악한 뒤, 저장소에 포함된 파이썬 스크립트로 벡터 피팅과 렌더링, 모션 캡처를 수행합니다. 핵심은 애니메이션을 붙이기 전에 정적 벡터를 QA로 검증한다는 점입니다. 개발자는 IoU(Intersection over Union)를 진단 지표로 활용하지만, 최종 판정 기준은 IoU 점수가 아니라 곡선의 매끄러움과 구조입니다. Pixel2Motion은 IoU가 높더라도 들쭉날쭉한 트레이스라면, 복잡도가 낮으면서 로고를 더 잘 설명하는 매끄러운 벡터를 선택해 이를 반려합니다. 이 워크플로우가 만들어내는 결과물은 최종 정적 벡터인 logo.svg, 시맨틱 SVG 요소를 대상으로 하는 안무가 담긴 motion.css, 재생과 슬로우 모션, 속도 조절, QA 훅을 갖춘 의존성 없는 logo\_motion.html, 그리고 모션 브리프와 타임라인, 이징 토큰을 정리한 motion\_spec.md 입니다. 본 게시물에서는 Pixel2Motion의 래스터에서 모션까지 이어지는 동작 방식과 결과물, 설치 및 사용법을 정리합니다. Pixel2Motion의 동작 방식: 래스터에서 모션까지 Pixel2Motion의 전체 흐름은 래스…