스프라이트 패킹 사용법 가이드

이 가이드에서는 여러 이미지를 하나의 스프라이트 시트로 묶는 순서와 스트립·아틀라스 배치 선택, 프레임 순서·앵커 정렬 조정, 그리고 좌표 데이터를 게임 엔진에서 읽는 방법을 단계별로 설명합니다.

사용 목적

이 도구는 게임 캐릭터의 걷기·공격 같은 애니메이션 프레임 여러 장을 하나의 시트로 묶거나, UI 아이콘 세트와 버튼 상태 이미지들을 한 파일로 정리할 때 사용합니다. 개별 파일 여러 개 대신 시트 하나와 좌표만 관리하면 되므로, 게임 엔진이 리소스를 불러올 때 드는 비용(드로우 콜, 로딩 시간)을 줄일 수 있습니다.

패킹 알고리즘 — 1축 순차 배치

기본 패커는 프레임 목록을 입력된 순서 그대로 훑으며 한 축으로만 이어붙입니다. 시트 방향을 가로로 두면 각 프레임은 폭만큼, 세로로 두면 높이만큼 누적 위치(커서)에 배치되고, 커서가 최대 시트 크기 4096px를 넘기려는 순간 시트를 하나 더 열고 커서를 0부터 다시 채웁니다. 한 시트 안에서 여러 줄로 접어 쌓지 않고, 다 차면 곧바로 새 시트로 넘어가는 구조라 이 배치를 스트립이라 부릅니다.

게임 스프라이트 패킹에서 흔히 말하는 shelf(선반) 방식은 한 시트 안에 여러 행을 쌓고 각 행이 이전 행 아래에서 시작합니다. 이 도구의 스트립 배치는 그보다 단순합니다 — 행을 접어 쌓지 않고 시트 하나당 줄 하나만 채웁니다. 여백을 최소화하는 최적 배치보다, 프레임 목록에 나열한 순서를 그대로 지키는 예측 가능성을 우선한 설계입니다.

사용 순서

여러 이미지를 한꺼번에 선택하거나 드래그해 추가합니다. 기존 목록 뒤에 이어서 붙습니다.
프레임 목록에서 순서를 위/아래로 옮기거나 개별 프레임을 삭제합니다.
시트 방향(가로/세로)과 프레임 정렬(Anchor)을 선택합니다.
미리보기가 최종 결과와 동일하게 갱신됩니다.
내보내기를 눌러 스프라이트 시트 PNG를 저장합니다.

옵션 선택 기준

시트 방향(가로/세로): 프레임을 나열하는 축입니다. 낱장 폭이 좁고 프레임 개수가 많다면 가로로, 세로로 긴 프레임이 많다면 세로 방향이 더 정사각형에 가까운 시트를 만듭니다.
Anchor 프리셋(좌상단/중앙/하단중앙)은 프레임 크기가 서로 다를 때 정렬 기준점을 정합니다. 크기가 동일한 UI 아이콘이라면 어떤 Anchor를 선택해도 결과가 같지만, 크기가 들쭉날쭉한 애니메이션 프레임은 Anchor에 따라 캐릭터 중심이 흔들리지 않도록 정렬됩니다.
사용자 지정 Anchor 값을 입력하면 프레임 내부의 임의 좌표(예: 발 위치, 무게중심)를 기준점으로 지정할 수 있어, 게임 엔진에서 회전·충돌 판정 기준을 맞추기 쉬워집니다.
레이아웃 — 가로/세로/아틀라스(2D): 가로·세로는 위에서 설명한 1축 스트립 배치이고, 아틀라스(2D)를 고르면 프레임을 2차원으로 채우는 별도 배치 방식이 적용됩니다(목록 순서·Anchor는 이 모드의 배치에 영향을 주지 않습니다). 아틀라스(2D) 레이아웃에서는 2의 거듭제곱(POT) 시트 크기 체크박스도 함께 선택할 수 있어, 완성된 시트의 가로·세로를 각각 2의 거듭제곱으로 올려 GPU 텍스처에 맞출 수 있습니다.

정렬(Anchor) 이해하기

가로 시트에서는 Anchor의 세로 값이 교차축 정렬(위/가운데/아래)을, 세로 시트에서는 가로 값이 좌/우 정렬을 결정합니다. 프레임 크기가 서로 다를 때 정렬 기준을 맞추는 데 사용합니다.

내부적으로는 1축 배치가 끝난 뒤 시트 단위로 위치를 다시 계산합니다. 프레임마다 앵커까지의 거리(가로 시트면 프레임 높이×Anchor Y, 세로 시트면 프레임 폭×Anchor X)를 구하고, 그 값 중 최댓값을 시트의 공통 기준선(baseline)으로 삼습니다. 각 프레임은 baseline에서 자기 앵커까지의 거리만큼 물러난 위치로 옮겨져, 크기가 다른 프레임이라도 앵커가 가리키는 지점(예: 발 위치)이 시트 전체에서 같은 선 위에 나란히 놓입니다.

