claude-obsidian 스킬 뜯어보기 (7): defuddle

이 스킬이 하는 일

defuddle은 웹페이지에서 광고, 쿠키 배너, 네비게이션 바, 관련 기사, 푸터, 소셜 공유 버튼을 모두 걷어내고 본문만 깨끗한 마크다운으로 추출하는 스킬이다. 이름 자체가 "de-fuddle" — 뒤섞인(fuddle) 것을 풀어낸다(de-)는 뜻이다.

왜 필요한가? 일반적인 웹페이지를 그대로 가져오면 본문 외의 클러터가 전체 토큰의 40-60%를 차지한다. 뉴스 기사 하나에 광고 스크립트, 추천 기사 목록, 댓글 섹션, 뉴스레터 구독 폼이 딸려온다. Claude의 컨텍스트 윈도우를 낭비할 뿐 아니라, 위키 페이지 품질도 떨어뜨린다. defuddle은 이 문제를 원천 차단한다.

파일 구조

claude-obsidian/
└── skills/defuddle/
    └── SKILL.md         # 스킬 본체 — 설치, 사용법, 통합 가이드

단일 파일 스킬이다. SKILL.md 하나가 설치 방법부터 wiki-ingest 통합까지 전부 담고 있다. 82줄로 obsidian-markdown(232줄)보다 훨씬 짧다 — defuddle은 외부 CLI 도구의 래퍼이기 때문에 문법 레퍼런스가 아니라 사용 가이드에 가깝다.

SKILL.md 뜯어보기

프론트매터부터 보자.

---
name: defuddle
description: "Strip clutter from web pages before ingesting into the wiki.
  Removes ads, navigation, headers, footers, and boilerplate:
  leaving clean readable markdown that saves 40-60% tokens.
  Triggers on: defuddle, clean this page, strip this url,
  fetch and clean, clean web content before ingesting,
  strip ads, remove clutter, clean URL content,
  readable markdown from URL."
allowed-tools: Read Bash
---

description에 트리거 키워드가 촘촘하다: defuddle, clean this page, strip this url, fetch and clean, strip ads, remove clutter, readable markdown from URL. 사용자가 이 중 하나라도 입력하면 Claude Code가 자동으로 이 스킬을 로드한다.

allowed-tools는 Read Bash 두 가지다. 다른 스킬들이 Read Write Edit를 쓰는 것과 다르게, defuddle은 Bash로 외부 CLI를 호출하는 것이 핵심이다. 파일을 직접 쓰는 대신 stdout으로 결과를 받아 리다이렉션한다.

Web Page Cleaner -- 광고/네비게이션 제거

SKILL.md의 첫 번째 섹션이 defuddle의 핵심 기능을 한 문장으로 정의한다.

Defuddle extracts the meaningful content from a web page and drops
everything else: ads, cookie banners, nav bars, related articles,
footers, social sharing buttons. What remains is the article body
as clean markdown.

제거 대상 목록을 보면 현대 웹페이지의 전형적인 클러터를 모두 커버한다:

• ads — 배너 광고, 인라인 광고, 스폰서 콘텐츠
• cookie banners — GDPR 동의 팝업
• nav bars — 상단/사이드 네비게이션
• related articles — "관련 기사", "추천 콘텐츠" 섹션
• footers — 사이트맵, 저작권 표기, 소셜 링크
• social sharing buttons — 트위터, 페이스북, 링크드인 공유 버튼

사용법은 놀랄 만큼 단순하다.

defuddle https://example.com/article

URL 하나를 인자로 주면 정제된 마크다운이 stdout으로 출력된다. 로컬 HTML 파일도 처리할 수 있다.

defuddle page.html

설치도 한 줄이다.

npm install -g defuddle-cli

SKILL.md는 defuddle이 설치되지 않은 경우의 폴백도 정의한다.

which defuddle 2>/dev/null || echo "not installed"

설치되지 않으면 WebFetch를 직접 사용한다. 콘텐츠가 덜 깨끗하지만 작동은 한다("The content will be less clean but still workable"). 이 폴백 전략은 스킬이 외부 의존성 없이도 동작하는 것을 보장한다.

When to Use / Skip 섹션도 명확하다.

**Use defuddle when:**
- Ingesting a news article, blog post, or documentation page from a URL
- The page has a lot of surrounding content (most web pages do)
- You want to stay within token budget on a long article
 
**Skip defuddle when:**
- The source is already a clean markdown or PDF file
- The page is a dashboard, app, or structured data
  (defuddle expects article-style content)
- defuddle is not installed and the article is short enough
  to process raw

핵심 판단 기준은 "기사 스타일 콘텐츠인가?"이다. 뉴스, 블로그, 문서 페이지에는 강력하지만, 대시보드나 앱 화면에는 적합하지 않다. defuddle이 기대하는 입력은 article-style content이기 때문이다.

Token Reduction -- 40-60% 절감

SKILL.md 서두에서 토큰 절감 효과를 명시한다.

Use this before any URL ingestion. It is optional but strongly
recommended. It cuts token usage by 40-60% on typical web articles
and produces cleaner wiki pages.

"optional but strongly recommended" — 선택 사항이지만 강력히 권장한다. 40-60% 절감은 실제로 어떤 의미인가?

