web-scraper MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

Phased reconnaissance — APIs > sitemaps > static HTML > browser
Template picker: Cheerio for static, Playwright for JS-heavy
Apify Actor TypeScript-first workflow
Selective stealth: only when protection signals detected
Session recording + replay for debugging

라이브 데모

실제 사용 모습

web-scraper-skill.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "web-scraper-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/yfe404/web-scraper",
        "~/.claude/skills/web-scraper"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "web-scraper-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/yfe404/web-scraper",
        "~/.claude/skills/web-scraper"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "web-scraper-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/yfe404/web-scraper",
        "~/.claude/skills/web-scraper"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "web-scraper-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/yfe404/web-scraper",
        "~/.claude/skills/web-scraper"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "web-scraper-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/yfe404/web-scraper",
        "~/.claude/skills/web-scraper"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "web-scraper-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/yfe404/web-scraper",
          "~/.claude/skills/web-scraper"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add web-scraper-skill -- git clone https://github.com/yfe404/web-scraper ~/.claude/skills/web-scraper

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: web-scraper

Scrape a static listing site into a structured dataset

👤 Data engineers pulling public data (directories, price lists, public records) ⏱ ~45 min intermediate

언제 쓸까: You need a dataset from a public site that doesn't have an API.

사전 조건

Skill installed — git clone https://github.com/yfe404/web-scraper ~/.claude/skills/web-scraper
Node 20 for Apify Actors — nvm install 20

흐름

Let the skill do recon

Use web-scraper. Target: https://example.com/listings. I want name + URL + category. Recon first — tell me the cheapest extraction path.✓ 복사됨

→ Skill reports: 'sitemap.xml available, use Cheerio'
Scaffold the Apify Actor

Scaffold a TypeScript Apify Cheerio actor for that extraction.✓ 복사됨

→ Actor tree + main.ts ready to run
Run and iterate

Run locally on 10 pages; tighten selectors if needed.✓ 복사됨

→ Clean JSON output

결과: An Apify Actor you can deploy for scheduled scrapes.

함정

Jumping to Playwright when Cheerio would do — Trust the recon — headful browsers 10x the cost unnecessarily

함께 쓰기: apify · filesystem

Discover and use a site's undocumented JSON API instead of HTML

👤 Scraper devs who want reliability ⏱ ~30 min intermediate

언제 쓸까: The page is a SPA and HTML is gross, but the XHR calls are clean JSON.

흐름

Run API-discovery phase

Use web-scraper phase 1 — API discovery on https://example.com/app. Enumerate XHR/fetch endpoints.✓ 복사됨

→ List of endpoints with observed payloads
Build the JSON-based actor

Generate an actor that hits those endpoints directly with auth as needed.✓ 복사됨

→ Lightweight fetch-based actor

결과: A far more stable scrape than HTML parsing.

함정

Private/session-auth APIs that break when token rotates — Plan token-refresh logic or fall back to browser flow

조합

다른 MCP와 조합해 10배 효율

web-scraper-skill + apify

Deploy the scaffolded actor to Apify for scheduled runs

Deploy this actor to my Apify account and schedule it daily.✓ 복사됨

web-scraper-skill + filesystem

Keep the actor code in-repo alongside the consuming app

Scaffold into scrapers/ and commit with the main project.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
recon	url	Always first
scaffold_actor	template (cheerio\|playwright), target	After recon picks template
record_session	url	Debugging dynamic sites
run_local	actor path, limit	Iteration phase

비용 및 제한

운영 비용

API 쿼터: Apify has its own compute + proxy quotas
호출당 토큰: Moderate — scaffold and iteration loops
금액: Free skill; Apify costs separate
팁: Prefer Cheerio — one of the cheapest run profiles on Apify

보안

권한, 시크릿, 파급범위

최소 스코프: Apify API token with actor:read + actor:write

자격 증명 저장: APIFY_TOKEN in env

데이터 외부 송신: Whatever sites you target + Apify platform

Respect robots.txt and each site's Terms of Service. Skill is not an anti-ToS tool — use it on data you're allowed to collect.
Public, non-authenticated data only unless you have explicit permission.

문제 해결

자주 발생하는 오류와 해결

Cheerio returns empty selectors

Content is JS-rendered — rerun recon, expect Playwright template

Playwright times out

Bump navigation timeout; consider waiting for specific selector instead of networkidle

403 / bot-block page

Stop and reconsider. This is the legit signal to re-check ToS, not a cue to escalate stealth.

대안

web-scraper 다른 것과 비교

대안	언제 쓰나	단점/장점
Direct Apify console	You already know which template you need	No recon phase
firecrawl	You just need markdown of a page, not structured extraction	No actor scaffolding

web-scraper