브라우저 AI한테 발음 채점받는 잰말놀이 게임, 잰말런 만들었어요
"간장공장 공장장…"을 빠르게 읽으면 브라우저에서 도는 Whisper AI가 발음을 자모 단위로 채점해요. 음성은 서버로 안 나가고, AI가 웃기게 잘못 듣는 순간이 그대로 공유각!
자랑 포인트
- 온디바이스 Whisper — 마이크 음성이 서버로 전혀 나가지 않고 브라우저 안에서만 인식(WebGPU 우선, 미지원 시 WASM 폴백)해 프라이버시를 지키면서 AI 채점
- 한글 자모 단위 채점 — 목표 문장과 AI 인식 결과를 초·중·종성으로 분해해 정규화 편집거리로 비교, 받침 하나 틀린 부분 정답도 공정하게 반영
- AI 오인식이 곧 콘텐츠 — 잘못 들은 순간을 음절 diff로 집어내고 스코어 카드 짤로 박제해 SNS 공유각까지
혀 꼬이면 지는 겁니다. "간장공장 공장장…" 같은 잰말을 빠르고 정확하게 읽으면, 브라우저에서 도는 Whisper AI가 내 발음을 듣고 점수를 매기는 게임이에요. 재미있는 건, 발음이 새면 AI가 엉뚱하게 알아듣고 "뭐라고요…?" 하면서 감점한다는 것 — 그 오인식이 그대로 웃음 포인트이자 공유각이 됩니다.
주요 기능
- 온디바이스 음성인식 — Whisper를 브라우저에서 직접 돌려요. WebGPU가 되면 GPU로, 안 되면 WASM으로 폴백. 그래서 마이크 음성이 서버로 단 한 번도 나가지 않습니다.
- 자모 단위 정확도 채점 — 목표 문장과 AI가 들은 결과를 한글 초·중·종성으로 쪼갠 다음 정규화 편집거리로 비교해요. 공백·문장부호는 무시하고, 받침 하나 틀린 "부분 정답"도 공정하게 점수에 반영합니다.
- 스피드런 점수 — 무음을 잘라낸 실제 발화 시간으로 속도를 재요. 대충 빨리만 읽으면 정확도가 깎여서 점수가 상쇄되고, 등급은 S / A / B / C / D / F로 나뉩니다.
- 음절 diff 하이라이트 — "AI가 들은 말"을 목표 문장과 정렬해 어디서 틀렸는지 색으로 짚어줘요 (맞음/틀림/빠뜨림/AI가 덧붙임).
- 오인식 짤 공유 — 결과를 스코어 카드 이미지로 만들어 저장·복사·공유. AI가 웃기게 잘못 들은 문장이 그대로 박제됩니다.
- 잰말 16종 · 난이도 티어 — 쉬움/보통/지옥. 매 판 랜덤으로 뽑고, 최고 점수는 브라우저에 저장돼요.
모바일에서도 그대로 돌아갑니다:
기술 이야기
핵심은 서버 없이 프론트엔드만으로 음성 채점을 끝내는 거였어요. @huggingface/transformers(transformers.js)로 Whisper(whisper-base)를 Web Worker에서 돌리고, 오디오는 Web Audio API(MediaRecorder → OfflineAudioContext 리샘플 → RMS 무음 트림)로 다듬어 모델에 넣습니다. 덕분에 API 키도, 백엔드도 없이 Vercel 정적 배포 한 방으로 끝났어요.
채점 로직은 일부러 DOM·모델에 의존하지 않는 순수 모듈로 분리했습니다. 자모 분해·편집거리·점수·diff를 각각 함수로 떼어 놓으니 테스트로 자동 검증하기 편했고(완벽 일치=100%, 부분 오인식=중간, 완전 다름=낮음), 채점 공식도 마음껏 튜닝할 수 있었어요.
스택은 React 19 + TypeScript + Vite 8에 Tailwind CSS v4. 가볍고 빠르게 만들기 딱 좋은 조합이었습니다.
혀 자신 있으면 한번 도전해 보세요. 생각보다 AI가 야박합니다 😅