Pixel2Motion 스킬: 래스터 로고를 SVG 애니메이션으로 바꾸는 구조

PNG 로고 한 장만 있고 원본 벡터 파일은 없는데 로고 애니메이션을 만들어야 할 때가 있습니다. Pixel2Motion 은 그 래스터 이미지를 SVG 로 되살린 다음 움직임까지 얹는 코딩 에이전트용 스킬입니다.

저장소 README 와 SKILL.md, GitHub API 응답을 2026년 8월 9일에 대조했습니다. 무엇을 넣으면 무엇이 나오는지, 그리고 소개 문구와 실행 문서가 어긋나는 지점을 짚습니다.

넣는 것은 래스터 이미지, 나오는 것은 HTML

Pixel2Motion 이 받는 입력은 PNG, JPG, WebP, 스크린샷 같은 래스터 이미지입니다. 나오는 것은 SVG 파일 하나가 아니라 의존성 없는 단일 HTML 페이지이고, 재생 버튼과 슬로모션 토글, 속도 슬라이더가 함께 들어갑니다. 벡터 원본을 이미 들고 있다면 앞 절반은 쓸 일이 없습니다.

래스터를 입력으로 받는다는 점은 대조한 자료가 모두 같은 값을 말합니다. 저장소 README 첫 줄은 흐름을 Raster logo → smooth minimal SVG → SVG logo animation → interactive HTML motion demo 로 적었고, GitHub 저장소 설명과 스킬 정의 파일의 description도 같은 입력 형식을 나열합니다. 벡터를 넣는 도구라는 소개와는 방향이 반대입니다.

산출물 이름이 고정돼 있습니다

산출물 목록은 README 와 SKILL.md 가 거의 같고 한 줄이 다릅니다. README 목록에는 motion.css 가 들어 있는데 SKILL.md 의 목록에는 없습니다. 대신 SKILL.md 쪽에는 overlay_progress_strip.png 가 더 있습니다. motion.css 자체는 SKILL.md 본문에 네 번 나오므로 빠뜨린 파일이라기보다 목록을 적을 때 기준이 달랐던 것으로 보입니다. 파일 이름이 고정돼 있어서 작업이 끝났을 때 손에 무엇이 남는지는 미리 알 수 있습니다.