예를 들어 뉴스 기사 하나가 원본 HTML에서 마크다운으로 변환하면 약 5,000 토큰이라고 하자. defuddle을 거치면 2,000-3,000 토큰으로 줄어든다. 배치 인제스트에서 10개 기사를 처리한다면 총 20,000-30,000 토큰을 절약한다. Claude의 컨텍스트 윈도우가 유한한 자원이라는 점을 감안하면, 이 절감은 더 많은 소스를 한 세션에서 처리할 수 있다는 뜻이다.

토큰 절감 외에도 "produces cleaner wiki pages"라는 부수 효과가 있다. 클러터가 제거된 소스로 위키 페이지를 만들면, 위키 페이지 자체의 품질도 올라간다. 광고 텍스트가 요약에 섞여 들어가는 일이 사라진다.

Frontmatter Header -- source_url + fetched

defuddle로 정제한 콘텐츠를 .raw/에 저장할 때 출처 추적을 위한 프론트매터를 붙인다.

SLUG="article-slug-$(date +%Y-%m-%d)"
{ echo "---";
  echo "source_url: https://example.com/article";
  echo "fetched: $(date +%Y-%m-%d)";
  echo "---";
  echo "";
  defuddle https://example.com/article;
} > .raw/articles/$SLUG.md

두 개의 메타데이터 필드가 있다:

• source_url — 원본 URL. 나중에 원문을 다시 확인하거나 업데이트할 때 사용한다.
• fetched — 가져온 날짜. 웹 콘텐츠는 시간에 따라 변하므로 "이 정보가 언제 시점의 것인가"를 기록한다.

이 패턴은 wiki-ingest의 프론트매터 체계와 맞물린다. wiki-ingest가 .raw/ 폴더의 소스를 처리할 때 이 프론트매터를 읽어 위키 페이지의 출처 정보를 채운다. 수동으로 URL을 정제해서 저장하는 워크플로우에서 유용하다.

파일명에 날짜를 포함하는 것도 눈에 띈다: article-slug-$(date +%Y-%m-%d). 같은 기사를 다른 날 다시 가져와도 파일명이 겹치지 않는다. 이는 .raw/ 폴더가 불변 아카이브로 기능하는 wiki 볼트 구조와 일관된다.

Integration with wiki-ingest -- URL 전처리

SKILL.md의 마지막 섹션이 가장 실용적이다.

The `/wiki-ingest` skill checks for defuddle automatically when a
URL is passed. You do not need to run defuddle manually before
ingesting a URL. The ingest skill will call it if available.

핵심은 자동 통합이다. 사용자가 ingest https://example.com/article이라고 입력하면, wiki-ingest가 내부적으로 defuddle이 설치되어 있는지 확인하고, 설치되어 있으면 자동으로 호출한다. 사용자는 defuddle의 존재를 의식할 필요가 없다.

이 설계는 두 가지 시나리오를 지원한다:

시나리오 1: 자동 파이프라인. 사용자가 URL을 wiki-ingest에 전달하면, defuddle이 자동으로 실행되어 정제된 콘텐츠가 인제스트된다. 별도 조작 없이 깨끗한 위키 페이지가 만들어진다.

시나리오 2: 수동 전처리. 사용자가 먼저 defuddle로 정제하고 .raw/에 저장한 뒤, 파일 경로로 인제스트한다.

To manually clean a page and save before ingesting:
1. Run the save command above
2. Then: `ingest .raw/articles/[slug].md`

수동 전처리는 프론트매터를 직접 제어하고 싶거나, 동일한 정제 결과를 여러 번 인제스트에 재사용하고 싶을 때 유용하다. .raw/에 저장하면 원본이 보존되므로 나중에 다시 처리할 수도 있다.

다른 스킬과의 연결점

defuddle은 claude-obsidian 스킬 체인에서 전처리 계층을 담당한다.

URL → [defuddle] → 정제된 마크다운 → [wiki-ingest] → 위키 페이지

wiki-ingest와의 관계. 3편에서 다룬 wiki-ingest는 소스를 위키 페이지로 변환하는 핵심 파이프라인이다. defuddle은 그 파이프라인의 입력 품질을 높이는 역할을 한다. wiki-ingest의 SKILL.md에 "URL ingestion" 단계가 정의되어 있는데, 그 단계에서 defuddle이 자동 호출된다.

wiki-query와의 간접 관계. 4편의 wiki-query는 위키 콘텐츠를 검색하고 답변을 생성한다. defuddle로 정제된 소스에서 만든 위키 페이지는 노이즈가 적기 때문에, wiki-query의 답변 품질도 간접적으로 향상된다.

obsidian-markdown과의 관계. 2편의 obsidian-markdown은 출력 형식을 규정한다. defuddle이 만드는 마크다운은 표준 마크다운이고, 이후 wiki-ingest가 obsidian-markdown 규칙에 따라 wikilink와 프론트매터를 추가한다.

defuddle은 82줄짜리 작은 스킬이지만, 웹 콘텐츠 인제스트의 품질과 효율을 결정하는 중요한 전처리 단계다. 다음 8편에서는 자율 연구 루프를 수행하는 autoresearch 스킬을 분석한다.