UI 에셋 랩

9슬라이스·버튼 상태·UI 아틀라스·비트맵 폰트를 한 화면에서 만들고 실제 화면 크기로 확인하세요.

UI 시트(버튼·패널·아이콘을 투명 PNG 한 장에 그린 것)는 엔진이 그리기 전에 이름 붙은 사각형들로 나뉘어야 합니다. UI 랩은 알파 임계값을 넘는 픽셀 덩어리(섬)를 요소로 찾고, 합치기 거리보다 가까운 섬(버튼과 옆의 배지)을 하나로 묶은 뒤, 여백과 선택형 가장자리 확장을 넣어 ui-atlas.png에 패킹하고 각 영역과 나인 슬라이스 테두리를 ui-atlas.json에 씁니다. Godot·Unity 리소스 파일이 아니라 숫자를 쓰며, 9슬라이스·상태·폰트·점검 단계가 같은 이미지를 이어서 씁니다.

이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다

업로드 없음 · 이 기기에서 처리

UI 시트에서 아틀라스 사각형까지

요소는 손으로 윤곽을 그리듯 찾습니다. 알파가 임계값(기본 255 중 8)보다 큰 픽셀을 여덟 방향 이웃과 묶어 섬을 만들고, 최소 크기(기본 16픽셀)보다 작은 섬은 먼지로 보고 버립니다.

섬은 후보일 뿐 의미를 알지는 못합니다. 아이콘 옆에 떨어진 점이 있으면 섬이 둘입니다. 합치기 거리(기본 4px)는 틈이 그 이하인 두 상자를 합치고 더 합칠 것이 없을 때까지 반복하므로, 가까이 붙은 조각들이 merged 태그가 붙은 한 요소가 됩니다. 서로 닿아 있는 버튼 두 개는 처음부터 한 섬이라 합치기 거리와 상관없이 한 요소로 남습니다.

패킹은 MaxRects로 요소를 최대 4096 × 4096px 한 페이지에 놓고 주변에 여백(기본 2px)을 비워 둡니다. 가장자리 확장은 요소의 맨 바깥 픽셀을 N px만큼 바깥으로 복제해서, 필터링이나 밉맵이 요소 바로 바깥을 샘플링해도 요소 자신의 색을 읽게 합니다. JSON의 영역은 요소 자체이고 확장된 테두리는 그 바깥에 있습니다.

알파 섬: 알파 임계값을 넘는, 8방향으로 이어진 픽셀 묶음.
합치기 거리: 두 상자를 한 요소로 합치는 최대 틈(픽셀).
여백(padding): 패킹된 요소 사이에 비워 두는 픽셀.
가장자리 확장(extrude): 요소 영역 바깥에 둘러 놓는 가장자리 픽셀의 복사본.

예시: 256 × 128 시트 하나를 실제로 측정

투명 시트 위 도형 다섯 개를 랩과 같은 감지·합치기·패킹 코드로 처리한 결과입니다.

시트 256 × 128   알파 임계값 8   최소 16px   합치기 거리 4
섬      패널 64×64 @8,8   버튼 96×32 @96,8   아이콘 16×16 @200,12   점 4×4 @218,12   화살표 20×20 @96,64
아이콘 → 점 틈 = 218 − (200 + 16) = 2px ≤ 4   → 요소 하나 22×16 @200,12, 태그 "merged"
결과    섬 5개 → 요소 4개  (합치기 거리 0이면 5개 유지)
패킹    여백 2, 확장 1   → ui-atlas.png 102 × 108
영역    element-02 3,3 96×32   element-01 3,41 64×64   element-03 73,41 22×16   element-04 73,63 20×20

요소 번호는 패킹 전에 위에서 아래, 왼쪽에서 오른쪽 순으로 붙습니다. element-01이 패널, element-03이 합쳐진 아이콘입니다. 이름이 JSON frames의 키가 되므로 내보내기 전에 바꿔 두세요.

결과 확인

ui-atlas.json을 엽니다. frames에 남긴 요소마다 항목이 하나씩 있고, 모든 rect가 meta.size 안에 있어야 합니다.
아무 이미지 편집기에서 ui-atlas.png의 rect 하나를 잘라 원본 시트의 같은 요소와 비교합니다. 같은 픽셀이어야 합니다.
"tag": "merged"를 찾아보세요. 모두 일부러 합친 조각이어야 하며, 우연히 가까이 놓인 버튼 두 개면 안 됩니다.
요소에 나인 슬라이스 테두리를 줬다면 SETUP.md에 그 이름의 절과 숫자 네 개가 있습니다.

문제 해결

