Schema.org 기반 데이터 추출과 IndexedDB 활용한 로컬 가격 추적 시스템 구축

I Built a Price History Tracker for Japan's 4 Major E-Commerce Sites (Amazon.co.jp, Rakuten, Yahoo!, Mercari)

SHOTA2026년 5월 12일5분intermediate

AI 요약

Context

일본 4대 이커머스 플랫폼의 상이한 DOM 구조로 인한 통합 가격 추적의 어려움 발생. Amazon의 잦은 CSS 클래스 변경과 Rakuten의 개별 상점 테마 적용으로 인해 단일 Selector 기반의 데이터 추출 방식은 유지보수 한계에 직면함.

Technical Solution

Amazon의 빈번한 레이아웃 변경 대응을 위해 8단계의 우선순위 Fallback Chain Selector 구조 설계
Rakuten, Yahoo!, Mercari의 경우 DOM 분석 대신 표준화된 schema.org Product 메타데이터를 우선 파싱하여 추출 안정성 확보
Content Script(실시간 DOM)와 Background Service Worker(DOMParser) 모두에서 동작하는 Pure Function 기반 파서 설계로 코드 중복 제거
5MB 제한의 chrome.storage.local 대신 IndexedDB를 채택하여 대용량 시계열 가격 데이터 저장 및 조회 성능 최적화
[watchId, timestamp] 복합 키 구조의 Append-only Store 설계를 통한 효율적인 가격 이력 관리

실천 포인트

- 웹 스크래핑 시 CSS Selector 의존도를 낮추기 위해 schema.org 등 표준 메타데이터 태그 우선 탐색 - 런타임 환경이 다른 두 컨텍스트(Content Script vs Service Worker)에서 동일 로직 적용 시 추상화된 Pure Function 인터페이스 활용 - 브라우저 내 대규모 정형 데이터 저장 필요 시 LocalStorage 대신 IndexedDB의 Transaction 패턴 검토

태그

#DOMParser #Pure Function #IndexedDB #Schema.org #Chrome Extension

원문 읽기