Web Speech API를 사용한 브라우저 기반 음성-텍스트 앱 만들기

Source: Dev.to

왜 브라우저 기반인가?

프라이버시가 가장 큰 장점입니다. 오디오가 사용자의 기기를 떠나지 않으므로 업로드도 없고, 저장도 없으며, GDPR 문제도 없습니다. 간단한 전사 도구라면 이는 큰 이점이 됩니다.

Web Speech API 기본

API는 놀라울 정도로 간단합니다:

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('');
  console.log(transcript);
};

recognition.start();

그게 전부입니다. 이제 실시간 음성‑텍스트 변환이 가능합니다.

아무도 알려주지 않는 함정들

1. 브라우저 지원이 일관되지 않음

Chrome은 Google 서버를 사용합니다(아이러니하게도 완전 로컬이 아님). Safari는 기기 내 처리 방식을 사용합니다. Firefox 지원은 제한적입니다. 항상 확인하세요:

if (!('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
  // 대체 UI 표시
}

2. 무작위로 청취가 중단됨

API는 침묵이 있으면 자동으로 멈추는 버릇이 있습니다. 이를 다시 시작해야 합니다:

recognition.onend = () => {
  if (shouldKeepListening) {
    recognition.start();
  }
};

3. 구두점이 없음

API는 마침표, 쉼표, 대문자 등 구두점이 없는 원시 단어만 반환합니다. 직접 처리해야 합니다:

function addAutoPunctuation(text) {
  // 일시 정지 패턴 뒤에 마침표 추가
  // 마침표 뒤에 대문자 처리
  // "question mark" → "?" 같은 일반 패턴 처리
}

4. 언어 전환은 수동으로

자신만의 언어 선택기를 만들고 recognition.lang을 해당 언어로 설정해야 합니다. API는 100개 이상의 언어를 지원하지만 자동 감지는 하지 않습니다.

Web Speech API를 사용하면 안 되는 경우

기본 받아쓰기 외에 더 복잡한 작업을 하려면 한계에 부딪히게 됩니다:

• 오디오 파일 전사 — API는 실시간 마이크 입력만 지원
• 화자 식별 — 지원되지 않음
• 타임스탬프 — 제공되지 않음
• 정확도 요구 — 엔터프라이즈 수준에서는 Whisper, AssemblyAI, Deepgram 등을 사용해야 함

저는 하이브리드 방식을 선택했습니다: 무료 티어는 실시간 받아쓰기에 Web Speech API를 사용하고, 프로 티어는 파일 업로드와 높은 정확도를 위해 Whisper를 사용합니다.

네이티브 언어 SEO 보너스

예상치 못한 이점이 하나 있습니다. 저는 네이티브 스크립트 UI를 갖춘 언어별 페이지를 만들었습니다. 힌디어 페이지는 실제 힌디어(हिंदी में वॉइस टू टेक्स्ट)로 작성되어 있어, 단순히 “Hindi Voice to Text”를 영어로 표기한 것이 아닙니다.

결과: 영어 키워드보다 경쟁이 적은 네이티브 언어 검색에서 순위가 상승했습니다.

직접 사용해 보기

제가 만든 서비스는 voicetotextonline.com이며, 기본 전사는 무료이고 회원가입 없이 바로 사용할 수 있습니다.

비슷한 무언가를 만들고 있다면, 댓글로 질문해 주세요. Happy coding!