원본 벡터 없이 로고 애니메이션 만드는 오픈소스 pixel2motion

원본 벡터 파일이 없어도 로고 애니메이션을 만들 수 있습니다. 오픈소스 pixel2motion은 PNG 같은 래스터 이미지 한 장을 받아서, 브라우저로 열면 그 자리에서 로고가 움직이는 HTML 한 장을 만들어 줍니다.

예전에 만든 로고는 일러스트레이터 원본이 사라지고 이미지 파일만 남는 일이 흔합니다. 이 도구가 노리는 자리가 거기라서, 시작점이 벡터가 아니라 래스터입니다. 벡터를 다시 그리는 품이 드는 단계를 도구가 가져가고, 사람에게는 결과를 확인하는 일이 남습니다.

래스터 로고 한 장이 움직이는 HTML로 나온다

pixel2motion에 넣는 것은 래스터 이미지 한 장입니다. PNG, JPG, WebP를 받고 화면 스크린샷도 됩니다. 흐름은 간단합니다. 래스터 로고를 벡터로 다시 그리고, 그 벡터에 움직임을 붙여 시연 페이지로 내놓습니다. 벡터를 도구가 새로 그리기 때문에 원본 SVG나 일러스트레이터 파일이 없어도 됩니다.

애니메이션은 라이브러리에 기대지 않는 단일 HTML 한 장으로 나옵니다. 파일을 브라우저로 열면 그 자리에서 로고 애니메이션이 돕니다. 안에 재생 버튼과 슬로모션 토글, 속도 슬라이더가 들어 있어서 움직임을 늦춰 보거나 처음부터 다시 돌릴 수 있습니다. 브라우저만 있으면 도니까 결과를 공유할 때도 HTML 파일 하나만 넘기면 됩니다. 다시 그린 정적 벡터 파일도 함께 남아서, 움직임 말고 벡터만 필요한 자리에도 씁니다.

결과가 어떤 수준인지는 말보다 데모가 빠릅니다. 배포된 데모 페이지에 변환 결과가 걸려 있어서, 로고가 실제로 어떻게 움직이는지, 재생 버튼과 속도 슬라이더가 어떻게 붙는지까지 브라우저에서 바로 볼 수 있습니다. 쓸지 말지는 데모만 보고 정해도 됩니다.

pixel2motion 데모 열어 보기

설치 명령 없이 에이전트가 스킬로 돌린다

pip install 같은 별도 설치 명령이 없습니다. pixel2motion 저장소가 SKILL.md와 agents/openai.yaml을 두고, 코딩 에이전트가 그 스킬을 불러 내부 스크립트를 돌리는 구조입니다. 사람이 명령과 인자를 외우는 대신 에이전트에게 로고 파일을 주고 일을 시키면, 에이전트가 SKILL.md에 적힌 절차대로 스크립트를 대신 돌립니다.

에이전트에 스킬을 붙여 쓰는 흐름이 처음이면 가재코드(gjc)의 스킬 사용법에서 같은 구조를 볼 수 있습니다. 스킬 파일을 읽은 에이전트가 도구 실행을 떠맡고, 사람은 입력과 결과만 다룬다는 점이 같습니다.

실행 환경은 갖춰져 있어야 합니다. Python 3.10 이상, Pillow와 numpy, Chrome 또는 Chromium, 그리고 Playwright입니다. 여기서 걸리는 것이 브라우저입니다. Chrome이 아닌 브라우저에서는 동작이 확인되지 않았고, Edge에서는 이슈 #5가 열려 있습니다(2026년 8월 확인).

검수는 함께 나오는 PNG 몇 장 비교로 끝난다

결과를 믿을 근거가 파일로 같이 남습니다. 다시 그린 벡터가 원본과 얼마나 겹치는지, 움직임이 각 시점에 어떤 모양이었는지가 전부 PNG로 떨어집니다. 그래서 검수가 도구 내부를 들여다보는 일이 아니라 이미지 몇 장을 나란히 놓고 비교하는 일이 됩니다.

원본과 겹쳐 볼 때 확인하는 항목은 마크 크기, 점 위치, 워드마크 기준선, 획 두께 네 가지입니다. 겹치는 비율을 나타내는 IoU 수치도 나오지만 고정 임계값으로 자르는 값은 아니고 진단용입니다. 겹침이 높아도 선이 계단처럼 튀면 탈락시킵니다. 매끈함이 통과 기준입니다.

시점별 PNG는 움직임 쪽 검수에 씁니다. 도는 화면을 눈으로 좇는 것보다 멈춘 이미지에서 어색한 순간을 잡는 쪽이 쉽습니다. 어색한 구간을 찾으면 결과 HTML의 슬로모션 토글로 그 구간만 늦춰서 다시 확인합니다.

원본 벡터가 없는 로고가 이 도구의 자리다

이 도구가 맞는 것은 원본 벡터 없이 로고 애니메이션을 만들어야 할 때입니다. 원본 파일이 사라지고 PNG만 남은 로고, 스크린샷에서 건져낸 로고가 여기에 해당합니다. 움직이는 결과물과 함께 검수할 근거 파일까지 남겨야 하는 작업이면 더 맞습니다.

랜딩 페이지나 발표 자료에 움직이는 로고가 필요한데 손에 있는 것이 PNG뿐인 경우도 여기에 해당합니다. 이럴 때 결과물은 상업 작업에 들어가는데, 코드가 MIT 라이선스라 회사 로고에 써도 걸리지 않습니다.

반대로 이미 깔끔한 SVG를 갖고 있다면 이 도구의 앞 절반, 그러니까 래스터에서 벡터를 다시 그리는 과정이 통째로 낭비입니다. 그때는 SVG에 CSS 애니메이션을 직접 붙이는 쪽이 빠릅니다. Chrome 계열 밖에서 돌려야 하는 상황에도 아직은 맞지 않습니다.

그래서 채택을 가르는 질문은 하나로 줄어듭니다. 원본 벡터가 있는가. 없으면 pixel2motion이 래스터에서 벡터를 다시 그려 그 공백을 메우고, 있으면 벡터 작업을 건너뛰고 CSS로 바로 가는 쪽이 빠릅니다.