로컬 SLM이 DOM을 해킹하여 부정행위(및 조롱)를 하는 에어 하키 게임을 코딩했어요 🤖🏓

(dev.to)

로컬 SLM을 브라우저 내 WebGPU로 구동하여 실시간 물리 엔진과 결합한 이 프로젝트는, 지연 시간 문제를 하이브리드 AI 구조로 해결하며 온디바이스 AI가 게임의 내러티브와 사용자 경험을 어떻게 혁신할 수 있는지 보여주는 중요한 사례입니다.

이 글의 핵심 포인트

1WebGPU와 WebLLM을 활용하여 브라우저 내 100% 로컬 환경에서 SLM(Phi-3-mini) 구동
2실시간 물리 엔진(60 FPS)과 비동기적 SLM을 분리한 'Two Brains' 하이브리드 아키텍처 채택
3Brain.js(MLP)를 통해 사용자의 플레이 패턴을 실시간으로 학습하고 예측하는 기능 구현
4Regex 기반 함수 호출(Function Calling)을 통해 AI가 직접 DOM을 조작하고 게임 상태를 변경하는 '치팅' 메커니즘 구현
5슬라이딩 윈도우 컨텍스트를 활용하여 이전 게임의 결과를 기억하고 사용자에게 지속적인 내러티브를 제공

이 글에 대한 공공지능 분석

왜 중요한가?

대규모 언어 모델(LLM)의 고질적인 문제인 추론 지연(Latency)을 하이브리드 아키텍처로 해결함으로써, 실시간성이 중요한 인터랙티브 애플리케이션에 SLM을 통합할 수 있는 기술적 돌파구를 제시했습니다.

어떤 배경과 맥락이 있나?

최근 AI 트렌드가 클라우드 기반의 거대 모델에서 WebGPU 등을 활용한 온디바이스(On-device) 및 에지(Edge) AI로 이동함에 따라, 서버 비용 절감과 개인정보 보호를 동시에 달성하려는 시도가 이어지고 있습니다.

업계에 어떤 영향을 주나?

API 비용 부담 없이 브라우저 자체 자원을 활용하는 'Zero API Cost' 모델은 게임뿐만 아니라 에듀테크, 실시간 시뮬레이션 등 다양한 분야의 AI 네이티브 서비스 개발에 새로운 표준을 제시할 수 있습니다.

한국 시장에 어떤 시사점이 있나?

고비용 GPU 인프라 구축이 부담스러운 한국 스타트업들에게, 사용자 기기의 자원을 활용하는 로컬 SLM 전략은 비용 효율적인 글로벌 서비스 확장을 위한 강력한 기술적 무기가 될 수 있습니다.

이 글에 대한 큐레이터 의견

이 프로젝트의 핵심은 '모든 것을 LLM으로 해결하려 하지 않았다'는 점에 있습니다. 저자는 60 FPS의 물리 엔진 루프에 느린 SLM을 직접 끼워 넣는 대신, 가벼운 MLP(Brain.js)로 물리적 예측을 담당하게 하고 SLM은 비동기적인 '게임 마스터' 역할을 수행하게 하는 'Two Brains' 전략을 취했습니다. 이는 AI 에이전트를 실제 서비스에 통합하려는 창업자들이 반드시 참고해야 할 아키텍처 설계의 정석입니다.

스타트업 관점에서 이는 단순한 기술적 실험을 넘어 비즈니스 모델의 혁신을 의미합니다. 클라우드 API 의존도를 낮추면서도 사용자에게는 개인화된 경험과 높은 몰입감을 제공할 수 있는 이 방식은, 인프라 비용 최적화와 사용자 경험(UX) 극대화라는 두 마리 토끼를 잡을 수 있는 실행 가능한 인사이트를 제공합니다.

원문 보기 →