Playwright MCP 실전 4편: vs 클라우드 브라우저 MCP — 뭘 써야 하나? 2026년 선택 기준 완전 정리

시리즈 1~3편으로 Playwright MCP를 완전히 익혔다면, 이제 진짜 질문이 남는다. "그래서 Playwright MCP 말고 Hyperbrowser, Browserbase, Stagehand 같은 클라우드 서버는 언제 써야 하나?" 2026년 기준 브라우저 MCP 생태계는 5개 이상의 선택지로 분화됐다. 잘못 고르면 몇 주를 날린다. 이번 편에서 기준을 완전히 잡아준다.

---

핵심 요약

→ Playwright MCP — 무료, 로컬, 가장 성숙, E2E 테스트·개발 QA 루프의 기본값
→ Hyperbrowser MCP — YC 투자, 봇 감지 우회·CAPTCHA 자동 해결 특화, 크레딧 기반 요금, 접속 시간 692ms로 가장 빠름
→ Browserbase + Stagehand — 관리형 클라우드 인프라 + AI 프리미티브(act/extract/observe), 셀프 힐링, 월 $39~
→ DOM 기반(Playwright/Stagehand/Browserbase) vs 비전 기반(Anthropic CU/OpenAI CUA) — 공통 태스크 성공률 12~17%p 차이로 DOM 우세
→ 월 100 브라우저 시간 미만은 자체 호스팅 Playwright가 비용 승리, 초과 시 클라우드 유리
→ Shadow DOM 많은 앱 → playwriter 포크, Cloudflare 봇 막힘 → Browserbase/Hyperbrowser, 멀티 사이트 AI 에이전트 → Browser Use
→ 결론 한 줄: Playwright MCP로 시작, 막히는 순간 클라우드로 전환

---

1. 2026년 브라우저 MCP 지형도

# 2026년 브라우저 자동화 스택 5가지

① Playwright MCP (Microsoft 공식)
   자체 호스팅 · 무료 · 접근성 트리 · E2E 테스트 표준

② Hyperbrowser MCP
   클라우드 · 스텔스 특화 · CAPTCHA 자동 해결 · YC 투자

③ Browserbase + Stagehand
   관리형 클라우드 인프라 · AI 프리미티브 · 셀프 힐링 셀렉터

④ Browser Use
   완전 자율 에이전트 · 오픈소스 · 높은 추상화

⑤ Anthropic Computer Use / OpenAI CUA
   비전 기반 · 스크린 픽셀 조작 · Canvas/WebGL 전용

각 도구는 "더 낫다"가 아니라 다른 문제를 푼다.

---

2. Playwright MCP — 기본값, 무료, 자체 호스팅

장점
✅ 완전 무료 (토큰 비용만 발생)
✅ 30,000+ GitHub Star, 가장 성숙한 생태계
✅ VS Code, Cursor, Claude Desktop, Claude Code 기본 통합
✅ 접근성 트리 기반 — 상호작용당 2~5KB (스크린샷 500KB 대비)
✅ 34개 도구 내장, CI 파이프라인 통합 용이
✅ Firefox, WebKit, Chromium 크로스 브라우저 지원

단점
❌ 봇 감지 우회 기능 없음 (Cloudflare, Akamai 등에서 차단됨)
❌ CAPTCHA 자동 해결 불가
❌ Shadow DOM 앱에서 요소 불가시 현상
❌ 인프라 관리는 내가 해야 함
❌ 동시 1,000+ 세션 운용 시 서버 직접 확장 필요

// 설치 — 한 줄
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@1.50.0"]
    }
  }
}

언제 써야 하나: 개발 QA 루프, E2E 테스트 생성, 내부 앱 자동화, CI 파이프라인. 외부 사이트 스크래핑이 아닌 이상 90% 케이스는 여기서 끝난다.

---

3. Hyperbrowser MCP — 봇 감지 우회 특화

Hyperbrowser는 10,000개 이상의 동시 브라우저를 지원하고 서브밀리세컨드 레이턴시와 99.9% 업타임을 제공하는 클라우드 브라우저 인프라다. YC 투자를 받은 AI 에이전트 전용 플랫폼으로, 봇 감지 우회에 특화됐다.

