القائمة
웹페이지 URL을 입력받아 마크다운 형태로 변환하여 저장합니다. 웹 문서를 로컬 마크다운 파일로 아카이빙하거나 정리할 때 유용합니다.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/bear2u/my-skills --skill web-to-markdownيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | web-to-markdown |
| description | 웹페이지 URL을 입력받아 마크다운 형태로 변환하여 저장합니다. 웹 문서를 로컬 마크다운 파일로 아카이빙하거나 정리할 때 유용합니다. |
웹페이지의 URL을 입력받아 해당 페이지의 내용을 마크다운 형식으로 변환하여 저장하는 스킬입니다.
다음과 같은 요청이 있을 때 이 스킬을 사용하세요:
사용자에게 변환하고자 하는 웹페이지의 URL을 입력받습니다.
Example:
Claude: 변환하실 웹페이지의 URL을 입력해주세요.
User: https://example.com/article
Important:
http:// 또는 https://로 시작해야 합니다사용자의 요청을 분석하여 적절한 변환 모드를 선택합니다.
변환 모드:
자동 감지 키워드:
Example 1 (AI 최적화):
User: https://example.com/article AI가 읽기 좋게 변환해줘
Claude: AI 최적화 모드로 변환하겠습니다. 구조화된 포맷과 메타데이터를 추가합니다.
Example 2 (듀얼 모드):
User: https://example.com/article 원본이랑 AI 최적화 버전 둘 다 만들어줘
Claude: 듀얼 모드로 변환하겠습니다.
- 원본 마크다운 (article.md)
- AI 최적화 버전 (article.context.md)
2개 파일을 생성합니다.
사용자에게 저장 위치와 파일명을 확인합니다.
Example:
Claude: 마크다운 파일을 어디에 저장할까요?
옵션:
1. 현재 디렉토리 (./)
2. 특정 경로 지정
3. 파일로 저장하지 않고 내용만 보기
파일명은? (기본값: webpage.md)
User: 현재 디렉토리에 article.md로 저장해줘
WebFetch 도구를 사용하여 웹페이지를 가져오고 마크다운으로 변환합니다.
url = "https://example.com/article"
prompt = "웹페이지의 전체 내용을 마크다운 형식으로 변환해주세요. 제목, 본문, 링크, 이미지 등 모든 요소를 포함하되, 불필요한 네비게이션이나 광고는 제외해주세요."
url = "https://example.com/article"
prompt = """이 웹페이지를 AI 에이전트가 컨텍스트로 활용하기 최적화된 형태로 변환해주세요:
**필수 구조:**
1. **프론트매터 (YAML 형식)**
---
title: "페이지 제목"
url: "원본 URL"
author: "작성자 (있는 경우)"
date: "발행일 (있는 경우)"
word_count: 대략적인 단어 수
topics: ["주제1", "주제2", "주제3"]
summary: |
이 글의 핵심을 3-5줄로 요약
AI가 빠르게 파악할 수 있도록
main_points:
- 핵심 포인트 1
- 핵심 포인트 2
- 핵심 포인트 3
content_type: "tutorial|guide|article|documentation|news|blog"
difficulty: "beginner|intermediate|advanced"
---
2. **본문 구조**
# [원본 제목]
## 핵심 요약
[3-5줄로 이 글이 무엇을 다루는지 명확하게]
## 주요 내용
[명확한 계층 구조로 섹션 구분, H2/H3 사용]
### 섹션 1
[내용]
### 섹션 2
[내용]
## 핵심 인사이트
- 인사이트 1
- 인사이트 2
- 인사이트 3
## 실용적 적용
[이 내용을 어떻게 활용할 수 있는지]
## 관련 리소스
[링크가 있다면 설명과 함께]
## 결론
[마무리 요약]
**변환 규칙:**
- 광고, 네비게이션, 푸터, 사이드바 완전 제거
- 코드 블록은 언어 명시 (```python, ```javascript 등)
- 링크는 [설명](URL) 형식으로 명확하게
- 이미지는  형식으로
- 불필요한 수식어 제거, 간결하게
- 리스트는 명확한 bullet points로
- 중요한 개념은 **굵게** 강조
**최종 목표:**
AI가 이 문서를 읽고 핵심을 3초 안에 파악하고,
사용자의 질문에 정확하게 답변할 수 있도록 최적화
"""
Important:
변환된 마크다운을 파일로 저장합니다.
# Write 도구를 사용하여 파일 저장
Write {
file_path: "/Users/symverse/workspaces-skill-test/my-skills-hub/article.md"
content: "[변환된 마크다운 내용]"
}
AI 최적화 모드 파일명 권장:
article.mdarticle-ai-optimized.md 또는 article.context.md저장된 파일의 경로와 간단한 통계를 사용자에게 보여줍니다.
✅ 웹페이지를 마크다운으로 변환했습니다!
📄 파일: article.md
📍 경로: /Users/symverse/workspaces-skill-test/my-skills-hub/article.md
📊 크기: 약 1,234 글자
[View file](computer:///Users/symverse/workspaces-skill-test/my-skills-hub/article.md)
듀얼 모드는 원본 마크다운과 AI 최적화 버전을 모두 생성합니다. 사람이 읽을 자료와 AI가 처리할 자료를 동시에 확보할 수 있습니다.
User: https://react.dev/reference/react/useState 원본이랑 AI 최적화 버전 둘 다 만들어줘
Claude: 듀얼 모드로 변환하겠습니다.
기본 파일명은? (기본: webpage)
일반 모드 프롬프트로 WebFetch를 사용하여 원본 마크다운을 생성합니다.
url = "https://react.dev/reference/react/useState"
prompt = "웹페이지의 전체 내용을 마크다운 형식으로 변환해주세요. 제목, 본문, 링크, 이미지 등 모든 요소를 포함하되, 불필요한 네비게이션이나 광고는 제외해주세요."
원본 파일 저장:
Write {
file_path: "/path/to/useState.md"
content: "[원본 마크다운 내용]"
}
CRITICAL: 같은 URL에 대해 AI 최적화 프롬프트로 다시 WebFetch를 호출합니다.
url = "https://react.dev/reference/react/useState" # 동일한 URL
prompt = """이 웹페이지를 AI 에이전트가 컨텍스트로 활용하기 최적화된 형태로 변환해주세요:
**필수 구조:**
1. **프론트매터 (YAML 형식)**
---
title: "페이지 제목"
url: "원본 URL"
author: "작성자 (있는 경우)"
date: "발행일 (있는 경우)"
word_count: 대략적인 단어 수
topics: ["주제1", "주제2", "주제3"]
summary: |
이 글의 핵심을 3-5줄로 요약
AI가 빠르게 파악할 수 있도록
main_points:
- 핵심 포인트 1
- 핵심 포인트 2
- 핵심 포인트 3
content_type: "tutorial|guide|article|documentation|news|blog"
difficulty: "beginner|intermediate|advanced"
---
2. **본문 구조**
# [원본 제목]
## 핵심 요약
[3-5줄로 이 글이 무엇을 다루는지 명확하게]
## 주요 내용
[명확한 계층 구조로 섹션 구분, H2/H3 사용]
### 섹션 1
[내용]
### 섹션 2
[내용]
## 핵심 인사이트
- 인사이트 1
- 인사이트 2
- 인사이트 3
## 실용적 적용
[이 내용을 어떻게 활용할 수 있는지]
## 관련 리소스
[링크가 있다면 설명과 함께]
## 결론
[마무리 요약]
**변환 규칙:**
- 광고, 네비게이션, 푸터, 사이드바 완전 제거
- 코드 블록은 언어 명시 (```python, ```javascript 등)
- 링크는 [설명](URL) 형식으로 명확하게
- 이미지는  형식으로
- 불필요한 수식어 제거, 간결하게
- 리스트는 명확한 bullet points로
- 중요한 개념은 **굵게** 강조
**최종 목표:**
AI가 이 문서를 읽고 핵심을 3초 안에 파악하고,
사용자의 질문에 정확하게 답변할 수 있도록 최적화
"""
AI 최적화 파일 저장:
Write {
file_path: "/path/to/useState.context.md"
content: "[AI 최적화 마크다운 내용]"
}
2개 파일 생성 결과를 사용자에게 보여줍니다.
✅ 듀얼 모드 변환 완료! 2개 파일이 생성되었습니다.
📄 원본 마크다운:
- 파일: useState.md
- 경로: /path/to/useState.md
- 크기: 약 3,500 글자
- 용도: 사람이 읽기 좋은 원본 보존
[View file](computer:///path/to/useState.md)
📄 AI 최적화 버전:
- 파일: useState.context.md
- 경로: /path/to/useState.context.md
- 크기: 약 2,100 글자 (40% 절감)
- 용도: AI 컨텍스트로 활용
[View file](computer:///path/to/useState.context.md)
💡 팁:
- 원본(.md)은 사람이 읽을 때 사용
- AI 최적화(.context.md)는 RAG 시스템이나 AI 에이전트 컨텍스트로 사용
패턴 1: 확장자 구분 (권장)
article.mdarticle.context.md패턴 2: 접미사 구분
article.mdarticle-ai-optimized.md패턴 3: 폴더 구분
/docs
├── original/
│ └── article.md
└── optimized/
└── article.md
시나리오 1: 기술 문서 아카이빙
User: 이 React 문서들 원본이랑 AI 최적화 버전 둘 다 만들어줘
- https://react.dev/reference/react/useState
- https://react.dev/reference/react/useEffect
Claude: 듀얼 모드로 4개 파일 생성합니다.
- useState.md (원본)
- useState.context.md (AI 최적화)
- useEffect.md (원본)
- useEffect.context.md (AI 최적화)
시나리오 2: 블로그 글 백업
User: 내 블로그 글을 백업하는데 원본도 저장하고 AI가 읽을 수 있는 버전도 만들어줘
Claude: 듀얼 모드로 변환하겠습니다.
- 원본: 사람이 다시 읽을 때
- AI 최적화: 나중에 AI에게 질문할 때
시나리오 3: 학습 자료 구축
User: 이 튜토리얼들을 둘 다 버전으로 저장해줘
Claude:
study-materials/
├── original/ # 사람이 학습용
│ ├── intro.md
│ └── advanced.md
└── ai-optimized/ # AI 질문 답변용
├── intro.context.md
└── advanced.context.md
여러 웹페이지를 한 번에 변환할 수 있습니다.
Example:
User: 이 URL들을 전부 마크다운으로 저장해줘
- https://example.com/article1
- https://example.com/article2
- https://example.com/article3
Claude: 3개의 웹페이지를 변환하겠습니다. 파일명은 자동으로 생성할까요, 아니면 각각 지정하시겠어요?
User: 자동으로
Claude: [각 URL을 순차적으로 변환하여 article1.md, article2.md, article3.md로 저장]
웹페이지의 특정 부분만 추출할 수 있습니다.
Example:
User: https://example.com/docs 에서 "Installation" 섹션만 마크다운으로 저장해줘
Claude: [WebFetch 프롬프트에 "Installation 섹션만 추출"을 명시하여 해당 부분만 변환]
변환 시 원하는 마크다운 스타일을 지정할 수 있습니다.
Example:
User: 이 블로그 글을 마크다운으로 변환하되, 모든 제목을 H2(##)로 시작하고 코드 블록은 syntax highlighting 포함해줘
Claude: [WebFetch 프롬프트에 포맷 요구사항을 명시]
User: htp://wrong-url
Claude: ❌ 올바르지 않은 URL입니다. http:// 또는 https://로 시작하는 전체 URL을 입력해주세요.
Claude: ❌ 해당 웹페이지에 접근할 수 없습니다.
- 페이지가 삭제되었거나
- 접근 권한이 필요하거나
- 네트워크 오류가 발생했을 수 있습니다.
Claude: ❌ 파일을 저장할 수 없습니다.
- 경로가 올바른지 확인해주세요
- 쓰기 권한이 있는지 확인해주세요
- 디렉토리가 존재하는지 확인해주세요
User: https://docs.python.org/3/tutorial/index.html 이거 마크다운으로 저장해줘
Claude: 파이썬 튜토리얼 페이지를 마크다운으로 변환하겠습니다.
파일명을 어떻게 할까요? (기본: webpage.md)
User: python-tutorial.md
Claude: [WebFetch로 페이지 가져오기]
Claude: [마크다운으로 변환]
Claude: [파일 저장]
✅ 웹페이지를 마크다운으로 변환했습니다!
📄 파일: python-tutorial.md
📍 경로: /Users/symverse/workspaces-skill-test/my-skills-hub/python-tutorial.md
📊 크기: 약 15,234 글자
[View file](computer:///Users/symverse/workspaces-skill-test/my-skills-hub/python-tutorial.md)
User: 이 블로그 글들을 전부 마크다운으로 저장해서 아카이브 폴더에 넣어줘
- https://blog.example.com/post1
- https://blog.example.com/post2
Claude: 2개의 블로그 글을 archive 폴더에 저장하겠습니다.
[디렉토리 생성]
[각 URL을 순차적으로 변환]
✅ 2개의 웹페이지를 변환했습니다!
📁 archive/
├── post1.md
└── post2.md
User: https://github.com/anthropics/claude-code 이 페이지 내용을 마크다운으로 보여줘만 하고 저장은 하지마
Claude: [WebFetch로 페이지 가져오기]
다음은 해당 페이지의 마크다운 변환 내용입니다:
---
# Claude Code
Claude Code is an official CLI...
[전체 내용 출력]
---
저장하지 않고 내용만 보여드렸습니다.
WebFetch는 다음 요소를 마크다운으로 변환합니다:
불필요한 요소는 제외됩니다:
.mdWebFetch는 정적 HTML만 가져오므로 React, Vue, Next.js 등 JavaScript로 렌더링되는 페이지는 빈 내용이 반환될 수 있습니다.
증상:
WebFetch로 가져온 내용이 비어있거나 불충분하면, AskUserQuestion을 사용하여 사용자에게 Playwright 사용 여부를 물어봅니다.
# WebFetch로 가져온 마크다운 내용 확인
if len(markdown_content.strip()) < 500: # 너무 짧으면
# 동적 콘텐츠일 가능성 높음
AskUserQuestion 사용:
AskUserQuestion {
questions: [
{
question: "이 페이지는 동적 콘텐츠(JavaScript)를 사용하는 것 같습니다. Playwright를 실행해서 브라우저로 데이터를 가져올까요?",
header: "Playwright",
multiSelect: false,
options: [
{
label: "Yes, Playwright로 재시도",
description: "Chromium 브라우저를 실행해서 JavaScript 렌더링 후 콘텐츠 가져오기 (느림, 정확함)"
},
{
label: "No, 현재 내용만 저장",
description: "WebFetch 결과만 저장 (빠름, 불완전할 수 있음)"
}
]
}
]
}
사전 준비: MCP Playwright 서버가 설치되어 있어야 합니다.
# 최초 1회만 설치
npx @modelcontextprotocol/server-playwright
스킬에서 사용:
// 1. 페이지 이동
mcp__playwright__navigate({
url: "https://example.com"
})
// 2. JavaScript 렌더링 대기
mcp__playwright__waitForLoadState({
state: "networkidle"
})
// 3. HTML 콘텐츠 가져오기
const htmlContent = mcp__playwright__getContent()
// 4. 마크다운으로 변환 (WebFetch 프롬프트 재사용)
// htmlContent를 마크다운으로 변환하는 로직
MCP Playwright가 없는 경우 Node.js로 직접 실행:
# Playwright 스크립트 실행
node << 'EOF'
const playwright = require('playwright');
(async () => {
const browser = await playwright.chromium.launch({ headless: true });
const page = await browser.newPage();
console.log('⏳ 페이지 로딩 중...');
await page.goto('https://example.com', { waitUntil: 'networkidle' });
console.log('⏳ JavaScript 렌더링 대기 중...');
await page.waitForTimeout(3000); // 3초 대기
const content = await page.content();
console.log(content);
await browser.close();
})();
EOF
출력을 파일로 저장:
# HTML을 임시 파일로 저장
node playwright-script.js > temp.html
# 이제 이 HTML을 마크다운으로 변환
# (WebFetch 대신 직접 변환 로직 사용)
Playwright로 가져온 HTML을 마크다운으로 변환합니다.
Option A: WebFetch 프롬프트 재사용
Playwright로 가져온 전체 HTML을 WebFetch 프롬프트에 넣어 마크다운으로 변환합니다.
Option B: 직접 파싱
HTML → 마크다운 변환 라이브러리 사용 (예: turndown, html-to-markdown)
1. WebFetch로 시도 (빠름)
↓
2. 결과 검증 (내용이 충분한가?)
↓ NO
3. AskUserQuestion (Playwright 사용할까요?)
↓ YES
4. Playwright로 재시도
├─ MCP Playwright (권장) 또는
└─ Node Playwright (대안)
↓
5. 마크다운 변환 및 저장
| 항목 | MCP Playwright ⭐ | Node Playwright |
|---|---|---|
| 설치 | MCP 서버 설치 필요 | npm install playwright |
| 호출 방식 | MCP 도구 호출 | Bash 명령어 실행 |
| 세션 관리 | 자동 | 수동 (스크립트 작성) |
| 에러 핸들링 | 깔끔함 | 복잡함 |
| Claude Code 통합 | 네이티브 지원 | 간접 실행 |
| 추천도 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
시나리오: React 공식 문서 변환
User: https://react.dev/reference/react/useState 마크다운으로 변환해줘
Claude: [WebFetch 시도]
Claude: ⚠️ 이 페이지는 JavaScript로 렌더링되는 것 같습니다.
내용이 거의 비어있네요.
[AskUserQuestion 호출]
User: Yes, Playwright로 재시도
Claude: ⏳ Playwright로 페이지 로딩 중...
Claude: ✅ JavaScript 렌더링 완료
Claude: ✅ 마크다운 변환 완료
📄 파일: useState.md
📍 경로: /path/to/useState.md
📊 크기: 약 5,234 글자 (전체 콘텐츠 포함)
고급 사용자를 위해 --auto-playwright 플래그를 지원할 수 있습니다:
User: https://react.dev/reference/react/useState 마크다운으로 변환해줘 (자동으로 Playwright 사용해도 돼)
Claude: [WebFetch 시도]
Claude: [자동으로 Playwright 폴백]
Claude: ✅ 마크다운 변환 완료