sprite-gen

그림 한 장으로 게임용 2D 스프라이트를 자동 생성

이건 뭐예요?

게임 속 캐릭터가 가만히 서 있다가, 뛰어가고, 말하고, 환호하는 모습을 본 적 있으시죠. 그게 다 여러 장의 그림을 빠르게 넘겨서 만든 동작이에요. 옛날 만화영화의 셀 애니메이션처럼요. 그런데 이런 동작 그림들을 한 장 한 장 손으로 그리는 건 고된 일이에요. 캐릭터 한 명에 동작 대여섯 개만 넣어도 그림이 수십 장 필요하거든요.

sprite-gen(스프라이트 젠) 은 이 고된 작업을 자동화해주는 도구예요. 비유하자면 이래요. 배우 한 명을 스튜디오에 세워두고 "이번엔 서 있어 봐", "이번엔 뛰어 봐", "이번엔 웃어 봐" 하고 여러 포즈를 시켜서 연속 촬영해요. 그다음 배경을 깔끔하게 지워서 게임에 바로 붙일 수 있게 만들어줘요. 한마디로 1인 자동 스튜디오예요. 우리가 건네줄 건 두 가지예요. 배우 사진 한 장(베이스 이미지, 동작의 기준이 되는 원본 그림)과 시킬 동작 목록(서 있기·뛰기·말하기·성공 등)이요.

여기서 몇 가지 단어를 먼저 짚고 갈게요.

• 스프라이트(sprite): 게임 화면에 등장하는 캐릭터·사물의 작은 그림 한 조각이에요.
• 스프라이트 아틀라스(sprite atlas) 또는 스프라이트 시트(sprite sheet): 여러 동작 그림을 한 장에 차곡차곡 모아둔 큰 그림판이에요. 게임이 이 한 장에서 필요한 조각만 꺼내 써요.
• 투명 배경(알파, alpha): 그림 뒤가 비어 있어서 어떤 배경 위에 올려도 자연스럽게 얹히는 상태예요.

sprite-gen은 캐릭터 한 장을 넣으면, ① 생김새를 흐트러뜨리지 않고 ② 동작별로 그림을 만들고 ③ 배경을 투명하게 지우고 ④ 깔끔한 동작 프레임으로 잘라내서 → 게임에 바로 쓰는 투명 스프라이트 시트로 뽑아줘요. 어느 그림이 어떤 동작인지 적은 목록표(매니페스트, manifest)도 함께 만들기 때문에, 게임 코드는 그 표를 읽어 바로 동작을 재생해요.

• 만든 사람: GitHub aldegad 님 (오픈소스로 직접 공개해 주셨어요)
• 라이선스: Apache-2.0 — 출처만 밝히면 상업적으로도 자유롭게 쓸 수 있는 너그러운 라이선스예요
• 크레딧: 동작을 가로 한 줄(row, 동작 하나가 옆으로 펼쳐진 띠)씩 만드는 핵심 방식은 같은 Apache-2.0 라이선스의 hatch-pet 스킬에서 영감을 받았다고 README에 밝히고 있어요
• 동작 대상: 클로드 코드(Claude Code), Codex 같은 스킬을 읽는 AI 비서라면 어디서든

쉽게 말해, 코딩이나 그림 실력이 없어도 캐릭터 그림 한 장으로 게임용 동작 에셋을 통째로 뽑아내는 도구예요.

어떤 결과물이 나오나요?

말로 설명하기보다 결과물을 먼저 보여드릴게요. 맨 위에서 보신 늑대 'howl'이 바로 sprite-gen이 만든 스프라이트예요. 배경이 완전히 비어 있어서(투명) 어떤 게임 화면에 올려도 네모난 흰 박스 없이 자연스럽게 달리죠.

눈에 띄는 건 화풍을 가리지 않는다는 점이에요. 아래는 같은 도구로 만든 또 다른 캐릭터인데, 분위기가 완전히 달라요.

이건 도트(픽셀)로 찍은 듯한 레트로 게임 풍의 캐릭터 'claudecy'예요. 부드러운 일러스트 늑대와 옛날 게임 감성의 픽셀 캐릭터가 똑같은 도구에서 나왔어요. 베이스 이미지의 화풍을 그대로 따라가기 때문에, 내가 넣은 그림 스타일대로 동작이 만들어지는 거예요.

