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

• 웹 페이지에서 필요 없는 요소(댓글, 사이드바, 헤더, 푸터 등) 를 제거해 본문만 남기는 도구임
• Mozilla Readability와 달리 더 유연하게 동작하며, 수식·코드블록·각주 등의 일관된 HTML 표준화를 지원함
• Obsidian Web Clipper를 위해 개발되었고, 다른 HTML-to-Markdown 변환 툴(Turndown 등)과의 호환성을 목표로 함
• 모바일 스타일과 schema.org 데이터 등 다양한 메타데이터 추출 기능을 내장
• Node.js와 브라우저 모두 지원하며, 사용 목적에 따라 다양한 번들 선택 가능

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)

[GN⁺]

Hacker News 의견

• 내가 사용 중인 wysiwyg 에디터의 markdown에서 HTML로 변환하는 방식이 마음에 들지 않아서, 직접 툴바와 에디터를 만들어 이 도구를 적용하면 더 나은 결과를 볼 수 있을 것 같은 기대감

• 최근 비슷한 주제를 조사한 적 있는데, 다양한 언어로 구현된 Readability의 품질에는 확신이 없었음. Readability.js가 가장 뛰어났지만, Javascript 환경이 내 프로젝트에 맞지 않았음. 결국 Python의 Trafilatura 라이브러리가 메타데이터까지 정확하게 최고 품질의 콘텐츠를 추출하는 용도로 선택됨. 내 구현체와 Trafilatura를 비교해보면 개선할 포인트를 찾을 수 있을 듯한 제안

  • Go 언어를 사용한다면 내가 유지 관리하는 Go용 Readability와 Trafilatura 포트 버전이 있음. Trafilatura Go 버전은 Python 버전과 성능이 비슷함. 참고 링크: go-shiori/go-readability, markusmobius/go-trafilatura
  • Trafilatura 공식 문서는 여기에서 확인 가능. 참고로 Trafilatura는 이탈리아어로 '압출'이라는 의미. 마케로니가 소스를 잘 머금는 특성에서 유래된 명칭이라는 설명과 함께 pasta 용어의 흥미로운 배경 소개. (그리고 trifatura가 아니라 trafilatura가 맞는 표기라는 지적)

• Obsidian Clipper를 출시 초부터 사용 중이고, 사이트별 프로필 기반 추출 기능을 특히 높이 평가함. Obsidian 사용자가 아니더라도, 마크다운 추출 품질이 지금까지 본 것 중 가장 신뢰할 만한 수준

  • 추천 팁에 대한 감사의 표현

• 최근 웹사이트들이 점점 더 복잡하고 산만해진 상황에서, 독자가 실제 콘텐츠에 집중할 수 있게 해주는 robust한 마크다운 컨버터가 꼭 필요하다는 생각. Readability의 빈자리를 채우는 프로젝트가 등장해서 반가운 소감과 응원

• Obsidian Web-clipper의 마크다운 변환 품질에 감탄해 소스 코드를 분석하다가 Defuddle을 발견하게 됨. 직접 개발하는 read-it-later/knowledge-base 앱에 활용할 예정이라 미리 고마움을 전하고 싶은 마음

• Mozilla의 Readability가 정말로 방치된 것인지 궁금증. 최근 릴리즈가 2개월 전이고 유지관리자인 Gijs의 이슈 응답도 매우 활발함

  • 해당 코드베이스는 개선할 점이 많다는 불만. 내가 업무상 버그 수정을 위해 포크한 경험 공유. 예시로 네덜란드처럼 숫자 사이에 쉼표를 사용하는 언어가 포함된 페이지의 가격 정보를 전부 중요한 텍스트로 인식하는 버그가 있음. PR을 올리려 했더니 테스트 통과가 필수인데, 내가 테스트한 페이지에서 테스트가 실패하여 merge가 어려운 비효율 겪음

• PHP로 개발한 유사 프로젝트 markydown 소개. 간편한 셀프호스팅 이점

• Obsidian Web Clipper가 chatGPT 대화 내용을 마크다운으로 변환하거나, 간단하게 인쇄용으로 활용할 때 매우 유용한 툴이라는 실사용 사례

  • Kagi Assistant를 비롯한 일부 클라이언트는 대화 내용을 마크다운으로 바로 저장하는 기능을 제공함. Obsidian의 web-clipper를 활용하는 방법도 좋은 아이디어라는 의견
  • 나는 chatGPT에게 요약이나 필요한 내용을 마크다운 파일 형태로 직접 요청해서 활용

• 일부 웹사이트에서 읽기 모드(예: 아이폰 리더)로 접근할 때 화면이 하얗게 뜨거나 글이 제대로 보이지 않는 이유에 대한 궁금증. 특히 뉴스 웹사이트에서 자주 겪는 현상. 광고 노출을 위해 의도적으로 숨기는 것이 원인인지, 가능하다면 어떻게 적용하는지 궁금증 제기

  • 이러한 문제는 특히 EU/UK/캘리포니아 등에서 개인정보 배너나 쿠키 알림이 원인인 경우가 많음. 일부 웹사이트는 이런 배너가 모달로만 뜨는데, 읽기 모드에서 잘 처리되지만, 그 외에는 리디렉트나 서버사이드 렌더링 방식으로 아예 콘텐츠를 가려버릴 때도 있음. 읽기 모드 사용 시 우선 관련 배너를 닫고 다시 시도하는 방법 권장