Transcriber 구축기 - 브라우저 AI 도구를 위한 로컬 Whisper 음성 백엔드
요약
브라우저의 Web Speech API 한계를 극복하기 위해 Whisper 모델을 활용한 로컬 음성 백엔드 'Transcriber' 구축 과정을 소개합니다. Node.js와 ffmpeg를 사용하여 오디오를 처리하고, 브라우저 환경에 따라 단계별 폴백(fallback) 전략을 제공합니다.
핵심 포인트
- 브라우저별 Web Speech API 지원 차이 및 클라우드 전송 문제 해결
- Whisper 모델을 활용한 로컬 Node.js 기반 음성 인식 서버 구축
- Web Speech API, Transcriber, 수동 폴백으로 이어지는 3단계 계층 구조
- 환경 변수를 통한 Whisper 모델 크기 및 성능 조절 가능
브라우저에서의 음성 입력은 불일치의 연속입니다.
Chrome, Edge, 그리고 대부분의 Chromium 기반 브라우저는 연속 인식을 지원하는 Web Speech API를 갖추고 있어 받아쓰기(dictation)에 효과적입니다. Firefox는 런타임에 not-supported 에러를 던지는 스텁(stub)을 제공합니다. Safari의 구현 방식은 작동하지만, 몇 문장마다 권한 허용 제스처를 요구합니다. 그리고 이 모든 브라우저는 여러분의 오디오를 클라우드 서비스로 전송합니다.
PromptBoard를 위한 음성 받아쓰기 기능을 구축할 때, 저는 어디서나 작동하고 로컬에서 실행되는 무언가가 필요했습니다. Transcriber가 그 해답입니다. 이는 Whisper를 프로세스 내에서 실행하고 단일 HTTP 엔드포인트를 노출하는 Node.js 서버입니다. 음성 입력을 원하는 모든 브라우저 도구는 오디오를 그곳으로 보내고 텍스트를 돌려받습니다.
계층 구조 (The cascade)
음성을 지원하는 모든 Machina 도구는 동일한 3단계 계층 구조를 사용합니다:
Level 1 — Web Speech API (Chromium)
window.SpeechRecognition을 사용할 수 있다면 이를 사용합니다. 지연 시간(latency)이 없고 네트워크 사용도 없습니다. Chrome 사용자들을 위한 최적의 경로(Happy path)입니다.
Level 2 — Transcriber (port 4324)
Firefox의 경우, MediaRecorder가 오디오를 webm 블롭(blob)으로 캡처합니다. 중지 시, /transcribe로 POST됩니다. Transcriber는 ffmpeg를 사용하여 이를 WAV로 변환하고, Whisper를 실행한 뒤 텍스트를 반환합니다. 왕복 시간(Round-trip): 1~3초.
Level 3 — 수동 폴백 (Manual fallback)
Transcriber가 실행 중이지 않고 Web Speech를 사용할 수 없는 경우, 녹음된 오디오와 텍스트 영역(textarea)이 포함된 대화 상자가 열립니다. 데이터가 조용히 유실되는 일은 없습니다.
API
GET /health → { ok, ready, model, language }
POST /transcribe → { ok, text } (body: raw audio bytes)
POST /shutdown → graceful stop
작은 인터페이스, 단일 책임(single responsibility). Transcriber는 세션을 관리하지 않고, 오디오를 저장하지 않으며, 어떤 도구가 호출하고 있는지 알지 못합니다.
모델은 첫 실행 시 다운로드되며(whisper-base 기준 약 150MB), 로컬에 캐싱됩니다. 환경 변수를 통해 모델을 교체할 수 있습니다:
TRANSCRIBER_MODEL=Xenova/whisper-small # 더 높은 정확도, ~460MB
TRANSCRIBER_MODEL=Xenova/whisper-tiny # 더 빠른 속도, ~75MB
Transcriber는 Machina — 무료 오픈 소스 AI 개발자 도구 제품군 — 의 일부입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기