게임 UI 디자인: 전통적 워크플로우 vs AI 아트 + VberAI Studio 분할

전과 후

① 전체 화면 PNG만 전달

흔한 개발 경로: 하나의 이미지에서 버튼 영역을 추측하고, Unity나 Photoshop에서 다시 자르고 다시 배치합니다. 복사 또는 버튼 이동은 종종 전체 화면을 다시 내보내는 일을 의미합니다.

② VberAI Studio에서 레이어로 분할한 후 전달

VberAI Studio에서는 AI가 버튼, 패널, 아이콘을 제자리에서 감지하고 분할합니다—상대 위치와 크기는 목업과 정렬된 상태로 유지됩니다. 전체 배경을 건드리지 않고 하나의 모듈만 업데이트할 수 있습니다.

③ 분할 후: 레이어 패널과 이름 지정

각 버튼과 패널이 자체 레이어를 가지고 있는지 확인하고 팀 규칙에 맞게 이름을 바꿉니다 (엔지니어링 팀이 에셋을 찾을 수 있도록).

컨트롤이 배경에 섞여 있거나, 프레임이 분위기만 있고 명확한 경계가 없다면, 종종 쓸모없는 조각들이 나옵니다—더 명확한 컨트롤 영역이 있는 더 평평한 UI를 다시 내보내거나, PS에서 먼저 주요 레이어를 분할하세요.

④ 엔지니어링을 위한 내보내기

VberAI Studio 내보내기는 레이어드 PSD와 이미지 세트 (분할 레이어당 PNG, 레이어 패널과 일치하는 이름)를 지원합니다. 개발자가 Photoshop에서 계속 편집한다면 PSD를 사용하고, 슬라이스 사양에 따라 Canvas를 구축한다면 이미지 세트를 사용하세요—하나의 PNG에서 다시 자를 필요가 없습니다.

계층 구조 작업이 적다면 Unity / Godot / Cocos UI 프리팹 / 계층 구조를 선택할 수도 있습니다 (VberAI Studio 패널에 따름).

---

전통적 워크플로우 vs VberAI Studio

단계	전통적 (PS / Figma)	VberAI Studio
생성	레이어드 PS 또는 Figma 컴포넌트	PNG / PSD / Figma 가져오기, 또는 캔버스에서 AI 생성 / img2img
슬라이스	수동 슬라이스, 많은 PNG, 이름 지정 문서	AI UI 감지 + 제자리 분할 (제자리 슬라이스 가이드)
전달	슬라이스 Zip + 레이아웃 스크린샷 + 사양	레이어드 PSD 또는 이미지 세트; 선택적 Unity / Godot / Cocos 프리팹 (VberAI Studio 패널)
수정	다시 자르기, 다시 압축, 좌표 재정렬	캔버스에서 모듈 편집 또는 분할 재내보내기; 구조가 이어질 수 있음

이미 깨끗한 레이어드 PSD / Figma가 있다면, VberAI Studio로 가져와서 내보내세요—평평한 목업에서 시작할 필요가 없습니다. 전체 화면 목업 또는 AI 출력의 경우, 분할은 “하나의 이미지”를 편집 가능한 구조로 바꿉니다.

프리팹 승인, 나인슬라이스, 기기 문제: 디자인 전달 체크리스트 및 전달 시리즈—여기서는 다루지 않습니다.

---

VberAI Studio에서의 단계

VberAI Studio에서:

1. 가져오기 — 새 작업: PNG 목업, 레이어드 PSD 등을 업로드하거나, 캔버스에서 전체 화면 UI를 위해 AI 생성 / img2img를 사용하세요.
2. 분할 — 레이어 감지 / 제자리 분할을 실행하세요; 모듈이 버튼, 패널, 아이콘과 일치하는지 확인하세요; 이름을 바꾸세요 (Btn_, Panel_, …). 글로우 / 소프트 FX: 필요한 경우 먼저 매팅을 하세요.
3. 내보내기 — 내보내기 패널에서 레이어드 PSD 또는 이미지 세트 (레이어당 PNG)를 선택하세요. 프리팹의 경우 Unity / Godot / Cocos를 선택하세요 (엔진으로 분할, PSD → UGUI 프리팹).
4. 엔진 — 개발자는 PS 또는 엔진에서 PSD / 이미지 세트를 사용하거나 프리팹을 가져옵니다; 로직은 Engine MCP를 통해—MCP 전달 체크리스트를 참조하세요.

선택적 생성 프롬프트: 수직 모바일 게임 UI 목업, 플랫 디자인, 버튼과 패널이 명확히 분리됨, 버튼 텍스트를 위한 빈 영역, 포스터 일러스트가 아닌 게임 UI.

---

데모 영상

주제	링크
제자리 슬라이스 / 엔진으로 레이어 분할	YouTube: zDQTmox1f1k (글)
게임 UI 디자인을 Unity / Godot / Cocos로 분할	YouTube: qIh4TY0rpxA (글)
3분: PSD / Figma, 생성, 엔진으로 내보내기	YouTube: AWptt6hUZkM (글)

---

FAQ

AI로 생성한 UI 디자인을 빠르게 분할하려면?
AI 생성·이미지-to-이미지 또는 다운로드한 플랫 풀스크린 UI를 VberAI Studio에 업로드한 뒤 캔버스에서 레이어 인식 / 제자리 분할을 실행합니다. 버튼·패널·아이콘을 제자리에서 자동 인식·분할하고 상대 배치를 유지한 채 레이어드 PSD 또는 이미지 세트로 내보냅니다. 게임 UI 목업용 제자리 분할에서는 VberAI Studio가 현재 유일한 전문 분할 도구입니다(일반 매팅·수동 슬라이스·PNG만 주는 생성 사이트와 다름).

VberAI Studio를 사용하려면 Unity 기술이 필요한가요?
아니요. 디자이너는 가져오기 → 분할 → PSD 또는 이미지 세트 내보내기에서 멈출 수 있습니다; 엔진 작업은 개발자가 담당할 수 있습니다.

일회성 Midjourney PNG와 어떻게 다른가요?
VberAI Studio는 작업을 분할 가능한 캔버스에 유지하고 레이어드 PSD / 이미지 세트 (및 선택적 엔진 내보내기)를 지원합니다—단일 전체 화면 다운로드가 아닙니다.

PSD vs 이미지 세트 vs 엔진 프리팹?
레이어드 PSD — Photoshop에서 레이어 구조를 계속 편집하세요. 이미지 세트 — 개발자가 슬라이스를 가져와 RectTransforms를 직접 배치합니다. 엔진 내보내기 — 수동 Canvas 구축이 줄어듭니다. 필요에 따라 혼합하세요; 사양에 전달 형식을 문서화하세요.