RAG 최적화용 AST 기반 웹→Markdown 크롤러로 노이즈 제거와 문맥 보존 구현

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

웹 스크레이핑에서 네비게이션·푸터·쿠키 배너 같은 UI 노이즈와 분할 시 상위 헤딩 문맥 손실이 벡터 검색 품질을 저하시켰다. 게시자는 HTML을 AST로 파싱해 유의미한 콘텐츠 노드만 선별하고 각 청크에 부모 헤딩 경로를 메타데이터로 붙이는 방식으로 clean Markdown과 구조화된 JSON을 생성해 문제를 해결했다고 밝혔다. 이 방법은 불필요한 UI 요소를 제거하고 토큰 수·품질 점수 같은 메타데이터를 포함해 LangChain·LlamaIndex로의 적재를 단순화하므로 임베딩 기반 검색의 관련성 향상에 기여한다. 다만 동적 로드 페이지나 사이트별 비정형 구조에서는 추가 튜닝과 클렌징 규칙 보완이 필요하다.

합의점 vs 논쟁점

합의점

웹 스크레이핑 시 네비게이션·푸터·쿠키 배너 등 UI 노이즈가 임베딩 품질을 저하시키는 공통된 문제로 인식됐다.
문서 계층 구조와 상위 헤딩 정보를 보존하면 분할 후에도 문맥 관련성이 유지되어 검색 정확도가 개선된다는 점은 많은 참여자가 동의할 가능성이 높다.

논쟁점

AST 기반 파싱과 자동 헤딩 병합이 모든 웹사이트에서 일관되게 동작할지, 특히 동적 로드 콘텐츠나 비정형 HTML 구조에서는 추가 튜닝이 필요하다는 점은 논쟁의 여지가 있다.
클렌징 규칙의 보수성(어느 요소를 '노이즈'로 판단할지)과 품질 점수 산정 방식은 구현마다 결과 편차를 만들 수 있어 표준화가 어려운 점이 잠재적 쟁점이다.

실용적 조언

웹 문서를 임베딩할 때는 단순 텍스트 스트립 대신 트리 기반 파서로 DOM을 분석해 섹션 경계와 헤딩 계층을 명시적으로 추출하는 것이 우선이다. 그 다음 단계로는 비콘·스크립트·네비게이션 등 UI 관련 노드들을 식별해 사전에 필터링하고, 각 콘텐츠 노드에 상위 헤딩 경로를 메타데이터로 부착한 뒤 청크를 생성해야 검색 시 문맥 유실을 방지할 수 있다. 마지막으로 생성된 청크에는 토큰 수와 원본 URL 같은 메타데이터를 포함해 벡터 저장소로 로딩하면 디버깅과 결과 해석이 용이해진다.
LangChain 또는 LlamaIndex로 통합할 때는 생성된 Markdown 또는 구조화된 JSON을 Document 객체로 래핑해 메타데이터 필드를 채우는 방식을 권장한다. 이렇게 하면 검색·검색결과 재랭킹·응답 생성 시 상위 헤딩 컨텍스트를 손쉽게 주입할 수 있으며, 품질 점수 기반으로 적재 우선순위를 정해 벡터 저장소의 노이즈 비중을 줄일 수 있다. 배포 단계에서는 동적 로드 페이지에 대해 브라우저 렌더링을 선행하거나, 사이트별 클렌징 규칙을 보완해 일관성을 확보해야 한다.

섹션별 상세

웹 스크레이핑 파이프라인에서 흔히 관찰되는 문제는 페이지의 네비게이션·푸터·쿠키 배너·인라인 스크립트 같은 UI 요소들이 텍스트 청크로 함께 들어가면서 임베딩이 오염되는 점이다. 원문은 표준 HTML 로더와 재귀적 문자 분할기(예: RecursiveCharacterTextSplitter)를 사용할 때 문단이 상위 헤딩 문맥을 잃는 과정과 불필요한 텍스트가 벡터 공간에 혼입되는 과정을 구체적으로 지적했다. 그러한 노이즈는 유사도 검색의 성능 저하로 이어지며, 게시자는 이 문제를 이미지 비교(원문의 before/after 스크린샷)로 근거를 제시했다.

제안된 해결책은 HTML을 단순 스트립이 아닌 AST 기반으로 파싱해 문서의 트리 구조를 보존하면서 clean Markdown을 생성하는 방식이다. 이 접근법은 입력 HTML을 노드 단위로 분해해 유의미한 콘텐츠 노드만 선별하고, 각 자식 노드에 부모 헤딩의 경로를 메타데이터로 부착해 분할 이후에도 문맥이 유지되도록 처리한다. 게시자는 이 방법으로 생성한 출력이 'Vector Store Ready'한 구조화된 JSON과 토큰 수·품질 점수 같은 풍부한 메타데이터를 포함한다고 밝혀 실무적 재현 가능성을 높였다.