증상	유력한 원인	확인 방법	해결
버튼 두 개가 한 요소로 나옴	서로 닿아 있거나 틈이 합치기 거리 이하임	요소 상자가 두 버튼을 모두 덮고, 섬이 여럿이면 태그가 `merged`	합치기 거리를 0으로. 닿아 있다면 그림에서 투명 픽셀을 한 줄 이상 띄우기
글자·빛·그림자가 따로 요소가 됨	버튼과의 거리가 합치기 거리보다 멀거나, 픽셀이 알파 임계값보다 흐림	예상한 요소 개수와 비교하고 틈을 확대해 보기	합치기 거리를 몇 픽셀 올리고, 부드러운 그림자가 잘리면 알파 임계값을 낮추기
작은 점들이 요소로 잡힘	흩어진 픽셀이 최소 크기를 넘는 섬을 만듦	요소 목록에 아주 작은 영역이 있음	최소 픽셀 수를 올리거나 그림에서 먼지를 지우기
엔진에서 요소 가장자리에 이웃 요소의 선이 보임	엔진이 영역 경계를 넘어 필터링·밉맵하는데 여백이 0이라 이웃을 읽음	실행 화면에서 가장자리를 확대	여백 2와 확장 1~2를 쓰거나, 픽셀 아트라면 Nearest 필터
아틀라스 패킹이 실패함	요소들이 4096 × 4096 한 페이지에 들어가지 않음	요약에 크기 대신 오류가 표시됨	시트를 나눠 아틀라스를 두 개 만들기. 여러 페이지 UI 아틀라스는 없음

다른 방법

방법	이럴 때 더 낫습니다
낱장 PNG용 패커(스프라이트 시트 패커, TexturePacker)	요소가 이미 파일로 하나씩 있을 때. 감지가 필요 없고 엔진별 아틀라스 형식을 씁니다. TexturePacker 없이 패킹하기도 참고.
Unity Sprite Editor의 슬라이스	시트를 Unity에서만 쓰고 영역을 Unity 가져오기 설정에 저장하고 싶을 때.
Godot `AtlasTexture`를 직접 만들기	요소가 두세 개뿐일 때. `atlas`에 시트를 지정하고 `region`을 입력하면 추가 파일이 전혀 없습니다.

이 방법의 한계

아틀라스는 한 페이지, 최대 4096 × 4096이며 회전 패킹은 없습니다.
엔진 리소스 파일(Godot .tres, Unity .meta)은 쓰지 않고 영역과 테두리 숫자만 씁니다.

버전과 출처

docs/UI-LAB.md를 위해 Windows 11의 Chromium(Playwright)에서 측정했습니다. 버튼 하나와 투명한 구멍이 있는 128 × 64 시트에서 요소 4개가 나오고 합치기 거리 40에서 하나로 합쳐졌습니다. 패킹된 픽셀은 원본 영역과 같고, 확장 1은 가장자리 픽셀을 영역 바깥에 복제합니다. 요소에 준 테두리 5/5/4/4가 ui-atlas.json에 들어갑니다. 요소 40개가 있는 1024 × 1024 시트는 감지·합치기·패킹·그리기가 76ms에 끝났습니다. Godot·Unity에서 아틀라스를 불러오지는 않았습니다. 위의 엔진 이름은 Godot 4.7 공식 문서를 따릅니다.

참고한 공식 문서

UI 에셋 랩

9슬라이스·버튼 상태·UI 아틀라스·비트맵 폰트를 한 화면에서 만들고 실제 화면 크기로 확인하세요.

사용 방법

이미지 넣기
필요한 설정을 조정하고 결과 확인
다운로드로 새 파일 저장

지원 형식

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 입력 디코딩은 브라우저 지원과 추가 엔진 사용 여부에 따라 다릅니다.

이 도구로 할 수 있는 일

9슬라이스·버튼 상태·UI 아틀라스·비트맵 폰트를 한 화면에서 만들고 실제 화면 크기로 확인하세요.

처리 방식과 검증 수준

advanced · nine-slice draw plan / parametric state ops / measured glyph metrics / exact EDT signed distance field. 품질 검증을 진행 중입니다. Pro·Flagship 수준은 아직 입증되지 않았습니다.

저장 전에 확인하세요

PNG과 JSON, BMFont 텍스트만 만듭니다. .tres·.meta 같은 엔진 리소스 파일은 만들지 않고, 엔진 안에서의 렌더링은 확인하지 않았습니다.

자주 묻는 질문

이 도구의 한계는 무엇인가요?

PNG과 JSON, BMFont 텍스트만 만듭니다. .tres·.meta 같은 엔진 리소스 파일은 만들지 않고, 엔진 안에서의 렌더링은 확인하지 않았습니다.

파일이 서버에 업로드되나요?

이 도구에서 연 파일은 서버에 업로드하지 않고 사용자 기기에서 처리합니다. 커뮤니티 글에 직접 첨부하는 이미지는 별도로 업로드됩니다. 일부 엔진과 모델은 외부에서 내려받으므로 IP 주소 등 연결 정보가 해당 서비스에 전달됩니다.

작업이 자동 저장되나요?

아니요. 이미지와 편집 상태는 이 탭에 있고 미디어 결과는 기기 내 임시 저장소를 사용할 수 있습니다. 언어를 바꿔도 작업은 유지되지만 새로고침, 탭 닫기, 다른 페이지로 이동하면 사라질 수 있습니다.