• logo.svg: 모션을 얹을 수 있게 부위를 나눈 정적 벡터
• motion.css: 각 부위 id 를 겨냥한 안무
• logo_motion.html: 의존성 없는 시연 페이지, 재생·슬로모션·속도 조절·QA 훅 포함
• motion_spec.md: 모션 브리프, 적용한 원칙, 타임라인, 이징 토큰, QA 메모
• outputs/fit_iterations/*.png: 벡터 맞춤 과정의 겹쳐 보기 증거
• outputs/motion_frames/*.png 와 motion_strip.png: 모션 QA 프레임
• outputs/final_render.png, html_render.png: 정적 렌더 확인

목록에서 눈여겨볼 것은 뒤쪽 세 줄입니다. 완성물만이 아니라 맞춤 과정의 겹쳐 보기 이미지와 모션 프레임을 함께 남기게 돼 있어서, 결과를 눈으로 채점할 재료가 산출물 안에 포함됩니다.

GIF 와 영상은 문서와 저장소가 어긋납니다

GIF 와 영상 미리보기는 소개 문구에는 있고 실행 문서에는 없습니다. GitHub 저장소 설명과 README 첫 문단은 GIF/video previews 를 산출물로 적지만, 에이전트가 실제로 따르는 SKILL.md 에는 GIF 나 video 라는 단어가 한 번도 나오지 않습니다.

외부 해설 글도 같은 문구를 그대로 옮깁니다. 영문 해설 글은 산출물을 Semantic SVG, CSS motion, standalone HTML demo, GIF/video previews, QA evidence 로 정리하고, 영상은 프로덕션 자산이 아니라 미리보기라고 덧붙입니다. 1차 출처인 스킬 문서의 산출물 목록과 맞대 보면 GIF 자리가 비어 있습니다.

저장소에서 영상을 뽑는 코드는 scripts/export_claude_videos.mjs 하나뿐입니다. 이 파일은 소스를 docs/index.html 로 고정하고, 대상도 갤러리 다섯 개(N, Focus, Continuum, Horizon, CueRecord)로 하드코딩돼 있습니다. Chrome 실행 경로는 macOS 절대 경로로 박혀 있고, 3840x2160 크기 120fps 프레임을 뽑은 뒤 ffmpeg 를 부릅니다. README 의 Requirements 에는 Node 도 ffmpeg 도 적혀 있지 않고, 저장소 언어 통계의 JavaScript 20,475바이트는 이 파일 하나의 크기와 같습니다.

정리하면 README 갤러리의 GIF 는 docs/gifs/ 에 미리 커밋된 결과물입니다. 내 로고에 대한 GIF 를 뽑는 단계는 문서화된 워크플로 어디에도 없습니다. 영상이 필요하면 별도 도구를 붙일 각오를 하는 편이 안전합니다.

IoU 는 참고 수치고 매끈함이 통과 기준입니다

벡터 복원 품질을 IoU 하나로 판정하지 않습니다. 스킬 문서는 매끈함을 하드 게이트로 두고, IoU 는 고정 임계값 없이 가능한 한 높이는 진단 수치로 씁니다. 겹침 비율이 높아도 선이 계단처럼 튀면 떨어뜨립니다.

README 는 이 원칙을 한 문장으로 적어 뒀습니다. A high-IoU jagged trace is rejected when a lower-complexity smooth vector explains the logo better. 고 IoU 를 얻은 지저분한 트레이스보다, 더 단순하면서 매끈한 벡터가 로고를 잘 설명하면 그쪽을 택한다는 뜻입니다.

겹쳐 보기는 원본 래스터 위에 벡터 후보를 얹어 반복 비교하는 방식입니다. 확인 항목은 마크 크기, 점 위치, 워드마크 기준선, 획 두께 네 가지. 기하 반복은 기본 10회로 묶여 있고, 매끈함과 구조와 시각 검사를 먼저 통과하면 거기서 멈춥니다.

10회를 다 써도 통과하지 못하면 그중 가장 나은 후보를 고릅니다. 순위는 매끈함 통과, 구조 불일치 없음, IoU 와 픽셀 델타, 경계 RMS, 감사 경고 수, 시각 판정, 편집 복잡도 순서입니다. 낮은 IoU 후보를 내보냈다면 왜 잔차가 허용되는지 motion_spec.md 에 적으라고 요구합니다. 정적 벡터 맞춤 방법론 자체는 자매 저장소 Pixel2SVG-HTML 에 정리돼 있다고 README 가 밝힙니다.

애니메이션 전에 SVG 를 부위로 쪼개 둡니다

최종 SVG 는 그림 한 장이 아니라 움직일 배우들의 명단입니다. 마크, 점, 워드마크처럼 따로 움직일 부위마다 별도 요소와 고정 id 를 주고, 애니메이션은 그 id 만 겨냥합니다. path:nth-child(3) 같은 구조 선택자로 부위를 집는 방식은 금지돼 있습니다.

드로우온으로 그려질 스트로크에는 pathLength="1" 을 답니다. 실제 길이와 무관하게 dashoffset 을 1에서 0으로 움직이면 되기 때문입니다. 글자를 순서대로 흘리려면 글자마다 요소가 따로 있어야 하고, 하나의 text 요소로는 계단식 지연이 걸리지 않습니다.

타임라인은 기대 20 대 동작 50 대 마무리 30 비율을 기본으로 잡습니다. 1500ms 짜리 리빌이면 300ms, 750ms, 450ms 입니다. 겹치는 파트는 자기 지속 시간의 10~20%씩 어긋나게 출발시킵니다. 모든 파트가 같은 프레임에서 시작하고 끝나는 배치를 문서는 기계적인 움직임의 첫째 원인으로 꼽습니다.

이징에는 문서가 직접 못 박아 둔 함정이 하나 있습니다. @keyframes 안에서 animation-timing-function 에 CSS 변수를 쓰면 Chromium 이 선언을 조용히 버리고 linear 로 떨어진다는 것입니다. 조각을 이어 붙인 안무에서는 이음매마다 속도 단차가 생기고, 문서는 측정된 4.3배 속도 불연속을 예로 듭니다. 그래서 keyframes 안쪽만은 토큰 대신 리터럴 cubic-bezier() 로 쓰라고 규정합니다.

실행 조건은 Chrome 과 Playwright 설치

실행에는 Python 3.10 이상, Pillow, numpy, Chrome 또는 Chromium, Playwright 가 필요합니다. 기하 렌더링은 헤드리스 Chrome 이 맡고, 모션 프레임 캡처는 Playwright 가 맡습니다. 브라우저 없이는 QA 증거를 만들 수 없는 구조입니다.

설치 명령은 따로 없습니다. 저장소가 두는 것은 SKILL.md 와 agents/openai.yaml 이고, 실행은 에이전트가 스킬을 불러 스크립트를 돌리는 방식입니다. 에이전트 CLI 안에서 스킬이 어떤 조작으로 불려 나오는지는 가재코드 CLI 의 네 가지 스킬을 실행하는 순서에 화면 단위로 적어 뒀습니다.

아래는 README 에 실린 명령 예시입니다. 겹쳐 보기와 프레임 캡처가 각각 어떤 인자를 받는지 보면 증거 파일이 어디에 쌓이는지 알 수 있습니다. 직접 돌려 본 출력이 아니라 문서의 예시를 그대로 옮긴 것입니다.

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

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

두 명령 모두 --report 나 --strip 처럼 증거 파일 경로를 인자로 받습니다. 화면에만 결과가 남는 게 아니라 파일로 떨어지도록 짜여 있어서, 어느 반복에서 무엇이 달라졌는지 나중에 되짚을 수 있습니다.

Chrome 이 아닌 브라우저는 확인되지 않았습니다. Edge 를 써도 되느냐는 열린 이슈에 메인테이너는 한번 해 보라고만 답했고, 이 이슈는 2026년 8월 9일 기준 그대로 열려 있습니다.

별 개수는 품질 지표로 쓰기 어렵습니다. 같은 날 GitHub API 응답 기준 별 1,917개, 포크 170개, 열린 이슈 6개인데 그 6개 중 하나가 가짜 스타 탐지 봇이 올린 자동 리포트입니다. 리포트 본문은 24시간 표본 190계정 중 4개를 likely fake 로 분류하면서 저장소 등급은 clean 으로 적었습니다.

어떤 로고부터 붙여 볼지 정하는 기준

선택 기준은 원본 벡터의 유무입니다. 벡터가 없는 로고를 다시 그려야 하고 결과를 검증할 증거 파일까지 필요하면 맞고, 이미 깔끔한 SVG 가 있고 CSS 안무만 필요하다면 앞 절반은 낭비입니다.

상업 서비스 조건은 확인되지 않았습니다. www.pixel2motion.com 은 2026년 8월 9일 기준 개발 중 표기와 대기자 이메일 폼만 있고, 가격도 출시일도 없습니다. 로고 한 장을 고른 뒤 SKILL.md 의 Acceptance Criteria 부터 읽고 시작하세요.

통과 조건 원문 확인하기움직이는 데모 보기