Molayo

© 2026 Molayo

Dev.to헤드라인2026. 06. 05. 00:24

"고객 탈출 게임" 만들기: 고객 지원의 지옥을 체험하며 고객 경험(CX)을 배우는 음성 기반 게임

요약

고객 지원의 악몽을 체험하며 고객 경험(CX)을 배우는 음성 기반 모바일 게임 'Customer Escape Room'을 소개합니다. Next.js를 기반으로 설계되었으며, 6개의 레벨을 통해 관료주의, 무한 메뉴, 부서 전환 등 최악의 고객 서비스 상황을 게임 메커니즘으로 구현했습니다.

핵심 포인트

  • 고객 경험(CX)의 부정적 측면을 게임화하여 학습 유도
  • 음성 기반 인터랙션과 Next.js 기술 스택 활용
  • IVR, 환불 미로 등 실제 고객 지원의 페인 포인트를 레벨로 구성
  • 반복 감지 및 키워드 탐색 등 독특한 게임 메커니즘 적용

"당신은 고객으로서 살아남을 수 있습니까?""

모든 해커톤에서 팀들은 똑같은 것들을 만듭니다: 챗봇(Chatbots), AI 에이전트(AI agents), 고객 지원 코파일럿(Customer support copilots). 이들은 모두 고객 경험(Customer experience)을 _개선_하려고 노력합니다. 하지만 그 중 어느 것도 망가진 고객 경험이 실제로 어떤 것인지 느끼게 만들지는 못합니다.

그래서 저는 그 반대의 것을 만들었습니다. 바로 게임입니다.

아이디어 (The Idea)

Customer Escape Room은 모바일 우선(Mobile-first) 방식의 음성 기반 게임으로, 플레이어는 점점 더 황당해지는 고객 서비스의 악몽으로부터 탈출해야 합니다. Portal이 The Stanley Parable을 만나 당신의 최악의 콜센터 경험과 결합된 것이라고 생각하면 됩니다.

6개의 레벨. 6명의 NPC. 6가지의 고유한 메커니즘. 이 모든 것은 하나의 질문으로 연결됩니다: 당신은 고객으로서 살아남을 수 있습니까?

기술 스택 (The Tech Stack)

기술 (Technology)용도 (Purpose)
Next.js 16 (App Router)풀스택 프레임워크 (Full-stack framework)
...

아키텍처 (Architecture)

┌──────────────────────────────────────────┐
│               페이지 레이어 (Page Layer)                  │
│  /  (게임 허브 (Game Hub))      /game/judge (데모 (Demo))   │
...

6개의 레벨 (The 6 Levels)

레벨 1: 환불 미로 (The Refund Maze)

플레이어는 기업의 미로 속에 갇힙니다. 환불 로봇(Refund Robot) NPC는 "규정 42(a)(3)(b)(ii)"에 집착하는데, 이는 안으로 들어갈수록 점점 더 복잡하게 중첩되는 가상의 규정입니다. 플레이어는 탈출하기 위해 R-1 양식을 요청하고, 이를 작성한 다음, 관리자 연결(Supervisor escalation)을 요구해야 합니다.

메커니즘 (Mechanic): 관료주의적 계층 탐색. 각 단계에서 전진하기 위해서는 특정 키워드가 필요합니다.

레벨 2: IVR 지옥 (IVR Hell)

시간 제한이 있는 레벨입니다. 플레이어는 자기 자신에게 다시 돌아오는 무한한 전화 메뉴 시스템에 갇힙니다. 결제를 원하면 1번을 누르세요. 결제 문의는 2번을 누르세요. 결제에 관한 결제 문의는 3번을 누르세요. 유일한 탈출구는 "상담원(operator)" 또는 "직원(representative)"이라고 말하는 것 — 즉, 숨겨진 인간의 경로를 찾는 것입니다.

메커니즘 (Mechanic): 카운트다운 타이머 + 메뉴 깊이 추적. 3회 이상 실패하면 힌트 시스템이 활성화됩니다.

레벨 3: 전환 던전 (Transfer Dungeon)

전환 고블린 (Transfer Goblin)은 매번 모든 것을 잊어버린 채 플레이어를 무작위 부서로 열정적으로 전송합니다. 플레이어는 자신의 이야기 일관성을 추적해야 합니다. 같은 말을 반복하면 페널티를 받습니다. 5회 이상 전송된 후 "상급자 연결 (Escalations)"을 요청하여 탈출하세요.

메커니나 (Mechanic): 전송 카운터 + 반복 감지 (이전 응답과의 단어 수준 매칭).

레벨 4: 구독 감옥 (Subscription Prison)

매니저 드래곤 (Manager Dragon)은 가능한 모든 유지 전략 (retention tactic)을 사용합니다. "정말인가요?"라는 질문을 4번이나 던집니다. 할인 제안, 죄책감 유발 등이 이어집니다. 플레이어는 어떤 제안도 수락하지 않고 여러 번의 "정말인가요?" 체크포인트를 단호하게 통과해야 합니다.

메커니나 (Mechanic): 설득의 시련 (Persuasion gauntlet). "아니오"라고 말하거나 제안을 수락하면 진행 상황이 초기화됩니다. 오직 단호한 끈기만이 승리합니다.

레벨 5: 챗봇 미궁 (Chatbot Labyrinth)

