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의 전체 흐름은 래스터 로고를 매끄러운 최소 SVG로 바꾸고, 그 SVG에 로고 애니메이션을 입힌 뒤, 상호작용이 가능한 HTML 모션 데모로 내보내는 순서로 진행됩니다. 이 과정에서 벡터는 임의로 만들어지지 않고, 원본 래스터와 반복적으로 대조하며 검증됩니다.
위 이미지는 CueRecord 로고를 대상으로 한 피팅 과정으로, 원본 래스터에서 시작해 QA 체크포인트를 거쳐 최종 벡터에 도달하기까지를 보여줍니다. 청록색 오버레이는 최종 결과물이 아니라 QA 체크포인트로, 벡터 후보를 원본 래스터와 겹쳐 마크의 크기, 점의 위치, 워드마크의 베이스라인, 획의 굵기가 유지되는지를 반복해서 비교합니다. 이 검증을 통과한 벡터는 마크와 점, 워드마크가 각각 독립적으로 다룰 수 있는 요소로 분리된 시맨틱 SVG가 되고, 이 SVG가 애니메이션의 최종 프레임 기준이 됩니다. 정적 피팅 방법론 자체는 자매 프로젝트인 Pixel2SVG-HTML 에 자세히 문서화되어 있습니다.
검증된 정적 벡터 위에 모션이 작성되면, 브라우저에서 결정론적으로 캡처한 프레임과 모션 스트립으로 애니메이션 자체의 품질을 다시 확인합니다. 아래는 CueRecord 로고에 모션을 적용한 예시입니다.
Pixel2Motion이 만들어내는 결과물
Pixel2Motion은 하나의 로고에 대해 여러 산출물을 함께 만들어냅니다. logo.svg 는 모션을 붙일 수 있도록 구조화된 최종 정적 벡터이고, motion.css 는 시맨틱 SVG의 id를 대상으로 작성된 안무입니다. logo_motion.html 은 외부 의존성 없이 동작하는 쇼케이스 HTML로, 재생과 슬로우 모션, 속도 조절, QA 훅, 개별 모션 스터디를 담고 있습니다. motion_spec.md 에는 모션 브리프와 적용한 원칙, 타임라인, 이징 토큰, QA 노트가 정리됩니다.
여기에 더해 검증 근거가 파일로 남습니다. outputs/fit_iterations/ 의 기하 오버레이 이미지는 벡터 피팅 과정의 증거이고, outputs/motion_frames/ 의 프레임 이미지와 outputs/motion_strip.png 는 결정론적 모션 QA 근거입니다. outputs/final_render.png 와 outputs/html_render.png 는 정적 렌더링 확인용입니다. 결과물뿐 아니라 그 결과물이 원본과 일치하는지를 확인할 수 있는 근거까지 함께 남긴다는 점이 Pixel2Motion 워크플로우의 특징입니다.
Pixel2Motion 설치 및 사용법
Pixel2Motion은 Python 3.10 이상과 이미지 분석용 Pillow·numpy, 그리고 기하·HTML 렌더링을 위한 Chrome 또는 Chromium, 결정론적 프레임 캡처와 모션 연속성 QA를 위한 Playwright를 필요로 합니다. 권장 로컬 설정은 다음과 같습니다.
python3 -m venv .venv
.venv/bin/pip install pillow numpy playwright
.venv/bin/python -m playwright install chromium
에이전트는 SKILL.md 와 참조 문서를 먼저 읽고, motion_spec.md 에 로고의 성격과 사용 맥락, 요소 목록, 안무 스케치를 담은 모션 브리프를 작성합니다. 이후 정적 벡터를 피팅하고 QA하는 단계에서 저장소의 scripts/ 에 포함된 헬퍼를 사용합니다.
python3 scripts/render_overlay.py logo.svg source.png \
--out outputs/fit_iterations/01_overlay.png \
--render-out outputs/final_render.png \
--report outputs/fit_metrics.json
검증된 SVG와 작성한 CSS로 쇼케이스 HTML을 만들고, 정해진 시점의 모션 프레임을 캡처해 최종 렌더와 비교합니다.
python3 scripts/animate_svg_showcase.py logo.svg \
--css motion.css \
--out logo_motion.html \
--title "Logo Motion" \
--duration-hint 1500
python3 scripts/capture_motion_frames.py logo_motion.html \
--times 0,300,700,1000,1250,1500 \
--out outputs/motion_frames \
--strip outputs/motion_strip.png \
--compare-final outputs/final_render.png
Chrome이 기본 경로에 없으면 렌더링 확인 전에 CHROME_BIN 환경 변수를 지정합니다. 저장소의 docs/ 에는 GitHub Pages 데모와 피팅 과정 근거 이미지가 함께 들어 있어, 실제 산출물이 어떤 형태인지 미리 확인할 수 있습니다.
Pixel2Motion의 라이선스
Pixel2Motion은 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.
Pixel2Motion 인터랙티브 데모
Pixel2Motion 홈페이지
Pixel2Motion 프로젝트 GitHub 저장소
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. 
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 