---
title: 고양이 사진을 웹사이트 마스코트 스프라이트로 만들기
description: 우리집 고양이 사진 한 장을 Gemini로 연필 소묘 스프라이트 시트로 그리고, 프레임을 잘라 사이트 하단을 어슬렁거리는 마스코트로 조립한다.
date: 2026-08-29
tags: [create image, prompt, sprite, gemini]
author: Lissa
source: https://interlinear.work/study/gemini-cat-sprite/
---

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

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

![](/captures/cat-walk-sheet.webp)

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

## 동작마다 시트 하나씩

![](/captures/cat-turn-sheet.webp)

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

## 프레임 절단과 흰 배경 처리

![](/captures/cat-grooming-sheet.webp)

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

## 움직임 설계

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

## 확인하지 못한 것

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