패널 이미지의 네 경계선을 끌어 정하고, 여러 목표 크기로 늘린 결과를 바로 확인하세요.
나인 슬라이스(9패치) 테두리는 원본 픽셀 기준 숫자 네 개(왼쪽·오른쪽·위·아래)로, 이미지를 3 × 3 격자로 나눕니다. 네 모서리는 항상 원래 크기로 그려지고, 위·아래 변은 가로로만, 왼쪽·오른쪽 변은 세로로만 늘어나거나 반복되며, 가운데는 양쪽으로 변합니다. 여기서 테두리를 한 번 정하고(동일한 열·행에서 제안), 원하는 크기로 미리 본 뒤, 같은 숫자를 Godot 4(NinePatchRect.patch_margin_*), Unity(Sprite Editor 테두리, Image Type Sliced), Phaser(add.nineslice)에 넣으면 됩니다. 결과물은 PNG + nine-slice.json + SETUP.md이며 엔진 안에서의 렌더링은 실행해 보지 않았습니다.
W × H 이미지에 테두리 L·R·T·B를 주면 모서리 넷(L × T, R × T, L × B, R × B), 너비 W − L − R인 위·아래 변, 높이 H − T − B인 왼쪽·오른쪽 변, 그리고 가운데가 생깁니다. 패널 크기를 바꾸면 모서리는 그대로 복사되고, 가로 변은 너비만, 세로 변은 높이만, 가운데는 양쪽이 바뀝니다. 그래서 둥글거나 경사진 모서리가 어떤 크기에서도 유지되며, 모든 모서리를 온전히 보여 주는 최소 크기는 (L + R) × (T + B)입니다.
늘이기(Stretch)는 변이나 가운데를 새 길이로 리샘플링하므로 단색이나 반대 축 방향 그라데이션에 맞습니다. 반복(Tile)은 원래 크기로 되풀이해 무늬(리벳, 바느질, 벽돌 테두리)가 일그러지지 않으며, Nerulio는 마지막 조각을 잘라 냅니다. Godot 4에는 조각이 모두 온전히 보이도록 살짝 늘이는 Tile Fit도 있지만 Nerulio 미리보기는 이 모드를 그리지 않습니다.
엔진마다 같은 숫자 네 개를 다른 이름과 순서로 저장합니다. Godot 4는 NinePatchRect의 patch_margin_left/right/top/bottom(정수, 픽셀)과 StyleBoxTexture의 texture_margin_*를 씁니다. Unity Sprite Editor에는 L·R·T·B 칸이 있지만, 스크립트 값 Sprite.border는 왼쪽·아래·오른쪽·위 순서의 Vector4입니다. Phaser NineSlice는 크기 뒤에 leftWidth, rightWidth, topHeight, bottomHeight를 받고, 왼쪽·오른쪽 폭만 주면 3슬라이스가 됩니다.
모든 변의 테두리가 12px입니다. 편집기의 그리기 계획이 만드는 사각형이며, 내보낸 미리보기도 같은 계획을 씁니다.
원본 48 × 48 테두리 L 12 · R 12 · T 12 · B 12 목표 300 × 80 늘이기
모서리 4 × (12×12 → 12×12) 1:1 복사, 리샘플링 없음
위/아래 24×12 → 276×12 276 = 300 − 12 − 12 (가로로만 ×11.5)
왼/오른 12×24 → 12×56 56 = 80 − 12 − 12 (세로로만 ×2.33)
가운데 24×24 → 276×56
반복 모드 위 변 = 24px 조각 11개 + 잘린 12px 조각 1개 (11 × 24 + 12 = 276)
너무 작음 목표 20 × 80: 20 < 12 + 12 → 모서리가 10 + 10으로 찌그러짐 (경고 "narrow")
비대칭 L 10 · R 6 · T 8 · B 14 → Unity Sprite.border (x, y, z, w) = (L, B, R, T) = (10, 14, 6, 8)
Godot patch_margin_left 12 · right 12 · top 12 · bottom 12
Phaser this.add.nineslice(x, y, "panel", null, 300, 80, 12, 12, 12, 12)정수 배율 2를 쓰면 모서리가 정확히 24 × 24로(원본 픽셀 하나가 2 × 2로) 그려져, 픽셀 아트 테두리가 두 배 크기에서도 선명합니다.
| 파일 | 용도 |
|---|---|
panel.png | 원본 이미지. 바꾸지 않고 파일 이름을 따릅니다. |
previews/100x40.png, 300x80.png, 800x200.png + custom size | 선택한 모드와 배율로 각 미리보기 크기에 그린 패널(사용자 크기 기본값 420 × 120). |
nine-slice.json | 테두리를 pixels, normalized(테두리 ÷ 너비 또는 높이), godot4(patch_margin_*), unity(L·B·R·T 순서의 border, 순서 이름 포함)로 담고, 모드·배율·미리보기 크기도 기록. |
SETUP.md | 숫자를 채운 Godot 4·Unity 설정 단계. 엔진 안에서 실행하지 않았다고 표시. |
NinePatchRect를 추가하고 Texture에 PNG를, patch_margin_left·patch_margin_right·patch_margin_top·patch_margin_bottom에 nine-slice.json의 숫자 네 개를 넣습니다.axis_stretch_horizontal과 axis_stretch_vertical을 Tile(또는 Tile Fit)로 둡니다. Button·Panel 테마라면 StyleBoxTexture의 texture_margin_*에 같은 숫자를, 축 늘이기도 같게 설정합니다.pixels 값을 입력합니다.this.add.nineslice(x, y, key, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight). Phaser 4.1 API에는 늘이지 않고 반복하는 tileX·tileY가 있습니다.previews/300x80.png와 비교합니다. 12 × 12 모서리 네 개가 픽셀 단위로 같아야 합니다.Debug.Log(sprite.border)가 JSON의 unity.border 숫자(왼쪽·아래·오른쪽·위)를 출력해야 합니다.| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| Unity에서 모서리가 늘어남 | Mesh Type이 Tight이거나 Image·Sprite Renderer가 아직 Simple로 그림 | 텍스처 가져오기 설정과 Image Type 또는 Draw Mode | Mesh Type을 Full Rect로 바꾸고 Apply한 뒤 Image Type Sliced나 Draw Mode Sliced로 |
| Unity에서 위·아래 테두리가 뒤바뀐 듯 보임 | Vector4 순서(왼쪽·아래·오른쪽·위)를 L·R·T·B 칸에 넣었거나 그 반대 | Sprite Editor 칸과 JSON의 pixels 비교 | Sprite Editor에는 pixels를 입력하고, unity.border는 스크립트의 Sprite.border에만 사용 |
| 작은 크기에서 모서리가 찌그러짐 | 컨트롤이 L + R 또는 T + B보다 작음 | Nerulio가 그 크기에 "narrow"·"short" 경고 표시 | 컨트롤을 키우거나 테두리를 줄이기 |
| 무늬가 있는 변이 번져 보임 | 변을 늘여서 반복 무늬가 리샘플링됨 | 미리보기를 반복으로 바꿔 비교 | Godot은 축 늘이기 Tile·Tile Fit, Unity는 Tiled, Phaser 4는 tileX·tileY |
| 픽셀 아트 모서리가 흐림 | Linear 필터이거나 배율이 정수가 아님 | 확대하면 모서리 계단이 부드러움 | Nearest 필터와 정수 배율(편집기 배율은 1~4) |
| TexturePacker 아틀라스의 Phaser NineSlice가 이상함 | 프레임이 트림됨. Phaser 문서는 NineSlice가 트림된 TexturePacker 텍스처를 지원하지 않는다고 적음 | 아틀라스 JSON에서 트림된 프레임 확인 | 패널을 트림 없이 패킹하거나 별도 이미지로 불러오기 |
| "테두리 제안"이 뚜렷한 구간을 못 찾음 | 가운데가 그라데이션이나 노이즈라 같은 열·행이 없음 | 제안에 반복되는 열·행이 없다고 나옴 | 모서리 그림이 끝나는 곳에 가이드를 직접 놓기 |
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| Godot NinePatchRect 인스펙터나 Unity Sprite Editor에서 직접 설정 | 패널이 한두 개이고 이미 엔진에서 작업할 때. 끌면서 실제 엔진 렌더링을 봅니다. |
| UI 랩의 아틀라스 단계 | 한 시트에 패널이 많을 때. 요소마다 테두리를 주고 모두 ui-atlas.json 하나에 담깁니다. |
.tres, .meta, Android .9.png)은 쓰지 않습니다.docs/UI-LAB.md를 위해 Chromium에서 측정했습니다. 내보낸 모든 미리보기의 6 × 6 모서리 블록이 100 × 40, 300 × 80, 800 × 200, 420 × 120에서 원본과 바이트 동일했고, 그리기 계획은 300 × 80, 배율 3, 8 × 4로 찌그러뜨린 경우 모두 빈틈·겹침 0이었습니다. 줄무늬 12 × 12 패널은 4px 주기로 반복되고, 제안은 동일한 열·행 12개 구간에서 6 · 6 · 6 · 6을 찾았습니다. Firefox에서는 반투명 모서리 픽셀이 알파 반올림 한 단계만큼 다를 수 있습니다. Godot·Unity 가져오기는 UNVERIFIED입니다. 위 엔진 설정은 Godot 4.7, Unity 6, Phaser API 공식 문서를 따릅니다.
패널 이미지의 네 경계선을 끌어 정하고, 여러 목표 크기로 늘린 결과를 바로 확인하세요.
PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 입력 디코딩은 브라우저 지원과 추가 엔진 사용 여부에 따라 다릅니다.
패널 이미지의 네 경계선을 끌어 정하고, 여러 목표 크기로 늘린 결과를 바로 확인하세요.
advanced · repeated-line border suggestion / nine-slice draw plan (stretch and tile). 품질 검증을 진행 중입니다. Pro·Flagship 수준은 아직 입증되지 않았습니다.
경계선 추천은 같은 열·행이 반복되는 구간을 찾는 휴리스틱입니다. 늘리기와 타일링은 브라우저 캔버스로 그립니다.
경계선 추천은 같은 열·행이 반복되는 구간을 찾는 휴리스틱입니다. 늘리기와 타일링은 브라우저 캔버스로 그립니다.
이 도구에서 연 파일은 서버에 업로드하지 않고 사용자 기기에서 처리합니다. 커뮤니티 글에 직접 첨부하는 이미지는 별도로 업로드됩니다. 일부 엔진과 모델은 외부에서 내려받으므로 IP 주소 등 연결 정보가 해당 서비스에 전달됩니다.
아니요. 이미지와 편집 상태는 이 탭에 있고 미디어 결과는 기기 내 임시 저장소를 사용할 수 있습니다. 언어를 바꿔도 작업은 유지되지만 새로고침, 탭 닫기, 다른 페이지로 이동하면 사라질 수 있습니다.