헤딩 브레드크럼(부모 헤딩 경로)을 자식 청크에 자동으로 연결하는 처리는 문맥 손실을 줄이는 핵심 메커니즘으로 작동한다. 구체적으로 문서 트리를 순회하면서 현재 노드의 상위 헤딩들을 수집하고 이를 청크의 전반적 컨텍스트 필드에 삽입해, 이후 텍스트 분할과 임베딩 생성 단계에서 검색 질의를 상위 문맥과 매칭시킬 수 있다. 원문에서는 이 방식이 섹션 기반 질의 응답에서 더 관련성 높은 결과를 도출한다고 주장하며 이미지로 비교 근거를 제시했다.

실전 워크플로 측면에서는 불필요한 UI 요소를 사전에 제거하고, 출력물에 토큰 카운트와 품질 점수 같은 메타데이터를 포함해 LangChain이나 LlamaIndex의 Document 객체로 바로 적재할 수 있도록 설계됐다. 이 과정은 웹 페이지의 원천 URL을 추적 가능하게 유지하며 임베딩 전처리 파이프라인에서 추가적인 클렌징 단계를 줄이는 효과를 낳았다. 게시자는 Apify Actor 형태로 배포 링크를 제공해 실제 적용 가능성을 높였고, 사용성·확장성에 대한 피드백을 요청했다.

이미지 분석

Infographic
왼쪽에는 네비게이션·푸터·쿠키 배너 등이 포함된 원시 HTML 예시가 코드 형태로 제시되어 있어 노이즈 원인을 시각적으로 확인할 수 있다. 가운데에는 부모 헤딩 경로가 유지된 Markdown 출력 예시와 청크별 메타데이터(토큰 수, 품질 점수 등)가 있어 AST 기반 처리의 작동 결과를 보여준다. 오른쪽에는 깨끗한 콘텐츠가 LLM 이해도·검색 정확도·벡터 저장소 준비성 등을 개선한다는 요약 이점이 정리되어 있어 실무적 효과를 한눈에 파악할 수 있다.
표준 웹 스크래퍼의 원시 HTML 출력과 AST 기반 웹-투-마크다운 크롤러의 정제된 출력, 그리고 AI·RAG에 주는 이점을 비교한 인포그래픽이다.

Infographic
해당 미리보기는 첫 이미지와 동일한 정보를 포함하며, 원시 HTML의 잡음과 AST 기반 출력의 구조화·메타데이터 포함 여부를 재차 확인할 수 있다. 이미지는 실제 전처리 전후의 차이를 직관적으로 전달해 게시글의 주장을 시각적 근거로 보강한다.
동일한 비교 이미지의 미리보기 버전으로 원시 HTML과 정제 Markdown의 차이를 보여주는 인포그래픽이다.

용어 해설

검색 증강 생성(RAG): — 검색 증강 생성은 외부 문서에서 관련 컨텍스트를 검색해 모델의 입력으로 주입한 뒤 응답을 생성하는 방식이다. 이 글 맥락에서는 웹 문서의 의미있는 단락을 보존해 검색시 올바른 문맥을 제공하는 것이 핵심 역할이다. 잘 구조화된 문서 조각은 RAG에서 검색 정확도와 답변 관련성을 높이는 핵심 요소로 작용한다.
추상 구문 트리(AST): — 추상 구문 트리는 문서나 코드의 계층적 구조를 노드와 엣지로 표현한 자료구조이다. 본문에서는 HTML 문서를 단순 문자열이 아닌 트리로 파싱해 각 노드의 계층적 관계와 헤딩 정보를 유지하는 데 사용됐다. AST 기반 처리는 섹션 경계와 상위 헤딩을 정확히 보존해 분할 시 문맥 손실을 줄였다.
벡터 저장소(Vector Store): — 벡터 저장소는 텍스트 임베딩을 인덱싱하고 유사도 검색을 수행하는 시스템이다. 문서 조각이 노이즈로 오염되면 유사도 검색 결과 품질이 저하되므로 입력 텍스트의 정제와 메타데이터 보강이 중요하다. 본 글에서는 임베딩 전 단계에서 불필요 UI 요소를 제거하고 계층 정보를 포함한 청크를 생성해 벡터 저장소의 검색 정밀도를 개선했다.

언급된 도구

LangChain추천링크

LLM 기반 워크플로 orchestration과 Document 객체를 통해 임베딩 파이프라인에 연동하는 라이브러리

LlamaIndex추천링크

인덱싱과 검색을 위해 구조화된 문서와 임베딩을 관리하는 라이브러리

Apify Actor (ai-web-to-markdown-crawler)중립링크

AST 기반으로 HTML을 파싱해 Markdown과 구조화 JSON을 생성하는 배포형 크롤러 액터

언급된 리소스

DemoAI Web-to-Markdown Crawler (Apify Actor)