sprite-gen의 최종 산출물은 두 가지예요.

우리는 이렇게 쓰고 있어요

저(디온웍스 대표)는 sprite-gen을 운영 중인 서비스에 이미 깊게 적용했다고 자랑하려는 게 아니에요. 다만 왜 이 도구가 우리한테 필요한 빈틈을 메워주는지는 분명히 말씀드릴 수 있어요.

저희는 캐릭터 기반 서비스를 만들고 있어요. 그중 하나가 character-world(캐릭터 월드) 라는 프로젝트예요. 판타지풍 이름을 지어주는 연구소 콘셉트에, 레트로 도트(픽셀) 캐릭터들이 등장하는 서비스죠.

이런 캐릭터 서비스를 만들 때 늘 발목을 잡는 게 에셋(자산, 게임이나 앱에 들어가는 그림·사운드 같은 재료) 이에요. 특히 캐릭터가 살아 움직이는 동작 스프라이트는 그리기도, 외주를 맡기기도 부담이 컸어요. 캐릭터 한 명이 가만히 있기만 하면 심심하고, 동작을 넣으려면 그림이 수십 장 필요하니까요.

sprite-gen은 이 병목을 겨냥해요. 캐릭터 시안 한 장만 있으면 "서 있기·말하기·기뻐하기" 동작을 자동으로 뽑아낼 수 있으니, character-world 같은 프로젝트에서 캐릭터에 생기를 불어넣는 작업이 가벼워져요. 저는 이 도구를 "캐릭터 만드는 1인 개발자에게 꼭 필요한 동작 자판기"라고 부르고 싶어요.

어떻게 움직이나요?

"그림 한 장 넣으면 동작이 나온다"는 게 마법처럼 들리죠. 안을 들여다보면 다섯 단계로 차근차근 일하는 컨베이어 벨트예요.

1. 정체성 고정 (identity gate) — 먼저 AI가 동작 그림을 새로 만들 때마다 캐릭터 얼굴이 미묘하게 바뀌지 않도록 해요. 베이스 이미지의 생김새를 앵커(anchor, 닻)처럼 단단히 고정해두고 시작해요. "이 캐릭터는 끝까지 이 얼굴이야" 하고 못을 박는 거죠.

2. 행 단위 생성 (generate) — 동작 하나를 가로 한 줄(row) 로 쭉 만들어요. 서 있기 한 줄, 뛰기 한 줄, 말하기 한 줄… 이렇게 동작마다 연속 동작이 가로로 펼쳐진 띠(strip)를 그려내요. 마치 필름 한 컷 한 컷이 옆으로 이어진 모습이에요.

3. 프레임 추출 (extract frames) — 가로로 이어진 띠에서 크로마키(chroma key, 단색 배경을 골라내 지우는 기법) 로 배경을 진짜 투명하게 만들고, 동작 그림 하나하나를 깔끔한 조각(프레임)으로 잘라내요. 영상에서 초록 배경을 지우는 그 기술이라고 보시면 돼요.

4. 큐레이션 (curate, 사람이 직접 좋은 것만 골라내는 일) — AI가 만든 동작 그림 중에서 자연스러운 프레임만 사람이 직접 골라내는 단계예요. 이 부분이 sprite-gen의 철학이 담긴 곳이라 바로 다음 섹션에서 따로 설명할게요.

5. 아틀라스 합성 (compose) — 골라낸 깔끔한 프레임들을 한 장에 모아 스프라이트 시트로 합치고, 어느 프레임이 어떤 동작인지 적은 매니페스트까지 함께 출력해요. 게임에 바로 넣을 수 있는 완성품이 나오는 순간이에요.

sprite-gen이 강조하는 철학이 하나 있어요. **"AI 생성은 90%까지만 책임지고, 나머지 마무리는 사람의 손으로 끌어올린다"**는 거예요. AI가 동작을 빠르게 만들어주되, "배포해도 좋을 만큼 깔끔한가"는 사람이 4단계(큐레이션)에서 직접 확인하는 구조예요. 실제로 쓸 만한 결과물이 나와요.

큐레이션 웹뷰 — 사람이 고르는 구간

