← 블로그로

VberAI 엔드투엔드: AI Studio + Engine MCP로 플레이 가능한 미니 게임 만들기

AI Studio에서 UI를 생성하거나 가져오고, Cursor에서 Godot, Unity, Cocos MCP로 로직과 디버깅을 구동하세요. Studio에서 내보낸 후 손으로 코드를 작성하지 않고 플레이 가능한 조각까지의 치비 매치-3 녹화가 포함됩니다.

게시일
  • VberAI
  • AI Studio
  • Unity MCP
  • Godot MCP
  • Cocos MCP
  • game development workflow

인디 및 소규모 팀에게 병목 현상은 “코드 한 줄을 작성할 수 없다”는 경우가 드뭅니다. 일반적으로 두 가지 트랙이 병렬로 실행됩니다:

  1. UI 및 아트 구조가 엔진에 깔끔하게 들어가지 않음—컴프 분할, Canvas / Control 트리 재구축, 이름과 계층 구조 불일치
  2. 게임플레이 및 스크립트 반복 비용이 큼—컴포넌트 재연결, 오류 추적, Play 모드 진입—반복적인 에디터 작업으로 시간 낭비

VberAI는 이러한 작업을 두 계층으로 분리합니다. “버튼 하나로 게임 완성”을 주장하지 않습니다:

계층제품역할
Canvas → 엔진 UIAI Studio자연어로 게임 UI 생성, 또는 PSD / Figma 가져오기; 분할, 매트, 편집, Unity, Godot, Cocos Creator로 동기화/내보내기
엔진 ↔ AI IDEEngine MCP (Unity / Godot / Cocos)Cursor, Claude Code, Codex 등 클라이언트에서 열린 에디터를 구동: 로직, 스크립트, 디버그, 미리보기

이 가이드의 나머지 부분은 플레이 가능한 0–1 슬라이스와 이후 수정 주기를 위한 프로덕션 형태의 경로입니다.

엔드투엔드 파이프라인

게임플레이 목표 / 디자인 파일 / 자연어 UI 브리프
        │
        ├─→ AI Studio (생성 · 가져오기 · 분할 · 매트 · 컴포넌트화 · 내보내기)
        │         ↓
        │    엔진 프로젝트의 UI 계층 구조 / 프리팹 / 씬 에셋
        │
        └─→ AI IDE + Engine MCP (씬 읽기 · 스크립트 작성 · 연결 · Play/디버그)
                  ↓
             데모 가능한 게임플레이 슬라이스 → 변경 유형에 따라 Studio로 돌아가거나 MCP 계속 사용

경험 법칙:

  • 깊은 엔진 연결 전에 UI 구조를 캔버스에서 올바르게 잡으세요
  • 동작과 수치는 엔진에서 유지하고, 인간이 Play 결과를 소유합니다
  • 큰 편집 전에 커밋하고, MCP 브리지는 localhost에서만 유지하세요

AI Studio: 엔진 준비된 인터페이스 에셋

AI Studio는 게임 UI / 인터페이스 구조를 위한 도구입니다—일반 채팅 상자가 아니며, 엔진 내 전투 상태 머신을 대체하지 않습니다.

경로 1: 자연어 UI (디자인 파일 없음)

치비 스타일 매치-3 게임을 디자인해줘

그런 다음 캔버스에서 확인: 스크립트가 바인딩할 수 있는 히트 타겟 vs 장식, 이름, 대상 해상도에서의 레이아웃. 아래 데모:

YouTube에서 시청 — 경로 1: 자연어 치비 매치-3 UI

경로 2: PSD / Figma / 프로젝트 에셋 가져오기 (디자인 존재)

  1. 레이어드 컴프 또는 기존 UI 가져오기
  2. AI 분할로 패널, 목록 항목, 대화 프레임 분리
  3. 필요한 경우 AI Super Matting으로 하드 엣지(머리카락, 글로우, 반투명) 처리 후 Studio로 복귀
  4. 컴포넌트화하고 Unity, Godot, Cocos Creator로 동기화 / 내보내기

PSD / Figma 가져오기 및 분할 데모:

YouTube에서 시청 — 경로 2: PSD / Figma 가져온 후 엔진으로 동기화

이 단계에서 생성되는 것

생성생성하지 않음
마운트 가능한 UI 계층 구조, 텍스처, 프리팹/씬 구조전체 전투 FSM, 네트워크 권한, 저장 시스템

더 깊은 핸드오프 예시: Figma to Unity UI.

Engine MCP: 대화형 로직 및 에디터 작업

MCP(Model Context Protocol)는 AI IDE가 로컬 도구를 호출할 수 있게 합니다. VberAI의 엔진 플러그인은 열린 에디터를 클라이언트에 노출합니다: 씬/노드, 스크립트, 디버그 및 미리보기 지원—단순히 파일을 저장소에 붙여넣는 것이 아닙니다.

