고양이 사진을 웹사이트 마스코트 스프라이트로 만들기

이 사이트 하단을 돌아다니는 고양이는 우리집 고양이 사진에서 출발했다. 사진을 손그림 애니메이션으로 자동 변환해 주는 도구는 없지만, 이미지 생성 모델에게 “이 고양이를 이 그림체로, 동작을 나눠서” 그려 달라고 하면 프레임 재료가 나온다. 나머지는 자르고 조립하는 일이다.

사진 한 장을 걷기 8프레임으로

1. 고양이 사진을 첨부하고 “걷기 한 사이클을 정확히 8프레임, 가로 한 줄로” 요청한다. 프레임이 한 장에 나란히 담긴 이미지를 스프라이트 시트라고 한다
2. 그림체를 사이트 삽화와 같은 연필 소묘로 고정한다 — soft graphite pencil drawing, fine hatching strokes
3. 프레임마다 크기와 무늬가 같아야 한다고 명시한다 — same cat, same size in every frame. 이 조건이 빠지면 프레임마다 다른 고양이가 나온다
4. 흰 배경, 바닥 그림자 없음, 격자선·글자 없음을 조건으로 건다. 뒤 단계의 자동 절단이 흰 여백을 기준으로 삼기 때문이다

동작마다 시트 하나씩

1. 같은 대화에서 이어서 요청해야 무늬와 그림체가 유지된다
2. 걷기 외에 방향 전환·벽 짚고 서기·기지개·엎드리기·뒹굴기·그루밍 시트를 하나씩 받았다
3. 방향 전환 시트의 핵심은 웅크리며 도는 중간 컷이다. 좌우 반전을 이 컷 순간에 걸면 이미지가 뒤집히는 게 눈에 띄지 않는다
4. 생성 모델은 왼쪽을 보고 걷는 프레임을 잘 못 그린다 — 전부 오른쪽 보기로 받고, 왼쪽 걷기는 반전으로 처리하되 그 반전을 방향 전환 컷 뒤에 숨긴다

프레임 절단과 흰 배경 처리

1. 시트마다 프레임 배치가 4×2, 5+4처럼 제각각이라 좌표를 손으로 적지 않았다. 흰 여백의 가로·세로 띠를 찾아 칸을 자동 감지하면 코드 하나로 모든 시트가 잘린다
2. 배경 제거는 지우개 방식이 아니라 color-to-alpha(white)를 썼다. “흰색에서 얼마나 멀어졌나”를 투명도로 환산해서 연필 선의 농담이 반투명으로 살아남는다
3. 투명 그대로 두면 본문 글자 위를 지날 때 선끼리 겹쳐 서로 방해된다. 프레임의 실루엣을 흐려 만든 흰 밑판을 함께 구워, 종이가 번진 듯한 흰 얼룩이 고양이를 따라다니게 했다
4. 프레임들을 바닥 기준으로 정렬해 한 줄로 합치면 끝 — 화면에서는 배경 이미지의 x 위치를 계단식으로 옮기는 것만으로 애니메이션이 된다

움직임 설계

1. 기본 동선은 순찰이다. 왼쪽 끝에서 오른쪽 끝까지 걷고, 오른쪽 끝에서는 벽을 짚고 섰다가 내려온다
2. 걷는 중간에 확률로 행동이 끼어든다 — 그루밍·앉기·기지개·엎드리기·뒹굴기·웅크려 잠. 매번 추첨이라 동선이 반복돼 보이지 않는다
3. 자는 동안 클릭하면 기지개를 켜고 일어난다. 장식은 반응할 때 마스코트가 된다
4. 움직임 최소화(prefers-reduced-motion) 설정에서는 걷지 않고 앉아만 있는다. 장식이 접근성을 해치면 안 된다

확인하지 못한 것

• 시트 사이의 무늬 완전 일치는 포기했다. 같은 대화에서 이어가도 조금씩 달라지는데, 화면 60px 크기에서는 구분되지 않는다
• 프레임 수를 늘리면(12~16) 더 부드러워질 텐데, 8프레임 이상을 한 줄에 고르게 그려 주는지는 시험하지 않았다