OCR · STT · TTS — 음성과 글자

사람의 글자 (이미지의 텍스트), 사람의 말 (소리), 그리고 그 반대인 합성 음성을 다루는 세 영역은 서로 다른 기술 스택이지만 앱에서는 자주 함께 묶입니다.

1. 세 영역 한눈에

약자	풀이	입력 → 출력
OCR	Optical Character Recognition	이미지 → 텍스트
STT	Speech-to-Text	음성 → 텍스트
TTS	Text-to-Speech	텍스트 → 음성

세 작업 모두 정확도가 100% 가 아닙니다. 후처리 (맞춤법 보정·도메인 사전·확신도 표시) 가 자연스러운 UX 의 일부입니다.

2. Tesseract

Tesseract 는 HP Labs 가 1985 년경부터 개발하다가 1990 년대 후반에 중단, 2005 년 오픈소스화됐습니다. 이후 Google 이 후원해 2006 년부터 v3 까지 발전시켰고, 현재는 Apache-2.0 라이선스의 커뮤니티 프로젝트입니다.

버전	시기	사건
3.0	2010	다국어 지원 정착.
4.0	2018	LSTM 기반 신경망 엔진 추가.
5.0	2021	정식. 정확도·속도 개선.

Tesseract.js (naptha, 2017) 는 Tesseract 를 WebAssembly 로 포팅한 라이브러리입니다.

import Tesseract from "tesseract.js"
const { data: { text } } = await Tesseract.recognize(imageUrl, "kor+eng")

언어 데이터 (kor.traineddata · eng.traineddata) 는 별도 파일로 받습니다. tessdata · tessdata_best · tessdata_fast 세 가지 변형이 있습니다. best 는 정확도, fast 는 속도, 일반 tessdata 는 절충.

3. 클라우드 OCR 와 OS 내장

서비스	특징
Google Cloud Vision OCR	한국어 정확도 높음. DOCUMENT_TEXT_DETECTION 모드는 레이아웃 보존.
Azure AI Vision (Read API)	다국어. 손글씨 지원.
AWS Textract	표·폼 구조 추출 1 급.
Naver Clova OCR	한국어 특화로 자주 거론됨.

클라우드 모델은 일반적으로 Tesseract 보다 정확도가 높지만 비용·프라이버시 트레이드오프가 있습니다. 로컬 우선 앱에서는 Tesseract.js 또는 OS 내장 OCR 가 자주 거론됩니다.

OS 내장:

Windows — Windows.Media.Ocr (OCR Runtime, 2015+).
macOS — VisionKit VNRecognizeTextRequest (10.15+, 2019).
iOS — 같은 Vision 프레임워크.
Android — ML Kit Text Recognition (Google).

Tauri 에서 이들을 호출하려면 OS 별 네이티브 코드 (Rust crate 또는 직접 FFI) 가 필요합니다.

4. Web Speech API

W3C 가 정의한 브라우저 표준 API 입니다. 두 인터페이스로 구성됩니다.

SpeechRecognition (STT) — 마이크 입력을 텍스트로.
SpeechSynthesis (TTS) — 텍스트를 음성으로.

기능	Chrome/Edge	Safari	Firefox
SpeechSynthesis	O	O	O
SpeechRecognition	O (서버 의존)	O (16+)	부분

중요한 점: Chrome 의 SpeechRecognition 은 실제로는 Google 서버에 오디오를 보내 인식한다는 사실이 자주 인용됩니다 (완전 오프라인이 아님). 프라이버시 요구가 높은 자리는 별도 솔루션이 필요합니다.

5. TTS 사용 예

const u = new SpeechSynthesisUtterance("안녕하세요")
u.lang = "ko-KR"
u.rate = 1.0          // 0.1 ~ 10
u.pitch = 1.0         // 0 ~ 2
speechSynthesis.speak(u)

// 사용 가능한 음성 목록 (비동기 로드)
speechSynthesis.onvoiceschanged = () => {
  const ko = speechSynthesis.getVoices().filter(v => v.lang.startsWith("ko"))
  console.log(ko)
}

음성 목록은 OS·브라우저가 제공합니다. Windows 는 Microsoft Heami / SAPI 음성, macOS 는 Yuna 등이 한국어 자리에 있습니다.

6. STT 사용 예

const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
const sr = new SR()
sr.lang = "ko-KR"
sr.continuous = false
sr.interimResults = true
sr.onresult = (e: any) => {
  const t = e.results[e.results.length - 1][0].transcript
  console.log(t)
}
sr.start()

7. 클라우드 STT/TTS

