지난 글에서 XBRUSH로 8종 캣 캐릭터의 스프라이트 시트를 만들었습니다. 4프레임 공격 애니메이션을 AI 프롬프트 하나로 뽑아내는 과정이었습니다.
이번에는 한 단계 더 깊이 들어갑니다. 리깅 시트(Rigging Sheet) — 신체 부위를 분리해 뼈대 기반으로 애니메이션하는 방식입니다.
스프라이트 시트 vs 리깅 시트 — 무엇이 다른가
스프라이트 시트: 프레임의 연속
스프라이트 시트는 캐릭터의 완성된 포즈를 프레임 단위로 나열한 것입니다. 대기(1프레임) → 준비(2프레임) → 공격(3프레임) → 회복(4프레임), 이렇게 미리 그려진 이미지를 빠르게 교체하면서 애니메이션을 구현합니다.
레트로 게임, 픽셀 아트 스타일에 잘 맞고 구현이 단순합니다. 단, 모션 하나를 추가할 때마다 해당 모션의 전체 프레임을 새로 그려야 합니다. 달리기, 점프, 피격, 사망 — 모션 종류가 늘어날수록 필요한 이미지가 기하급수적으로 증가합니다.
리깅 시트: 부위를 분리해 뼈대로 움직인다
리깅 시트는 캐릭터의 신체 부위를 개별 이미지로 분리해 놓은 것입니다. 머리, 몸통, 상완, 하완, 손, 허벅지, 종아리, 발, 꼬리, 무기 — 각각이 별도 레이어로 존재합니다.
이 부위들을 Spine, DragonBones 같은 2D 골격 애니메이션 툴에 불러와 뼈대(Bone)를 연결하면, 부위를 회전하고 이동하는 것만으로 다양한 모션을 만들 수 있습니다. 한 세트의 리깅 시트로 달리기, 점프, 공격, 피격, 사망 — 모든 모션을 커버합니다.
언제 스프라이트, 언제 리깅을 선택하나
| 스프라이트 시트 | 리깅 시트 | |
|---|---|---|
| 애니메이션 방식 | 프레임 교체 | 뼈대 회전·이동 |
| 필요 이미지 수 | 모션 × 프레임 수 | 신체 부위 수 (1세트) |
| 모션 추가 비용 | 높음 (새 프레임 필요) | 낮음 (뼈대 조작만) |
| 표현 한계 | 미리 그린 포즈만 가능 | 자유로운 실시간 제어 가능 |
| 적합한 게임 | 레트로, 픽셀 아트, 격투 | 모바일, RPG, 어드벤처 |
특수 이펙트(폭발, 마법 발사 등)나 캐릭터 형태가 극단적으로 바뀌는 변신 모션은 스프라이트가 더 직관적입니다. 반면 캐릭터가 대화하고, 걷고, 전투하는 다양한 모션이 필요한 게임이라면 리깅이 훨씬 효율적입니다.
XBRUSH에서 리깅 시트 만들기
리깅 시트 프롬프트의 핵심은 "신체 부위를 분리하여 배치"를 명확히 지정하는 것입니다. 완성된 캐릭터를 그리는 게 아니라, 각 부위를 독립적으로 그려달라고 요청해야 합니다.
리깅 시트 프롬프트 구조
2D 게임 캐릭터 리깅 시트, 흰 배경, 카툰/픽셀 아트 스타일.
[캐릭터 설명] 캐릭터의 분리된 신체 부위 레이아웃:
- 머리 (귀, 표정 포함)
- 몸통 (의상, 갑옷 포함)
- 상완 오른쪽 / 왼쪽
- 하완 오른쪽 / 왼쪽
- 손 오른쪽 / 왼쪽
- 허벅지 오른쪽 / 왼쪽
- 종아리 오른쪽 / 왼쪽
- 발 오른쪽 / 왼쪽
- 꼬리 (분절 2~3개)
- 무기 (별도 배치)
각 부위는 관절 연결점을 고려한 위치에 배치.
흰 배경 위에 부위 간 간격을 충분히 두어 명확히 분리.
일관된 스타일과 색상 팔레트 유지.캣 아처 리깅 시트 프롬프트 예시
2D 게임 캐릭터 리깅 시트, 흰 배경, 카툰/픽셀 아트 스타일.
궁수 고양이(캣 아처) 캐릭터의 분리된 신체 부위 레이아웃:
- 머리: 고양이 귀, 초록색 눈, 갈색 후드
- 몸통: 가죽 조끼와 벨트, 화살통 별도
- 상완 R/L, 하완 R/L, 손 R/L
- 허벅지 R/L, 종아리 R/L, 발 R/L
- 꼬리 (3분절)
- 활 (긴 목재 활)
- 화살 (시위에 걸린 상태)
흰 배경 위에 부위 간 간격 충분히. 각 부위의 관절 연결점(피벗)이
명확히 보이도록 배치. 일관된 갈색/녹색 색상 팔레트 유지.
위 완성 캐릭터 이미지를 참고해 리깅 시트를 만들면 스타일 일관성을 맞추는 데 도움이 됩니다. XBRUSH에서는 생성된 이미지를 레퍼런스로 넣고 리깅 시트 프롬프트를 추가하는 방식을 활용할 수 있습니다.
XBRUSH 이후 후처리 작업
XBRUSH에서 리깅 시트 이미지를 받으면, 바로 게임에 쓸 수 있는 상태는 아닙니다. 후처리 단계가 필요합니다.
1단계: 부위별 분리 (Photoshop / GIMP)
생성된 시트에서 각 신체 부위를 개별 파일로 잘라내야 합니다. 포토샵의 슬라이스 도구나 GIMP의 사각형 선택 도구로 부위마다 레이어를 만들고 각각 PNG로 저장합니다.
부위를 자를 때 피벗 포인트(회전 기준점)를 염두에 두세요. 상완은 어깨 쪽이 기준점, 하완은 팔꿈치 쪽이 기준점입니다. 이후 Spine에서 피벗을 설정할 때 일관성이 중요합니다.
2단계: 배경삭제 (XBRUSH)
각 부위 이미지를 XBRUSH로 다시 불러와 배경삭제 기능을 적용합니다. 흰 배경을 투명 PNG로 변환하는 과정입니다. AI가 캐릭터 부위의 윤곽을 정밀하게 인식해 털이나 장비 디테일도 자연스럽게 처리합니다.
3단계: 스프라이트 아틀라스 정리
분리된 부위 PNG들을 하나의 텍스처 아틀라스(Texture Atlas)로 합칩니다. TexturePacker 같은 툴을 쓰면 자동으로 최적화된 아틀라스 이미지와 좌표 데이터 파일을 만들어줍니다. 게임 엔진이 한 번에 여러 이미지를 로드하는 것보다 아틀라스 하나를 로드하는 게 성능상 유리합니다.
4단계: Spine / DragonBones 임포트 및 스켈레톤 설정
준비된 부위 이미지들을 Spine(유료) 또는 DragonBones(무료)에 불러옵니다.
- 뼈대(Bone) 생성 — 루트(중심) → 척추 → 상체/하체 → 팔/다리 계층 구조로 뼈를 만듭니다.
- 슬롯(Slot)에 이미지 연결 — 각 뼈에 해당 신체 부위 이미지를 연결합니다.
- 피벗 포인트 설정 — 각 뼈의 회전 기준점을 관절 위치에 맞게 조정합니다.
- IK 제약 설정 — 팔과 다리에 역운동학(Inverse Kinematics)을 적용하면 발/손 위치를 지정하는 것만으로 팔다리 전체가 자연스럽게 따라옵니다.
5단계: 애니메이션 제작
스켈레톤이 완성되면 타임라인에서 뼈를 조작하는 것만으로 모든 모션을 만들 수 있습니다.
- idle (대기) — 미세하게 상하로 움직이는 호흡 모션
- walk / run (걷기 / 달리기) — 팔다리 교차 움직임
- attack (공격) — 무기 휘두르기
- hit (피격) — 뒤로 젖혀지는 모션
- die (사망) — 쓰러지는 모션
이 모든 모션을 이미지 한 세트로 만들 수 있다는 것이 리깅의 핵심입니다.
게임 엔진에 적용하기
Unity
Spine의 공식 런타임 플러그인 Spine for Unity를 사용합니다. Spine에서 내보낸 .atlas, .json, 텍스처 파일을 Unity Assets 폴더에 넣으면 SkeletonAnimation 컴포넌트로 애니메이션을 코드에서 제어할 수 있습니다.
// Spine for Unity 애니메이션 전환 예시
skeletonAnimation.AnimationState.SetAnimation(0, "attack", false);
skeletonAnimation.AnimationState.AddAnimation(0, "idle", true, 0);Godot
DragonBones를 사용한 경우 DragonBones for Godot 플러그인, Spine을 사용한 경우 godot-spine 플러그인을 추가합니다. Godot 4에서는 자체 2D 스켈레톤 시스템(Skeleton2D)도 지원하므로, 부위 이미지를 직접 불러와 구성하는 방법도 있습니다.
HTML5 / Phaser
Spine의 WebGL 런타임을 사용하거나, DragonBones의 웹 런타임을 적용합니다. 브라우저 게임에서도 동일한 리깅 애니메이션을 재생할 수 있습니다.
스프라이트 시트 + 리깅 시트 병행 전략
실제 게임에서는 두 방식을 함께 쓰는 경우가 많습니다.
- 캐릭터 본체 → 리깅 시트 (다양한 모션을 한 세트로)
- 특수 공격 이펙트 → 스프라이트 시트 (폭발, 마법, 피격 이펙트)
- UI 아이콘·아이템 → 개별 PNG 스프라이트
캣 아처의 경우, 캐릭터 본체는 리깅으로 달리기·점프·대기 모션을 만들고, 화살이 날아가는 이펙트와 적에 맞았을 때의 충격 이펙트는 스프라이트 시트로 따로 만드는 방식이 효율적입니다.
사용 도구 요약
- XBRUSH AI 생성 — 리깅 시트 이미지 생성 (신체 부위 분리 레이아웃)
- XBRUSH 배경삭제 — 각 부위 이미지의 투명 PNG 처리
- Photoshop / GIMP — 생성된 시트에서 부위별 개별 파일 분리
- TexturePacker — 부위 이미지를 텍스처 아틀라스로 최적화
- Spine / DragonBones — 스켈레톤 설정, 애니메이션 제작
- Unity / Godot / Phaser — 게임 엔진에 Spine 런타임 플러그인으로 적용