간장공장 공장장을 AI한테 검사받는 게임을 만들었습니다
브라우저에서 도는 Whisper가 발음을 자모 단위로 채점합니다. AI가 잘못 알아들은 문장이 더 웃겨요.
자랑 포인트
- 온디바이스 Whisper — 마이크 음성이 서버로 전혀 나가지 않고 브라우저 안에서만 인식(WebGPU 우선, 미지원 시 WASM 폴백)해 프라이버시를 지키면서 AI 채점
- 한글 자모 단위 채점 — 목표 문장과 AI 인식 결과를 초·중·종성으로 분해해 정규화 편집거리로 비교, 받침 하나 틀린 부분 정답도 공정하게 반영
- AI 오인식이 곧 콘텐츠 — 잘못 들은 순간을 음절 diff로 집어내고 스코어 카드 짤로 박제해 SNS 공유각까지
"간장공장 공장장은 강 공장장이고..." 이거 빨리 읽기 시합, 다들 해봤을 겁니다. 문제는 심판이 없다는 거예요. 서로 자기가 잘했다고 우기다가 흐지부지 끝나죠. 그래서 심판을 붙였습니다. AI로요.
잰말런은 잰말(빨리 말하기 문장)을 빠르고 정확하게 읽으면, 브라우저에서 도는 Whisper AI가 듣고 점수를 매기는 게임입니다.
채점은 꽤 진지하게 만들었습니다. 목표 문장과 AI가 들은 문장을 한글 초성·중성·종성으로 쪼개서 편집거리로 비교해요. 받침 하나 틀린 것도 "부분 정답"으로 공정하게 반영됩니다. 속도는 무음을 잘라낸 실제 발화 시간으로 재고, 대충 빨리 읽기만 하면 정확도가 깎여서 상쇄되게 밸런스를 잡았습니다. 등급은 S부터 F까지 나와요.
근데 이 게임의 진짜 재미는 점수가 아닙니다. AI가 잘못 알아듣는 순간이에요. 발음이 새면 Whisper가 진짜 엉뚱한 문장을 받아 적는데, 어디서 틀렸는지 diff로 색칠돼서 나옵니다(맞음/틀림/빠뜨림/AI가 멋대로 덧붙임). 제가 "경찰청 철창살"을 빠르게 읽었더니 AI가 받아 적은 걸 보고 한참 웃었습니다. 뭐라고 적었는지는 직접 확인해보세요. 이 오인식 결과를 스코어 카드 이미지로 저장·공유할 수 있는데, 사실상 짤 생성기입니다.
잰말은 쉬움/보통/지옥 세 티어로 16종 넣었고, 매 판 랜덤으로 뽑힙니다. 최고 점수는 브라우저에 저장되고요.
기술 얘기. 음성인식을 서버 없이 하는 게 목표라서 transformers.js로 Whisper(whisper-base)를 Web Worker에서 돌립니다. WebGPU 되면 GPU로, 안 되면 WASM 폴백. 마이크 음성이 서버로 한 번도 안 나간다는 뜻입니다. 오디오는 MediaRecorder로 받아서 리샘플하고 무음 잘라서 모델에 넣어요. 채점 로직은 모델과 분리된 순수 함수로 짜서 테스트로 검증했습니다. 자모 분해 코드를 짜본 건 처음인데, 한글이 이렇게 수학적인 문자였나 새삼 감탄했네요.
React 19 + TypeScript + Vite 8에 Tailwind CSS v4, Vercel 정적 배포로 끝. API 키도 백엔드도 없습니다.
혀에 자신 있으신 분들 도전해보세요. 생각보다 AI가 야박합니다. 그리고 결과 화면을 보다 보면 알게 됩니다. AI가 야박한 게 아니라 내 발음이 야박했다는 걸요.
하나 팁을 드리면, 조용한 곳에서 하세요. 주변 소음이 섞이면 Whisper가 소음까지 문장으로 만들어내려고 해서 점수가 더 험악해집니다. 그리고 지옥 티어는 진짜 지옥이니까 쉬움부터 차근차근 올라오시길. 저는 만든 사람인데도 지옥 티어 S등급을 아직 못 찍었습니다.