서비스	비고
OpenAI Whisper	2022 OSS, MIT. 오프라인/온프렘 가능. 한국어 지원.
Google Cloud Speech-to-Text	다국어.
Azure Speech	실시간 변환.
AWS Transcribe	미국·영어 강세.
Naver Clova Speech	한국어 특화.

Whisper 는 OpenAI 가 2022 년 9 월 공개한 오픈소스 모델입니다. whisper.cpp (Georgi Gerganov, 2022) 같은 C++/WASM 포팅으로 로컬 실행이 흔해졌습니다. 한국어를 포함한 99 개 언어 지원이 공식 발표.

클라우드 TTS:

Google Cloud TTS (WaveNet · Studio Voice).
Azure Neural TTS (200+ 음성).
ElevenLabs · OpenAI TTS · Coqui TTS.
한국어 신경망 음성: Naver Clova Voice · Kakao i · Typecast.

8. 한국어 OCR 의 특이점

세로쓰기 — 옛 문서·일부 디자인. Tesseract 는 페이지 분할 (PSM) 옵션으로 처리 (예: --psm 5 vertical).

한자 혼용 — 학술 문서·고문서. kor + chi_tra/chi_sim 동시 지정.

글꼴 변형 — 서예체·디자인 폰트는 정확도 급락.

이미지 전처리 — 이진화·대비·기울기 보정 (deskew) · 노이즈 제거가 정확도에 큰 영향. OpenCV 또는 sharp 가 자주 쓰입니다.

9. 한국어 STT/TTS 의 특이점

STT:

고유명사·신조어 — 인명·브랜드·신조어가 자주 틀립니다. 도메인 사전 또는 후보 보정.
존댓말/반말 구분 없음 — 모델이 구어체를 어떻게 학습했는지에 따라 반말이 어색하게 나올 수 있습니다.
방언 — 표준어 외 정확도 저하.
숫자 표기 — "이천이십육년" / "2026년" / "2026" 의 사이가 모호.

TTS:

운율 (prosody) — 한국어는 어절 단위 운율이 자연스러운 합성의 관건. 짧은 SSML 지원이 도움.
외래어 발음 — 영문 단어를 한글 발음으로 변환할지, 영어 발음으로 읽을지 정책.
숫자 → 한국어 단위 — "1000" 을 "천" 으로 읽을지 "일영영영" 으로 읽을지. 자연 문맥에서 후자는 어색.

10. 자주 쓰는 모양

import Tesseract from "tesseract.js"

const worker = await Tesseract.createWorker("kor+eng", 1, {
  logger: (m) => console.log(m.status, m.progress),
})

const { data: { text, confidence } } = await worker.recognize(file)
await worker.terminate()

createWorker 는 백그라운드 Web Worker 에서 동작해 UI 블로킹을 피합니다. 큰 모델 데이터 (수십 MB) 는 첫 실행 시 다운로드됩니다 (IndexedDB 캐시).

TTS 음성 선택 강제:

async function speak(text: string) {
  await new Promise<void>((r) => {
    if (speechSynthesis.getVoices().length) return r()
    speechSynthesis.onvoiceschanged = () => r()
  })
  const voice = speechSynthesis.getVoices().find(v => v.lang === "ko-KR")
  const u = new SpeechSynthesisUtterance(text)
  if (voice) u.voice = voice
  speechSynthesis.speak(u)
}

STT 라우트와 stop 단일화:

let recognizing = false
function start() {
  if (recognizing) return
  recognizing = true
  sr.start()
}
function stop() {
  if (!recognizing) return
  recognizing = false
  sr.stop()
}
sr.onend = () => { recognizing = false }

onend 와 사용자 stop() 이 경합하면 상태가 어긋납니다. 한 곳에서 일관되게 관리합니다.

11. 자주 걸리는 자리

마이크 권한 — HTTPS · 사용자 제스처 안에서만 권한 다이얼로그가 뜹니다. localhost 는 예외.

SpeechRecognition 의 끊김 — 일부 브라우저는 일정 시간이 지나면 자동 종료합니다. continuous = true 와 onend 에서 재시작 패턴이 흔합니다.

모바일 브라우저 호환 — iOS Safari 의 SpeechRecognition 은 16+ 부터입니다. 그 이전 버전은 분기 처리.

OCR 의 PSM (Page Segmentation Mode) — 자동 분할 (--psm 3) 이 모든 이미지에 잘 맞지 않습니다. 단일 라인은 --psm 7, 단일 단어는 --psm 8.

언어 모델 동시 로드 비용 — kor+eng 가 자주 필요하지만 메모리·다운로드가 두 배입니다. 사용자 선택을 받거나 도메인에 맞게 한 언어로 제한합니다.