엔진별 선택 및 설치:

비교: Godot MCP vs Unity MCP vs Cocos MCP.

데모: Studio 내보내기 후 Cursor + Godot MCP로 치비 매치-3 출시

경로 1 계속: UI는 이미 AI Studio에서 Godot로 들어왔습니다. Cursor에서 Godot MCP를 연결하고 자연어로 에디터를 구동—손으로 코드 한 줄 작성 없이—치비 매치-3 게임플레이를 구현하고 플레이 가능한 상태로 디버그합니다. 아래 녹화:

YouTube에서 시청 — Studio UI 내보내기 → Cursor + Godot MCP가 치비 매치-3 빌드 및 디버그 (손으로 작성한 코드 없음)

MCP에 적합한 작업

  • 테스트 가능한 게임플레이 슬라이스: 플레이어 컨트롤, 간단한 전투, 적 상태, 퀘스트 연결
  • 일괄 Hierarchy / 씬 트리 이름 변경, 컴포넌트 연결, Studio에서 내보낸 HUD를 이벤트에 바인딩
  • 플러그인 한도 내: 로그, 선택 컨텍스트, 작은 되돌릴 수 있는 편집 후 Play

부적합한 작업

  • 검토되지 않은 멀티플레이어 권한 또는 전체 렌더 파이프라인 재작성
  • “한 번의 프롬프트로 상용 게임 출시”
  • 아트 방향 및 느낌 결정 대체—이러한 결정은 여전히 Play 모드에서 인간이 필요

작업 예시: Unity MCP로 3D RPG, Godot MCP로 2D 플랫포머.

0–1: 최소 경로

목표는 몇 시간 안에 데모 가능한 슬라이스이며, 기능 체크리스트가 아닙니다.

  1. 슬라이스 범위 지정 — 예: “이동 + 적 하나 + HUD 하나” 또는 “플랫폼 레벨 하나 + 재시작”
  2. MCP 설치 및 읽기 전용 스모크 테스트 — 씬 루트 나열; AI IDE가 연결되었는지 확인
  3. 플레이스홀더 UI 또는 게임플레이 먼저 — 시스템이 완성되지 않은 동안 Label/Slider 사용; 메뉴/HUD가 완성된 모습이 필요할 때 AI Studio 열기
  4. MCP로 로직 진행 — 프롬프트당 하나의 관심사: 컨트롤 → 데미지 → 적 → 실패/퀘스트 조건
  5. 필요할 때 UI 다듬기 — Studio 내보내기 → MCP가 버튼과 값 이벤트 바인딩
  6. Play 수용 — 느낌, 충돌, UI 갱신; 실패하면 프롬프트를 좁히고 재시도

빠른 반복: 변경 유형별 루프 선택

변경선호
느낌, 수치, AI, 내비게이션, 스크립트 버그, 노드 연결AI IDE → 엔진 MCP
전체 화면 비주얼, 리스킨, 레이어 분할, 프리팹 재내보내기AI Studio (필요시 매팅 포함)
여전히 “컴프가 엔진에 들어가지 않음” 문제Studio 구조 먼저, 그 다음 MCP

기대 효과는 구체적입니다: 에디터에서 UI를 처음부터 재구축하는 작업 감소, 반복적인 클릭 감소. 디자인 판단이나 테스트를 대체하지 않습니다.

팀 체크리스트

  • 라이선스: Unity / Cocos MCP는 공식 활성화를 따르고, Godot MCP는 오픈 소스로 습관 검증 가능
  • 보안: MCP 서버는 127.0.0.1에서만 실행
  • 수용 기준이 있는 프롬프트: 경로, 연결 지점, Play가 약 10초 내에 보여야 할 것, 범위 외 리팩터링
  • 검토: 생성된 스크립트와 노드 편집은 항상 Play 테스트—MCP는 운영 비용을 줄이지 QA를 줄이지 않음

결론

VberAI의 유용한 이야기는 “완전 자동화”가 아니라 고빈도 문제의 분리입니다:

  • AI Studio: 자연어 또는 PSD/Figma → Unity / Godot / Cocos용 UI 구조
  • Engine MCP: AI IDE에서 자연어 → 에디터 내 로직, 스크립트, 디버그, 미리보기

올바른 루프를 사용하면 0–1 슬라이스와 수정 주기가 더 빨라집니다. 경계를 넘으면(캔버스에서 전투 FSM 작성, MCP로 전체 UI 팩 분할) 재작업이 추가됩니다. 프로젝트 단계에 따라 한 계층 또는 둘 다 채택하세요—첫날 모든 제품이 필요하지 않습니다.

이 글도 추천합니다