챗봇 마법사 (Chatbot Wizard)는 극도의 자신감을 가지고 모든 질문에 틀린 답변을 내놓습니다. 플레이어는 자신이 봇이 아님을 증명하기 위해 3개의 숨겨진 키워드 ("사람 (human)", "상담원 (agent)", "담당자 (representative)")를 찾아내야 합니다. 모든 일반적인 입력은 창의적으로 도움이 되지 않는 답변으로 돌아옵니다.

메커니나 (Mechanic): 키워드 수집. 오해 카운터 (Misunderstanding counter)가 쌓이면 단계적인 힌트가 해제됩니다.

레벨 6: 카렌 보스전 (Karen Boss Fight)

최종 보스입니다. 카렌 퀸 (Karen Queen)은 말을 끊고, 앞뒤가 맞지 않는 말을 하며, 비합리적으로 상황을 악화시키고, 모든 것을 무료로 요구합니다. 플레이어는 더 큰 분노를 유발하지 않으면서 상황을 완화 (de-escalate)하기 위해 공감 단어 ("이해합니다 (understand)", "죄송합니다 (sorry)", "도와드리겠습니다 (help)")를 사용해야 합니다.

메커니나 (Mechanic): 상황 완화 점수 (De-escalation score). 공감 단어는 분노를 줄이지만, 요구하거나 맞서 싸우면 방해를 받게 됩니다.

레벨 디자인 패턴 (Level Design Pattern)

모든 레벨은 동일한 아키텍처를 따릅니다:

type Stage = "intro" | "stage1" | "stage2" | "escaped"

// 결정론적 응답 (deterministic responses)을 포함한 스테이지 데이터
...

이 패턴은 다음을 보장합니다:

  • 무작위 응답 없음 — 모든 NPC 대사는 스테이지에 적절합니다.
  • 혼란스러운 플레이어에게 도움 제공 — "모르겠어요"라고 하면 항상 힌트가 표시됩니다.
  • 명확한 진행 — 키워드가 진행 단계를 제어합니다.
  • 우아한 실패 (Graceful failure) — 대본을 벗어난 입력은 목표로 다시 유도됩니다.

음성 시스템 (Voice System)

음성 시스템 (Voice System)은 네이티브 MediaRecorder API를 사용합니다:

// src/lib/voice.ts
export function useVoice() {
  const startRecording = async () => {
...

VoiceInput 컴포넌트는 이를 토글(toggle) 기능으로 감쌉니다:

<VoiceInput onTranscript={handleTranscript} />
// 마이크 버튼 + "⌨️ 대신 타이핑하기" 토글 표시

아한 실패 (Graceful failure) 처리:

  • 마이크 없음 → 텍스트 입력만 표시
  • API 키 없음 → 문맥 인식 문구(context-aware phrases)로 전사(transcription)를 시뮬레이션
  • 오류 발생 → 폴백(fallback)으로 텍스트 입력 표시

AI 추상화 계층 (AI Abstraction Layer)

API 라우트는 통합 엔드포인트를 통해 대화 생성(dialogue generation)과 전사(transcription)를 모두 처리합니다:

// /api/ai 처리 항목:
// 1. 채팅 완료 (Chat completions, 대화)
// 2. 오디오 전사 (Audio transcriptions, Whisper)
...

환경 변수(env vars)를 통한 제공자(Provider) 전환:

AI_PROVIDER=openai           # gpt-4o-mini 사용
AI_PROVIDER=featherless      # Llama 3.1 8B 사용

상태 관리 (State Management)

게임 상태는 useReducer를 사용하는 React Context를 사용합니다:

type Action =
  | { type: "SET_PHASE"; phase: GamePhase }
  | { type: "SET_LEVEL"; levelId: LevelId }
...

점수 및 등급 (Scoring & Ranks)

6개 카테고리 × 6개 레벨 × 100점 = 최대 3,600점

카테고리:
...

심사위원 데모 모드 (Judge Demo Mode)

가장 중요한 기능 중 하나입니다: /game/judge는 심사위원을 아무런 마찰 없이 레벨 2(IVR 지옥)로 바로 떨어뜨립니다.

// /game/judge/page.tsx
<GameEngine initialLevel={2} />

가입 없음. 온보딩(onboarding) 없음. QR 코드를 스캔한 후 플레이하기까지 단 10초 소요.

다음에 추가할 사항

  1. 멀티플레이어 (Multiplayer) — Socket.io가 설치되어 있습니다. 4~8명의 플레이어가 음성 협력을 통해 공유된 방탈출 게임을 진행합니다.
  2. 동적 AI 시나리오 (Dynamic AI scenarios) — AI 제공자를 사용하여 플레이할 때마다 고유한 회사 이름과 NPC 대화를 생성합니다.
  3. Supabase 지속성 (Supabase persistence) — 리더보드, 저장된 점수, 일일 도전 과제.
  4. 사운드 디자인 (Sound design) — 대기 음악, 메뉴 비프음, NPC 음성 대사.
  5. 더 많은 레벨 — "데이터 삭제 요청", "보증 무효화", "반품 정책의 역설".
  6. 공유 카드 (Share cards) — 점수와 등급이 포함된 공유 가능한 SVG 이미지 생성.

사용해보기

npm install
npm run dev
# → http://localhost:3000
...

스크린샷

How it works - demo 1

How it works - demo 2

How it works - demo 3

How it works - demo 4

코드 및 더 많은 정보: https://www.dailybuild.xyz/project/153-escape-velocity

AI 자동 생성 콘텐츠

본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0