OCR / STT / TTS

앱에 "이미지 → 텍스트" · "음성 → 텍스트" · "텍스트 → 음성" 세 가지 기능을 붙이는 실용 묶음.

1. OCR — Tesseract wasm

pnpm add tesseract.js

import Tesseract from "tesseract.js";

const { data: { text } } = await Tesseract.recognize(imageFile, "kor+eng", {
  logger: (m) => console.log(m.status, m.progress),
});

• kor+eng — 한국어 + 영어 동시
• wasm 번들 크기 ~10MB (lazy load 추천)
• 첫 호출 시 traineddata 다운로드

2. 전처리 — 정확도 향상

function preprocessImage(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext("2d")!;
  const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const d = img.data;
  for (let i = 0; i < d.length; i += 4) {
    const gray = 0.299 * d[i] + 0.587 * d[i+1] + 0.114 * d[i+2];
    const bw = gray > 128 ? 255 : 0;
    d[i] = d[i+1] = d[i+2] = bw;
  }
  ctx.putImageData(img, 0, 0);
}

그레이스케일 + 이진화만으로도 정확도 +10 ~ 20%p.

3. STT — Web Speech API

브라우저 · WebView 내장 기능. 별도 설치 불필요.

const rec = new (window.webkitSpeechRecognition || window.SpeechRecognition)();
rec.lang = "ko-KR";
rec.continuous = false;
rec.interimResults = true;

rec.onresult = (e) => {
  const text = Array.from(e.results).map(r => r[0].transcript).join("");
  console.log(text);
};

rec.start();

• 무료 · 온라인 (OS 서버 경유)
• Chromium 계열에서만 (Safari 일부 제한)
• Tauri WebView 는 플랫폼 엔진 기반이라 작동 여부 상이

오프라인 필요 → Vosk · Whisper.cpp (Rust binding).

4. TTS — Web Speech API

function speak(text: string, lang = "ko-KR") {
  const u = new SpeechSynthesisUtterance(text);
  u.lang = lang;
  u.rate = 1.0;
  u.pitch = 1.0;
  window.speechSynthesis.speak(u);
}

function cancel() {
  window.speechSynthesis.cancel();
}

• 브라우저 · OS 가 기본 제공
• 한국어 음성 품질은 OS 별 차이
• speaking ? cancel() : speak() 토글이 UX 자연스러움

5. 권한 (모바일)

Android 는 마이크 사용 시 RECORD_AUDIO 권한 런타임 요청.

// Tauri 2 플러그인 또는 네이티브 플러그인 경유

OCR 은 권한 불필요 (이미지 선택만).

6. 언어 패키지 관리

Tesseract traineddata 는 언어별 ~10MB. 번들에 포함 vs 런타임 다운로드 선택.

• 번들 포함 → 오프라인 안전, 초기 앱 크기 ↑
• 런타임 다운로드 → 초기 경량, 첫 OCR 시 지연

모바일은 데이터 요금을 고려해 번들 포함 권장.

7. 자주 걸리는 자리

• Tesseract 첫 호출 긴 지연 — traineddata 다운로드 중. progress UI 필수
• ko 언어 음성 없음 — OS 음성 팩 설치 안 됨 (iOS · Android 설정)
• continuous STT 배터리 — onresult · onend 로 적시 cancel
• OCR 결과 줄바꿈 지저분 — regex /\s+/g, " " 로 정규화 권장

하고픈 말

OCR · STT · TTS 셋은 "한국어 학습 앱" · "맛기로그" · "접근성" 같은 실제 제품에서 자주 조합됩니다. Web API 만으로 대부분 가능하다는 게 Tauri 의 장점.

Next

• 07-admob-shipping