게임 UI 나인 슬라이스와 확장 패널: Figma / PSD 마크와 엔진 슬라이스 QA

패널을 더 넓게 늘렸을 때 모서리가 흐려지거나, 중앙 텍스처가 반복되거나, 모서리가 타원형이 되는 경우는 보통 핸드오프 시점에 나인 슬라이스(9-slice / cap insets)가 지정되지 않았거나, 엔진이 전체 스프라이트에 Simple 스케일을 사용하고 있기 때문입니다. Unity Editor에서 Image Type과 경계를 조정하면 한 화면은 살릴 수 있지만, 다음 디자인 드롭에서 덮어써집니다. 경계가 내보내기 스케일과 맞지 않으면 재작업 루프가 반복됩니다.

아래 예시는 Unity UGUI Image(Sliced / Tiled)에 초점을 맞춥니다. Godot StyleBoxTexture와 Cocos 스프라이트 나인 슬라이스도 콘텐츠 패딩을 포함해 같은 개념으로 매핑됩니다. 앵커와 Safe Area는 엔진 + MCP 체크리스트 항목 6을 참고하세요. 로케일과 함께 쓰는 늘어나는 영역 패딩은 로케일 오버플로 디자인 체크 7을 참고하세요.

디자인 핸드오프 체크리스트 항목 6은 명확한 나인 슬라이스 / 늘어나는 영역을 요구합니다. 이 글은 언제 슬라이스할지, Figma/PSD 마크, 세 엔진 수용 기준, 전체 화면 캔버스 경로와 수정 표를 다룹니다.

실패 기준 (하나라도 해당 = 통과 아님): 늘렸을 때 모서리 아트가 변형됨; 늘어나는 영역에 의도치 않은 반복이나 이음새 발생; 패널 크기에 따라 모서리 반경이 변함; 확장 가능한 배경이 고정 아이콘/아바타와 함께 스케일됨; 내보내기 스케일이 엔진 경계 픽셀과 맞지 않음(1px 틈 또는 흐린 가장자리).

---

나인 슬라이스가 필요한 경우 vs 강제 늘이기 금지

에셋 유형	해야 할 것	하지 말 것
다이얼로그 / 설정 패널 배경	나인 슬라이스 + 콘텐츠 패딩	단일 Simple 스프라이트 전체 채우기
입력 / 바 컨테이너	나인 슬라이스 또는 좌/우 캡 + 중앙 반복	아트 규칙 없이 높이를 찌그러뜨리기
주요 버튼 (고정 크기)	고정 스프라이트 또는 나인 슬라이스 + 최소 너비	무한히 넓은 둥근 버튼을 하나로 늘리기
아이콘, 아바타, 스킬 프레임	고정 크기, 나인 슬라이스 없음	패널 배경과 합쳐 하나의 늘어난 이미지로 만들기
전체 화면 배경 (프레임 박스 없음)	전체 이미지 또는 스펙에 타일 전략	전체 채우기에 패널 경계 재사용

규칙: 해상도, 문구, 리스트 콘텐츠에 따라 너비나 높이가 변하고 모서리 모양을 유지해야 한다면 → 나인 슬라이스 또는 엔진 동등 기능. 고정 크기 컨트롤 → 고정 스프라이트 + 레이아웃 제약.

---

Figma / PSD 핸드오프 마크 (체크 리스트)

#	확인	통과 기준
1	늘어나는 레이어가 장식 / 아이콘 / 텍스트와 분리됨	패널 배경 리스킨 + 슬라이스; 아이콘이 배경과 함께 스케일되지 않음
2	경계 / 캡 인셋을 px로 (네 변)	@1x 또는 팀 내보내기 스케일과 일치, 전달 노트에 명시
3	고정 내보내기 스케일 (@1x/@2x 또는 1080 기준)	엔지니어링이 경계 계산을 추측하지 않음
4	모서리 반경이 늘어나는 영역 밖에 있거나 스펙이 비늘어나는 모서리를 허용	”모서리가 캡슐이 되는” 통과 없음
5	늘어나는 영역이 타일 친화적이거나 단색	중앙 반복에 눈에 띄는 어긋남 없음
6	의미 있는 이름	예: Panel_Shop_9s, Input_Field_9s
7	다중 상태 (normal / disabled) 동일 경계	인셋 일치; 색상/스킨만 변경
8	PSD 슬라이스 또는 Figma 내보내기 노트에 투명 패딩 명시	스펙에 명시되지 않으면 경계에 그림자를 포함하지 않음
9	핸드오프 항목 5 버튼 상태와 함께 전달	잘못된 9s 아트로 누락 상태를 메우지 않음
10	이벤트 리스킨은 아트만 변경, 경계는 변경 없음	리스킨 스펙 참고

Figma: 리사이즈 가능한 프레임이나 슬라이스 플러그인을 사용할 때 컴포넌트 문서에 캡 인셋을 넣으세요. PSD: 슬라이스를 5분 만에 PSD를 Unity로와 정렬하세요.

---

세 엔진: 컴포넌트와 수용 기준

