스프라이트 시트 만드는 법: 초보자를 위한 완벽 가이드

이 가이드는 스프라이트 시트(sprite sheet)를 아무것도 없는 상태에서 만드는 과정을 처음부터 끝까지 다룹니다. 스프라이트 시트가 정확히 무엇인지, 그리기 전에 반드시 정해야 할 세 가지 숫자, Aseprite에서 프레임을 그리고 내보내는 방법, 낱장 프레임을 한 장의 이미지로 합치는 방법, 그리고 Unity·Godot·RPG Maker 각각의 정확한 임포트 설정까지. 마지막에는 시트를 아마추어처럼 보이게 만드는 실수들과 그 하나하나를 피하는 법을 정리했습니다.

이미 프레임이 준비되어 있고 합치기만 하면 된다면 프레임을 한 장으로 합치기로 바로 넘어가세요. 프레임을 AI가 대신 그려 주길 원한다면 글 끝의 AI 스프라이트 생성기가 그 역할을 합니다.

스프라이트 시트란?

스프라이트 시트는 애니메이션의 모든 프레임을 한 장의 이미지에 담은 것으로, 같은 크기의 셀이 한 줄 또는 격자 형태로 배열됩니다. 엔진은 셀 하나 크기의 창을 이미지 위에 열고, 한 번에 한 셀씩 창을 옮겨 가며 그립니다. 그러면 캐릭터가 걷기 시작합니다.

PNG 여덟 장을 따로 넣지 않고 굳이 이렇게 하는 이유는, GPU가 텍스처를 여덟 개가 아니라 하나만 바인딩하면 되기 때문입니다. 화면에 움직이는 개체가 마흔 개쯤 있는 2D 게임이라면 그 차이가 프레임 타임에 그대로 나타납니다. 버전 관리할 파일도 하나, 아트 방향이 바뀔 때 교체할 파일도 하나라는 뜻이기도 합니다.

형식 자체는 이미 정해져 있습니다. 균일한 셀, 간격 없음, 파일 하나. 정해져 있지 않은 것, 그리고 초보자가 가장 많이 틀리는 것은 시작하기 전에 골라야 하는 몇 개의 숫자입니다.

1단계: 숫자부터 정하기

세 가지 결정이 이후의 모든 것을 좌우합니다. 지금 제대로 정하면 이 튜토리얼의 나머지는 기계적인 작업입니다. 잘못 정하면 프레임을 전부 다시 그리게 됩니다.

프레임 수: 6, 8, 아니면 12

애니메이션의 느낌을 가장 크게 바꾸는 결정입니다.

6프레임: 캐릭터의 다리 구조가 단순하고 게임을 멀리서 보는 시점이라면 걷기 사이클에 충분합니다. 32px 스프라이트를 쓰는 탑다운 RPG는 수십 년 동안 4프레임으로 출시되어 왔고 아무도 눈치채지 못했습니다.
8프레임: 주력 선택지입니다. 컨택트, 다운, 패스, 업을 두 번, 좌우 반전으로 반복합니다. 제대로 된 무게 이동이 표현되고, 나중에 4프레임 저사양 버전을 만들고 싶을 때도 깔끔하게 나누어집니다.
12프레임: ‘움직임’이 아니라 ‘애니메이션’처럼 보이기 시작합니다. 캐릭터가 화면에서 클 때, 망토나 머리카락이 흩날려야 할 때, 또는 플레이어가 실제로 지켜보게 될 일회성 동작(사망, 마법 시전, 변신)에 쓰세요. 플레이 시간 여섯 시간 내내 반복되는 걷기 사이클에 12프레임을 쓰는 것은 대부분 헛수고입니다.

늘 통하는 규칙 하나: 계속 반복되는 루프라면 프레임을 가독성에 쓰고, 드물게 재생되는 동작이라면 부드러움에 쓰세요.

셀 크기: 화면에서 거꾸로 계산하기

셀 크기는 프레임 하나의 픽셀 치수입니다. 흔히 쓰는 값은 16, 32, 64, 96, 128입니다.

