스프라이트 패킹
여러 프레임 이미지를 가로·세로 스트립 또는 2D 아틀라스 시트로 패킹하고, 프레임 좌표·UV 데이터를 JSON과 CSV로 함께 내보내는 스프라이트 시트 도구입니다.
낱장 프레임 이미지를 업로드하면 가로 스트립·세로 스트립·2D 아틀라스 중 원하는 배치로 시트를 구성합니다. 프레임 크기가 서로 달라도 앵커 기준으로 정렬해 한 시트에 담을 수 있습니다.
패킹 결과는 시트 이미지만이 아니라 각 프레임의 좌표와 UV 값을 담은 데이터 파일로도 내보내므로, 게임 엔진이나 렌더러에서 바로 참조할 수 있습니다.
최대 시트 크기 한도 안에서 배치가 계산되며, 미리보기로 결과를 확인한 뒤 내려받을 수 있습니다.
이미지 슬라이서에서 추출한 프레임을 다시 업로드할 필요 없이 그대로 이어받아 시트로 패킹하는 연계 흐름도 지원합니다.
배치는 시트 한 변이 4096픽셀을 넘지 않는 범위 안에서 계산되며, 가로 스트립은 한 줄로, 아틀라스는 여러 행과 열로 프레임을 배열합니다.
완성된 시트는 PNG 이미지로 내려받고, 좌표 데이터는 별도 파일로 함께 저장됩니다.
업로드는 여러 장을 한꺼번에 받고 그중 이미지가 아닌 파일은 조용히 걸러 냅니다. 읽다가 실패한 파일과 크기 때문에 들어올 수 없는 파일은 서로 다른 안내로 나뉘어 뜨는데, 앞쪽은 읽을 수 없어 제외됐다는 오류로, 뒤쪽은 4096px를 넘어 제외됐다는 경고로 파일 이름과 함께 표시됩니다. 어느 쪽이든 나머지 정상 파일은 그대로 목록에 들어가므로 한 장이 잘못됐다고 전부 다시 올릴 필요가 없습니다.
목록에서는 프레임을 위아래 버튼으로 한 칸씩 옮기거나 끌어다 놓아 자리를 바꾸고, 체크한 여러 장을 한 번에 지우거나 한 장씩 지울 수 있습니다. 목록에서 고른 프레임과 미리보기에서 고른 프레임은 같은 선택으로 묶여 있어 어느 쪽을 눌러도 다른 쪽에 함께 표시됩니다.
미리보기 머리글에는 지금 담긴 프레임 수와 만들어질 시트 수, 한 변의 상한이 나란히 적혀 있어 설정을 바꿀 때마다 시트가 몇 장으로 갈라지는지 바로 보입니다. 다만 화면에 보이는 크기는 실제 픽셀 크기가 아닙니다 — 작은 시트는 짧은 변이 128픽셀쯤 되도록 키워 보여 주고, 큰 시트는 화면에 들어오도록 줄여 보여 줍니다.
가로로 이어 붙인 시트의 높이는 가장 높은 프레임이 정하고, 세로로 이어 붙인 시트의 폭은 가장 넓은 프레임이 정합니다. 그래서 유난히 큰 프레임 한 장이 섞이면 시트 전체가 그 크기로 커지고 나머지 프레임 옆에 빈 자리가 남습니다. 한 장만 두드러지게 크다면 목록에서 빼거나 이미지 리사이징 도구로 먼저 줄여서 넣는 편이 시트를 작게 만듭니다.
아틀라스를 고르면 배치 규칙 자체가 달라집니다. 프레임을 긴 변이 큰 것부터, 긴 변이 같으면 면적이 큰 것부터 줄 세운 뒤 남은 자리를 둘로 쪼개 가며 채우고, 자리가 모자라면 오른쪽이나 아래로 시트를 늘려 정사각형에 가깝게 키웁니다. 상한까지 늘려도 들어가지 못한 프레임은 다음 시트로 넘어갑니다.
패킹이 끝나면 미리보기 아래에 프레임 데이터 표가 따로 생깁니다. 한 줄이 프레임 하나이고 번호와 파일명, 시트 안 좌표와 크기에 더해 u0·v0·u1·v1 네 개의 값이 함께 실립니다. 이 네 값은 프레임의 왼쪽 위와 오른쪽 아래 지점을 시트 크기로 나눈 0에서 1 사이의 비율이며 소수 넷째 자리에서 반올림합니다. 2의 거듭제곱 올림을 켰다면 나누는 기준도 올림한 뒤의 최종 시트 크기라, 표에 적힌 값을 그대로 셰이더에 넣어도 어긋나지 않습니다.
내보내는 파일은 세 갈래입니다. 시트 이미지는 1부터 번호가 붙은 PNG로 나오고 두 장 이상이면 ZIP 하나로 묶입니다. 좌표는 표 위의 두 버튼으로 따로 받는데, JSON 쪽은 시트 목록과 프레임 배열을 함께 담고 CSV 쪽은 시트·이름·좌표·크기·네 비율 값 순서의 머리글 한 줄로 시작합니다. 파일 이름에 쉼표나 따옴표가 들어 있어도 표 형식 규칙대로 감싸 내보내므로 열이 밀리지 않습니다.
정렬 기준점 아래에는 그 값이 어떤 좌표계인지가 그대로 적혀 있습니다. 0에서 1 사이로 정규화한 좌표이고, 원점은 왼쪽 위이며, y는 아래로 갈수록 커진다는 세 가지입니다. 원점이 왼쪽 아래인 엔진에 넣기 전에 y를 뒤집어야 하는지 여기서 판단하면 됩니다.
프레임을 식별하는 단서는 목록 순서와 파일 이름 둘뿐입니다. 표와 내보낸 좌표 파일에는 업로드한 이름이 그대로 실리므로, 001.png·002.png처럼 순서가 드러나는 이름을 쓰면 엔진 쪽에서 재생 순서를 맞추기 쉬워집니다.
이 화면이 하지 않는 일도 분명합니다. 프레임을 돌려 눕히거나 투명 여백을 잘라 내는 조작이 없고, 시트에 배경색을 깔지 않아 원본의 투명한 자리는 투명한 채로 남습니다. 프레임 사이를 띄우는 여백 설정도 없으므로 이웃한 픽셀이 샘플링에 새어 드는 것이 걱정된다면 원본 이미지에 미리 여백을 넣어 두는 편이 안전합니다.
주요 기능
- 가로·세로 스트립과 2D 아틀라스 배치
- 앵커 기준 프레임 정렬
- 프레임 좌표·UV 데이터 내보내기
- 이미지 슬라이서 연계 가져오기
- 여러 장 동시 업로드 — 실패·크기 초과만 이름과 함께 따로 안내
- 프레임 목록 재정렬(버튼·드래그)과 선택 삭제, 미리보기 선택 연동
- 프레임 수·시트 수·한 변 상한을 미리보기 머리글에 상시 표시
- 아틀라스는 긴 변 내림차순 정렬 후 빈 자리 분할 배치
- UV는 최종 시트 크기 기준 0~1, 소수 넷째 자리 반올림
- 좌표를 JSON·CSV 두 형식으로 내보내기 — 이름의 쉼표·따옴표 자동 처리
- 앵커 좌표계 표기(정규화·좌상단 원점·y 아래 증가) 화면 노출
- 회전·트림·프레임 간 여백 없음 — 투명 배경 그대로 유지
사용 전 확인
여러 프레임 이미지를 스트립 또는 2D 아틀라스로 배치하고 좌표 데이터와 함께 내보냅니다.
프레임 순서와 최대 시트 크기를 먼저 확인하고, 서로 다른 크기의 프레임은 정렬 기준을 선택하세요.
사용 순서
- 프레임 이미지를 순서대로 추가합니다.
- 배치 방식과 정렬·간격 옵션을 고릅니다.
- 시트 미리보기와 좌표를 확인합니다.
- PNG와 좌표 데이터를 다운로드합니다.
주의사항
- 결과 시트의 한 변은 4096px를 넘을 수 없습니다.
- 파일명과 추가 순서가 프레임 식별과 출력 순서에 영향을 줍니다.
자주 묻는 질문
Q. 시트가 여러 장으로 나뉘어 나옵니다
시트 한 변의 상한이 4096픽셀이라 그렇습니다. 넣은 프레임을 한 장에 담을 수 없으면 자동으로 여러 장으로 나누고, 미리보기 위쪽에 프레임 수와 시트 수를 함께 보여줍니다. 프레임을 줄이거나 배치 방식을 아틀라스로 바꾸면 한 장에 들어갈 수 있습니다.
Q. 레이아웃을 아틀라스로 바꾸면 Anchor 설정 칸이 안 보입니다
의도된 동작입니다. 아틀라스 배치는 프레임을 크기 순으로 빈틈없이 채우는 방식이라 Anchor(정렬 기준점) 개념 자체를 쓰지 않으므로 설정 칸이 함께 사라집니다. 레이아웃을 가로·세로 스트립으로 되돌리면 Anchor 설정이 다시 나타납니다.
Q. 이미지를 추가로 올리면 먼저 올린 프레임이 사라지나요
아니요. 새로 올린 이미지는 기존 목록 뒤에 이어 붙습니다. 여러 번에 걸쳐 이미지를 나눠 올려도 먼저 올린 프레임은 그대로 남아 있으므로, 세트를 한 번에 모으지 않고 나눠서 올려도 됩니다.
Q. 내보낸 좌표가 시트 이미지의 실제 위치와 맞는지 어떻게 확인합니까
화면의 프레임 좌표 표와 내려받은 메타 파일의 값이 같은 좌표계를 씁니다. 시트 PNG를 이미지 편집기에서 열어 표의 x·y·w·h로 잘라보면 해당 프레임이 정확히 잘립니다. 두 프레임만 대조해도 좌표계가 맞는지 확인됩니다.
이 도구는 설치 없이 브라우저에서 바로 실행됩니다. 화면이 이 안내에 머물러 있다면 JavaScript를 활성화한 브라우저로 접속해 주세요.