AI로 코딩 배우는 레트로 던전 게임 등장!
과거 Google I/O의 'Adventure' 기술에서 영감을 받아, AI 원리 학습을 위한 웹 게임 'AIventure' 기획
Gemini Canvas를 활용한 초기 프로토타이핑과 Phaser.JS 기반 레트로 던전 엔진 구현
Gemma 4 모델을 브라우저 내에서 직접 구동하여 AI 기능(AI Functionality)을 클라이언트 사이드에서 구현
MediaPipe를 활용한 모델 경량화 및 배포로 별도 백엔드 없이 로컬 환경(Local Environment)에서 AI 추론 실행
클라이언트 사이드 AI 추론을 위한 모델 경량화
AIventure는 MediaPipe와 LiteRT 팀의 사전 변환 모델을 활용하여 Gemma 모델을 브라우저에서 직접 실행하는 데 성공했다.
모델 경량화(Model Quantization): E2B, E4B 등 다양한 크기의 Gemma 모델을 테스트하며 웹 환경에 적합한 모델을 선별했다.
클라이언트 측 추론(Client-side Inference): 사용자의 API 키 입력이나 복잡한 백엔드 설정 없이, 모든 AI 연산이 로컬 머신에서 수행되어 접근성을 높였다.
이벤트 버스(Event Bus) 활용: 프론트엔드와 로드된 모델 간의 통신을 위해 간단한 이벤트 버스 패턴을 적용하여 데이터 흐름(Data Flow)을 간소화했다.
이는 웹 애플리케이션 내에서 AI 기능(AI Functionality)을 통합하는 새로운 가능성을 제시한다.
AI 기반 게임 퍼즐 메커니즘 설계
AIventure는 단순한 잠금 해제 메커니즘을 넘어, 생성형 AI(Generative AI)의 마법을 보여주는 두 가지 핵심 퍼즐을 선보인다.
바이브 코딩 룸(Vibe Coding Room): 플레이어가 자연어 프롬프트로 UI 코드를 생성하면, AI가 즉석에서 웹 페이지를 구축하고 게임 내에서 즉시 결과를 확인할 수 있다.
에이전트 로봇 퍼즐(Agent Puzzle): NPC 로봇이 자연어 명령을 이해하고 툴 콜링(Tool Calling) 및 추론 능력을 통해 게임 내 행동으로 분해하여 실행한다.
이러한 설계는 AI 보조 UI 디자인(AI-assisted UI Design) 개념을 소개하고, LLM의 실행 능력(Execution Capability)을 게임 플레이에 통합하는 혁신적인 접근 방식이다.
레트로 게임 미학과 현대 AI 기술의 융합
AIventure는 과거 Google I/O의 'Adventure' 프로젝트에서 영감을 받아 레트로 스타일의 미학(Retro Aesthetics)을 계승하며 독특한 게임 세계를 구축했다.
Phaser.JS 기반 레트로 캔버스: 게임 엔진은 Phaser.JS를 사용하여 탑다운 방식의 레트로 던전 환경을 구현했다.
Gemini Canvas 프로토타이핑: 초기 아이디어 구체화 단계에서 Gemini Canvas를 활용하여 복잡한 엔진 코드 작성 전에 핵심 게임 로직(Core Game Logic)을 빠르게 검증했다.
Angular 프론트엔드: UI 패널과 레이아웃 관리는 Angular 프레임워크를 사용하여 사용자 경험을 향상시켰다.
이러한 조합은 과거의 향수(Nostalgia)와 최신 AI 기술을 결합하여 독특한 개발자 경험을 제공한다.
Gemma 모델의 함수 호출 및 에이전트 워크플로우 지원
AIventure 개발팀은 초기 Gemini 모델에서 Gemma 4 모델로 전환하며 웹 게임 내 AI 기능 구현의 가능성을 확장했다.
함수 호출(Function Calling) 능력: Gemma 모델은 자연어 명령을 구체적인 함수 호출(Specific Function Calls)로 변환하여 게임 내 에이전트 로봇의 행동을 제어한다.
에이전트 워크플로우(Agentic Workflows) 지원: 모델이 복잡한 지시를 단계별 작업으로 분해하고 실행하는 능력을 활용하여 지능형 NPC 상호작용을 구현했다.
다양한 프레임워크 테스트: Ollama, LM Studio, Transformers, Vertex AI 등 여러 환경에서 Gemma 모델의 성능을 테스트하며 최적의 통합 방안을 모색했다.
이는 클라이언트 측에서 LLM 기반의 복잡한 AI 워크플로우를 실행할 수 있음을 보여준다.
멀티모달 AI 기능 탐색 및 향후 과제
AIventure 팀은 현재 Gemma 모델의 멀티모달(Multimodal) 기능을 탐색하며 프로젝트의 확장 가능성을 모색 중이다.
멀티모달 기능(Multimodal Capabilities): 텍스트뿐만 아니라 이미지 등 다양한 형태의 입력을 이해하고 처리하는 AI 모델의 능력을 활용할 계획이다.
오픈 소스(Open Source) 공개: GitHub 저장소를 통해 전체 아키텍처와 프롬프트 예제를 공개하여 개발자들의 자체적인 실험과 탐구를 장려한다.
지속적인 개선: 현재 퍼즐 외에도 새로운 AI 기반 상호작용을 추가하여 게임의 교육적 가치와 재미를 높일 예정이다.
이는 AI 기술의 최신 동향을 게임 개발에 접목하려는 지속적인 노력을 보여준다.