항목	Unity UGUI	Godot 4 Control	Cocos UI
컴포넌트	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
경계 소스	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
콘텐츠 영역	RectTransform + 자식 패딩	MarginContainer + Theme	Widget / 레이아웃 패딩
흔한 실패	Simple 오용; 잘못된 스케일 경계	Patch와 텍스처 크기 불일치	아틀라스 회전이 인셋을 깨뜨림
통과	150% / 200% 너비에서: 선명한 모서리, 깨끗한 중앙	동일; Theme 미리보기가 Play와 일치	동일; 긴 리스트 기기 스팟 체크

Unity Editor 수용 (다른 엔진에 매핑):

1. Prefab Image를 디자인과 일치하는 경계로 Sliced로 설정합니다.
2. 패널 RectTransform을 디자인 최소 및 최대 너비로 드래그합니다.
3. 모서리, 가장자리, 중앙을 Figma/PSD 캡처와 비교합니다.
4. Play 모드가 OK이면 → 출시 전 체크리스트에 따라 기기별 1회 통과.

전체 화면 개념: 캔버스 분할과 재내보내기

PNG 또는 AI 전체 화면 아트만 있으면 경계를 추론할 수 없습니다. 경로: VberAI Studio (AI Studio, ≠ Google AI Studio) 인플레이스 분할 → 확장 가능한 패널 마크 → Prefab 내보내기 (결정적, LLM YAML 아님).

단계	작업	수용 기준
1	캔버스에 전체 화면; Panel_*와 고정 아이콘 분할	이름 있는 계층 구조
2	캔버스에서 또는 내보내기 전에 패널 9-slice 의도 확인	인셋 담당자 문서화
3	Unity / Godot / Cocos Prefab 내보내기	위 표에 따른 Sliced QA
4	리스킨 / 로케일 후 전체 트리 재내보내기	경계 스펙이 변경되지 않으면 인셋도 변경 없음

레이어드 Figma/PSD: Figma → Unity 또는 PSD to UGUI를 선호하고, 엔진에서 경계를 소폭 조정하세요—매 이벤트마다 20개의 개별 PNG를 재내보내는 것을 피하세요.

---

수정 라우팅

증상	가능한 원인	조치	담당
흐린 모서리	전체 이미지에 Simple 스케일	Sliced + 올바른 경계; 디자인에 인셋 마크 추가	엔지니어링 + 디자인
중앙 이음새 / 반복 블록	인셋이 1–2px 어긋남; 스케일 불일치	디자인 px와 일치; 스프라이트 재임포트	엔지니어링
모서리가 타원으로 늘어남	아트가 나인 슬라이스에 부적합	고정 크기 또는 새 모서리 아트	디자인
리스킨 후 경계 변경	새 아트 크기 또는 패딩	리스킨 스펙에서 캔버스 크기 고정; 리스킨 후 재 QA	디자인
리스트 행 배경 변형	행 배경을 전체 패널처럼 늘림	행 전용 9s 또는 고정 높이	디자인
특정 해상도에서만 실패	Canvas Scaler 비정수 스케일	엔진 체크리스트 Anchor/Scaler	엔지니어링

규칙: 경계 ≠ 디자인이면 → 먼저 마크나 스프라이트 소스를 수정하고, 그다음 Prefab. 전달물을 업데이트하지 않고 Inspector만 수정하면 → 다음 내보내기에서 사라집니다.

---

”PNG 팩만” 핸드오프와 비교

접근	적합	부적합
수동 내보내기 + 엔지니어링이 경계 채움	패널 몇 개, 데모	잦은 리스킨, 많은 화면
Figma/PSD + VberAI Studio 구조적 내보내기	다중 화면, 다중 엔진, 이벤트	인셋 마크와 QA를 대체하지 않음
엔진에서 임시 Sliced	한 화면 핫픽스	디자인 소스 없는 장기 운영

권장: 디자인 인셋 마크 → 구조적 Prefab 내보내기 → 두 너비에서 Unity Editor Sliced → 로직은 MCP. Raycast와 바인딩: 엔진 + MCP 체크리스트.

---

자주 묻는 질문

둥근 패널도 나인 슬라이스를 사용할 수 있나요?
예, 하지만 인셋은 곧은 늘어나는 가장자리에 있어야 하고, 모서리는 비늘어나는 모서리 타일에 남아 있어야 합니다. 패널 크기에 따라 모서리 반경이 커지면 → 실패; 아트를 수정하거나 최대 크기를 제한하세요.

그림자도 경계에 포함되나요?
제품 스펙이 결정합니다. 그림자가 늘어나지 않으면 레이어를 분리하거나 외부 글로우 없이 단색 사각형에 인셋을 마크하세요.

Tiled vs Sliced?
프레임 패널에는 Sliced; 반복되는 중앙 텍스처에는 Tiled (또는 타일 친화적 중앙 아트). 스펙에 명시하세요—엔지니어링이 추측하게 두지 마세요.

Godot / Cocos용 슬라이스를 따로 만들어야 하나요?
인셋 의미는 하나입니다; 캔버스 다중 엔진 내보내기로 내보내기 대상을 전환하고 표에 따라 patch/cap을 검증하세요.

VberAI Studio가 경계를 자동으로 채우나요?
내보내기와 에셋에 따라 다릅니다; 수용은 항상 엔진 Sliced/StyleBox입니다. 디자인에 인셋이 없으면 → 엔지니어링이 Editor에서 경계를 설정하고 스펙에 기록합니다.

VberAI Studio는 Google AI Studio와 같은 건가요?
아니요. 비교를 참고하세요.