Readability를 대체하는 HTML-to-Markdown 오픈소스 도구 Defuddle 소개

15 hours ago 2

Defuddle은 웹 페이지에서 주 내용을 추출해 불필요한 요소를 제거하는 HTML-to-Markdown 변환 도구임
Mozilla Readability와 달리 더 유연하게 동작하며, 수식·코드블록·각주 등의 일관된 HTML 표준화를 지원함
Obsidian Web Clipper를 위해 개발되어, Markdown 변환 준비에 최적화된 결과 제공
모바일 스타일과 schema.org 데이터 등 다양한 메타데이터 추출 기능을 내장함
Node.js와 브라우저 모두 지원하며, 사용 목적에 따라 다양한 번들 선택 가능

Defuddle 개요

Defuddle은 웹 페이지에서 필요 없는 요소(댓글, 사이드바, 헤더, 푸터 등) 를 제거해 본문만 남기는 도구임
쉽게 읽기 좋은 형태로 웹 콘텐츠를 정제함
HTML-to-Markdown 변환기에 더 적합한 입력값을 만들기 위해 개발됨
Obsidian Web Clipper 용도로 쓰이며, 다른 HTML-to-Markdown 변환 툴(Turndown 등)과의 호환성을 목표로 함

주요 기능

산만한 요소를 덜 제거해 더 많은 콘텐츠를 보존함
각주, 수식, 코드블록 등 복잡한 요소도 일관적 HTML로 변환함
모바일 페이지 스타일을 참고해 불필요한 요소 추정 및 제거 지원
schema.org 데이터 비롯 다양한 메타데이터 추출 및 제공

Defuddle의 Readability와 차별점

더 너그러운 필터링으로 불확실한 요소 제거를 줄임
각주, 수식, 코드 등 특수 영역을 일관되게 처리
페이지의 모바일 스타일 시트를 참고함
schema.org 메타데이터, 이미지, favicon, 퍼블리시 날짜 등 추가 정보 추출 가능

번들 구성

Core 번들(defuddle): 브라우저 사용에 적합, 외부 의존성 없음
Full 번들(defuddle/full): 수식 파싱 등 추가 기능 탑재
Node 번들(defuddle/node): Node.js (JSDOM) 환경 최적화, 수식·Markdown 변환 완벽 지원

반환 객체 구조

Defuddle은 아래와 같은 정보를 담은 객체를 반환함

author: 기사나 페이지의 저자명
content: 정제된 본문 콘텐츠 문자열
description: 기사나 페이지의 요약 설명
domain: 사이트의 도메인명
favicon: 사이트 대표 파비콘 URL
image: 대표 이미지 URL
metaTags: 메타 태그 정보
parseTime: 처리 소요 시간(밀리초 단위)
published: 발행일 정보
site: 사이트 이름
schemaOrgData: schema.org 추출 데이터
title: 콘텐츠 제목
wordCount: 본문 단어수

옵션

debug: 디버그 로깅 활성화
url: 분석 대상 페이지 URL 지정
markdown: 본문을 Markdown으로 변환
separateMarkdown: HTML·Markdown 동시 반환
removeExactSelectors: 정확 매치 선택자(광고, 소셜버튼 등) 제거 옵션 (기본값 true)
removePartialSelectors: 부분 매치 선택자(유사 광고 등) 제거 옵션 (기본값 true)

디버그 모드

디버그 옵션 활성화 시 파싱과정 자세 로그 출력
HTML의 클래스, ID 속성 유지 및 data-* 속성 보존
div 플래튼 루틴 생략으로 문서 구조 최대한 보존

HTML 표준화 방식

제목 처리

문서 첫 H1이나 H2가 제목과 동일하면 제거함
H1을 전부 H2로 변환
H1~H6 내 앵커링크(내비게이션)를 제거

코드 블록 표준화

코드 블록에서 줄번호, 하이라이트 제거, 언어 정보는 data 속성·클래스로 지정함

각주 변환

인라인 참조, 각주를 표준 HTML 구조로 변환함

Inline reference<sup id="fnref:1"><a href="#fn:1">1</a></sup>. <div id="footnotes"> <ol> <li class="footnote" id="fn:1"> <p> Footnote content. <a href="#fnref:1" class="footnote-backref">↩</a> </p> </li> </ol> </div>

수식 처리

MathJax, KaTeX 등 수식 요소를 표준 MathML 구조로 변환함

개발 및 빌드

Node.js, npm 필요
npm install 후 build 명령어로 패키지 빌드 가능

Defuddle의 경쟁력 요약

기존 Readability 엔진보다 콘텐츠 보존과 다양한 메타데이터 추출에 유리함
Obsidian, Obsidian Web Clipper와의 연계를 원하는 사용자 및 웹 콘텐츠의 효율적 Markdown 변환이 필요한 경우에 적합함
HTML 표준화, 각주 및 수식 등 복잡한 문서 구조 지원이 차별화 장점임

Read Entire Article