Claude Code에서 Hyperbrowser로 웹스크래핑하는 법

솔직히 처음엔 “이게 된다고?” 했어요. 여러분 이거 경험 있죠?

“Claude Code가 웹 검색도 하고, 스크래핑도 하고, 자동화도 한다더라”

근데 막상 해보려고 하면…

“어디서 시작해야 하지?”

저도 그랬어요. 2025년 말부터 Claude Code를 쓰기 시작했는데, MCP(Model Context Protocol)가 뭔지도 몰랐거든요. 그냥 터미널에서 코딩 도와주는 AI인 줄만 알았어요.

근데 진짜 웃긴 게요.

Hyperbrowser라는 MCP 서버 하나 연결했더니, Claude Code가 갑자기 웹 스크래핑 기계가 됐어요.

해커뉴스 첫 번째 게시글? 5초. 웹사이트 전체 링크 추출? “crawl 해줘” 한 마디. 심지어 Claude가 직접 브라우저 조작까지? 네, 가능해요.

Claude Code에서 Hyperbrowser로 웹스크래핑하는 법 - 개발자 아닌 제가 해봤어요

잠깐, MCP가 뭔데요?

MCP… 뭔 소린지 모르겠죠? 쉽게 말하면 “AI한테 도구 쓸 권한 주는 USB 허브” 같은 거예요.

2024년 11월 Anthropic이 공개한 Model Context Protocol(MCP)은 AI 모델이 외부 도구와 서비스에 연결되는 표준 방식이에요. USB 포트에 마우스, 키보드, 외장하드 꽂듯이, Claude한테 여러 도구를 꽂아주는 거죠.

예를 들어:

Hyperbrowser MCP → 웹 스크래핑, 브라우저 자동화
GitHub MCP → 레포지토리 관리
Figma MCP → 디자인 파일 접근
PostgreSQL MCP → 데이터베이스 쿼리

그러니까 Hyperbrowser를 Claude Code에 연결하면?

“해커뉴스 첫 번째 게시글 제목 알려줘”

라고 말하면 Claude가 알아서 Hyperbrowser 도구를 호출해서 웹에서 정보를 가져와요. 코드 안 짜도 돼요.

왜 Hyperbrowser를 써야 하는가? (진짜 이유)

“그냥 웹 검색하면 되는 거 아니야?”

저도 처음엔 그렇게 생각했어요. 근데 직접 써보니까 달랐어요.

1) 일반 웹 검색의 한계

Claude Code의 기본 search_web 도구는 검색 결과 요약만 줘요. 실제 웹페이지에 들어가서 특정 데이터를 추출하거나, 로그인이 필요한 페이지를 접근하거나, 동적 콘텐츠를 가져오는 건 불가능해요.

2) Hyperbrowser가 해결하는 것

기능	일반 웹 검색	Hyperbrowser
검색 결과 요약	✅	✅
특정 페이지 스크래핑	❌	✅
구조화된 데이터 추출 (JSON)	❌	✅
웹사이트 전체 크롤링	❌	✅
브라우저 자동화 (클릭, 입력)	❌	✅
CAPTCHA 우회	❌	✅ (자동 해결)
프록시/스텔스 모드	❌	✅

3) 실제 사용 시나리오

제가 2주 동안 써보면서 유용했던 케이스들:

📰 뉴스/블로그 모니터링

"TechCrunch 첫 페이지에서 AI 관련 기사 제목 전부 추출해줘"
→ 5초 만에 마크다운 리스트로 정리

📊 경쟁사 분석

"이 쇼핑몰에서 'GPU' 검색해서 상위 10개 제품 가격 추출해줘"
→ JSON으로 깔끔하게 정리

🔗 웹사이트 구조 파악

"이 사이트 전체 크롤링해서 모든 페이지 URL 리스트 만들어줘"
→ 사이트맵 자동 생성

🤖 복잡한 자동화

"해커뉴스 로그인하고 내 karma 점수 확인해줘"
→ Claude Computer Use가 브라우저 직접 조작

설치하기 전에 – 준비물

자, 이제 직접 설치해볼게요. 필요한 것들:

Node.js v14 이상 (npx 사용을 위해)
Claude Code (설치되어 있어야 함)
Hyperbrowser API 키 (무료 플랜 있음)

API 키 발급받기

