스프라이트 시트 자르기 · 프레임 분할
시트를 넣으면 Studio가 픽셀에서 칸 크기·여백·간격을 재거나 투명한 틈을 기준으로 불규칙한 스프라이트를 잘라, 아무것도 바꾸기 전에 신뢰도와 함께 결과를 미리 보여 줍니다.
스프라이트 시트를 자르려면 축마다 네 값이 필요합니다. 칸의 너비와 높이, 첫 칸 앞의 여백(마진), 칸 사이 간격입니다. PNG를 여기에 놓으면 Nerulio가 그림 사이의 투명한 틈에서 이 값을 재고, 신뢰도와 함께 자를 모습을 미리 보여 주며, 적용을 눌러야 비로소 자릅니다. 격자가 없는 시트는 투명한 틈을 따라 자릅니다. 프레임은 태그·타이밍·엔진 내보내기를 위해 한 프로젝트에 남고, 프레임마다 PNG 파일 하나가 필요하면 기존 스프라이트 랩을 씁니다.
- Godot 4검증됨· Godot 4.7.2
- Unity 6검증됨· Unity 6000.5.3f1
- Phaser 3 / 4검증됨· Phaser 3.90 + 4.2
- PixiJS 8검증됨· PixiJS 8.21
- Aseprite JSON검증됨· Phaser load.aseprite · PixiJS 8.21
- .aseprite검증됨· Aseprite 1.3.18
- Spine / libGDX검증됨· spine-canvas 4.2
- Starling / Sparrow XML검증됨· Phaser 4.2
- LÖVE검증됨· LÖVE 11.5
- Defold빌드 확인· Defold bob.jar 1.13.1
- GameMaker미검증
- CSS sprites검증됨· Chromium
- GIF / APNG디코딩 확인· Pillow
칸·마진·간격: 격자 시트의 구조
격자 시트는 같은 크기 칸으로 된 표입니다. n번째 열은 마진 + n × (칸 너비 + 간격)에서 시작하므로 값 하나만 틀려도 잘린 위치가 점점 밀리거나 첫 줄이 잘리거나 스프라이트가 둘로 나뉩니다. 파일 크기만으로는 격자를 알 수 없습니다. 256 × 256 시트는 8, 16, 32, 64, 128로 모두 나누어떨어지고, 작가가 어느 값을 썼는지는 픽셀만 알려 줍니다.
가져오기는 보여 줄 수 있는 근거로 후보 격자에 점수를 매깁니다. 격자상 틈이어야 할 행과 열이 완전히 투명한지, 그림이 칸 간격으로 반복되는지, 내용이 칸 경계를 넘지 않는지, 칸마다 내용의 범위가 비슷한지입니다. 마진은 64px까지, 간격은 칸의 4분의 1(최대 16px)까지 찾아보고, 가장 좋은 후보와 대안을 높음·중간·낮음 신뢰도와 근거와 함께 보여 줍니다.
다르게 잘라야 하는 시트가 두 가지 있습니다. 크기가 제각각인 스프라이트를 격자 없이 채운 시트는 덩어리(아일랜드) 단위로 자릅니다. 서로 닿은 불투명 픽셀 묶음이 프레임 하나가 되고, 불꽃 같은 작은 조각은 가장 가까운 스프라이트가 분명할 때 거기에 붙습니다. 마젠타나 단색 배경에 그린 시트는 읽을 투명도가 없으므로 먼저 테두리에서 배경색을 찾아 투명하게 만들고, 원본은 되돌리기용으로 프로젝트에 남깁니다.
- 칸(셀)
- 시트 위 프레임 하나의 사각형. 너비 × 높이(픽셀).
- 마진(오프셋 X / Y)
- 첫 칸 앞, 왼쪽과 위쪽 가장자리의 빈 픽셀.
- 간격(Gap X / Y)
- 이웃한 두 칸 사이의 빈 픽셀.
- 아일랜드
- 격자 대신 투명한 틈을 따라 자른 프레임. 격자가 없는 시트용.
예시: 마진 1px, 간격 2px인 136 × 68 시트
32 × 32 프레임이 4열 2행입니다. 칸이 시작하는 위치와, 마진·간격을 빼먹었을 때 생기는 일:
n열의 x = 1 + n × (32 + 2) → 1, 35, 69, 103
r행의 y = 1 + r × (32 + 2) → 1, 35
쓰인 너비 = 1 + 4 × 32 + 3 × 2 = 135 → 오른쪽 1px 남음(오른쪽 마진)
쓰인 높이 = 1 + 2 × 32 + 1 × 2 = 67 → 아래 1px 남음(아래 마진)
직접 격자 W 32 H 32 오프셋 1 간격 2 → "4 × 2 = 칸 8개가 온전히 들어감"
오프셋·간격 없이 32 × 32로 입력하면 n열은 n × 32에서 시작 → 0, 32, 64, 96
열마다 어긋남 → 1, 3, 5, 7px(간격만큼 커짐)직접 격자 패널은 이 계산을 입력하는 즉시 보여 주고 오른쪽과 아래에 남는 픽셀도 알려 줍니다. 값이 틀리면 어긋남이 열마다 커집니다. 경우별 진단은 자른 위치가 밀리거나 잘릴 때를 보세요.
이렇게 작동합니다
- 여백·간격까지 포함한 격자 제안을, 그림의 틈을 얼마나 잘 설명하는지에 따라 순위를 매겨 보여 줍니다.
- 불규칙한 시트는 섬 모드로 자릅니다. 작은 이펙트 조각은 본체에 붙고, 어디에도 속하지 않는 조각은 빨간색으로 표시합니다.
- 마젠타나 단색 배경을 투명하게 바꿉니다(되돌리기용으로 원본을 보관).
- 행마다 하나의 애니메이션과 재생 시간을 정하며, 한 번의 클릭으로 바꿀 수 있습니다.
사용 방법
- 이 페이지에 시트를 끌어다 놓거나 선택합니다.
- 프레임 수·격자·배경색·애니메이션 미리보기와 각 신뢰도를 확인합니다.
- 적용을 누릅니다(되돌리기 한 번). 필요하면 프레임 영역을 끌어서 고칩니다.
- 패킹·내보내기에서 사용하는 엔진으로 내보냅니다.
결과 확인
- 적용 전에 미리보기의 프레임 수를 눈에 보이는 프레임 수와 비교합니다. 반만 찬 마지막 줄의 빈 칸은 세지 않고 건너뜁니다.
- 적용 후 시트 보기(`)로 바꿉니다. 모든 영역 윤곽이 그림이 아니라 틈을 지나야 합니다. 아직 어긋난 영역은 드래그해 옮기세요.
- 한 줄을 Enter로 재생합니다. 간격 폭만큼 튀는 프레임은 간격 값이 틀린 것이고, 1px 정도 들썩이는 건 대개 원래 그렇게 그린 것입니다(아니라면 프레임 정렬).
- 아일랜드 모드에서는 빨간 조각이 있는지 봅니다. 어느 프레임에도 속하지 않아, 영역을 넓혀 덮지 않으면 빠집니다.
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| 열마다 조금씩 더 어긋남 | 격자가 칸 사이 간격을 무시함 | 시트 보기에서 어긋남이 열마다 같은 만큼 늘어남 | 간격 X(필요하면 Y)를 넣거나, 목록에서 간격이 있는 대안을 고름 |
| 시트 전체가 프레임 하나가 됨 | 불투명한 배경(마젠타·검정·단색)이라 프레임 사이에 투명한 틈이 없음 | 가져오기 패널에 배경색 결정이 없거나 거부된 상태 | 가져오기 패널에서 배경색 대안을 선택. 손대지 않은 원본은 되돌리기용으로 남음 |
| 스프라이트가 반으로 잘리거나 두 개가 한 프레임에 들어감 | 칸 크기가 실제의 절반이나 두 배 | 프레임 수가 눈에 보이는 수의 두 배이거나 절반 | 목록에서 다른 칸 크기를 고르거나 직접 입력. 크기가 제각각이면 아일랜드 |
| 불꽃이나 먼지가 사라지거나 아주 작은 프레임이 됨 | 아일랜드 모드는 떨어진 픽셀을 조각으로 보고, 어느 스프라이트와도 먼 조각은 배정하지 않음 | 미리보기 캔버스에 빨간 조각이 보임 | 프레임 영역을 넓혀 덮거나, 아일랜드 대신 격자로 자르기 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| 엔진 자체의 자르기: Godot SpriteFrames 패널(Add frames from a Sprite Sheet), Unity Sprite Editor(Slice: Grid By Cell Size, Grid By Cell Count, Automatic) | 칸 크기를 이미 알고 프레임을 프로젝트 안에서 만들고 싶을 때. Unity 쪽은 Offset과 Padding도 받습니다. Godot에서 스프라이트 시트 쓰기, Unity에서 스프라이트 시트 쓰기 참고. |
| 기존 스프라이트 랩 | 프레임마다 PNG 파일 하나를 ZIP으로 받아야 할 때: 스프라이트 시트를 PNG 프레임으로. |
| 시트와 함께 온 아틀라스 데이터 | 패킹된 아틀라스에는 격자가 아예 없습니다. PNG와 JSON·XML을 함께 아틀라스 뷰어로 여세요. |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | 검증됨 Godot 4.7.2Godot가 불러와 모든 애니메이션 프레임을 그려 원본과 비교했습니다. 씬은 Nearest 필터를 쓰고 회전은 쓰지 않습니다. |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | 검증됨 Unity 6000.5.3f1배치 모드에서 스프라이트 영역·피벗·픽셀·클립 키·길이를 확인했습니다. |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | 검증됨 Phaser 3.90 + 4.2두 버전 모두에서 프레임과 애니메이션을 그렸습니다. |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | 검증됨 PixiJS 8.21회전·여러 페이지 아틀라스도 포함해 확인했습니다. |
| Aseprite JSON | hash / array · frameTags · slices | 검증됨 Phaser load.aseprite · PixiJS 8.21태그의 방향과 반복 횟수가 유지됩니다. |
| .aseprite | layers · tags · durations · slices | 검증됨 Aseprite 1.3.18Aseprite 명령줄로 열어 렌더링했습니다. |
| Spine / libGDX | .atlas | 검증됨 spine-canvas 4.2Spine 런타임이 회전·트림 영역을 모두 그렸습니다. libGDX 자체는 실행하지 않았습니다. |
| Starling / Sparrow XML | XML per page | 검증됨 Phaser 4.2Phaser 3.90은 트림된 XML 프레임을 잘못 그립니다(Phaser 버그). "Sparrow XML (Phaser 3)" 프리셋은 트림을 끄며 3.90·4.2 모두 통과합니다. |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | 검증됨 LÖVE 11.5포함된 헬퍼로 모든 프레임을 그리고 모든 애니메이션을 재생했습니다. |
| Defold | .atlas · .tilesource | 빌드 확인 Defold bob.jar 1.13.1Defold 명령줄 빌더로 빌드하고 빌드된 텍스처의 UV를 다시 읽어 확인했습니다. |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | 미검증GameMaker에서 불러오지 않았습니다(헤드리스 실행 불가). 스트립은 GameMaker 스트립 가져오기 방식대로 자릅니다. |
| CSS sprites | .css · preview .html | 검증됨 Chromium포함된 스타일시트로 모든 클래스를 그렸습니다. |
| GIF / APNG | one file per animation | 디코딩 확인 Pillow내보낸 뒤 모든 프레임과 지연 시간을 다시 디코딩했습니다. APNG는 원본과 동일합니다. |
검증 근거
GIF 디코더: 실제 GIF 29개 408/408프레임이 Pillow와 동일, APNG 16개 132/132프레임. .aseprite: 코퍼스 231개 파일을 가져와 다시 쓰고 Aseprite 1.3.18로 열었을 때 태그·길이·픽셀 231/231 일치. 내보내기: 실제 CC0 에셋으로 실제 엔진에서 49회 실행해 47회 통과. 실패 2회는 Phaser 3.90의 트림 XML 버그이며 Phaser 3 프리셋으로 피합니다.
한계
- 자동 감지는 마진 64px, 간격 16px까지 찾습니다. 그보다 넓으면 직접 격자로 입력하세요.
- 트림되거나 회전된 아틀라스는 PNG만으로 되살릴 수 없습니다. 사각형 정보는 데이터 파일에 있습니다.
- 프레임별 PNG 파일은 아직 Studio 내보내기에 없습니다.
- 격자·섬 인식은 신뢰도가 표시된 미리보기일 뿐이며 적용을 누르기 전에는 아무것도 자르지 않습니다. 모든 선택에는 한 번에 바꿀 수 있는 대안이 있습니다.
- 레이어가 정확히 합성되지 않는 .aseprite 파일(그룹 불투명도 등)은 합쳐서 가져오고, 가져오기 패널에 이유를 표시합니다.
- 가져온 아틀라스에서 회전된 프레임은 회전된 채로 남으며 그 내보내기는 미검증입니다.
- 이미지는 한 변 32,768px(2억 6,800만 픽셀)까지이며 브라우저 메모리에 따라 달라집니다.
버전과 출처
기본 선택 그대로 실제 에셋 16개를 모두 올바르게 잘랐습니다(일반·배경색 시트, 4096² 이펙트 시트, 아틀라스 데이터, 프레임 파일, GIF, .aseprite; 2026-09-23). 위에 적은 엔진 자르기 기능은 Unity 6 매뉴얼과 Godot 4.7 문서를 따릅니다.
참고한 공식 문서
기존 도구
프레임별 PNG 파일(ZIP), 외곽선, 가장자리 정리는 아직 기존 스프라이트 랩에 있습니다.
기존 도구 열기 →자주 묻는 질문
격자 추측이 틀리면 어떻게 하나요?
목록의 다른 후보를 고르거나 칸 크기·여백·간격을 직접 입력하세요. 자르기 전에 미리보기가 바뀝니다.
프레임을 각각 PNG 파일로 받을 수 있나요?
Studio에는 아직 없습니다. 아래 링크의 기존 스프라이트 랩에서 프레임 PNG ZIP을 받을 수 있습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).