피드로 돌아가기
Dev.toAI/ML
원문 읽기
AI Vision 기반 Selector-free 스크래핑으로 유지보수 비용 제로화
Scraping Dynamic Web Pages Without Selectors Using AI Vision (TypeScript/JavaScript Tutorial)
AI 요약
Context
전통적인 웹 스크래핑 방식은 CSS Selector나 XPath에 의존하는 구조적 한계를 가짐. 특히 모던 프레임워크의 동적 클래스 명칭 변경으로 인한 파이프라인 붕괴 및 빈번한 유지보수 비용 발생이 병목 지점으로 작용함.
Technical Solution
- HTML 파싱 대신 Headless Chromium 기반의 Full-page Snapshot 캡처 방식 채택
- 시각적 데이터 기반의 AI Vision Agent(Gemini)를 활용한 구조적 데이터 추출 로직 설계
- Playwright 기반의 Viewport 제어 및 Network Idle 상태 대기를 통한 동적 콘텐츠 렌더링 보장
- LLM의 Multimodal 능력을 활용하여 비정형 웹 화면을 정형 JSON 포맷으로 변환하는 추상화 레이어 구축
- CSS 클래스나 Shadow DOM 등 DOM 구조 변경에 영향을 받지 않는 Human-centric 인식 모델 적용
실천 포인트
1. 웹 사이트의 UI 변경이 잦아 Selector 유지보수 비용이 높은 프로젝트에 AI Vision 도입 검토
2. 동적 렌더링 페이지의 경우 'networkidle' 옵션을 통한 완전한 DOM 로드 시점 확보
3. 추출 데이터의 일관성을 위해 Gemini 등 LLM에 명확한 JSON Schema 기반의 Extraction Query 정의