본문으로 건너뛰기

OCR 프로젝트 Iterative Development 히스토리

통이미지 기반 페이지를 OCR로 분석하고, 텍스트는 구조화 HTML로 변환하며, 의미 있는 사진, 장비, 삽화는 별도 crop 이미지로 분리하는 방향으로 점진적으로 발전한 흐름을 정리한 문서입니다.

전체 흐름​

기존 HTML 변환
→ 이미지/배경 메타데이터 전처리
→ 통이미지 캡처 기반 변환
→ Playwright 기반 통이미지 후보 자동 수집
→ PaddleOCR 기반 로컬 OCR
→ OCR 결과를 Kiro 변환 컨텍스트로 구조화
→ confidence/layoutHint 기반 HTML 컴포넌트 매핑
→ 텍스트 우선 변환 + 불확실 이미지 보존
→ 장비/사진/삽화 crop 자동 추출
→ OCR 텍스트와 시각 자산을 분리한 하이브리드 HTML 변환

OCR 파이프라인 발전​

1. 통이미지 후보 수집​

collect-whole-images.js​

통이미지 OCR 대상 후보를 자동으로 수집하는 Playwright 스크립트입니다.

주요 역할:

  • 페이지 접속
  • 콘텐츠 영역 selector 기준으로 이미지 후보 탐색
  • img, picture, figure, div, section, article, li 등에서 큰 이미지 탐지
  • 후보별 스크린샷 저장
  • manifest.json 생성

발전 의미:

  • OCR 입력 대상을 수동으로 고르는 방식에서 자동 수집 방식으로 발전했습니다.
  • manifest.json이 생기면서 반복 가능한 파이프라인 구성이 가능해졌습니다.

2. OCR 실행​

ocr-whole-images.py​

PaddleOCR 기반 로컬 OCR 스크립트입니다.

주요 역할:

  • manifest.json을 읽어 이미지 후보 순회
  • OCR 텍스트, 좌표, 신뢰도 추출
  • 평균 신뢰도 계산
  • 레이아웃 힌트 추론
  • .json, .txt 결과 저장

개선 포인트:

  • PaddleOCR v2/v3 호환
  • 이미지 SHA-256 기반 캐시
  • --force, --fast 지원
  • 원본 이미지와 스크린샷 모두 OCR 후보 사용
  • contrast/threshold 변형 이미지 시도 후 최적 결과 선택

발전 의미:

  • 단순 실행기에서 품질 최적화, 캐시, 재실행 제어, 환경 호환성을 갖춘 도구로 발전했습니다.

3. OCR 컨텍스트 생성​

build-ocr-context.js​

OCR JSON 결과를 Kiro/LLM이 변환 판단에 사용할 수 있는 컨텍스트 문서로 변환합니다.

주요 역할:

  • confidence, lineCount, layoutHint 기반으로 convertible 판단
  • 추천 컴포넌트 제공
  • OCR 텍스트와 좌표 정보를 JSON 블록으로 Markdown에 삽입
  • textFirstMode, partialVisualPolicy 같은 정책 정보 제공

발전 의미:

  • OCR 결과를 단순 텍스트로 넘기는 수준에서, 변환 전략을 포함한 구조화 컨텍스트로 발전했습니다.

프롬프트와 변환 규칙 발전​

prompt/whole_image_conversion_mode.md​

OCR 결과를 HTML 변환에 적용하기 위한 핵심 프롬프트입니다.

주요 규칙:

  • convertible: true이고 confidence >= 0.82인 경우에만 HTML 변환 시도
  • confidence가 낮거나 구조가 불명확하면 원본 이미지 보존
  • OCR 텍스트는 요약, 수정, 교정하지 않음
  • 진료시간, 전화번호, 주소, 비용, 날짜, 의료진명 등은 불확실하면 변환하지 않음
  • layoutHint에 따라 표, 절차, 카드, 리스트, 문단 구조 매핑

발전 의미:

  • 잘못 읽은 의료 정보가 HTML로 확정되는 위험을 줄이기 위한 안전 기준이 강화되었습니다.

prompt/visual_asset_extraction_mode.md​

OCR 텍스트 외에 의미 있는 시각 자산을 어떻게 사용할지 정의한 프롬프트입니다.