Hyperbrowser 공식 사이트 접속
무료 계정 생성
Dashboard에서 API 키 복사

💡 팁: 무료 플랜도 월 1000건 정도 가능해요. 테스트하기엔 충분!

Claude Code에 Hyperbrowser 설치하기 (2026년 1월 기준)

설치 방법은 크게 두 가지예요.

방법 1: CLI 명령어로 바로 추가 (추천!)

터미널에서 이 한 줄이면 끝:

claude mcp add hyperbrowser -e HYPERBROWSER_API_KEY=YOUR-API-KEY -- npx -y hyperbrowser-mcp

⚠️ YOUR-API-KEY 부분에 발급받은 API 키를 넣으세요!

이게 뭘 하는 거냐면:

claude mcp add → Claude Code에 MCP 서버 등록
hyperbrowser → 서버 이름 (나중에 이 이름으로 관리)
-e HYPERBROWSER_API_KEY=... → 환경변수로 API 키 전달
npx -y hyperbrowser-mcp → 서버 실행 명령어

설치 확인:

claude mcp list

결과에 hyperbrowser가 보이면 성공!

방법 2: 설정 파일 직접 수정

CLI가 싫거나, 여러 MCP 서버를 한 번에 관리하고 싶다면 이 방법:

~/.claude/mcp.json 파일을 열고 (없으면 생성):

{
  "mcpServers": {
    "hyperbrowser": {
      "command": "npx",
      "args": ["-y", "hyperbrowser-mcp"],
      "env": {
        "HYPERBROWSER_API_KEY": "YOUR-API-KEY"
      }
    }
  }
}

저장 후 Claude Code 재시작!

방법 3: Claude Desktop 사용 시

Claude Code가 아니라 Claude Desktop 앱을 쓴다면:

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

동일한 JSON 형식으로 추가하면 돼요.

설치 확인 및 트러블슈팅

연결 상태 확인

# 등록된 MCP 서버 목록 확인
claude mcp list

# 특정 서버 상세 정보
claude mcp get hyperbrowser

흔한 문제들

❌ “MCP server not found” → Claude Code 재시작 또는 터미널 새로 열기

❌ “API key invalid” → API 키에 따옴표 포함 여부 확인, 공백 없는지 확인

❌ “npx: command not found” → Node.js 설치 확인 (node -v로 테스트)

MCP 서버 관리 명령어

# 서버 제거
claude mcp remove hyperbrowser

# 서버 수정 (API 키 변경 등)
claude mcp add hyperbrowser -e HYPERBROWSER_API_KEY=NEW-KEY -- npx -y hyperbrowser-mcp --overwrite

주요 기능 & 도구 정리

Hyperbrowser MCP가 제공하는 핵심 도구들:

1) 웹 스크래핑 (scrape_webpage)

단일 페이지의 콘텐츠를 가져와요.

사용자: "https://news.ycombinator.com 페이지 스크래핑해줘"

Claude: [Hyperbrowser scrape_webpage 호출]
→ 결과: HTML을 마크다운으로 변환해서 반환

지원 출력 형식:

Markdown (기본값)
HTML
Links (링크만 추출)
Screenshot (스크린샷 캡처)

2) 구조화된 데이터 추출 (extract_structured_data)

지저분한 웹페이지에서 딱 원하는 데이터만 JSON으로 뽑아줘요.

사용자: "이 쇼핑몰 페이지에서 제품명, 가격, 평점만 추출해줘"

Claude: [extract_structured_data 호출]
→ 결과:
[
  {"name": "RTX 4090", "price": "2,199,000원", "rating": 4.8},
  {"name": "RTX 4080", "price": "1,599,000원", "rating": 4.7}
]

이게 진짜 강력한 게, 프롬프트로 스키마 정의하면 알아서 맞춰줘요.

3) 웹 크롤링 (crawl_webpages)

여러 페이지를 연결해서 탐색해요.

사용자: "https://example.com 사이트 전체 크롤링해서 모든 페이지 URL 추출해"

Claude: [crawl_webpages 호출, maxPages: 50]
→ 결과: 사이트 내 50개 페이지의 URL + 각 페이지 제목

옵션:

maxPages – 최대 크롤링 페이지 수
followLinks – 외부 링크 포함 여부

4) Claude Computer Use (브라우저 자동화)

Anthropic의 Claude Computer Use와 연동되면, Claude가 직접 브라우저를 조작할 수 있어요.