“얼마나 세밀하게 그리고 싶은가”로 고르지 마세요. 스프라이트가 플레이어의 화면에서 몇 픽셀을 차지할지로 고르세요. 목표 해상도가 1920×1080이고 카메라가 가로로 타일 30개를 보여 준다면 타일 하나는 화면 픽셀 64개입니다. 키가 타일 1.5개인 캐릭터라면 대략 96픽셀짜리 그림이 필요합니다. 32로 그려서 3배로 키우면 의도된 도트 느낌이 나옵니다. 128로 그려서 줄이면 뭉개집니다. 픽셀 아트를 축소하면 픽셀 아트를 픽셀 아트답게 만드는 딱딱한 가장자리가 망가지기 때문입니다.

피해야 할 실패 패턴은 표시 배율이 정수가 아닌 경우입니다. 32px 아트를 2배로 띄우면 선명합니다. 2.4배로 띄우면 모든 대각선이 어른거리고, 한번 눈에 들어오면 영원히 거슬립니다.

시점: 첫 프레임을 그리기 전에 고르기

2D 게임은 네 가지 시점으로 거의 다 설명됩니다.

사이드뷰: 완전한 옆모습. 플랫포머, 격투 게임, 엔드리스 러너. 한 방향이며 가끔 좌우 반전합니다.
탑다운: 카메라가 바로 위에서 내려다봅니다. 트윈스틱 슈터와 로그라이크. 보통 네 방향입니다.
그리드 RPG: 캐릭터가 카메라를 향하지만 격자 위를 움직이는 4분의 3 시점. RPG Maker의 그 모습입니다. 네 방향입니다.
아이소메트릭: 마름모꼴의 4분의 3 시점. 걷기 사이클에 보통 여덟 방향이 필요해서 가장 비쌉니다.

시점은 나중에 씌우는 필터가 아닙니다. 어떤 팔다리가 보이는지, 그림자가 어디에 떨어지는지, 방향별 변형을 몇 세트나 만들어야 하는지를 결정합니다. 사이드뷰 캐릭터는 걷기 사이클이 한 세트면 되지만, 그리드 RPG 캐릭터는 네 세트가 필요합니다.

2단계: Aseprite에서 프레임 그리기

Aseprite는 픽셀 아트 애니메이션의 표준 도구이며, 아래 워크플로는 대부분의 스프라이트 아티스트가 쓰는 방식입니다. 프레임과 어니언 스킨 기능이 있는 편집기(Piskel, Pyxel Edit, LibreSprite)라면 무엇이든 같은 방식으로 작업할 수 있습니다. 이 사이트의 무료 픽셀 아트 메이커도 마찬가지이며, 설치할 것 없이 브라우저에서 바로 실행됩니다.

셀 크기로 캔버스를 만듭니다. File → New에서 너비와 높이를 위에서 정한 셀 크기(예: 32×32)로 설정하고 배경은 투명으로 둡니다. 큰 캔버스에 그린 뒤 나중에 잘라내지 마세요. 셀 크기는 엔진과 맺는 계약입니다.
컨택트 포즈를 그립니다. 1번 프레임은 한 발을 앞으로 내딛어 땅에 닿은 캐릭터입니다. 나머지 프레임은 전부 이것의 변형이므로 여기서 실루엣을 확실히 잡으세요.
프레임을 추가합니다. Frame → New Frame(또는 Alt+N)은 현재 프레임을 복제하므로 다시 그리지 않고 살짝 옮기기만 하면 됩니다. 컨택트 → 다운 → 패스 → 업 순서로 걷기를 만든 다음, 반대쪽 다리를 위해 좌우 반전으로 반복합니다.
어니언 스킨을 켭니다. View → Show Onion Skin은 이전 프레임과 다음 프레임을 반투명하게 겹쳐 보여 줍니다. 프레임마다 머리 높이를 같게, 발을 같은 선 위에 유지하는 방법이 이것입니다.
루프를 미리 봅니다. Enter를 눌러 재생합니다. 발과 정수리를 지켜보세요. 어느 쪽이든 고르지 않게 들썩인다면 지금, 아직 시트가 아니라 프레임 하나일 때 고치세요.
시트를 내보냅니다. File → Export Sprite Sheet(Ctrl+E). Layout 탭에서 한 줄이면 Horizontal Strip, 격자면 By Rows에 열 수를 고정합니다. Borders 탭에서 Trim은 끈 채로 두고(딱 맞는 경계 상자보다 균일한 셀이 더 중요합니다), 엔진이 텍스처를 필터링한다면 Spacing을 1–2px 추가합니다. Output 탭에서 Phaser 같은 엔진에 쓸 프레임 사각형 정보가 필요하면 JSON Data를 켭니다.