핵심 기능
✅ 스텔스 모드 — User-Agent, Canvas, WebGL 핑거프린트 무작위화
✅ CAPTCHA 자동 해결 내장
✅ 주거용 프록시 로테이션 (지역 타겟팅 포함)
✅ 세션 연결 속도 692ms (경쟁사 대비 최고 빠름)
✅ Claude Computer Use, OpenAI CUA 등 브라우저 에이전트 직접 연동
✅ Python·Node.js SDK 동기/비동기 모두 지원

단점
❌ 크레딧 기반 유료 모델 (브라우저 시간당 과금)
❌ AIMultiple 벤치마크 기준 평균 성공률 60% — 타 도구 대비 낮음
❌ E2E 테스트 도구로는 부적합

// 설치 — API 키 필요 (hyperbrowser.ai에서 발급)
{
  "mcpServers": {
    "hyperbrowser": {
      "command": "npx",
      "args": [
        "@hyperbrowserai/mcp",
        "YOUR-HYPERBROWSER-API-KEY"
      ]
    }
  }
}

# Smithery로 Claude Desktop 자동 설정
npx -y @smithery/cli install @hyperbrowserai/mcp --client claude

제공 도구

scrape_webpage          → 쿠키 배너·CAPTCHA·페이월 자동 처리 후 마크다운 추출
crawl_webpages          → 중첩 URL 크롤링
search_web              → 커스텀 파라미터 웹 검색
browser_use_agent       → Browser Use 에이전트 실행
openai_cua_agent        → OpenAI CUA 에이전트 실행
claude_computer_use     → Anthropic Claude Computer Use 실행
extract_structured_data → 복잡한 페이지에서 구조화 데이터 추출

언제 써야 하나: Cloudflare로 막힌 외부 사이트 스크래핑, CAPTCHA가 있는 자동화, 대규모 동시 세션 운용.

---

4. Browserbase + Stagehand — AI 프리미티브 + 관리형 인프라

Browserbase는 서버리스 브라우저 인프라를 제공하고 세션 할당, 브라우저 버전 업데이트, 인프라 유지보수를 자동으로 처리해 팀이 DevOps 작업 없이 수 분 내에 자동화를 시작할 수 있게 한다.

Stagehand는 그 위에 올라가는 AI 프레임워크다.

Stagehand 핵심 프리미티브 3개

act("로그인 버튼 클릭")          → 자연어 액션 실행
extract("현재 페이지의 상품 목록") → 구조화 데이터 추출
observe("어떤 요소가 보이나?")    → 페이지 상태 파악

// Stagehand 코드 패턴 — 결정론적 코드 + AI를 섞는 방식
import { Stagehand } from "@browserbasehq/stagehand";

const stagehand = new Stagehand({
  env: "BROWSERBASE",  // 클라우드 실행
  apiKey: process.env.BROWSERBASE_API_KEY,
});

await stagehand.init();
const page = stagehand.page;

// 알고 있는 경로 → 결정론적 Playwright
await page.goto("https://app.example.com");

// 모르는 UI → 자연어 AI
await stagehand.act("로그인 버튼을 찾아서 클릭해줘");

// 데이터 추출 → AI가 구조 파악
const products = await stagehand.extract("상품 이름과 가격 목록");

await stagehand.close();

셀프 힐링 — Stagehand v3의 핵심
→ DOM 구조 바뀌면 자동 재탐색 (셀렉터 깨짐 없음)
→ 한 번 발견한 경로는 캐싱 → 이후 실행은 LLM 없이 재사용 (비용·속도 최적화)

요금
Browserbase 기본: $39/월
→ 100 브라우저 시간 이하라면 자체 Playwright보다 비쌈
→ 100시간 초과, 인프라 관리 인력 없을 때 역전

언제 써야 하나: UI가 자주 바뀌는 외부 사이트, 셀렉터 유지보수 비용이 높은 SaaS 자동화, 클라우드 네이티브 에이전트 시스템.

---

5. DOM 기반 vs 비전 기반 — 선택 원칙

# 2026년 브라우저 에이전트 성능 비교