Whisper 의 환각 (hallucination) — 무음 구간에서 임의의 텍스트를 만들어내는 경우가 보고됩니다. VAD (Voice Activity Detection) 전처리 또는 timestamp · logprob 기반 필터링.

하고픈 말

OCR · STT · TTS 셋은 정확도 100% 를 기대하기 어렵습니다. 후처리·확신도 표시·사용자 정정 흐름이 UX 의 절반입니다. 한국어는 표준 영어보다 정확도가 떨어지는 자리가 많아 도메인 사전이 도움이 됩니다.

native-integrations
loading-ux

Tesseract GitHub · Tesseract.js · tessdata_best · Apple Vision · W3C Web Speech API · MDN Web Speech · OpenAI Whisper · whisper.cpp · Naver CLOVA 를 참고합니다.

OCR · STT · TTS — 음성과 글자

1. 세 영역 한눈에

약자	풀이	입력 → 출력
OCR	Optical Character Recognition	이미지 → 텍스트
STT	Speech-to-Text	음성 → 텍스트
TTS	Text-to-Speech	텍스트 → 음성

세 작업 모두 정확도가 100% 가 아닙니다. 후처리 (맞춤법 보정·도메인 사전·확신도 표시) 가 자연스러운 UX 의 일부입니다.

2. Tesseract

버전	시기	사건
3.0	2010	다국어 지원 정착.
4.0	2018	LSTM 기반 신경망 엔진 추가.
5.0	2021	정식. 정확도·속도 개선.

Tesseract.js (naptha, 2017) 는 Tesseract 를 WebAssembly 로 포팅한 라이브러리입니다.

import Tesseract from "tesseract.js"
const { data: { text } } = await Tesseract.recognize(imageUrl, "kor+eng")

3. 클라우드 OCR 와 OS 내장

서비스	특징
Google Cloud Vision OCR	한국어 정확도 높음. DOCUMENT_TEXT_DETECTION 모드는 레이아웃 보존.
Azure AI Vision (Read API)	다국어. 손글씨 지원.
AWS Textract	표·폼 구조 추출 1 급.
Naver Clova OCR	한국어 특화로 자주 거론됨.

OS 내장:

Windows — Windows.Media.Ocr (OCR Runtime, 2015+).
macOS — VisionKit VNRecognizeTextRequest (10.15+, 2019).
iOS — 같은 Vision 프레임워크.
Android — ML Kit Text Recognition (Google).

Tauri 에서 이들을 호출하려면 OS 별 네이티브 코드 (Rust crate 또는 직접 FFI) 가 필요합니다.

4. Web Speech API

W3C 가 정의한 브라우저 표준 API 입니다. 두 인터페이스로 구성됩니다.

SpeechRecognition (STT) — 마이크 입력을 텍스트로.
SpeechSynthesis (TTS) — 텍스트를 음성으로.

기능	Chrome/Edge	Safari	Firefox
SpeechSynthesis	O	O	O
SpeechRecognition	O (서버 의존)	O (16+)	부분

5. TTS 사용 예

const u = new SpeechSynthesisUtterance("안녕하세요")
u.lang = "ko-KR"
u.rate = 1.0          // 0.1 ~ 10
u.pitch = 1.0         // 0 ~ 2
speechSynthesis.speak(u)

// 사용 가능한 음성 목록 (비동기 로드)
speechSynthesis.onvoiceschanged = () => {
  const ko = speechSynthesis.getVoices().filter(v => v.lang.startsWith("ko"))
  console.log(ko)
}

음성 목록은 OS·브라우저가 제공합니다. Windows 는 Microsoft Heami / SAPI 음성, macOS 는 Yuna 등이 한국어 자리에 있습니다.

6. STT 사용 예

const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
const sr = new SR()
sr.lang = "ko-KR"
sr.continuous = false
sr.interimResults = true
sr.onresult = (e: any) => {
  const t = e.results[e.results.length - 1][0].transcript
  console.log(t)
}
sr.start()

7. 클라우드 STT/TTS

서비스	비고
OpenAI Whisper	2022 OSS, MIT. 오프라인/온프렘 가능. 한국어 지원.
Google Cloud Speech-to-Text	다국어.
Azure Speech	실시간 변환.
AWS Transcribe	미국·영어 강세.
Naver Clova Speech	한국어 특화.

클라우드 TTS:

Google Cloud TTS (WaveNet · Studio Voice).
Azure Neural TTS (200+ 음성).
ElevenLabs · OpenAI TTS · Coqui TTS.
한국어 신경망 음성: Naver Clova Voice · Kakao i · Typecast.

8. 한국어 OCR 의 특이점

세로쓰기 — 옛 문서·일부 디자인. Tesseract 는 페이지 분할 (PSM) 옵션으로 처리 (예: --psm 5 vertical).

