복잡한 JS 기반 은행 웹사이트 스크래핑 및 RAG 구축 조언 구합니다
Need advice scraping complex JS-heavy bank website - tabs, dynamic cards, varying page structures for RAG/LLM
핵심 요약
JS가 많은 복잡한 은행 사이트에서 탭과 동적 콘텐츠를 효과적으로 추출해 RAG 시스템을 구축하는 방법을 논의합니다.
- 네트워크 분석 — DOM을 긁기보다 네트워크 탭을 확인해 REST API 엔드포인트를 직접 호출하는 것이 훨씬 깔끔함.
- 상태 기반 추출 — 페이지 전체를 덤프하지 말고 탭, 아코디언 등 각 UI 상태를 개별적으로 방문해 추출해야 함.
- 페이지 유형 분류 — URL 패턴과 헤더 등을 활용해 페이지 유형을 먼저 분류하고 그에 맞는 추출 매니페스트를 정의함.
- 자동화 도구 활용 — 복잡한 로직을 직접 짜기보다 Qoest API 같은 전문 도구를 사용해 탭 추출 문제를 해결할 수 있음.
안녕하세요 여러분,
LLM을 위한 지식 베이스/RAG 시스템을 구축하기 위해 https://www.sc.com/pk/ (스탠다드차타드 파키스탄) 사이트를 스크래핑하려고 합니다.
웹사이트가 꽤 복잡합니다:
- 무거운 JavaScript (아마도 React)
- 탭 콘텐츠. 일반적인 방식으로 스크래핑하면 탭 내용이 서로 섞입니다.
- 동적 카드 / 아코디언 – 제품 카드를 클릭하면 다른 데이터가 로드됩니다.
- 선택 시 콘텐츠를 렌더링하는 드롭다운.
- 모든 제품 페이지의 구조가 조금씩 다릅니다 (저축, 신용카드, 대출, 자산 관리, Saadiq 이슬람 금융 등).
- 숨겨진 콘텐츠, 지연 로딩 등이 많습니다.
현재 접근 방식:
저는 Playwright + BeautifulSoup + markdownify를 사용하고 있습니다. 페이지를 스크롤하고 전체 HTML을 가져와 정리한 뒤 마크다운으로 변환합니다. 하지만 결과물이 엉망입니다. 탭 데이터가 섞이고 노이즈 비율이 높아서, LLM이 어떤 데이터가 어떤 탭에 속하는지 알 수 없어 혼란스러워합니다.
필요한 것:
- 탭과 동적 섹션을 처리하는 가장 좋은 방법 (각 탭을 클릭하고 별도로 추출).
- 스크래퍼가 페이지 유형(저축 계좌, 신용카드, 대출 등)을 자동으로 식별하게 하는 방법.
- 데이터가 LLM/RAG용으로 깨끗하고 구조화되도록 전체 사이트(수백 페이지)를 구성하는 권장 아키텍처.
- 섹션별로 완전한 JSON 구조로 갈지, 아니면 하이브리드(구조화된 데이터 + 깔끔한 마크다운)로 갈지.
- 은행이 프론트엔드를 업데이트할 때 스크래퍼를 유지 관리하는 팁.
이미 기본적인 크롤러를 만들었지만 탭/동적 부분에서 신뢰성이 떨어집니다. 코드 패턴, Playwright 모범 사례 또는 아키텍처 제안을 주시면 정말 큰 도움이 될 것 같습니다.
미리 감사드립니다!

