dev.to

I Built a Cozy 60 FPS AI Agent Bakery Game (Built with Gemma 4 & Antigravity) to Teach RAG, Guardrails & Multi-Agent Orchestration

RAG와 가드레일을 가르치는 60 FPS AI 에이전트 베이커리 게임

Prompt Paws는 베이커리 운영 게임으로 RAG, 프롬프트 가드레일, 컨텍스트 캐싱, 도구 호출, 멀티 에이전트 구조를 익히도록 만든 오픈소스 브라우저 시뮬레이션입니다. 게임은 실제 LLM API를 호출하지 않고, 주문 유형에 맞는 처리 스테이션을 배치해 아키텍처 구성을 연습합니다.

에디터 노트

이 게임의 강점은 프롬프트 유형과 처리 스테이션을 연결해 RAG나 가드레일 같은 설계 요소를 눈에 보이는 선택으로 바꾼 데 있습니다. 코드도 스테이션별 주문 처리 조건을 드러내므로 교육용 모형으로 구조를 확인하기 쉽습니다. 다만 여기서 재현하는 것은 실제 모델 동작이 아니라 클라이언트에서 실행하는 결정론적 시뮬레이션입니다. 캐시 수치에는 설명이 일치하지 않습니다. 본문 표는 토큰 절감률을 95%로 제시하지만 댓글 답변은 Gemini 컨텍스트 캐싱을 모델링하며 입력 비용이 약 75% 줄어든다고 말합니다. 게임 안에서 어떤 가정과 기준으로 두 값을 계산하는지는 자료에 없습니다. 따라서 캐시와 가드레일의 역할을 익히는 학습 도구로는 유용하지만, 표시되는 비용이나 지연 수치를 실제 모델 운영 결과와 동일하게 읽기는 어렵습니다.

AI 요약

Prompt Paws는 HTML5 Canvas 기반의 60 FPS 브라우저 게임입니다. 플레이어는 컨베이어 벨트로 들어오는 주문을 처리하도록 베이커리 스테이션을 배치합니다. 각 스테이션은 AI 시스템 설계 요소를 나타냅니다. 빠른 모델은 Flash Pastry Oven, 컨텍스트 캐시는 Context Cache Jar, 입력 가드레일은 Guardrail Flour Sieve, 벡터 검색 기반 RAG는 Vector Berry Patch에 대응합니다. 도구 호출과 결정론적 계산은 Tool-Call Boba Mixer가 맡고, 다단계 추론과 하위 에이전트 병렬 처리는 각각 Deep-Think Soufflé Oven과 Subagent Sous-Chef Bell로 표현합니다.

주문 처리와 아키텍처 점검

주문은 프롬프트 유형에 따라 스테이션에 전달됩니다. 코드에서 Guardrail Flour Sieve만 jalapeno 유형의 프롬프트 인젝션 주문을 처리하며, 다른 일반 스테이션은 이 주문을 거부합니다. tart 유형은 RAG 스테이션, boba 유형은 도구 호출 스테이션으로 보내야 합니다. 배치한 스테이션을 확인하는 사전 점검 함수는 레벨에 프롬프트 인젝션, 사실 검색, 계산 주문이 포함됐는데 해당 스테이션이 없으면 경고를 표시합니다. 플레이어는 7개 스토리 시프트를 진행하거나 Auto-Chef Blueprint로 자동 구성된 파이프라인을 실행할 수 있습니다.

구현과 실행 환경

게임은 game.js의 HTML5 Canvas 시뮬레이션, levels.js의 7단계 학습 과정, audio.js의 절차적 WebAudio 사운드로 구성됩니다. 작성자는 게임을 완전히 클라이언트에서 실행하며 API 키나 가입 절차가 필요 없다고 설명합니다. 따라서 플레이 도중 실제 LLM API를 호출하거나 토큰 비용을 내지 않습니다. 저장소를 포크해 모델 스테이션을 추가하고 교육 과정과 아키텍처 구성을 바꿀 수 있다고 안내합니다.

dev.to 반응

  • @alexshev — 스테이션을 실제 아키텍처 요소에 일대일로 대응한 점은 학습에 명확한 장치입니다. 학습자가 가드레일이나 캐시 같은 스테이션을 하나 꺼 보는 실패 모드를 추가하면 좋겠습니다. 도구 호출 인젝션이나 반복 토큰 비용처럼 측정 가능한 결과를 보여주면 아키텍처 선택을 더 잘 기억할 수 있습니다.
    • @robinamirbahar — 의견 감사합니다, Alex! 그런 반사실적 상황과 실패 모드는 아키텍처 직관을 키우는 데 좋은 방법입니다. 컨텍스트 캐시가 없을 때 반복 토큰 소비로 베이커리 예산이 10배 빠르게 줄거나, 가드레일을 우회했을 때 프롬프트 인젝션으로 승인되지 않은 도구 호출이 발생하는 모습을 보여주면 트레이드오드가 분명해집니다. 다음 버전에 스테이션을 일부러 끄고 지연 시간 증가, 토큰 오버헤드, 보안 저하를 비교하는 대혼란 엔지니어링 모드를 추가할지 생각하고 있습니다.
  • @kyisaiah47 — 캐시 스테이션은 같은 프롬프트와 모델로 캐시된 요청과 캐시되지 않은 요청을 비교하나요, 아니면 속도 효과가 게임 로직에 포함된 값인가요?
    • @robinamirbahar — 좋은 질문입니다. 단순한 게임 연출이 아니라 Gemini의 컨텍스트 캐싱 동작을 바탕으로 시뮬레이션합니다. 레시피와 시스템 지침처럼 긴 접두부가 같은 요청을 가정해 첫 토큰 생성 시간(TTFT)과 입력 토큰 비용 감소를 모델링합니다. 답변에서는 입력 토큰 비용이 약 75% 줄어든다고 설명합니다. 캐시가 준비되면 저장된 컨텍스트 토큰을 즉시 가져오고, 캐시가 없거나 TTL이 만료되면 토큰 처리 단계에서 대기 시간과 토큰 수가 늘어납니다.

원문: dev.to / 번역·요약: Trawling