주요 규칙:

  • 텍스트 정보는 OCR 결과를 우선 사용
  • 장비, 시설, 의료진, 검사 장면, 치료 장면, 의학 삽화 등 의미 있는 이미지만 사용
  • 배경 패턴, 그라데이션, 박스, 선, 아이콘 등 장식 요소는 사용하지 않음

발전 의미:

  • 통이미지를 텍스트만 추출하고 버리는 방식에서 벗어나, 의미 있는 시각 요소를 함께 보존하는 방향으로 발전했습니다.

prompt/visual_asset_no_text_crop_rule.md​

crop 이미지에 텍스트가 섞이지 않도록 강제하는 규칙입니다.

주요 규칙:

  • remainingTextCount == 0인 crop만 사용
  • crop 안에 글자 일부라도 보이면 사용하지 않음
  • 텍스트는 OCR 결과를 HTML 텍스트로 따로 출력
  • clean crop이 없지만 시각 정보가 중요하면 original-fallback 검토

발전 의미:

  • 텍스트와 이미지를 명확히 분리하는 원칙이 생겼고, 결과 HTML의 중복과 누락 가능성을 줄였습니다.

Visual Asset Crop 파이프라인​

scripts/whole-image-ocr/extract-visual-assets.py​

통이미지 안에서 텍스트가 아닌 의미 있는 이미지 영역을 자동 추출하는 스크립트입니다.

주요 역할:

  • OCR line 좌표 기반 텍스트 박스 생성
  • 텍스트 영역 마스킹
  • 색상, 질감, 윤곽, 레이아웃 gap 기반 이미지 후보 탐지
  • 사진, 장비, 배경, 작은 시각 요소 등으로 분류
  • crop 파일 저장
  • visual-assets.json, visual-assets.md, contact sheet, debug overlay 생성

주요 추출 방식:

  • layout-gap
  • photo-band-detail
  • photo-texture-detail
  • contour-after-text-mask

발전 의미:

  • OCR은 텍스트를 담당하고, OpenCV 기반 crop은 의미 있는 이미지를 담당하는 분업 구조가 생겼습니다.

Kiro Hook 발전​

.kiro/hooks/start-new-hospital-vision.kiro.hook​

통이미지 변환의 초기 운영 Hook입니다.

  • URL과 페이지 구성을 입력받음
  • “이미지만 / 텍스트+이미지 혼합” 분기
  • 캡처 이미지 기반 변환
  • 탭 페이지 처리
  • 이미지 첨부 검증

.kiro/hooks/start-new-hospital-with-whole-image-ocr.kiro.hook​

기존 병원 이전 작업에 OCR을 통합한 Hook입니다.

  • 기본 HTML 변환 규칙 로드
  • OCR 규칙 로드
  • 통이미지 후보 수집
  • OCR 실행
  • OCR 컨텍스트 생성
  • OCR 결과를 변환에 반영

.kiro/hooks/whole-image-ocr-with-crop-mode.kiro.hook​

OCR + Crop 통합 변환 모드입니다.

  • OCR 텍스트 추출
  • OCR 컨텍스트 생성
  • visual asset crop 추출
  • visual-assets.md/json 검토
  • 텍스트는 HTML 구조로 변환
  • 의미 있는 이미지는 crop 또는 fallback으로 분리 배치

발전 의미:

  • 텍스트 변환과 이미지 보존을 동시에 고려하는 하이브리드 변환 방식이 완성에 가까워졌습니다.

기술적 발전 방향 정리​

1. 단순 변환에서 구조화 변환으로​

  • 기존 HTML을 새 컴포넌트 구조로 옮기는 단계에서 출발
  • 이후 통이미지 안의 텍스트를 OCR로 추출해 문단, 리스트, 절차, 표, 카드형 정보로 재구성
  • “이미지를 그대로 보여주는 방식”에서 “이미지 안의 정보를 실제 HTML로 복원하는 방식”으로 발전

2. 수동 판단에서 자동 후보 생성으로​

  • Playwright 기반 통이미지 후보 수집
  • PaddleOCR 기반 텍스트 추출
  • confidence 기반 변환 가능 여부 판단
  • layoutHint 기반 컴포넌트 추천
  • OpenCV 기반 시각 자산 crop 후보 생성
  • contact sheet / debug overlay로 검수 지원

3. 이미지 보존 중심에서 정보 분리 중심으로​

텍스트 정보 → OCR로 추출하여 HTML 텍스트로 변환
의미 있는 사진/장비/삽화 → crop 이미지로 분리
장식 요소/배경/아이콘 → 제거 또는 무시
불확실한 의료 중요 정보 → 원본 이미지 보존