사용자: "해커뉴스에 로그인하고 내 프로필 페이지 스크린샷 찍어줘"

Claude: [claude_computer_use_agent 호출]
→ 실제로 브라우저를 열고, 로그인 폼 입력, 클릭, 네비게이션
→ 스크린샷 반환

🚨 주의: Computer Use는 API 비용이 더 들어요. 간단한 스크래핑은 scrape 도구로!

5) 프로필 관리

브라우저 세션을 유지해야 할 때 (로그인 상태 유지 등):

# 프로필 생성
"새 브라우저 프로필 'my-session'으로 만들어줘"

# 같은 프로필로 작업
"'my-session' 프로필로 이 페이지 열어줘"
→ 이전 로그인 세션 유지!

# 프로필 삭제
"'my-session' 프로필 삭제해줘"

6) 웹 검색 (search)

Bing 검색 API를 통한 웹 검색:

사용자: "2026년 최신 AI 트렌드 검색해줘"

Claude: [search 도구 호출]
→ Bing 검색 결과 상위 10개 반환

실전 예제 모음

자, 이론은 충분하고 실제로 해보죠!

예제 1: 해커뉴스 Top 5 가져오기

사용자: "해커뉴스 첫 페이지에서 상위 5개 게시글 제목과 점수 알려줘"

Claude 응답:
[Hyperbrowser scrape 호출 → extract_structured_data]

| 순위 | 제목 | 점수 |
|------|------|------|
| 1 | Show HN: I built an AI code editor | 342 |
| 2 | The future of programming in 2026 | 289 |
| 3 | Why Rust is winning | 256 |
| 4 | Google announces Gemini 3 | 231 |
| 5 | New JavaScript runtime benchmark | 198 |

예제 2: 블로그 글 전문 가져와서 요약

사용자: "이 블로그 글 스크래핑해서 3줄로 요약해줘"
URL: https://example.com/article/ai-trends-2026

Claude:
1. [scrape_webpage]로 전문 가져오기
2. 마크다운 변환
3. 요약 생성

결과:
"2026년 AI 트렌드 핵심 3가지:
1. 에이전트 AI의 폭발적 성장
2. 멀티모달 모델의 일상화  
3. 프라이빗 AI 서버의 증가"

예제 3: 경쟁사 가격 모니터링

사용자: "쿠팡에서 'RTX 4090' 검색해서 상위 5개 상품 가격 비교표 만들어줘"

Claude:

[crawl_webpages로 검색 결과 → extract_structured_data]

| 판매처 | 상품명 | 가격 | 배송 | |——–|——–|——|——| | A샵 | ASUS ROG RTX 4090 | 2,180,000 | 무료 | | B샵 | MSI Gaming RTX 4090 | 2,220,000 | 무료 | | C샵 | Gigabyte RTX 4090 | 2,150,000 | 3,000 | …

예제 4: 웹사이트 사이트맵 자동 생성

사용자: "내 포트폴리오 사이트 (portfolio.com) 전체 구조 분석해줘"

Claude:

[crawl_webpages maxPages: 100]

📁 사이트 구조: ├── / (홈) ├── /about ├── /projects │ ├── /projects/project-1 │ ├── /projects/project-2 │ └── /projects/project-3 ├── /blog │ ├── /blog/post-1 │ └── /blog/post-2 └── /contact 총 11개 페이지, 23개 내부 링크 발견

예제 5: Claude Computer Use로 복잡한 자동화

사용자: "LinkedIn에 로그인해서 오늘 나온 AI 관련 게시글 3개 스크린샷 찍어줘"

Claude:

[claude_computer_use_agent 호출]

1. LinkedIn 페이지 열기 2. 로그인 페이지로 이동 3. 이메일/비밀번호 입력 (환경변수에서 가져옴) 4. 로그인 클릭 5. 검색창에 “AI” 입력 6. 최신순 정렬 7. 상위 3개 게시글 각각 스크린샷 결과: 3개의 스크린샷 이미지 반환

고급 옵션: 스텔스 모드 & 프록시

웹사이트가 봇을 차단할 때 유용한 옵션들:

스텔스 모드

사용자: "이 사이트 스텔스 모드로 스크래핑해줘"

→ Hyperbrowser가 자동으로:
   - User-Agent 랜덤화
   - Headless 감지 우회
   - 인간처럼 지연 시간 추가