한자 혼용 — 학술 문서·고문서. kor + chi_tra/chi_sim 동시 지정.

글꼴 변형 — 서예체·디자인 폰트는 정확도 급락.

이미지 전처리 — 이진화·대비·기울기 보정 (deskew) · 노이즈 제거가 정확도에 큰 영향. OpenCV 또는 sharp 가 자주 쓰입니다.

9. 한국어 STT/TTS 의 특이점

STT:

고유명사·신조어 — 인명·브랜드·신조어가 자주 틀립니다. 도메인 사전 또는 후보 보정.
존댓말/반말 구분 없음 — 모델이 구어체를 어떻게 학습했는지에 따라 반말이 어색하게 나올 수 있습니다.
방언 — 표준어 외 정확도 저하.
숫자 표기 — "이천이십육년" / "2026년" / "2026" 의 사이가 모호.

TTS:

운율 (prosody) — 한국어는 어절 단위 운율이 자연스러운 합성의 관건. 짧은 SSML 지원이 도움.
외래어 발음 — 영문 단어를 한글 발음으로 변환할지, 영어 발음으로 읽을지 정책.
숫자 → 한국어 단위 — "1000" 을 "천" 으로 읽을지 "일영영영" 으로 읽을지. 자연 문맥에서 후자는 어색.

10. 자주 쓰는 모양

import Tesseract from "tesseract.js"

const worker = await Tesseract.createWorker("kor+eng", 1, {
  logger: (m) => console.log(m.status, m.progress),
})

const { data: { text, confidence } } = await worker.recognize(file)
await worker.terminate()

createWorker 는 백그라운드 Web Worker 에서 동작해 UI 블로킹을 피합니다. 큰 모델 데이터 (수십 MB) 는 첫 실행 시 다운로드됩니다 (IndexedDB 캐시).

TTS 음성 선택 강제:

async function speak(text: string) {
  await new Promise<void>((r) => {
    if (speechSynthesis.getVoices().length) return r()
    speechSynthesis.onvoiceschanged = () => r()
  })
  const voice = speechSynthesis.getVoices().find(v => v.lang === "ko-KR")
  const u = new SpeechSynthesisUtterance(text)
  if (voice) u.voice = voice
  speechSynthesis.speak(u)
}

STT 라우트와 stop 단일화:

let recognizing = false
function start() {
  if (recognizing) return
  recognizing = true
  sr.start()
}
function stop() {
  if (!recognizing) return
  recognizing = false
  sr.stop()
}
sr.onend = () => { recognizing = false }

onend 와 사용자 stop() 이 경합하면 상태가 어긋납니다. 한 곳에서 일관되게 관리합니다.

11. 자주 걸리는 자리

마이크 권한 — HTTPS · 사용자 제스처 안에서만 권한 다이얼로그가 뜹니다. localhost 는 예외.

SpeechRecognition 의 끊김 — 일부 브라우저는 일정 시간이 지나면 자동 종료합니다. continuous = true 와 onend 에서 재시작 패턴이 흔합니다.

모바일 브라우저 호환 — iOS Safari 의 SpeechRecognition 은 16+ 부터입니다. 그 이전 버전은 분기 처리.

OCR 의 PSM (Page Segmentation Mode) — 자동 분할 (--psm 3) 이 모든 이미지에 잘 맞지 않습니다. 단일 라인은 --psm 7, 단일 단어는 --psm 8.

하고픈 말

native-integrations
loading-ux

Tesseract GitHub · Tesseract.js · tessdata_best · Apple Vision · W3C Web Speech API · MDN Web Speech · OpenAI Whisper · whisper.cpp · Naver CLOVA 를 참고합니다.

OCR · STT · TTS

OCR · STT · TTS — 음성과 글자

1. 세 영역 한눈에

2. Tesseract

3. 클라우드 OCR 와 OS 내장

4. Web Speech API

5. TTS 사용 예

6. STT 사용 예

7. 클라우드 STT/TTS

8. 한국어 OCR 의 특이점

9. 한국어 STT/TTS 의 특이점

10. 자주 쓰는 모양

11. 자주 걸리는 자리

하고픈 말

Next

frontend 카테고리의 다른 글

OCR · STT · TTS

OCR · STT · TTS — 음성과 글자

1. 세 영역 한눈에

2. Tesseract

3. 클라우드 OCR 와 OS 내장

4. Web Speech API

5. TTS 사용 예

6. STT 사용 예

7. 클라우드 STT/TTS

8. 한국어 OCR 의 특이점

9. 한국어 STT/TTS 의 특이점

10. 자주 쓰는 모양

11. 자주 걸리는 자리

하고픈 말

Next

frontend 카테고리의 다른 글