웹 크롤링 최적화: web-content-extractor로 HTML 본문 자동 추출하기

 

🚀 웹 크롤링을 위한 필수 도구, web-content-extractor

인터넷의 폭발적인 성장과 함께 웹 데이터를 효율적으로 수집하는 기술이 점점 더 중요해지고 있습니다. 그러나 HTML에서 유의미한 본문을 추출하는 것은 결코 쉬운 일이 아닙니다. HTML 문서에는 본문 외에도 광고, 메뉴, 저작권 공지 등 불필요한 요소(Noise)가 많아, 이를 걸러내는 것이 웹 크롤링의 핵심 과제가 됩니다.

이를 해결하기 위해 다양한 방법이 존재하지만, LLM(대형 언어 모델)을 활용하는 것은 비용과 시간이 많이 들고, 기존 템플릿 기반의 방법은 웹 구조 변화에 취약합니다. 이런 문제를 해결해 줄 수 있는 강력한 도구가 바로 web-content-extractor입니다.

web-content-extractor는 DOM 기반 텍스트 밀도(Content Extraction via Text Density) 알고리즘을 활용하여 HTML 본문을 자동 추출하는 경량 라이브러리입니다. 추가적으로, 본문 내의 링크도 수집할 수 있어 웹 크롤링을 자동화하는 데 매우 유용합니다.

이번 글에서는 web-content-extractor의 원리, 주요 기능, 설치 방법, 사용법을 살펴보겠습니다.

반응형

---

🧐 web-content-extractor란?

web-content-extractor는 HTML 문서에서 본문을 자동으로 추출하는 경량 라이브러리입니다. DOM(Document Object Model) 기반의 텍스트 밀도 분석 기법을 활용하여 웹 페이지에서 중요한 콘텐츠를 선별해 냅니다.

📌 주요 특징

✅ 자동 본문 추출 – HTML 문서에서 본문을 찾아내고, 불필요한 요소(광고, 메뉴 등)를 제거
✅ 링크 추출 기능 – 본문 내 포함된 링크 정보도 함께 제공
✅ 경량 & 빠른 처리 속도 – 실전에서 사용 가능한 충분한 성능 보장
✅ DOM 기반 알고리즘 적용 – 웹 페이지 구조 변화에도 강인한 성능 유지

이 라이브러리는 DOM Based Content Extraction via Text Density 논문을 기반으로 구현되었으며, 일부 휴리스틱(Heuristic) 기법을 추가하여 성능을 최적화했습니다.

---

🔧 설치 방법

web-content-extractor는 **NPM(Node Package Manager)**을 통해 간편하게 설치할 수 있습니다.

npm i @wrtnlabs/web-content-extractor

설치가 완료되면 JavaScript/TypeScript에서 쉽게 사용할 수 있습니다.

---

🛠 사용법

web-content-extractor는 매우 간단한 인터페이스를 제공합니다. HTML 데이터를 입력하면 본문과 링크 정보를 자동으로 추출할 수 있습니다.

✅ 기본 사용 예제

import { extractContent } from "@wrtnlabs/web-content-extractor";

const { title, description, content, contentHtmls, links } = extractContent(html);

console.log("title", title);  // 제목 출력
console.log("description", description);  // 설명 출력

console.log("content", content);  // 본문 내용 출력

for (const fragment of contentHtmls) {
  console.log("fragment", fragment);  // 본문 HTML 조각 출력
}

for (const link of links) {
  console.log("url", link.url);  // 링크 URL 출력
  console.log("content", link.content);  // 링크 텍스트 출력
}

🔍 코드 설명

• extractContent(html): HTML 문서에서 본문과 링크를 추출
• title: 페이지 제목
• description: 페이지 설명
• content: 주요 본문 내용 (순수 텍스트)
• contentHtmls: HTML 형식의 본문 조각들
• links: 추출된 링크 목록 (URL + 링크 텍스트)

즉, 단 몇 줄의 코드만으로 HTML 문서에서 중요한 본문 정보와 링크를 빠르고 정확하게 추출할 수 있습니다.

---

⚡ web-content-extractor의 원리

web-content-extractor는 단순한 키워드 매칭 방식이 아닌, DOM 트리와 텍스트 밀도를 활용한 정교한 알고리즘을 사용합니다.

🏗 핵심 개념

1️⃣ 텍스트 밀도(Text Density) – 본문인지 여부를 판단하는 주요 지표

• 본문 영역은 광고, 메뉴보다 더 많은 텍스트가 포함됨
• 링크 밀도가 낮고 연속된 문장이 많을수록 본문일 가능성이 높음

2️⃣ 복합 텍스트 밀도(Composite Text Density) – 노이즈 필터링을 위한 추가 지표

• 광고, 메뉴 같은 영역은 짧은 문장과 많은 링크가 포함되는 경우가 많음
• 이를 활용해 불필요한 콘텐츠를 걸러냄

3️⃣ DensitySum 알고리즘 – 본문 내용을 온전히 추출하는 기법

• 기존 데이터 스무딩(Data Smoothing) 기법을 대체하여 보다 정확한 결과 제공
• HTML 구조를 유지하면서 본문만 깔끔하게 추출 가능

이러한 기법을 활용하여 다양한 웹 페이지에서 일관되게 높은 성능을 발휘할 수 있습니다.

---

🎯 web-content-extractor를 활용하면?

✅ 웹 크롤러 개발 – 뉴스, 블로그, 전자상거래 사이트 등에서 본문만 추출
✅ 데이터 마이닝 – 웹 데이터를 수집하고 분석하는 프로젝트에 활용
✅ SEO 분석 – 특정 웹사이트의 핵심 콘텐츠 분석 가능
✅ 스크랩핑 자동화 – 광고, 메뉴를 제거하고 필요한 정보만 저장

---

728x90

HTML 문서에서 중요한 본문을 추출하는 것은 웹 크롤링의 핵심 과제입니다. 그러나 기존 방법은 구조 변화에 취약하거나 속도가 느렸습니다.

web-content-extractor는 경량이면서도 빠르고 정확한 본문 추출이 가능한 강력한 도구입니다. DOM 기반의 텍스트 밀도 분석 기법을 활용해 광고, 메뉴 등의 불필요한 요소를 걸러내고, 본문과 링크 정보를 자동으로 추출할 수 있습니다.

👉 만약 웹 크롤링을 개발하고 있다면 web-content-extractor를 꼭 활용해 보세요!
👉 더 나은 성능을 위해 사용하면서 이슈 및 개선 사항도 함께 제보해 주세요.

https://github.com/wrtnlabs/web-content-extractor

GitHub - wrtnlabs/web-content-extractor: library for extracting content from HTML strings