블로그 비교 용어집
공식 사이트
← 블로그로

AI Studio로 3분 만에 프로덕션 준비 완료 게임 UI 구축하기 (비디오 가이드)

공식 VberAI YouTube 튜토리얼 - VberAI Studio로 PSD/Figma를 가져와 Unity, Cocos Creator, Godot용 게임 UI를 몇 분 만에 내보내세요.

게시일
  • vberai
  • ai-studio
  • video
  • psd
  • figma
  • unity
  • godot
  • cocos
  • tutorial
YouTube에서 보기

공식 튜토리얼 시청하기

비디오: 게임 개발자라면 꼭 봐야 할 영상 👀 - VberAI YouTube 채널

공식 설명에서:

3분 만에 프로덕션 준비가 완료된 게임 UI를 만드세요. 수동 슬라이싱 없이, 반복적인 설정 없이, 낭비되는 시간 없이. PSD 및 Figma 가져오기 → AI로 게임 UI 생성 → 에셋 자동 분해 → Unity, Cocos 및 Godot로 직접 내보내기.

데모에서 보여주는 것

VberAI Studio (짧게 AI Studio)는 디자인 파일을 평면 이미지가 아닌 구조화된 계층으로 처리합니다:

  • 왼쪽: 레이어가 있는 PSD / Figma
  • 가운데: 캔버스 미리보기
  • 오른쪽: Unity, Godot 또는 Cocos Creator용 엔진 준비 완료 내보내기

프로젝트 전반에 걸쳐 반복되는 메뉴, HUD, 상점 셸에 이상적인 재사용 가능한 프리팹 / Control 트리를 얻을 수 있습니다.

시청 대상

역할이점
디자이너 + 엔지니어 핸드오프엔진에서 레이아웃을 재구성하는 왕복 작업 감소
솔로 개발자플레이 가능한 UI 화면을 빠르게 출시
멀티 엔진 스튜디오하나의 디자인 습관으로 여러 내보내기 대상 지원

단계별 워크스루

1. 디자인 파일 준비

  • 병합된 단일 PNG가 아닌 레이어가 있는 PSD 또는 이름이 지정된 Figma 프레임을 사용하세요.
  • 그룹 이름을 명확하게 지정하세요 (Btn_Start, Panel_HUD).
  • VberAI에서 VberAI Studio (AI Studio)를 여세요.

2. 가져오기 및 검사

  1. PSD 또는 Figma에서 새 가져오기를 생성합니다.
  2. 레이어 패널에서 레이어 그룹이 UI 블록과 일치하는지 확인합니다.
  3. 스크래치 프레임을 숨기고 명백한 이름 지정 문제를 수정합니다.

3. 미리보기 및 내보내기

  • 캔버스에서 간격과 오버레이 순서를 확인합니다.
  • 대상 엔진을 설정합니다: Unity, Godot 또는 Cocos Creator.
  • 스프라이트 전용이 아닌 UI 계층 / 프리팹 출력을 선택합니다.
  • 가능한 경우 TextMeshPro (Unity) 또는 엔진의 텍스트 컴포넌트를 선호합니다.

4. 엔진으로 가져오기

  1. 패키지를 팀 폴더로 가져옵니다 (Assets/UI/ 등).
  2. 생성된 프리팹을 열고 Canvas (Unity) 또는 Control 루트 (Godot) 아래에 부모로 설정합니다.
  3. 16:9 및 세로형 폰 화면 비율을 스모크 테스트합니다.

Unity MCP 또는 Godot MCP도 실행 중이라면, 가져온 후 AI 클라이언트에 노드 일괄 이름 변경 또는 pressed 시그널 연결을 프롬프트하세요.

VberAI 스택과의 연계

제품역할
AI Studio디자인 → 엔진 UI 구조
Unity / Godot / Cocos MCP가져온 후 편집기 자동화
AI Super Matting내보내기 전 아이콘 알파 정리

레이아웃은 디자인 도구에 유지되고, 연결 및 동작은 엔진에 유지됩니다. 더 깊이 있는 Godot 비교는 Figma to Godot: Manual vs AI Studio를 읽어보세요.

FAQ

이 비디오가 MCP 설정을 다루나요? AI Studio에 초점을 맞춥니다. Cocos Creator MCP 설정은 Cocos Creator MCP 설정 방법 (비디오 튜토리얼)을 참조하세요.

지원되는 엔진은 무엇인가요? 비디오 설명에는 Unity, Cocos 및 Godot 내보내기가 나열되어 있습니다.

“3분”이 현실적인가요? 이름이 지정된 레이어가 있는 깔끔한 단일 화면 UI의 경우, 첫 가져오기 및 내보내기는 수동 RectTransform 작업의 몇 시간이 아닌 몇 분이면 충분합니다. 테마, 글꼴 및 현지화는 여전히 엔진 패스가 필요합니다.

공식 비디오 URL? https://www.youtube.com/watch?v=AWptt6hUZkM — 채널 @vber_ai.

관련 가이드

VberAI YouTube 채널을 구독하거나, VberAI Studio를 열고 다음 화면에서 동일한 내보내기를 시도해 보세요.

계속 읽기

이 글도 추천합니다