본문으로 바로가기
TILNOTE

Claude Code에서 Browser MCP 설정 및 사용 가이드

T
tilnote
•조회수 149

Claude Code에서 Browser MCP 설정 및 사용 가이드

📌 Browser MCP란?

Browser MCP는 AI 애플리케이션(Claude, Cursor, VS Code 등)이 브라우저를 제어할 수 있게 해주는 도구입니다. 웹 자동화, 테스트, 반복 작업을 AI의 도움으로 수행할 수 있습니다.

🚀 설치 과정

1. 사전 준비

  • Node.js 설치 (npm 포함)

  • Claude Code 설치

  • Chrome 브라우저

2. Chrome 확장 프로그램 설치

  1. Browser MCP 공식 사이트 방문

  2. Chrome 확장 프로그램 설치

3. Claude Code에 MCP 서버 추가

방법 1: 명령어 사용 (Windows에서는 문제 있을 수 있음)

# 프로젝트별 설정
claude mcp add browsermcp -s project -- npx @browsermcp/mcp@latest

방법 2: 설정 파일 직접 편집 (권장)

프로젝트 루트에 .mcp.json 파일 생성:

macOS/Linux:

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }
}

Windows:

{
  "mcpServers": {
    "browsermcp": {
      "command": "cmd",
      "args": ["/c", "npx", "@browsermcp/mcp@latest"],
      "env": {
        "BROWSER_MCP_PORT": "3000"
      }
    }
  }
}

⚠️ Windows 필수 사항: cmd /c 래퍼가 필요합니다!

4. 설정 확인

# Claude Code에서
/mcp

정상적으로 설정되었다면 browsermcp가 목록에 표시됩니다.

💡 사용 예시

기본 사용법

"브라우저를 열어서 example.com으로 이동해줘"
"현재 페이지의 스크린샷을 찍어줘"
"이 폼을 자동으로 채워줘"

고급 활용

  • 웹사이트 테스트 자동화

  • 데이터 수집 및 스크래핑

  • UI 테스트 시나리오 실행

🔒 보안 주의사항

1. 텔레메트리

  • Chrome 확장 프로그램이 사용 데이터를 수집합니다

  • PostHog, Amplitude로 전송됨

2. 권한

  • 브라우저 완전 제어 권한 부여

  • 민감한 사이트에서는 사용 금지 (은행, 비밀번호 관리자 등)

3. 안전한 사용법

  • 별도의 Chrome 프로필 사용:

{
  "mcpServers": {
    "browsermcp-test": {
      "command": "cmd",
      "args": ["/c", "npx", "@browsermcp/mcp@latest"],
      "env": {
        "BROWSER_MCP_PORT": "3000",
        "BROWSER_PROFILE": "TestProfile"
      }
    }
  }
}

🛠️ 문제 해결

"npx -y" 오류

Windows에서 -y 옵션이 작동하지 않을 때:

  • 설정 파일에서 -y 제거

  • 또는 전역 설치 후 사용

MCP 서버가 보이지 않을 때

  1. 설정 파일 위치 확인

    • 프로젝트: [프로젝트폴더].mcp.json

    • 사용자: C:Users[사용자명].claude.json

  2. Claude Code 재시작

  3. /doctor 명령으로 진단

Windows 경고 메시지

"Windows requires 'cmd /c' wrapper to execute npx" 경고가 나타나면:

  • command를 "cmd"로 변경

  • args에 ["/c", "npx", ...] 형식 사용

🎯 대안

더 안전하거나 투명한 대안들:

  1. Playwright MCP (Microsoft)

    • 더 검증된 솔루션

    • 오픈소스

  2. browser-use-mcp-server

    • Puppeteer 기반

    • 소스 코드 공개

  3. MCP Inspector

    • MCP 서버 디버깅 도구

    • 브라우저 기반 UI

📚 참고 자료

주의: 이 도구는 강력한 브라우저 제어 권한을 가지므로, 신뢰할 수 있는 환경에서만 사용하고 민감한 정보를 다루는 사이트에서는 사용을 피하세요.

#Browser MCP#웹 자동화#Claude Code#보안 주의사항#설치 가이드