원스톱 게임 개발: VberAI가 UI 한 장을 AI 이미지에서 Unity까지 잇는다

게임 UI는 도구 사이에서 자주 끊깁니다. 이미지는 한 프로그램에 있고, 자르기는 다른 프로그램에서 하며, 엔진에 넣은 뒤에는 계층을 다시 잡습니다. 이 글은 다크 고딕 메인 메뉴 한 장으로 VberAI Studio(Google AI Studio가 아닙니다)의 네 단계를 봅니다. AI 이미지 생성, 인플레이스 슬라이스, 엔진에 기록, 동작 미리보기입니다.

시작 위치는 VberAI Studio입니다.

1. 완성된 메인 메뉴 한 장을 준비한다

원본은 이미 배치가 끝난 메인 메뉴입니다. 왼쪽에는 캐릭터, 오른쪽에는 STORY와 ARENA 같은 입구, 배경은 달밤 장면입니다. 입력은 화면 전체이며, 흩어진 아이콘 묶음이 아닙니다.

이 단계가 AI 이미지 생성입니다. 일러스트와 메인 메뉴는 먼저 한 장의 이미지로 들어옵니다. 이후 분할, 기록, 미리보기는 모두 이 이미지를 사용합니다.

2. 인플레이스 슬라이스로 배경만 남긴다

나누면 버튼, 캐릭터, 재화 아이콘이 원래 자리에서 떠나고, UI가 없는 달밤 배경만 남습니다. 요소는 원본 좌표로 잘라 내고, 배경은 따로 보관합니다.

Photoshop에서 PNG를 하나씩 내보내면 위치 정보는 남지 않습니다. 인플레이스 슬라이스는 상대 위치와 크기를 유지하므로, 엔진에서 시안을 보며 손으로 맞출 필요가 없습니다. 절차는 인플레이스 슬라이스를 보세요.

3. Engine MCP로 현재 Unity 씬에 기록한다

잘라 낸 리소스는 이어서 엔진으로 들어갑니다. 데모는 Engine MCP 패널을 엽니다. 화면의 지시문은 중국어 「把图层3写入当前 Unity 工程」입니다. 「图层3」은 이 메인 메뉴의 파일 이름입니다. 결론이 먼저 나오고, 다섯 가지를 확인합니다.

• 생성한 원화를 가져온다
• 분할한 요소를 원래 위치에 놓는다
• 깨끗한 배경을 추출한다
• 캐릭터를 씬에 기록한다
• 현재 씬을 검사한다

다섯 가지가 통과하면 패널은 기록 완료를 표시합니다.

기록 대상은 현재 Unity 씬입니다. 배치는 슬라이스 결과를 따르며, 이름 없는 PNG를 폴더에 넣는 것으로 끝나지 않습니다. Cursor에서 버튼과 수치를 이어서 연결할 때도 같은 Engine MCP를 사용합니다. 설치는 Unity MCP 설치를 보세요.

4. 같은 화면에서 동작을 미리본다

미리보기는 방금 잘라 낸 레이어를 사용합니다. 배경은 추출한 달밤 장면이고, 캐릭터는 같은 일러스트이며, STORY와 ARENA는 잘라 낸 버튼입니다. 캐릭터가 지팡이를 앞으로 휘두르면 주문이 끝에서 지나가고, 버튼은 원래 자리에서 켜집니다.

왼쪽 위의 말풍선은 그 자리에 있습니다. 캐릭터를 따라가지 않습니다. 화면의 고정 컨트롤입니다.

잘라 낸 정지 이미지는 같은 배경 위로 돌아와 미리보기가 됩니다. 동작으로 보이고, 버튼은 원래 자리에서 켜집니다. 버튼 이동과 수치는 Unity에서 Engine MCP나 스크립트로 따로 연결합니다.

각 단계에서 줄어드는 수작업

단계	화면에서 보이는 것	줄어드는 수작업
AI 이미지 생성	고딕풍 메인 메뉴 한 장	시안을 처음부터 조합
인플레이스 슬라이스	요소가 떠나고 배경만 남음	Photoshop에서 버튼마다 PNG를 내보냄
Engine MCP	레이어가 현재 Unity 씬에 들어감	가져온 뒤 계층을 다시 배치
동작 미리보기	같은 캐릭터와 버튼이 원래 배경에서 움직임	다른 그림으로 데모를 따로 제작

범위

• 데모는 이 메인 메뉴 한 장만 사용합니다. 슬라이스 품질은 원본이 선명한지, 컨트롤 경계가 읽히는지에 달립니다.
• MCP 패널이 보여주는 것은 기록 완료와 검사 통과입니다. 버튼 이동과 수치 정산은 Unity 씬에 로직을 더 연결해야 합니다.
• 동작 미리보기는 이 일러스트와 잘라 낸 버튼을 사용합니다. 위의 메인 메뉴와 같은 레이어입니다.

정리

화면 한 장을 한 흐름에 둘 수 있습니다. 이미지를 생성하고, 제자리에서 나누고, Unity에 기록한 뒤, 같은 레이어를 움직여 확인합니다. 제품 입구는 AI Studio입니다.