Tesseract.js
사진 속 글자 읽기
해결하는 문제
종이 문서 사진 속 글자를 다시 타이핑하기 싫다.
사진이나 스캔 이미지 속 한글과 영어를 브라우저 안에서 글자로 바꿉니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것사진·스캔 이미지
브라우저가 하는 일브라우저 속 글자 인식(OCR)
나오는 것텍스트와 인식 확신도
쓰는 브라우저 기술
File APICanvasWeb Worker
라이브러리와 모델
Tesseract.js (한국어·영어 데이터)
바꿀 수 있는 옵션
- 언어 데이터 (kor, eng)
- 흑백·대비 보정
- 읽을 영역 지정
자주 막히는 곳
- 기울어지거나 그림자 진 사진은 인식률이 크게 떨어진다
- 한국어 데이터 파일을 처음 한 번 내려받아야 한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 종이 서식 자동 입력
- 명함 정리
웹 서비스
- 영수증 정리
- 옛 문서 디지털화
피지컬 AI
- 계기판 숫자를 읽는 카메라
- 라벨을 읽어 분류하는 장치
넓히는 방법
- 카메라로 바로 읽기
- 표 구조 인식
- 번역 연결
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Tesseract.js로 사진 속 한글과 영어를 읽어 텍스트로 바꿔주는 웹페이지를 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md