OCR · STT · TTS
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 의 절반입니다. 한국어는 표준 영어보다 정확도가 떨어지는 자리가 많아 도메인 사전이 도움이 됩니다.
Next
- 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 를 참고합니다.