그리드피그 퀴즈 클래시: 프롬프트를 헤르메스 에이전트로 멀티플레이어 게임으로 전환
Source: Dev.to
이 글은 Hermes Agent Challenge 에 대한 제출물입니다
내가 만든 것
나는 GridyPig Quiz Clash 라는 AI‑지원 퀴즈 생성 및 멀티플레이어 게임 모드를 GridyPig(다중 테넌트 실시간 게임 플랫폼) 안에 만들었습니다.
내가 해결하고 싶었던 문제는 아주 간단합니다. 행사, 런칭 파티, 교실, 커뮤니티 나이트, 혹은 팀 활동을 위한 좋은 퀴즈를 만드는 데 시간이 많이 걸린다는 것이죠. 질문을 생각하고, 난이도를 맞추고, 답변 옵션을 작성하고, 정답을 검증하고, 모든 것을 포맷한 뒤, 사람들끼리 실제로 플레이할 수 있는 형태로 바꿔야 합니다.
GridyPig Quiz Clash는 이 과정을 훨씬 빠른 흐름으로 바꿔줍니다:
- 제작자가 원하는 퀴즈를 자연어(plain English)로 설명합니다.
- Hermes Agent가 구조화된 질문, 옵션, 정답, 해설, 난이도 등을 자동으로 생성합니다.
- 제작자는 질문을 편집·축소·불러오기·음성 입력·저장 등을 통해 재사용 가능한 퀴즈 뱅크에 보관할 수 있습니다.
- 퀴즈는 턴 처리, 점수 집계, 비활성 타이머, 최종 순위표가 포함된 실시간 멀티플레이어 방으로 전환됩니다.
결과물은 단순히 “AI가 만든 텍스트”가 아닙니다. 아이디어에서 플레이 가능한 게임까지 이어지는 에이전트‑지원 경로가 완성된 것입니다.
데모
데모 링크: https://www.loom.com/share/d5f3b92457fa489cb5310cf69bfd901f
추천 데모 진행 순서
- 테넌트 워크스페이스를 엽니다. 예:
https://justin.gridypig.com. - 플레이어/제작자로 로그인하거나 회원가입합니다.
- 새 게임을 시작하고 Quiz Clash 를 선택합니다.
AI 퀴즈 빌더 프롬프트 예시:
Create a fun 8-question quiz about Nigerian tech startups for a launch party. Mix simple and tricky questions.- Hermes가 생성한 질문이 GridyPig의 편집 가능한 퀴즈 형식으로 나타나는 모습을 보여줍니다.
- 퀴즈 세트를 저장하고 실시간 방을 엽니다.
- 다른 플레이어와 함께 입장하거나 시뮬레이션/실시간 방 흐름을 보여줍니다.
- 몇 라운드 진행 후 최종 리더보드를 표시합니다.
스크린샷 / 비디오 자리표시자
게임 랜딩 페이지
Hermes Agent와 함께하는 퀴즈 빌더
코드
레포지토리: github.com/cjustinobi/greedy-pig
주요 디렉터리
- Hermes Cloud Run 어댑터:
deploy/hermes/ - 백엔드 퀴즈 생성 서비스:
apps/backend/src/quiz/quiz-ai.service.ts - 퀴즈 API 및 퀴즈 뱅크:
apps/backend/src/quiz/ - 프론트엔드 퀴즈 설정 UI:
apps/frontend/src/components/quiz/ - 실시간 게임 방:
apps/frontend/src/components/game/
사용 기술 스택
- 프론트엔드: Next.js, React, Tailwind CSS, Framer Motion
- 백엔드: NestJS, Prisma, PostgreSQL/Supabase
- 실시간: Socket.io
- 에이전트 런타임: OpenAI 호환 Cloud Run 어댑터 뒤에 있는 Hermes Agent
- 인프라: Google Cloud Run, Docker, Vercel, GitHub Actions
- 프로덕트 레이어: 다중 테넌트 워크스페이스, PWA 지원, 추천인 시스템, 재사용 가능한 퀴즈 뱅크, 지갑 연동 게임 모드
Hermes Agent 활용 방법
Hermes Agent는 AI 퀴즈 생성 레이어를 담당합니다. 나는 Hermes를 작은 Cloud Run 서비스에 래핑해 OpenAI‑호환 /v1/chat/completions 엔드포인트를 제공했습니다. 이를 통해 기존 GridyPig 백엔드가 Hermes를 플러그인형 AI 제공자로 취급하면서도 게임 엔진과는 별도로 유지할 수 있었습니다.
통합은 크게 세 부분으로 구성됩니다.
1. 프롬프트 → 플레이 가능한 구조화 출력
GridyPig은 텍스트 단락이 아니라 유효한 게임 데이터가 필요합니다.
Hermes는 제작자의 의도를 받아 엄격한 퀴즈 스키마를 반환하도록 지시됩니다:
{
"questions": [
{
"prompt": "Question text",
"type": "MULTIPLE_CHOICE",
"options": ["A", "B", "C", "D"],
"correctAnswers": ["A"],
"difficulty": "MEDIUM",
"explanation": "Why the answer is correct"
}
]
}백엔드는 이 출력을 게임 로직에 전달하기 전에 검증·정규화합니다. 질문 형식이 잘못되면 방이 조용히 깨지는 대신 바로 거부됩니다.
2. 프로덕션 제약을 고려한 에이전트 어댑터
Hermes Agent는 독립적인 Cloud Run 서비스로 실행됩니다. 테스트 중에 컨테이너 시작, 포트 바인딩, 장시간 실행 루프, JSON 주변의 잡음 많은 CLI 출력 등 실제 배포 문제를 겪었습니다.
이를 해결하기 위해 만든 전용 어댑터는 다음을 수행합니다:
- Cloud Run이 제공하는
PORT를 올바르게 청취. - 백엔드와 Hermes 서비스 간에 공유 비밀키로 요청을 인증.
- 에이전트가 Cloud Storage/FUSE SQLite WAL 파일에 걸려 멈추지 않도록 일시적인 런타임 상태만 유지.
- 예측 가능한 응답 시간을 위해 한 번의 조용한 채팅 턴으로 생성 제한.
- CLI가 세션 잡음이나 마크다운 래퍼를 반환해도 깨끗한 퀴즈 JSON을 추출.
이 어댑터 덕분에 Hermes를 로컬 실험이 아닌 실제 서비스로 사용할 수 있게 되었습니다.
3. 인간‑인‑루프(Human‑in‑the‑Loop) 제작
나는 제작자가 언제든지 제어권을 갖도록 설계했습니다. Hermes가 퀴즈 작성을 가속화하지만, 제작자는 다음을 할 수 있습니다:
- 생성된 모든 질문을 직접 편집.
- 미리 정의된 카테고리 또는 사용자 정의 카테고리 선택.
- 질문 유형 선택: 예/아니오 또는 다중 선택.
- 음성 입력으로 질문·옵션 작성.
- 템플릿에서 질문을 가져오기.
퀴즈 생성기를 넘어서는 이유
생성된 퀴즈는 전체 멀티플레이어 게임 시스템의 일부가 됩니다:
- 턴‑바이‑턴 Quiz Clash: 플레이어가 순서대로 답하고 가장 높은 점수를 획득한 사람이 승리.
- GridyPig 스트릭 모드: 정답을 연속으로 맞히면 차례를 유지해 원래 게임의 ‘운을 걸고 진행’ 느낌을 유지.
- 서버‑사이드 검증: 점수와 턴은 백엔드에서 강제하며 브라우저에 의존하지 않음.
- 비활성 타이머: 플레이어가 멈추면 방이 모두에게 경고하고 차례를 안전하게 넘김.
- 최종 순위표: 게임 종료 시 각 참가자의 성과를 보여주는 리더보드 제공.
- 테넌트 워크스페이스: 각 기업·커뮤니티가 자체 브랜드 게임을 운영 가능.
- 재사용 가능한 퀴즈 뱅크: 제작자는 처음부터 만들거나 기존 질문을 재활용 가능.
배운 점
가장 큰 교훈은 에이전트 기능에 제품 경계를 명확히 두어야 한다는 것이었습니다.
에이전트에게 모든 일을 맡기고 싶지만, 실시간 게임은 결정론적 동작이 필요합니다. Hermes는 콘텐츠 제작에 뛰어나지만, 플랫폼은 여전히 엄격한 검증, 타입이