방금 말씀드린 4단계(큐레이션)를 위한 화면이 바로 큐레이션 웹뷰(curation webview, 웹 브라우저로 띄우는 선택 화면) 예요. AI가 동작 후보를 잔뜩 만들어주면, 그중에서 가장 자연스러운 그림만 골라 깔끔한 반복 동작(루프)을 완성하는 작업대예요.

화면 구성이 직관적이에요. 동작 하나당 두 줄로 보여줘요.

• 윗줄: 지금 재생되는 동작 시퀀스 (실제로 게임에 들어갈 순서)
• 아랫줄: AI가 만들어준 후보 프레임 풀 (고를 수 있는 모든 그림)

아랫줄에서 마음에 드는 프레임을 드래그해서 윗줄로 끌어다 놓으면 동작이 재구성돼요. 어색한 그림은 빼고, 자연스러운 그림만 골라 매끄러운 반복 동작을 만들어요. 이 편집은 비파괴(non-destructive, 원본을 망가뜨리지 않고 언제든 되돌릴 수 있는 방식) 로 이뤄지고, 동작은 고르는 즉시 실시간 미리보기에 나타나요.

게다가 이 웹뷰는 스탠드얼론(standalone, 다른 프로그램 없이 혼자서도 도는 방식) 이라 클로드 코드 데스크톱이든, Codex 앱이든, 그냥 일반 터미널이든 어디서나 띄울 수 있어요.

sprite-gen은 캐릭터만 만드는 게 아니에요. 아래처럼 아이소메트릭(isometric, 비스듬히 내려다보는 2.5D 시점) 가구·오브젝트도 만들어줘요.

정수기, 화이트보드, 침대 같은 사물을 바닥 그리드(격자) 위에 딱딱 맞춰서 생성·정렬해줘요. 캐릭터뿐 아니라 게임 속 방·사무실 같은 공간을 꾸미는 소품까지 한 도구로 챙길 수 있어요.

한번 써볼까요?

설치 방법은 크게 두 가지예요. sprite-gen은 라이브러리가 아니라 AI 비서가 읽는 스킬(작업 설명서) 묶음이라, 설치 방식도 거기에 맞춰져 있어요.

(A) Codex 스킬로 설치 (권장) — Codex의 스킬 설치 도구로 한 번에 받아오는 방법이에요.

# aldegad/sprite-gen 스킬을 현재 위치(.)에 설치
python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
  --repo aldegad/sprite-gen --path .

(B) 직접 클론 + 의존성 설치 — GitHub에서 직접 복제해서 쓰는 방법이에요.

# 저장소를 내 컴퓨터로 복제
git clone https://github.com/aldegad/sprite-gen.git
cd sprite-gen

# 파이썬 가상환경(작업 전용 격리 공간)을 만들고 켜기
python3 -m venv .venv && source .venv/bin/activate

# sprite-gen과 필요한 도구(Pillow 등)를 설치
pip install -e .

여기서 Pillow(필로우) 는 파이썬에서 이미지를 자르고 다루는 도구예요. 배경을 지우고 프레임을 잘라내는 일을 맡아요. (필요 환경: 파이썬 3.10 이상)

(C) 기본 워크플로우 실행 순서 — 설치가 끝나면 아래 순서로 스프라이트가 만들어져요.

# 1) 베이스 이미지로 실행 준비 (작업 폴더와 레시피 자리 잡기)
python3 scripts/prepare_sprite_run.py --out-dir <run-dir> --character-id <id> --base-image base.png

# 2) (여기서 AI가 각 동작 이미지를 생성해 raw/<state>.png 로 저장합니다 — 사람이 칠 명령은 없어요)

# 3) 가로 띠에서 동작 프레임을 잘라내기
python3 scripts/extract_sprite_row_frames.py --run-dir <run-dir>

# 4) 큐레이션 웹뷰를 띄워서 좋은 프레임 고르기 (선택)
python3 scripts/serve_curation.py --run-dir <run-dir>

# 5) 최종 스프라이트 시트(아틀라스) 합성
python3 scripts/compose_sprite_atlas.py --run-dir <run-dir>

<run-dir> 은 작업 결과를 담을 폴더 이름, <id> 는 캐릭터 이름표예요. 처음엔 복잡해 보여도 괜찮아요. 다음 섹션처럼 클로드 코드한테 말로 시키면 이 과정을 알아서 돌려주거든요.

