인공지능으로 만든 레트로 던전, AIventure 제작기
시원하고 달콤한 수박 한 조각 들고 오세요! (지금 도쿄는 여름인데, 제가 수박을 정말 좋아하거든요 🍉) 우리 소규모 팀이 어떻게 반짝이는 아이디어 하나를 생동감 넘치는 웹 게임으로 만들어냈는지, 그 흥미진진한 이야기를 들려드릴게요.
지난 몇 년간 Google I/O에 참여해 보셨다면, 팬데믹 기간 동안 주요 Google 행사를 빛내주었던 가상 컨퍼런스 플랫폼 *Adventure*를 기억하실지도 모르겠어요. 방대한 스케일에 아름다운 일러스트, 그리고 협업 기능까지 갖춘 멋진 공간이었죠. 하지만 시스템이 다소 무겁고 일회성 행사에 가까웠던 데다, 수많은 운영 인력이 필요하다는 아쉬움도 있었습니다.
몇 달 전, 저와 톰(Tom)은 한 가지 질문을 던지기 시작했어요. “Adventure를 완전히 새로운 방향으로 재해석해 보면 어떨까?” 일회성 컨퍼런스에 그치는 게 아니라, 개발자들이 딱딱한 문서 대신 “바이브 코딩(vibe coding)” 과 게임 플레이를 통해 생성형 AI의 원리를 자연스럽게 배울 수 있는 아늑하고 레트로한 상시 개방형 세계를 만들면 어떨까 싶었죠.
그 작은 불씨가 바로 AIventure 의 시작이었습니다. 이제 저희가 이 게임을 실제로 어떻게 개발했는지 그 여정을 소개해 드릴게요.
1단계: Gemini Canvas로 끄적이며 프로토타입 만들기#
모든 좋은 게임은 프로토타입에서 시작됩니다. AIventure를 만들 때도 처음부터 복잡한 엔진 코드를 짜진 않았어요. 대신 Gemini 안에서 여러 콘셉트를 가볍게 만지작거리며 시작했죠.
우선 화면을 양쪽으로 나누는 스플릿 UI 레이아웃이 필요하다는 걸 알았습니다. UI 패널과 레이아웃을 관리할 고품질 프론트엔드 프레임워크(Angular)와, 실제 게임 엔진 역할을 하며 레트로한 감성을 채워줄 Phaser.JS 기반의 캔버스를 결합하는 방식이었죠. 이건 지난 I/O 데모였던 ‘Living Canvas‘에서 이미 선보였던 방식이기도 합니다.
처음에는 다양한 스타일로 간단한 교육용 퍼즐 게임을 만들어 봤어요. 그러다 결국 탑다운(Top-down) 방식의 레트로 던전 스타일로 낙점했습니다. 저희가 원했던 ‘감성(vibe)‘에 딱 맞아떨어졌거든요. 바로 이 시점에 톰이 예전 프로젝트였던 ‘Adventure’의 감성과 비주얼을 다시 살려보자는 멋진 아이디어를 냈고, 덕분에 이 세계만의 독창적인 아이덴티티가 완성되었습니다.
Gemini Canvas에서 작업한 초기 프로토타입 스크린샷
2단계: 방 디자인하기 (바이브 코딩 & 에이전트 로봇)#
기본적인 로직이 작동하는 걸 확인한 후, 톰과 저는 한 단계 더 나아간 퍼즐 메커니즘을 구상하기 시작했습니다. AI가 단순히 자물쇠와 열쇠 같은 일차원적인 역할만 하는 건 원치 않았어요. 요즘 거대언어모델(LLM)이 가진 마법 같은 잠재력을 제대로 보여주고 싶었죠.
그 고민 끝에 저희가 가장 애정하는 두 개의 방이 탄생했습니다.
- 바이브 코딩 룸 (The Vibe Coding Room): 플레이어들에게 AI 기반 UI 디자인이라는 개념을 소개해 주고 싶었습니다. 이 방에 들어가면 게임 내에 iFrame 탭이 열려요. 플레이어가 “먹기랑 자기 버튼만 있는 닭을 위한 투두(To-Do) 앱 만들어줘” 라고 프롬프트를 입력하면, AI가 실시간으로 웹페이지를 뚝딱 만들어 냅니다. 플레이어는 게임 환경 안에서 자신이 요청한 코드와 업데이트된 화면을 즉시 확인할 수 있죠.
- 에이전트 퍼즐 (The Agent Puzzle): 자연어 명령을 알아듣고 Phaser 그리드 월드 안에서 직접 움직이는 귀여운 로봇 NPC 캐릭터를 넣었습니다. 플레이어가 “가서 스위치 올려” 라고 말하면, 모델은 도구 호출(Tool-calling)과 추론을 통해 그 명령을 구체적이고 단계적인 게임 내 행동으로 쪼개어 실행합니다.
3단계: Gemini에서 Gemma로#
초기 빌드와 테스트 단계에서는 클라우드 엔드포인트에 의존했습니다. 즉, Gemini API를 통해 프롬프트 요청을 클라우드로 보내 플레이어의 명령과 코드 생성을 처리했죠. 완벽하게 작동하긴 했지만, 저희는 현대 웹 앱이 할 수 있는 한계를 더 넓혀보고 싶었습니다. 이 게임이 외부 연결 없이 완전히 독립적으로 작동하면서도, 누구나 쉽게 접근할 수 있기를 바랐거든요.
이때 구원투수로 등판한 것이 바로 Gemma 4 였습니다.
저희는 Gemma 4 모델로 퍼즐 테스트를 시작했습니다. 모델이 함수 호출(Function-calling)과 에이전트 워크플로우를 얼마나 잘 처리하는지 확인하기 위해, 다양한 크기(E2B 및 E4B)와 프레임워크(Ollama, LM Studio, Transformers, Vertex AI 등)를 넘나들며 꼼꼼하게 실험을 이어갔습니다.
4단계: MediaPipe를 통해 브라우저 속으로 모두 가져오기#
퍼즐의 마지막 조각은 바로 ‘배포’였습니다. 클라우드 백엔드 아키텍처를 복잡하게 설정하거나 개인 API 키를 입력하게 하지 않으면서, Google Developers 사이트를 방문하는 수백만 명의 개발자들에게 어떻게 이 AI 기반 게임을 온전히 전달할 수 있을까요?
정답은 바로 모델을 사용자 브라우저 내부에서 로컬로 직접 실행하는 것이었습니다.
저희는 MediaPipe와 LiteRT 팀이 미리 변환해 둔 포맷을 활용하여, 웹사이트 인터페이스에서 모델을 직접 호스팅하고 제공했습니다. 클라이언트 사이드 웹 기술을 활용한 덕분에 모든 경험이 사용자의 PC에서 로컬로 실행됩니다. 플레이어가 NPC에게 말을 걸거나 게임에서 코드를 짤 때, AI 추론이 100% 클라이언트 측에서 일어나는 거죠. 프론트엔드는 요청을 간단한 이벤트 버스(Event Bus)를 통해 브라우저에 로드된 모델로 직접 전달합니다.
직접 소스 코드를 뜯어보며 공부하고 싶은 개발자분들을 위해, 게임 루프의 방향을 로컬 호스팅 기반의 LM Studio 엔드포인트나 Vertex AI로 쉽게 돌릴 수 있는 토글 스위치도 만들어 두었습니다!
그리고 한 가지 더…#
현재 준비된 퍼즐 외에도, 저희는 Gemma의 멀티모달(Multimodal) 기능을 활용하는 방법도 탐색하고 있습니다. 아직은 한창 진행 중인 작업이지만, 궁금하신 분들은 저희 GitHub 저장소를 클론해서 직접 실험해 보실 수 있어요.
이제 여러분은 무엇을 만드실 건가요?#
AIventure를 만드는 과정은 클래식한 올드스쿨 게임 디자인과 현대적인 클라이언트 사이드 AI를 매끄럽게 연결하는 여정이었습니다. 레트로 게임이 로컬에 설치된 오픈 소스 LLM과 대화를 나누고, 던전 퍼즐 안에서 ‘바이브 코딩’을 하는 모습은 지금 봐도 여전히 마법 같아요.
진행하면서 잠금 해제할 수 있는 개발자 프로필 배지 기능까지 꽉 채워 데모를 공개했습니다. 전체 아키텍처를 살펴보고 싶거나 저희가 사용한 프롬프트가 궁금하다면 아래 공식 페이지에서 확인해 보세요.
자, 여러분의 장비를 챙기고 콘솔 창을 열어보세요. 여러분 모두에게 즐거운 개발의 여정이 시작되길 바랍니다! 🍉🎮