CAPTCHA 자동 해결

일부 플랜에서는 CAPTCHA를 자동으로 풀어줘요:

→ reCAPTCHA 발견
→ 자동 해결 시도
→ 성공 시 계속 진행

프록시 설정

지역 제한 콘텐츠 접근이나 IP 차단 우회:

세션 옵션:
- proxyUrl: "http://your-proxy:8080"
- proxyCountry: "US"

비용과 플랜 (2026년 1월 기준)

Hyperbrowser 가격 정책:

플랜	월 요청	가격	특이사항
Free	1,000건	$0	기본 스크래핑만
Starter	10,000건	$29/월	스텔스 모드
Pro	50,000건	$99/월	CAPTCHA 해결
Enterprise	무제한	협의	전용 인프라

💡 경험담: 개인 프로젝트는 Free 플랜으로 충분했어요. 하루 30-40건 정도 쓰면 한 달 넉넉!

다른 MCP 서버와 비교

Hyperbrowser만 있는 게 아니에요. 비슷한 MCP 서버들:

MCP 서버	장점	단점
Hyperbrowser	Claude Computer Use 내장, CAPTCHA 해결	가격대 있음
Firecrawl	심플함, 마크다운 변환 우수	자동화 기능 약함
Browser Automation	무료, 로컬 Chrome 사용	설정 복잡
Playwright MCP	세밀한 제어 가능	코딩 필요

개인적으로 Hyperbrowser를 선택한 이유:

설치 간편함 – npx 한 줄이면 끝
Claude Computer Use 통합 – 복잡한 자동화 가능
안정성 – 클라우드 인프라라 내 컴퓨터 리소스 안 먹음

자주 묻는 질문 (FAQ)

Q1. Hyperbrowser 무료로 써도 되나요?

네! Free 플랜으로 월 1,000건 가능해요. 테스트 용도로는 충분합니다.

Q2. 법적으로 문제 없나요?

웹 스크래핑 자체는 합법이에요. 다만:

robots.txt 준수 권장
개인정보 수집 주의
서비스 약관 확인 필수

Q3. 로그인 정보는 어떻게 관리하나요?

환경변수나 프로필에 저장할 수 있어요. Claude Code 세션에만 존재하므로 상대적으로 안전해요. 다만 민감한 정보는 항상 신중하게!

Q4. Claude Code 말고 다른 데서도 되나요?

네! Claude Desktop, Cline, Cursor 등 MCP 지원하는 클라이언트면 다 돼요.

Q5. 속도가 느린데요?

스크래핑 대상 사이트와 네트워크 상황에 따라 달라요. 팁:

불필요한 리소스(이미지 등) 비활성화
필요한 데이터만 추출하도록 프롬프트 최적화

Q6. JavaScript로 렌더링되는 페이지도 되나요?

네! Hyperbrowser는 헤드리스 브라우저를 사용하므로 동적 콘텐츠도 처리할 수 있어요.

Q7. API 키가 노출되면 어떡하죠?

Hyperbrowser 대시보드에서 즉시 키 재발급 가능해요. 가급적 환경변수로 관리하세요.

마무리: 써볼 만한가?

솔직히 말하면, Claude Code + Hyperbrowser 조합은 진짜 생산성 치트키예요.

예전엔 Python으로 BeautifulSoup 세팅하고, Selenium 드라이버 맞추고, 에러 디버깅하고… 반나절 걸렸던 게 이젠 자연어 한 마디로 끝나요.

“이 페이지 스크래핑해줘” – 끝.

물론 한계도 있어요:

복잡한 인증이 필요한 사이트는 까다로움
API 비용이 쌓일 수 있음
100% 성공률은 아님 (웹사이트 구조에 따라)

그래도 코딩 없이 웹 데이터를 가져와서 분석하고 싶다면, 이만한 게 없어요.

저도 처음엔 “MCP가 뭐야?” 했는데, 지금은 Hyperbrowser 없이 Claude Code 쓰는 게 상상이 안 돼요.

한번 시작해보세요. 5분이면 첫 스크래핑 성공하실 거예요.

궁금한 거 있으면 댓글 남겨주세요!

참고 자료

🏷️ 태그: #ClaudeCode #Hyperbrowser #MCP #웹스크래핑 #AI자동화 #개발자도구