Homepage NextGen 개발 변천사
문서 목적
이 문서는 Homepage NextGen Test부터 Homepage NextGen Test2 (with Kiro Vision)까지 이어진 변환 흐름의 발전 과정을 정리한 문서입니다.
핵심은 단순 HTML 변환에서 출발해, OCR 시도와 Vision 전환을 거쳐 일반 HTML 변환과 통이미지 변환을 분리한 운영형 파이프라인으로 발전한 과정을 한 번에 이해할 수 있게 하는 데 있습니다.
한 줄 요약
처음에는 DOM 기반 HTML 정리와 프롬프트 변환이 중심이었고, 이후 OCR과 Vision을 거치며 통이미지까지 다룰 수 있는 실무형 변환 워크플로우로 발전했습니다.
1. 초기 버전: Homepage NextGen Test
초기 버전의 중심은 구형 병원 홈페이지의 HTML/DOM을 정리한 뒤, LLM 프롬프트를 통해 구조화 HTML로 변환하는 것이었습니다.
주요 파일과 역할
prompt/pre_prompt_260406.txt- DOM 전처리 스크립트
- 배경 이미지 탐지, 장식용/콘텐츠용 배경 구분
- 이미지 width/height 삽입
data-migration-bg,data-migration-bg-decorative,data-bg-ratio같은 힌트 부여
prompt/main_prompt_260408.txt- 구형 홈페이지 HTML을
component.html구조에 맞춰 변환하는 기본 프롬프트
- 구형 홈페이지 HTML을
prompt/main_prompt_260409.txt- 리스트, 이미지, 표, BR 처리 규칙을 더 강화한 버전
html/component.htmlmig-section,mig-title-wrap,mig-content,mig-list,mig-table,mig-visual같은 변환 템플릿 제공
.kiro/hooks/start-new-hospital.kiro.hook- 새 병원 이전 작업 시작용 Hook
.kiro/hooks/setup-playwright-env.kiro.hook- Playwright MCP 환경 점검
setup-mcp.js,package.json- Playwright MCP 기반 자동화 환경 구성
발전 포인트
- OCR 이전의 핵심은 HTML과 DOM 안에 이미 남아 있는 정보를 최대한 활용하는 것이었습니다.
- 이 단계에서는 이미지 안의 텍스트를 읽기보다, HTML 구조와 이미지 메타데이터를 활용해 재구성하는 방식이 중심이었습니다.
2. OCR 버전: Homepage NextGen Test (with OCR)
이 단계에서는 이미지 안에 포함된 텍스트도 변환 대상으로 보기 시작했다는 점이 가장 큰 변화였습니다.
주요 파일과 역할
ocr-mcp-server.js- 자체 OCR MCP 서버
ocr_image툴로 Tesseract 기반 한국어/영어 OCR 제공
kor.traineddata,eng.traineddata- Tesseract OCR 학습 데이터
package.json,setup-mcp.js- OCR 관련 의존성 및 MCP 등록 추가
prompt/pre_prompt_260428.txtdata-content-image를 추가해 통이미지 후보를 DOM 단계에서 미리 마 킹
.kiro/steering/main_prompt.md- 리스트, 표, 정보성 이미지 보존, BR 처리, 데이터 무결성 규칙 강화
.kiro/hooks/start-new-hospital.kiro.hook- OCR 가능 환경으로 확장된 시작 Hook
발전 포인트
- 단순히
img태그를 보존하는 수준을 넘어서, 이미지 안에 텍스트나 레이아웃 정보가 들어 있는지를 판단하기 시작했습니다. - OCR 서버를 MCP로 연결해 Kiro/Agent가 필요할 때
ocr_image를 호출할 수 있도록 구성했습니다. - 통이미지 기반 페이지에서도 텍스트 추출과 구조 분석을 시도할 수 있는 기반이 생겼습니다.
한계
- OCR만으로는 한글 인식률, 복잡한 도형, 표 구조, 사진+텍스트 혼합 영역 해석에 한계가 있었습니다.
- 처리 시간이 길고, 실제 작업에서는 여러 단계 프롬프트 조합이 필요했습니다.
3. Kiro Vision 버전: Homepage NextGen Test (with Kiro Vision)
이 단계에서는 OCR 엔진 중심에서 Vision 모델 중심으로 방향을 전환했습니다.
주요 파일과 역할
.kiro/hooks/capture-content-images.kiro.hook- 통이미지 캡처 전용 Hook
- 큰 이미지 탐지, 분할 캡처, 탭 구조 감지,
capture_list.txt생성
.kiro/steering/main_prompt.md- OCR 텍스트보다 Vision 기반 이미지 분석을 전제로 통이미지 규칙 강화
prompt/pre_prompt_260506.txt- 이미지 로드 완료 대기, 숨겨진 탭 처리, 콘텐츠 통이미지 마킹 강화
.kiro/hooks/start-new-hospital.kiro.hook- 일반 HTML 변환과 이미지 기반 변환을 함께 다루는 과도기적 구조
발전 포인트
- 병원 구형 사이트의 통이미지가 단순 텍스트 이미지가 아니라, 표, 흐름도, 도형, 사진+텍스트, 탭 영역이 섞인 복합 구조라는 점을 반영했습니다.
- OCR 텍스트만 신뢰하기보다, 캡처 이미지를 사람이 첨부하고 Vision으로 구조까지 판단하는 방식으로 발전했습니다.
4. Kiro Vision 2차 버전: Homepage NextGen Test2 (with Kiro Vision)
이 단계는 구조가 가장 성숙해진 시점으로, 일반 HTML 변환과 통이미지/Vision 변환이 완전히 분리되었습니다.
주요 파일과 역할
scripts/pre_prompt_base.js- 일반 HTML 변환 전처리
scripts/pre_prompt_vision.js- 통이미지 포함 페이지 전용 전처리
.kiro/steering/main_prompt_base.md- 일반 HTML 변환 전용 프롬프트
.kiro/steering/main_prompt_vision.md- 통이미지/Vision 전용 프롬프트
.kiro/hooks/start-new-hospital.kiro.hook- 일반 HTML 변환용 Hook
.kiro/hooks/start-new-hospital-vision.kiro.hook- 통이미지 변환 전용 Hook
.kiro/hooks/capture-content-images.kiro.hook- 캡처 전용 파이프라인 유지
html/component.html- 공통 컴포넌트 라이브러리 유지
발전 포인트
- 프롬프트가
base와vision으로 분리되며 운영 복잡도가 낮아졌습니다. - 전처리 파일도
prompt/*.txt에서scripts/*.js로 이동해 코드 자산화가 더 뚜렷해졌습니다. - Vision Hook은 다음을 강제합니다.
- 캡처 파일 없으면 임의 변환 금지
- 워터마크로 이미지 순번 검증
- part 누락/초과/순서 오류 검증
- 단일 이미지는 최대 2장씩 처리
- 변환 결과는
out/{도메인}/html/저장 - 내부 판단 로그는 숨기고 저장 경로/이상 항목만 출력
핵심 발전 흐름 요약
1단계: DOM 기반 HTML 정리
→ 2단계: 컴포넌트 템플릿 매칭
→ 3단계: 이미지 메타데이터/배경 이미지 판별
→ 4단계: Tesseract OCR로 이미지 텍스트 추출 시도
→ 5단계: OCR 한계를 인식하고 통이미지 캡처 + Vision 분석으로 전환
→ 6단계: 일반 변환과 Vision 변환 파이프라인 분리
→ 7단계: 캡처/검증/분할/탭/저장 규칙까지 포함한 운영형 마이그레이션 시스템화
기술적 진화의 큰 방향
| 축 | 초기 | OCR 버전 | Kiro Vision | Vision 2차 |
|---|---|---|---|---|
| 입력 데이터 | HTML/DOM | HTML + 이미지 OCR | HTML + 캡처 이미지 | 일반 HTML / 통이미지 분리 |
| 이미지 처리 | 크기/배경 판별 | Tesseract OCR | Vision 분석용 캡처 | 캡처 검증 + Vision 전용 프롬프트 |
| 프롬프트 | 단일 main prompt | 규칙 확장 | 통이미지 규칙 통합 | base/vision 분리 |
| 자동화 | Playwright MCP | Playwright + OCR MCP | Playwright 캡처 Hook | 캡처 Hook + 일반/비전 변환 Hook |
| 결과물 | 채팅 HTML 중심 | OCR 보조 변환 | 파일 저장 흐름 강화 | out/{도메인}/html 저장 규칙 명확화 |
| 품질 기준 | 구조 변환 | 텍스트 추출 보강 | 시각 구조 해석 | 누락 방지/순번 검증/섹션 연속성 |
결론
초기에는 DOM 전처리와 프롬프트 기반 HTML 재구성이 중심이었고, 중간 단계에서는 Tesseract OCR을 연결하여 통이미지 안의 텍스트를 추출하려는 시도가 있었습니다.
이 과정에서 단순 img 보존을 넘어, 이미지 안에 포함된 텍스트와 레이아웃 정보까지 변환 대상으로 바라보는 흐름이 생겼습니다. 다만 OCR만으로는 복잡한 병원 이미지, 흐름도, 표, 탭, 사진과 텍스트가 혼합된 레이아웃을 안정적으로 처리하기 어렵다는 한계가 있었습니다.
이후 이러한 문제를 보완하기 위해 Kiro/Claude Vision 기반의 통이미지 분석 방식으로 전환되었습니다. 이미지 자체를 시각적으로 해석하고, 영역별 구조와 콘텐츠 흐름을 판단하는 방식으로 발전하면서 기존 OCR 방식보다 실제 병원 홈페이지 변환에 더 적합한 방향으로 정리되었습니다.
최종 단계에서는 일반 HTML 변환과 통이미지 변환을 분리하고, 캡처 파일 검증, 분할 이미지 처리, 탭 대응, 저장 경로 규칙, 데이터 무결성까지 고려한 운영형 변환 파이프라인으로 정리되었습니다.
특히 인상적이었던 부분은 단순히 기능을 만드는 데서 끝나지 않고, 실제 일해야 하는 사람들이 공통적으로 쉽게 사용할 수 있는 구조로 정리되었다는 점입니다. 작업자가 흐름을 직관적으로 이해할 수 있도록 변환 단계를 나누고, 시각적으로 확인 가능한 캡처와 분할 이미지 기준을 마련했으며, 운영 중 실수할 수 있는 저장 경로, 파일명, 누락 여부까지 함께 점검할 수 있게 만든 점이 좋았습니다.
결과적으로 이 흐름은 개발자만 이해하는 자동화가 아니라, 실무자가 실제 운영 환경에서 접근하기 쉬운 시각적이고 실무형인 변환 워크플로우로 발전했다는 점에서 의미가 있습니다.
같이 보면 좋은 문서
한 줄 정리
이 문서는 Homepage NextGen 계열 프로젝트가 DOM 기반 변환에서 OCR과 Vision을 거쳐, 일반/통이미지 분리형 실무 워크플로우로 발전한 과정을 정리한 문서입니다.