Engineering Call of Customer: AI 기반 음성 CX 배틀 아레나 구축하기

실시간 음성 처리(real-time voice processing), 절차적 Web Audio 생성, D3.js 다크 모드 시각화, 그리고 Gemini 기반의 구조화된 점수 산정 방식을 설명하는 심층 기술 청사진입니다.

핵심 엔지니어링 과제

고객 경험 (CX) 교육에서 정적인 객관식 설문지는 실제 고객과의 분쟁을 해결할 때 발생하는 가공되지 않은 심리적 긴장감을 재현하는 데 실패합니다. 우리는 바로 이 문제를 해결하기 위해 Call of Customer를 구축했습니다. 이는 사용자가 카운트다운 타이머가 작동하는 상황에서 공격적이고 다층적인 분노를 표출하는 고객의 불만을 완화(de-escalate)해야 하는, 음성 기반의 풀스택 피어 챌린지(peer-challenged) 교육 환경입니다.

이 글에서는 이 멀티플레이어 게임 경험을 구현하기 위해 선택한 아키텍처 구성 요소, 코드 구현, 그리고 주요 엔지니어링 절충안(compromises)을 검토합니다.

아키텍처 개요

                               ┌────────────────────────────────┐
                               │     Web Speech Recognition     │
                               │   (Continuous Audio Stream)    │
...

시스템은 세 가지 핵심 도메인에 걸쳐 작동합니다:

1. 클라이언트 인터페이스 (The Client Interface): 지속적인 클라이언트 측 음성 인식 (Web Speech API) 및 실시간 캔버스 렌더링 파형(waveform) 인디케이터.
2. 대화형 하드웨어 피드백 (Interactive Hardware Feedback): 게임 상태를 나타내는 로컬 햅틱 파라미터 (navigator.vibrate)와 결합된 절차적 사운드 합성 (Web Audio API).
3. 지능형 채점 코어 (The Intelligent Grading Core): 클라이언트에 숨겨진 Gemini API 자격 증명을 사용하여 문맥적 불만 기록에 따라 전사(transcripts) 내용을 프록시 점수화하는 ESM 준수 Node.js Express 서버.

심층 기술 분석 및 코드 스니펫

이 퍼포먼스 트레이닝 엔진을 가능하게 하는 네 가지 핵심 시스템을 살펴보겠습니다.

1. 고충실도 절차적 사운드 합성 (Web Audio API)

가공되지 않은 사운드 파일을 사용하는 것은 클라이언트의 콜드 스타트(cold-starts)를 늦추고 테마 커스터마이징을 방해합니다. Call of Customer는 브라우저 오디오 컨텍스트(audio contexts)를 사용하여 임팩트 있는 신시사이저 사운드를 동적으로 생성합니다:

// /src/utils/audio.ts
let audioCtx: AudioContext | null = null;

...

이를 통해 클릭, 타이머 카운트다운, 성능 점수 공개 시 의존성 없는 (Zero-Dependency), 지연 없는 (latency-free) 레트로 게임쇼 스타일의 응답을 보장합니다.

2. 클라이언트 측 음성 인식 및 품질이 보장된 입력 (Client-Side Speech Recognition & Quality Assured Inputs)

실수로 인한 클릭이나 저품질의 클릭이 처리될 경우 음성 인식은 취약하게 느껴질 수 있습니다. 프론트엔드에서는 연속적인 음성 합성 트리거 (continuous speech synthesis triggers)와 함께 엄격한 문자열 길이 제한 (deep string length constraints)을 활용합니다.

// /src/components/RecordingView.tsx
const handleSubmit = (force = false) => {
  const cleanTranscript = transcript.trim();
...

3. 서버 측 난이도 배수 및 LLM 구조화된 채점 (Server-Side Difficulty Multiplier and LLM Structured Grading)

/server.ts 내부에서는 서버 측 Gemini API를 사용하여 평가 파싱 (evaluation parsing)을 구현합니다. 평가된 지표들(공감도 (Empathy), 전문성 (Professionalism), 해결 능력 (Resolution), 명확성 (Clarity), 유지력 (Retention))은 난이도 배수 (difficulty multipliers)에 의해 조정됩니다. 만약 대화 상황이 "Nightmare" 모드로 설정되어 있다면, 플레이어의 용기에 보상하기 위해 최종 출력값에 1.5를 곱합니다!

// /server.ts
const difficultyStr = (complaint.difficulty || 'medium').toLowerCase();
let diffMultiplier = 1.1;
...

프론트엔드에서는 이 배수가 눈에 띄는 난이도 보너스 (Difficulty Bonus) 칩 형태로 표시됩니다:

// /src/components/ResultsView.tsx
{evaluation.difficultyMultiplier !== undefined && (
  <div className="mb-4 bg-amber-500/10 border border-amber-500/20 rounded-xl p-3 flex items-center justify-between">
...

4. 벡터화된 과거 캘리브레이션 차트 작성 (Vectorized Historical Calibration Charting (D3.js))

매치 전반에 걸친 과거 훈련 진행 상황을 시각화하기 위해, 지저분한 정적 차트 요소를 피하고 네이티브 인터랙티브 D3.js SVG 렌더 루프 (render loops)를 사용합니다:

// /src/components/AnalyticsChart.tsx
const xScale = d3.scaleLinear()
  .domain([0, data.length - 1])
...

우리는 저지연 브라우저 API (low-latency browser APIs), 커스텀 스타일링 파라미터, 그리고 LLM 추론 배열 (reasoning arrays)을 통합하여 현대적인 브라우저 실행 프레임에 최적화된 견고한 풀스택 솔루션을 구축했습니다.

여기서 체험해 보세요: https://call-of-customer-783263164775.us-west1.run.app

코드 및 추가 정보: https://www.dailybuild.xyz/project/150-call-of-customer