스프라이트 패킹 가이드

스프라이트 패킹 도구는 여러 개의 이미지를 하나의 스프라이트 시트로 합칩니다. 게임 애니메이션 프레임이나 아이콘 세트를 하나의 파일로 묶을 때 사용합니다.

사용 목적

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

사용 순서

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

옵션 선택 기준

시트 방향(가로/세로): 프레임을 나열하는 축입니다. 낱장 폭이 좁고 프레임 개수가 많다면 가로로, 세로로 긴 프레임이 많다면 세로 방향이 더 정사각형에 가까운 시트를 만듭니다.
Anchor 프리셋(좌상단/중앙/우하단 등)은 프레임 크기가 서로 다를 때 정렬 기준점을 정합니다. 크기가 동일한 UI 아이콘이라면 어떤 Anchor를 선택해도 결과가 같지만, 크기가 들쭉날쭉한 애니메이션 프레임은 Anchor에 따라 캐릭터 중심이 흔들리지 않도록 정렬됩니다.
사용자 지정 Anchor 값을 입력하면 프레임 내부의 임의 좌표(예: 발 위치, 무게중심)를 기준점으로 지정할 수 있어, 게임 엔진에서 회전·충돌 판정 기준을 맞추기 쉬워집니다.

정렬(Anchor) 이해하기

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

실패·주의 케이스

가로 또는 세로 중 하나라도 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는 프레임을 정렬할 기준점입니다. 프리셋(좌상단/중앙/우하단 등) 대신 사용자 지정 좌표를 입력하면, 게임 엔진에서 캐릭터의 발 위치나 회전 중심처럼 특정 지점을 기준으로 스프라이트를 배치할 때 활용할 수 있습니다.