DOM 기반 (Playwright/Stagehand/Browserbase)
→ 공통 태스크 성공률: 높음
→ 토큰 효율: 2~5KB/상호작용
→ 속도: 빠름
→ 한계: Canvas, WebGL, 이미지 기반 UI 처리 불가

비전 기반 (Anthropic CU / OpenAI CUA)
→ 공통 태스크 성공률: DOM 대비 12~17%p 낮음
→ 토큰 효율: 500KB~2MB/상호작용 (스크린샷)
→ 속도: 느림 (이미지 해석 시간)
→ 강점: Canvas 앱, WebGL, 이미지 기반 UI, 봇 감지 우회 불가능한 사이트

비전 기반은 "더 나쁜 게 아니라 DOM이 아예 안 되는 상황에서만 쓰는 것"이다.

---

6. 전체 선택 가이드

# 어떤 도구를 써야 하나? 플로우차트

내 앱 / 내부 도구 자동화
└── Playwright MCP ✅ (무료, 빠름, CI 통합)

외부 사이트 스크래핑
├── 봇 감지/CAPTCHA 있음?
│   ├── YES → Hyperbrowser MCP 또는 Browserbase
│   └── NO  → Playwright MCP ✅
│
├── 페이지 구조 자주 바뀜?
│   ├── YES → Stagehand (셀프 힐링)
│   └── NO  → Playwright MCP ✅
│
└── 완전 자율 에이전트 필요?
    └── Browser Use (오픈소스, 높은 추상화)

Canvas / WebGL / 이미지 UI
└── Anthropic Computer Use 또는 OpenAI CUA

Shadow DOM 많은 앱
└── playwriter 포크 (shadow root 관통)

월 100+ 브라우저 시간 동시 운용
└── Browserbase 또는 Hyperbrowser (클라우드 규모)

---

7. 전체 도구 비교표

항목 Playwright MCP Hyperbrowser MCP Browserbase+Stagehand Browser Use

비용	무료	크레딧 과금	$39/월~	무료(오픈소스)
호스팅	로컬	클라우드	클라우드	로컬/클라우드
봇 감지 우회	❌	✅	일부 ✅	❌
CAPTCHA 해결	❌	✅	일부 ✅	❌
Shadow DOM	❌	✅	✅	✅
셀프 힐링	❌	❌	✅ (Stagehand v3)	✅
CI 통합	✅	△	△	△
크로스 브라우저	✅	Chromium만	Chromium만	Chromium만
인프라 관리	직접	불필요	불필요	직접
GitHub Star	30,000+	2,000+	7,000+	10,000+
토큰 효율	높음	높음	높음	낮음

---

8. 실전 조합 — 같이 쓰기

MCP 서버는 여러 개를 동시에 등록하고 상황에 따라 AI가 골라 쓰게 할 수 있다.

// claude_desktop_config.json — 두 서버 동시 등록
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@1.50.0"]
      // 내부 앱, E2E 테스트, 기본 자동화
    },
    "hyperbrowser": {
      "command": "npx",
      "args": ["@hyperbrowserai/mcp", "YOUR-API-KEY"]
      // CAPTCHA/봇 감지 막히는 외부 사이트
    }
  }
}

# 사용 예시
"내 localhost:3000 앱 로그인 플로우 테스트해줘"
→ Claude가 playwright 선택 (로컬, 빠름, 무료)

"amazon.com에서 MacBook Air M4 가격 긁어줘"
→ Claude가 hyperbrowser 선택 (봇 감지 우회 필요)

---

✅ 시리즈 전체 요약

✅ 1편 — Playwright MCP 설치 + Claude Desktop/Cursor/VS Code 연결 https://cell-devlog.tistory.com/277
✅ 2편 — 자연어 스크래핑·폼 자동화·로그인 세션 영구 유지 https://cell-devlog.tistory.com/278
✅ 3편 — 에러 핸들링·샤딩·Docker·GitHub Actions CI 파이프라인 https://cell-devlog.tistory.com/279
✅ 4편 — 클라우드 브라우저 MCP 생태계 비교 + 상황별 선택 기준 https://cell-devlog.tistory.com/280

 

결론: Playwright MCP로 시작해서 막히는 순간 클라우드로 이동하라. 처음부터 유료 클라우드 쓸 필요 없다.