How we built AIventure, an AI-Powered Retro Dungeon
Grab a refreshing slice of cold watermelon (because it’s summer in Tokyo and I love it!), and let me...
작은 팀이 아이디어 하나를 살아 숨쉬는 웹 게임으로 만들어낸 이야기다.
Google I/O를 몇 년간 지켜봤다면 Adventure를 기억할지도 모른다. 팬데믹 기간 주요 Google 행사에 사용된 가상 컨퍼런스 플랫폼으로, 방대하고 아름다운 일러스트가 가득한 협업 공간이었다. 다만 규모가 너무 컸고, 일회성이었으며, 수많은 인간 모더레이터가 뒷받침돼야 했다.
몇 달 전, Tom과 나는 스스로에게 물었다. Adventure를 다시 만들면 어떨까? 일회성 컨퍼런스가 아니라, 개발자들이 딱딱한 문서 대신 "바이브 코딩" 과 게임플레이로 생성형 AI 원리를 체험할 수 있는 아늑한 레트로 월드를.
AIventure 는 그렇게 시작됐다. 실제 제작 과정을 공유한다.
Step 1: Gemini Canvas에서 스케치와 프로토타이핑 #
좋은 게임은 프로토타입에서 시작한다. AIventure도 마찬가지였다. 복잡한 엔진 코드부터 짜는 대신, Gemini 안에서 개념을 먼저 탐색했다.
UI 레이아웃은 분할 구조로 잡았다. 게임 엔진에는 레트로 캔버스를 구동하는 Phaser.JS를, UI 패널과 레이아웃 관리에는 Angular를 사용하는 방식이다. 이전 I/O 데모 "Living Canvas"에서도 동일하게 썼던 조합이다.
다양한 스타일로 간단한 교육용 퍼즐 게임을 먼저 만들어보고, 최종적으로 우리가 원하는 "바이브"와 가장 잘 맞는 탑다운 레트로 던전 방식을 택했다. 이 시점에 Tom이 자신의 이전 프로젝트 "Adventure"의 분위기와 미학을 살려 세계관에 일관된 정체성을 부여하자는 아이디어를 냈다.
Gemini Canvas에서의 초기 프로토타입 스크린샷
Step 2: 룸 설계 (바이브 코딩 & 에이전트 로봇) #
기본 로직이 동작하는 걸 확인한 뒤, Tom과 함께 더 고급스러운 퍼즐 메커니즘을 구상했다. AI가 단순한 자물쇠-열쇠 역할에 그치는 게 아니라, 현대 LLM이 가진 마법 같은 특성을 직접 보여주길 원했다.
여기서 두 가지 주요 창작물이 나왔다.
- 바이브 코딩 룸: AI 보조 UI 설계 개념을 플레이어에게 소개하기 위한 공간이다. 게임이 iFrame 탭을 열고, 플레이어가 "먹기와 자기 버튼만 있는 닭을 위한 할 일 앱 만들어줘" 같은 프롬프트를 입력하면 AI가 즉석에서 웹 페이지를 생성한다. 플레이어는 게임 환경 안에서 코드와 결과물을 바로 확인하고 수정할 수 있다.
- 에이전트 퍼즐: 자연어 명령을 받아 Phaser 그리드 월드 안에서 실행하는 작은 로봇 NPC 캐릭터를 도입했다. 플레이어가 "스위치를 눌러" 라고 말하면, 모델이 툴 호출과 추론을 활용해 명령을 구체적인 단계별 게임 액션으로 분해해 수행한다.
Step 3: Gemini에서 Gemma로 #
초기 빌드와 테스트 단계에서는 Gemini API 클라우드 엔드포인트를 통해 플레이어 명령과 코드 생성 요청을 처리했다. 결과는 훌륭했지만, 현대 웹 앱의 가능성을 더 밀어붙이고 싶었다. 완전히 자립적이고 누구나 접근 가능한 게임을 목표로 삼았다.
그래서 Gemma 4 를 도입했다.
Gemma 4 모델로 퍼즐 테스트를 시작했다. E2B, E4B 등 다양한 크기와 Ollama, LM Studio, Transformers, Vertex AI 같은 프레임워크를 실험하며 모델이 함수 호출과 에이전트 워크플로우를 얼마나 잘 처리하는지 추적했다.
Step 4: MediaPipe로 브라우저에서 실행하기 #
마지막 과제는 배포였다. Google Developers 사이트를 통해 수백만 명의 개발자에게 AI 기반 게임을 제공하면서, 클라우드 백엔드를 따로 구성하거나 개인 API 키를 입력하게 만들지 않으려면 어떻게 해야 할까?
답은 모델을 사용자의 브라우저에서 직접 로컬 실행하는 것이었다.
MediaPipe와 LiteRT 팀의 사전 변환 포맷을 활용해 웹사이트 인터페이스에서 바로 모델을 호스팅했다. 클라이언트 측 웹 기술만 사용하기 때문에 전체 경험이 사용자의 로컬 머신에서 돌아간다. 플레이어가 NPC에게 프롬프트를 보내거나 게임 안에서 코드를 작성하면, 추론은 전적으로 클라이언트에서 처리된다. 프론트엔드는 간단한 이벤트 버스를 통해 요청을 브라우저에 로드된 모델로 직접 넘긴다.
소스 코드를 직접 탐색하고 싶은 개발자를 위해, 동일한 게임 루프를 로컬에서 띄운 LM Studio 엔드포인트나 Vertex AI로 연결할 수 있는 토글도 제공한다.
추가 개발 중인 기능 #
현재 퍼즐 외에도 Gemma의 멀티모달 기능을 탐색 중이다. 아직 작업이 진행 중이지만, GitHub 저장소를 클론해 직접 실험해볼 수 있다.
데모 및 소스 코드 #
AIventure는 데모와 함께 공개되어 있으며, 진행 과정에서 개발자 프로필 배지도 받을 수 있다. 솔루션 확인, 전체 아키텍처 검토, 프롬프트 탐색은 공식 페이지에서 가능하다.