Firecrawl MCP Server와 Claude Code를 사용해 0에서 500개의 무료 페이지를 스크랩

Source: Dev.to

0줄의 코드. 이것이 제가 500페이지를 스크랩하기 위해 작성한 내용입니다. Firecrawl의 MCP 서버가 Claude Code에 통합되어 있어, 저는 필요한 것을 평범한 영어로 설명하기만 하면 AI가 나머지를 처리합니다. Firecrawl의 무료 티어와 이 워크플로우를 결합했을 때, 웹 스크래핑에 대한 저의 전체적인 접근 방식이 영원히 바뀌었습니다.

Firecrawl 요금제

무료 티어는 시작 시 500 크레딧을 제공하며, 전혀 비용이 들지 않고 제한도 없습니다. 이는 전체 전자상거래 카테고리를 스크랩하거나 수십 개의 문서 사이트에서 데이터를 추출하거나, 업그레이드 전에 스크래핑 워크플로를 테스트하기에 충분합니다.

구성 요소

The result? You talk to Claude, Claude talks to Firecrawl, and you get structured data back—no Postman, no curl commands, no boilerplate code.

Claude Code 설정

1. 에서 회원가입하고 API 키를 받으세요 (신용카드가 필요하지 않음).
2. MCP 서버 구성을 Claude Code 설정에 추가하세요:

{
  "mcpServers": {
    "firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "fc-your-key-here"
      }
    }
  }
}

Using Claude

• “Scrape this URL and extract the main content.” → “이 URL을 스크랩하고 주요 콘텐츠를 추출하세요.”
• “Map all links on this website.” → “이 웹사이트의 모든 링크를 매핑하세요.”
• “Extract product names and prices from this page.” → “이 페이지에서 제품 이름과 가격을 추출하세요.”
• “Crawl this documentation and summarize each section.” → “이 문서를 크롤링하고 각 섹션을 요약하세요.”

Claude automatically uses the Firecrawl MCP tools to fulfill your request. → Claude는 요청을 수행하기 위해 Firecrawl MCP 도구를 자동으로 사용합니다.

Firecrawl Power App

MCP 워크플로우를 보완하는 세련된 UI로, 시각적 피드백, 지속적인 히스토리, 그리고 비기술적인 팀원과의 손쉬운 공유를 제공합니다.

• 실시간 데모:
• GitHub 저장소:

Features

Note: PRO features require a paid Firecrawl plan. The free tier includes 500 credits (one‑time).

디자인 시스템

앱은 공식 Firecrawl 디자인 시스템을 사용합니다:

--primary: #FF4C00;   /* Firecrawl Orange */
--background: #ffffff;

아키텍처 개요

• Frontend: React, Vite, custom design system
• Backend: Express, Vercel Serverless Functions
• AI Integration: Firecrawl API (extraction, agent)

메트릭 (전후)

팁 및 모범 사례

• Complex pipelines: “scrape → transform → analyze” 체인을 위해 Claude Code를 사용하세요. 예시: “이 페이지를 스크랩하고, 데이터를 추출한 뒤 CSV 파일을 생성합니다.”
• Combine Map + targeted Scrape: 먼저 사이트를 매핑한 다음, 필요한 페이지만 선택적으로 스크랩하여 무료 크레딧을 최대화하세요.
• Leverage JSON Schemas: Extract 기능을 사용할 때 스키마를 정의하면 수동 파싱 없이도 완벽하게 구조화된 기계 판독 가능한 데이터를 얻을 수 있습니다.