클로드 코드 터미널에서는 이렇게

sprite-gen은 스킬이라서, 클로드 코드(또는 Codex) 대화창에 그냥 말로 부탁하는 게 가장 편해요. 복잡한 스크립트를 외울 필요 없이, 하고 싶은 걸 한국어로 설명하면 스킬이 알아서 위 명령어들을 순서대로 돌려줘요.

먼저 설치부터 시켜볼게요.

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# 클로드 코드 대화창 안에서 직접 설치 실행 (앞에 ! 붙임)
! python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py --repo aldegad/sprite-gen --path .

설치가 끝났다면, 이제 AI에게 말로 부탁해요. 이건 명령어가 아니라 부탁이라서 ! 를 붙이지 않아요.

이 base.png 캐릭터로 idle(서 있기)·running(뛰기)·talking(말하기)
스프라이트를 만들어줘. 캐릭터 정체성은 base.png 생김새 그대로 유지하고,
동작별로 프레임을 뽑은 다음 큐레이션 웹뷰를 띄워줘. 내가 좋은 프레임을
고르면 그걸로 최종 스프라이트 시트랑 매니페스트까지 합성해줘.

이렇게 부탁하면 클로드가 sprite-gen 스킬을 읽고, 준비 → 생성 → 프레임 추출 → 큐레이션 웹뷰 띄우기까지 알아서 진행해요. 웹뷰가 뜨면 마음에 드는 그림만 드래그로 고르고, 다 골랐다고 알려주면 클로드가 최종 시트를 합성해줘요.

가구나 소품을 만들고 싶다면 이렇게 부탁하셔도 돼요.

아이소메트릭(비스듬한 2.5D) 시점으로 사무실 가구 세트를 만들어줘.
정수기, 화이트보드, 책상 의자 세 개를 바닥 그리드에 맞춰서 생성하고,
배경은 투명하게 빼줘.

확인 포인트: 큐레이션 웹뷰가 브라우저에 뜨고, 동작별로 후보 프레임이 두 줄로 보이면 설치와 실행이 잘 된 거예요.

이런 분께 추천해요

sprite-gen은 "캐릭터에 동작을 입히고 싶은데 그림 실력도, 외주 예산도 부담스럽다" 는 분께 딱이에요. 특히 이런 세 분께 추천드려요.

1. 혼자 도트(픽셀) 게임을 만드는 인디·바이브 코더 — 게임 로직은 어떻게든 짜겠는데 캐릭터 동작 그림이 발목을 잡았던 분이라면, 시안 한 장으로 서 있기·뛰기·공격 동작을 뽑아낼 수 있어요. 위에서 본 픽셀 캐릭터처럼 레트로 화풍도 잘 따라가서, 도트 게임 만드는 분께 특히 잘 맞아요.

2. 캐릭터 에셋 외주가 부담스러운 프로토타입 기획자 — 아이디어를 빠르게 화면으로 보여줘야 하는데, 매번 디자이너에게 동작 그림을 맡기면 시간도 비용도 커요. sprite-gen으로 우선 "움직이는 시안"을 만들어 두면, 투자자나 동료에게 보여줄 데모를 빠르게 꾸릴 수 있어요.

3. character-world처럼 캐릭터 기반 웹·앱을 만드는 1인 개발자 — 캐릭터가 살아 움직이는 서비스를 혼자 만든다면, 동작 에셋은 영원한 숙제예요. sprite-gen은 그 숙제를 자동화하면서 결과물 품질은 큐레이션(사람이 직접 고르는 단계)으로 챙겨줘요. 혼자서도 캐릭터에 생기를 불어넣을 수 있어요.

참고 링크

• 공식 GitHub: aldegad/sprite-gen
• 만든 사람: GitHub @aldegad
• 라이선스: Apache License 2.0
• 함께 보면 좋은 우리 글: character-world — 캐릭터 기반 서비스 이야기

이런 걸 직접 만들고 계시다면

저희(오토프로그)도 이렇게 만든 것들로 회사 일을 돌립니다. 캐릭터 서비스부터 견적서·블로그·주문 처리 자동화까지, 실제로 저희 회사에서 돌아가는 자동화 사례를 화면째로 정리해 뒀어요. 만드는 방식이 이 글과 똑같습니다.