Anchor 값은 0~1 범위의 정규화 좌표입니다(가로 시트 기준으로 0은 위쪽 끝, 1은 아래쪽 끝에 대응합니다). 프리셋은 좌상단(0, 0)·중앙(0.5, 0.5)·하단중앙(0.5, 1) 세 가지이며, 사용자 지정을 선택하면 0~1 범위의 소수를 직접 입력할 수 있습니다(범위를 벗어나거나 숫자가 아니면 저장되지 않고 오류로 표시됩니다). 이 도구를 열었을 때 기본 프리셋은 중앙입니다.

실패·주의 케이스

가로 또는 세로 중 하나라도 4096px를 초과하는 이미지는 시트에 추가되지 않습니다. 초과한 파일만 목록에서 제외되고 나머지는 정상적으로 추가되며, 제외된 파일명이 오류 메시지로 표시됩니다.
프레임 크기가 서로 다른 상태로 패킹하면 정렬 기준(Anchor)에 따라 캐릭터의 중심이 시트마다 달라 보일 수 있으므로, 애니메이션 프레임은 반드시 Anchor를 지정해 중심을 맞춰야 합니다.
프레임 목록 순서를 잘못 정렬하면 게임 엔진에서 애니메이션 재생 순서가 어긋나므로, 내보내기 전에 미리보기에서 순서를 반드시 확인하세요.
게임 엔진마다 스프라이트 시트 좌표계가 다를 수 있습니다(좌상단 원점 vs 좌하단 원점). 엔진에 맞는 좌표 변환이 필요한지 미리 확인하세요.

예시 시나리오

크기가 다른 idle/run 프레임 → 중앙 Anchor: 걷기·달리기 프레임의 크기가 서로 달라도 시트 방향을 가로로, Anchor를 '중앙'으로 지정하면 캐릭터 중심이 흔들리지 않는 시트가 만들어집니다.
UI 아이콘 세트 → 좌상단 Anchor: 크기가 동일한 아이콘들은 Anchor를 '좌상단'으로 지정하면 좌표 계산이 단순해져 UI 코드에서 아이콘 위치를 다루기 쉬워집니다.

팁

미리보기의 번호 배지는 시트에 배치되는 프레임 순서를 나타냅니다.
목록 선택과 미리보기 선택은 하나로 연동됩니다.
프레임을 이어붙인 길이가 4096px를 넘으면 자동으로 시트가 여러 장으로 나뉘어 생성됩니다. 시트가 2장 이상이면 개별 PNG 대신 ZIP 파일 하나로 묶여 다운로드됩니다.

자주 묻는 질문

Q. 출력 파일 형식은 무엇인가요?
PNG 스프라이트 시트로 저장됩니다. 여러 장의 시트가 만들어지면 자동으로 ZIP 파일 하나로 묶여 다운로드됩니다.

Q. 이미지가 서버에 저장되나요?
아니요. 이미지를 읽고 시트를 합성하는 과정은 모두 브라우저의 캔버스 기능으로 처리되며, 파일이 외부 서버로 전송되지 않습니다.

Q. 프레임 크기가 4096px보다 크면 어떻게 되나요?
해당 이미지는 시트에 추가할 수 없습니다. 추가 시도 시 그 이미지만 제외되고, 어떤 파일이 제외됐는지 오류 메시지로 안내됩니다.

Q. 프레임 크기가 서로 달라도 되나요?
네. 크기가 다른 프레임도 하나의 시트로 합칠 수 있습니다. 다만 Anchor를 지정해 정렬 기준을 맞추지 않으면 프레임마다 중심이 다르게 보일 수 있으니, 애니메이션처럼 중심이 중요한 경우 Anchor 설정을 권장합니다.

Q. Anchor 값은 어디에 쓰나요?
Anchor는 프레임을 정렬할 기준점입니다. 프리셋(좌상단/중앙/하단중앙) 대신 사용자 지정 좌표를 입력하면, 게임 엔진에서 캐릭터의 발 위치나 회전 중심처럼 특정 지점을 기준으로 스프라이트를 배치할 때 활용할 수 있습니다.

Q. 시트가 왜 2의 거듭제곱(POT) 크기가 되나요?
아틀라스(2D) 레이아웃에서 POT 시트 크기 체크박스를 켜면 완성된 시트의 가로·세로 각각을 다음 2의 거듭제곱 값으로 올림합니다. GPU가 밉맵을 만들거나 텍스처를 다룰 때 2의 거듭제곱 크기가 유리하기 때문이며, 기본값은 꺼짐입니다.

Q. 패킹 결과에 여백이 남아요 — 최적 배치가 아닌가요?
가로·세로 스트립 배치는 프레임 목록의 순서를 그대로 따르며 크기 기준으로 다시 정렬하지 않으므로, 여백을 최소화하는 최적 배치를 보장하지 않습니다. 여백을 줄이려면 아틀라스(2D) 레이아웃을 선택하세요 — 프레임을 크기 순으로 자동 정렬해 채웁니다.