내보내기 결과는 모든 프레임이 같은 크기의 셀에 들어간 PNG 한 장입니다. 그것이 당신의 스프라이트 시트입니다. 낱장 이미지로만 내보낼 수 있는 도구로 그렸다면 다음 단계에서 합칩니다.

3단계: 프레임을 한 장으로 합치기

많은 워크플로가 낱장 PNG로 가득한 폴더로 끝납니다. 스프라이트 팩에서 나온 walk_01.png부터 walk_08.png, 3D 모델에서 렌더링한 프레임, 생성기의 출력물 같은 것들입니다. 이것들은 셀이 균일한 파일 하나가 되어야 합니다.

아무 이미지 편집기에서 손으로 할 수도 있습니다. 열 수 × 셀 너비에 행 수 × 셀 높이 크기의 캔버스를 만들고, 각 프레임을 셀 크기의 정확한 배수 위치에 놓으면 됩니다. 되긴 하지만 지루하고, 1픽셀씩 어긋나기 쉽습니다.

더 빠른 길은 이 사이트의 무료 스프라이트 시트 메이커입니다. 프레임을 끌어다 놓으면 파일명 순으로 정렬하고, 가장 큰 프레임에 맞춰 셀을 잡고, 모든 프레임을 공통 기준선에 정렬한 다음, PNG와 함께 엔진에 입력할 셀 크기를 알려 줍니다. 아무것도 업로드되지 않으며, 합치는 작업은 브라우저 안에서 이루어집니다. 가지고 있는 애니메이션이 낱장 프레임이 아니라 움직이는 GIF라면, GIF를 스프라이트 시트로 변환기가 모든 프레임을 추출해 PNG 시트 한 장으로 내보내 줍니다.

어느 길을 택하든 넘어가기 전에 두 가지를 확인하세요. 모든 셀이 정확히 같은 크기인지, 그리고 캐릭터의 발이 모든 프레임에서 같은 선 위에 있는지. 두 번째는 정지 이미지에서는 보이지 않지만 애니메이션이 재생되는 순간 바로 드러납니다.

4단계: 엔진에 스프라이트 시트 임포트하기

모든 엔진이 요구하는 것은 같습니다. 모든 셀의 크기가 같고, 간격 크기를 알려 주지 않는 한 간격이 없는 시트. 설정이 어디에 있는지는 다음과 같습니다.

Unity

PNG를 선택합니다. Inspector에서 Texture Type을 Sprite (2D and UI)로, Sprite Mode를 Multiple로 설정합니다.
픽셀 아트라면 Filter Mode를 Point (no filter)로, Compression을 None으로 설정합니다. 기본값인 바이리니어 필터가 픽셀 아트를 흐릿하게 만드는 주범이고, 누구나 한 번은 걸립니다.
Pixels Per Unit을 셀 크기로 설정해 셀 하나가 월드 유닛 하나가 되게 한 다음 Apply를 누릅니다.
Sprite Editor를 열고 Slice → Grid By Cell Size를 선택해 셀 너비와 높이(간격을 넣었다면 padding도)를 입력하고 슬라이스합니다.
잘린 스프라이트들을 한꺼번에 Scene으로 끌어다 놓으면 Animation Clip이 만들어집니다. 또는 Animation 창에서 직접 만듭니다.

Godot 4

AnimatedSprite2D 노드를 추가하고 Sprite Frames 속성에서 새 SpriteFrames 리소스를 만듭니다.
SpriteFrames 패널에서 Add frames from a Sprite Sheet를 누르고 PNG를 고른 다음 Horizontal에 열 수, Vertical에 행 수를 입력합니다. Godot이 격자를 대신 잘라 줍니다.
해당 애니메이션에 속하는 프레임을 선택하고 FPS를 설정한 뒤 Loop를 켭니다.
픽셀 아트라면 Project Settings → Rendering → Textures에서 Default Texture Filter를 Nearest로 설정합니다. 프로젝트의 stretch 모드도 canvas_items에 정수 스케일링으로 설정해 2배가 정확히 2배로 유지되게 합니다.

RPG Maker MV / MZ

RPG Maker는 레이아웃을 고를 수 없기 때문에 앞의 둘보다 엄격합니다. 캐릭터 시트는 고정된 격자입니다.