이 원칙을 통해 결과 HTML은 더 가볍고, 검색 가능하며, 유지보수하기 쉬운 구조가 되었습니다.

4. 안전성과 검수 가능성 강화​

  • confidence 기준 도입
  • 의료 중요 정보 불확실 시 변환 금지
  • OCR 텍스트 요약, 수정, 추정 금지
  • 저신뢰 이미지 원본 보존
  • crop 내부 텍스트 잔여물 사용 금지
  • OCR 결과와 crop 이미지를 서로 대체하지 않음

최종 발전​

핵심 발전은 세 가지로 정리할 수 있습니다.

  1. 통이미지 후보를 자동으로 수집하고 OCR을 실행하는 파이프라인 구축
  2. OCR 결과를 confidence, layoutHint, recommendedComponent가 포함된 변환 컨텍스트로 구조화
  3. 텍스트는 HTML로 변환하고, 의미 있는 사진, 장비, 삽화는 crop으로 분리하는 하이브리드 변환 방식 도입

최종적으로는 다음 방향으로 진화했습니다.

단순 HTML 변환
→ 통이미지 OCR 변환
→ OCR 기반 구조화 HTML 변환
→ 텍스트와 시각 자산을 분리하는 고도화된 콘텐츠 재구성 시스템

결론​

이번 OCR/통이미지 변환 흐름을 정리하면서 가장 크게 느낀 점은 기술적인 자동화만큼 사람과 AI의 협업이 중요하다는 점입니다.

혜린님이 만든 워크플로우나 이번 대화를 통해 확인한 방향은, 단순히 AI에게 모든 작업을 맡기는 구조가 아니라 실제 작업자가 공통적으로 이해하고 쉽게 사용할 수 있는 운영 흐름에 가까웠습니다. 특히 혜린님이 작업 과정에서 세세하게 생각했던 부분들도 좋았습니다. 캡처 파일 확인, 통이미지와 일반 HTML 변환 구분, 분할 이미지 처리, 탭 대응, 저장 경로와 파일명 규칙, 누락 여부 확인처럼 실제 운영 중 발생할 수 있는 문제를 미리 고려한 점이 인상적이었습니다.

반면 제가 구성했던 워크플로우는 이미지 변환 시 정교함과 자동화에 더 목적을 두다 보니, 한 방향만 바라본 부분이 있었던 것 같습니다. OCR, crop, 자동 추출, 데이터 분리처럼 기술적으로 더 세밀하게 처리하는 데 집중했지만, 실제 작업자가 매번 편하게 사용할 수 있는지, 운영 과정에서 부담이 줄어드는지에 대한 시각은 상대적으로 부족했을 수 있습니다.

결국 중요한 것은 사람이 더 잘할 수 있는 일은 사람이 하고, AI가 더 잘할 수 있는 일은 AI가 맡는 협업 구조라고 생각합니다. 이미지의 흐름을 보고 판단하거나, 병원 콘텐츠의 맥락을 이해하거나, 최종 결과물을 검수하는 일은 사람이 더 잘할 수 있습니다. 반대로 반복되는 후보 수집, OCR 텍스트 추출, 구조화 보조, 파일 정리, 누락 체크 같은 일은 AI와 자동화가 더 잘할 수 있습니다.

이번 과정을 통해 앞으로는 단순히 **“얼마나 자동화할 수 있는가”**만 보기보다, 작업자가 실제로 쓰기 쉬운가, 협업 과정에서 이해하기 쉬운가, 운영 흐름 안에서 자연스럽게 이어지는가까지 함께 고려해야겠다고 느꼈습니다.

따라서 이 프로젝트의 결론은, 통이미지 변환 기술의 발전뿐 아니라 사람과 AI가 각자의 강점을 나누어 함께 일하는 방식으로 워크플로우를 발전시켜야 한다는 점입니다. 앞으로는 더 다양한 시각을 가지고, 자동화의 정교함과 실무자의 사용성을 함께 고려하는 방향으로 개선해 나가면 좋겠습니다.

같이 보면 좋은 문서​

한 줄 정리​

이 문서는 OCR 프로젝트가 통이미지 OCR, 변환 컨텍스트, visual asset crop, 하이브리드 HTML 변환 방식까지 어떻게 발전했는지 정리한 기술 변천사 문서입니다.