Playwright MCP 서버 설정 — 클로드로 브라우저 자동화 (2026)

Playwright MCP 서버는 클로드가 실제 웹 브라우저를 열어 페이지를 이동·클릭·입력하도록 해 주는 마이크로소프트의 공식 서버입니다. 특이한 점은 화면 픽셀이 아니라 접근성 트리(accessibility tree) — 즉 페이지의 구조화된 정보 — 를 사용해 더 안정적으로 자동화한다는 점입니다.

무엇을 할 수 있나

페이지 열기, 링크·버튼 클릭, 양식 입력, 화면 상태 읽기 같은 브라우저 작업을 도구로 제공합니다. 덕분에 "이 사이트에서 정보 찾아서 정리해줘" 같은 요청을 클로드가 실제 브라우저로 수행할 수 있습니다.

준비물

Node.js 18 이상이 필요합니다. 공식 안내 기준 호환 클라이언트에는 Claude Desktop을 비롯해 VS Code, Cursor, Windsurf, Goose 등이 포함됩니다.

설정 방법

가장 간단한 방법은 npx로 실행하는 것입니다. claude_desktop_config.json 예시는 다음과 같습니다.

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

설치 명령 자체는 npx @playwright/mcp@latest 한 줄입니다. Claude Code에서 쓰려면 Claude Code MCP 설정을 참고해 등록하세요.

Claude in Chrome과 무엇이 다른가

클로드에는 이미 브라우저를 다루는 기능(Claude in Chrome)이 있습니다. 차이를 간단히 말하면, Playwright MCP는 개발·자동화용 독립 서버로 어떤 MCP 클라이언트에서나 쓸 수 있고, 스크립트·테스트 같은 반복 작업에 맞습니다. 일상적인 웹 탐색은 기존 기능이, 재현 가능한 자동화는 Playwright MCP가 어울립니다.

써보기

"이 페이지 열어서 표 내용 읽어줘", "검색창에 키워드 넣고 첫 결과 제목 가져와줘"처럼 요청하면, 클로드가 승인을 물은 뒤 브라우저로 작업합니다.

안전하게 · 문제해결

브라우저를 직접 조종하므로, 로그인된 세션이나 민감한 사이트에서 무엇을 하도록 허용하는지 신중히 보세요(MCP 커넥터 보안). 공식 README에도 보안(Security) 항목이 있습니다. 서버가 안 보이면 문제해결 가이드를 참고하세요.

다른 커넥터도 찾고 있다면 커넥터 디렉토리에서 자주 쓰는 커넥터를 용도별로 검색·필터해볼 수 있습니다.

관련 글

다른 서버는 Filesystem 서버와 GitHub MCP 서버, 용도별 추천은 추천 MCP 서버, 전체 지도는 커넥터·MCP 카탈로그, 직접 만들려면 MCP 서버 직접 만들기를 보세요. 공식 출처는 microsoft/playwright-mcp입니다.

작성·기준: 2026년 6월, 2026년 9월 9일 공식 저장소 README 재대조(Node.js 18+·npx 설정·호환 클라이언트 동일, npm 최신 0.0.80). 패키지·옵션은 공식 저장소를 기준으로 했으며 버전에 따라 바뀔 수 있으니 실제 설정 시 공식 문서를 함께 확인해 주세요. 이 글은 비공식 안내입니다.