캐릭터 하나는 3열 × 4행입니다. 방향마다 걷기 프레임 세 개이며, 행 순서는 아래, 왼쪽, 오른쪽, 위입니다.
MV와 MZ는 기본적으로 48×48 셀을 쓰므로 캐릭터 블록 하나는 144×192픽셀입니다.
표준 시트 한 장에는 블록을 4×2로 배치해 캐릭터 8개가 들어갑니다(576×384픽셀).
파일명 앞에 $를 붙이면 엔진에 이 파일이 여덟이 아니라 캐릭터 하나를 담고 있다고 알려 줍니다. !를 붙이면 엔진이 캐릭터에 적용하는 작은 위쪽 오프셋이 꺼지는데, 오브젝트와 문에는 이것이 필요합니다.

파일을 img/characters/에 넣으면 캐릭터 선택기에 나타납니다. 프레임이 48×48이 아니라면 격자가 맞도록 (그림이 아니라) 셀 크기를 조정하세요. RPG Maker는 임의 크기의 시트를 잘라 주지 않습니다.

Phaser (보너스)

this.load.spritesheet("hero", "hero.png", { frameWidth: 32, frameHeight: 32 });
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("hero", { start: 0, end: 7 }),
  frameRate: 10,
  repeat: -1,
});

게임 설정에서 pixelArt: true를 지정하면 렌더러가 최근접 이웃 스케일링을 씁니다.

스프라이트 시트를 아마추어처럼 보이게 하는 다섯 가지 실수

셀이 균일하지 않다. 각 프레임을 경계 상자에 맞춰 잘라내면 깔끔해 보이지만 격자 슬라이싱이 완전히 깨집니다. 셀은 균일하게 유지하고 빈 공간은 비워 두세요.
지면 선이 일정하지 않다. 1번 프레임에서 발이 y=60에 있고 5번 프레임에서 y=58에 있으면 스프라이트가 걸을 때 들썩입니다. 모든 프레임이 같은 기준선을 써야 합니다.
투명 가장자리 번짐. GPU가 셀 가장자리의 픽셀을 샘플링할 때 바이리니어 필터링이 옆 셀의 픽셀을 끌어와 1픽셀 두께의 엉뚱한 색 테두리가 생깁니다. 포인트 필터링을 쓰거나, 셀마다 1–2px의 투명 여백을 두고 엔진에 padding을 알려 주세요.
표시 배율이 정수가 아니다. 32px 아트를 2.4배로 띄우면 어른거립니다. 정확히 2배, 3배, 4배가 나오는 카메라 크기를 고르세요.
실루엣이 흘러 다닌다. 프레임마다 처음부터 그렸기 때문에 캐릭터가 프레임을 지나며 슬며시 뚱뚱해지거나 홀쭉해집니다. 다시 그리지 말고 프레임을 복제해서 살짝 옮기고, 매번 어니언 스킨을 켜세요.

아니면, 수작업을 건너뛰기

일관된 8프레임을 손으로 그리는 것은 진짜 기술이고, 대부분의 1인 개발자가 임시 아트를 단 채로 출시하는 이유이기도 합니다. 병목은 아이디어가 아닙니다. 캐릭터의 비율, 팔레트, 실루엣을 모든 프레임에서 흔들림 없이 유지하는 일입니다.

그 일관성 문제야말로 생성 AI가 잘하는 것입니다. SpriteGen 스프라이트 생성기는 텍스트 설명을 받아 이 가이드에서 정한 시점, 스타일, 프레임 수, 셀 크기를 고르게 한 뒤, 프레임이 이미 균일한 격자에 정렬된 완성 스프라이트 시트를 돌려줍니다. 가입 없이 무료로 써 볼 수 있고, 1분 정도 걸립니다. 애니메이션이 아니라 아이템, 아이콘, NPC 같은 정지 스프라이트 한 장이 필요하다면 AI 스프라이트 메이커가 투명 배경의 픽셀 아트 PNG로 그려 줍니다.

무엇으로 만들든 위의 숫자들은 먼저 정해야 합니다. 그 숫자를 중심으로 애니메이션 상태 머신을 다 짜 놓은 뒤에 고치는 것보다 처음에 제대로 정하는 편이 훨씬 싸게 먹힙니다.