개발자를 위한 MCP 추천(3-1) - Playwright MCP 설치 및 사용방법 : 자연어로 브라우저를 조종한다, 코드 없이 웹 자동화

2026년 3월 · 개발자를 위한 MCP 추천 시리즈

"MCP가 죽었다"말도 나오는데, 그래도 현시점 쓸만한 MCP 10개

2025년에 썼던 개발자용 MCP 시리즈들이, 이제 상당 부분 구버전이 됐다.
생태계가 빠르게 변했고, 새로 등장한 도구들도 많다.
2026년 3월, 다시 한번 실제로 써보고 쓸 만한 것들만 골라 정리해려고 한다.

이 시리즈를 다시 쓰는 이유

지난 2월 말, 필자가 "MCP는 죽었다, CLI 만세 — Eric Holmes의 도발적 주장"이라는 글을 정리한 적이 있다. Eric Holmes가 주장한 핵심은 간단하다. LLM은 이미 CLI에 능숙하다. 그렇다면 MCP라는 별도의 추상 계층이 굳이 필요한가?

실제로 Claude Code 환경에서 MCP 대신 CLI로 해결되는 경우가 꽤 많다. 디버깅도 쉽고, 별도 프로세스 관리도 없고, 기존 인증도 그대로 쓸 수 있다. 그 글에서 공감하신 분들이 많았다.
그럼에도 불구하고, MCP만이 줄 수 있는 가치가 분명히 존재한다.

안녕하세요! 갓대희 입니다.

오늘은 개발자를 위한 MCP 시리즈를 계속 이어나가려 한다. 이번에는 Playwright MCP의 2026년 최신 설치 및 활용법을 정리해보겠다.

 

Playwright MCP 핵심 정리
Playwright MCP는 Claude 같은 LLM이 자연어 명령으로 실제 브라우저를 직접 제어할 수 있게 해주는 도구다. 스크린샷 대신 접근성 트리(Accessibility Tree)를 활용하여 빠르고 정확하게 웹을 자동화한다. Microsoft가 공식 제공하는 @playwright/mcp 패키지와 커뮤니티 패키지인 @executeautomation/playwright-mcp-server 두 가지가 주로 쓰인다.

목차

1. Playwright MCP란?
2. 설치 방법 (Claude Code / Claude Desktop)
3. 주요 Tools 소개
4. 활용 예시
5. CLI 직접 사용과의 비교
6. 주의사항 및 트러블슈팅
7. 개발자 커뮤니티 반응
8. 결론

1. Playwright MCP란?

Playwright는 Microsoft가 만든 브라우저 자동화 라이브러리다. 기존에는 개발자가 직접 JavaScript/TypeScript 코드를 작성해 브라우저를 제어했다면, Playwright MCP는 Claude 같은 AI 모델이 자연어 명령으로 Playwright를 직접 조작할 수 있게 해주는 MCP 서버다.

예를 들어 "GitHub에 접속해서 내 레포지토리 목록을 확인해줘"라고 말하면, Claude가 실제로 브라우저를 열고 해당 작업을 수행한다. 테스트 자동화, 데이터 수집, UI 검증 등 반복 작업을 자연어 한 문장으로 처리할 수 있는 것이다.

 

접근성 트리(Accessibility Tree) 기반 동작 방식

Playwright MCP의 핵심 특징은 스크린샷이 아닌 접근성 트리를 통해 페이지를 이해한다는 점이다. 접근성 트리는 웹 페이지의 구조적 정보(버튼, 링크, 입력창 등)를 텍스트 형태로 표현한 것으로, LLM이 이를 읽어 어떤 요소를 클릭하거나 입력해야 하는지 판단한다.

왜 접근성 트리인가?
스크린샷 기반 방식은 이미지를 분석해야 해서 느리고 토큰 소모가 크다. 접근성 트리 방식은 구조화된 텍스트를 바로 처리하므로 훨씬 빠르고 정확하다. 시각적으로 숨겨진 요소나 동적으로 생성된 콘텐츠도 정확히 파악할 수 있다.

 

Snapshot 모드 vs Vision 모드

Playwright MCP는 두 가지 동작 모드를 제공한다:

구분	Snapshot 모드 (기본)	Vision 모드
동작 방식	접근성 트리 분석	스크린샷 + X/Y 좌표
속도	빠름	느림
토큰 소모	적음	많음 (이미지 포함)
적합한 모델	일반 LLM	멀티모달 모델
Canvas/복잡한 UI	제한적	적합
활성화 방법	기본값 (별도 설정 불필요)	--caps vision 플래그 사용

Vision 모드를 활성화하려면 --caps vision 플래그를 사용한다. --vision 플래그는 존재하지 않으니 주의가 필요하다. (출처: microsoft/playwright-mcp GitHub)

# Vision 모드 활성화 예시

npx @playwright/mcp@latest --caps vision

대부분의 경우 기본값인 Snapshot 모드로 충분하다. Canvas 기반 앱이나 시각적 판단이 필요한 경우에만 Vision 모드를 고려하면 된다.

 

2. 설치 방법

2026년 기준으로 Playwright MCP를 설치하는 방법은 크게 세 가지다. Microsoft 공식 패키지인 @playwright/mcp를 기준으로 설명한다. (출처: microsoft/playwright-mcp GitHub, Simon Willison's TIL)

사전 요구사항
Node.js 18 이상, npm이 필요하다. Claude Code 또는 Claude Desktop이 설치되어 있어야 한다.

이전에도 사실 얘기했지만, 요즘 mcp는 자연어로 매우 쉽게 설치 가능하다. 다만 설치 방법 과정도 직접 해보는것도 좋다고 생각한다. 그렇기 떄문에 직접 설치하는 방법들도 남겨 두고, 자연어로 설치하는 방법도 남겨 두려고 한다. 

 

ex) Playwright mcp 설치 해줘. 한마디 이후 직접 세팅이 필요한 부분은 안내를 해주거나, 몇가지는 입력 또는 선택을 요청해가며 설치할 것이다.

 

방법 1: Claude Code 대화형 설치 (권장)

터미널에서 아래 명령어를 실행한다:

# Microsoft 공식 패키지 설치

claude mcp add playwright npx '@playwright/mcp@latest'

또는 Claude Code 내에서 /mcp 슬래시 명령어를 입력해 대화형으로 추가할 수도 있다.

헤드리스(headless) 모드로 설치하려면:

# headless 모드 (브라우저 창이 화면에 표시되지 않음)

claude mcp add playwright npx '@playwright/mcp@latest' --headless

 

방법 2: Claude Code settings.json 직접 설정

Claude Code 설정 파일(~/.claude/settings.json 또는 프로젝트의 .claude/settings.json)에 직접 추가한다:

// ~/.claude/settings.json

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

headed 모드(브라우저 창이 보이는 모드)로 실행하고 싶다면 --headed 플래그를 추가한다:

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

 

방법 3: Claude Desktop 설정

Claude Desktop 설정 파일을 직접 수정한다:

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

// claude_desktop_config.json

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

설정 후 Claude Desktop을 완전히 종료하고 재시작하면 MCP가 연결된다.

Headless vs Headed 모드
Headless: 브라우저가 백그라운드에서 실행된다. 화면에 창이 뜨지 않으므로 CI/CD 환경이나 서버에서 사용하기 적합하다.
Headed: 실제 브라우저 창이 화면에 표시된다. 디버깅하거나 무슨 일이 일어나는지 직접 확인하고 싶을 때 유용하다. 기본값은 headed 모드다.

 

3. 주요 Tools 소개

Playwright MCP는 15개 이상의 Tool을 제공한다. 실무에서 80% 이상의 작업은 아래 핵심 Tool들로 처리된다. (출처: microsoft/playwright-mcp)

실무에서 가장 많이 쓰는 Tool TOP 3

1. browser_navigate — 모든 자동화의 시작점. URL로 이동하는 가장 기본적인 Tool이다.
2. browser_snapshot — 접근성 트리 스냅샷으로 현재 페이지 구조를 파악한다. Snapshot 모드의 핵심이다.
3. browser_click / browser_type — 요소 클릭과 텍스트 입력. 대부분의 상호작용 시나리오에 필수다.

 

네비게이션 및 탭 관리

• browser_navigate — URL로 이동한다. 가장 기본이 되는 Tool이다.
• browser_navigate_back — 브라우저 뒤로 가기
• browser_navigate_forward — 브라우저 앞으로 가기
• browser_tab_new — 새 탭 열기
• browser_tab_close — 현재 탭 닫기

 

상호작용 Tools

• browser_click — 접근성 스냅샷의 요소 참조를 이용해 클릭한다.
• browser_type — 텍스트 입력. 입력창에 텍스트를 입력한다.
• browser_press_key — 키보드 키 누르기 (Enter, Tab, Escape 등)
• browser_select_option — 드롭다운 선택
• browser_hover — 마우스 호버
• browser_handle_dialog — alert, confirm, prompt 같은 다이얼로그 처리

 

캡처 및 상태 확인

• browser_snapshot — 현재 페이지의 접근성 트리 스냅샷을 가져온다. Snapshot 모드의 핵심 Tool이다.
• browser_take_screenshot — 스크린샷을 찍는다. Vision 모드에서 주로 사용한다.
• browser_wait_for — 특정 텍스트나 요소가 나타날 때까지 대기한다.
• browser_pdf_save — 현재 페이지를 PDF로 저장한다.
• browser_evaluate — 브라우저에서 JavaScript를 직접 실행한다.
• browser_close — 브라우저를 닫고 리소스를 정리한다.

 

4. 활용 예시

설치가 끝났다면 바로 써볼 차례다. Claude Code 터미널에서 자연어로 요청하기만 하면 된다. 아래 예시들은 실제 개발 워크플로우에서 자주 발생하는 시나리오를 기준으로 구성했다.

 

예시 1: 웹사이트 스크린샷 캡처 및 분석

가장 기본적인 사용법이다. 특정 웹사이트에 접속해서 현재 상태를 확인하고 싶을 때 사용한다.

사용자: https://github.com/microsoft/playwright-mcp 에 접속해서 페이지 스크린샷을 찍고 README의 주요 내용을 요약해줘

Claude 응답 (요약):

browser_navigate로 페이지에 접속한 뒤, browser_snapshot으로 접근성 트리를 분석했습니다.

README 요약:

• Playwright MCP는 LLM이 Playwright를 통해 웹 브라우저를 제어할 수 있게 하는 서버입니다
• Snapshot 모드(기본)와 Vision 모드 두 가지를 지원합니다
• 15개 이상의 Tool을 제공하며 navigate, click, type 등이 핵심입니다

스크린샷을 screenshot.png로 저장했습니다.

내부적으로 Claude는 다음과 같은 순서로 Tool을 호출한다:

# Claude가 내부적으로 실행하는 Tool 호출 흐름

1. browser_navigate({ url: "https://github.com/microsoft/playwright-mcp" })
2. browser_snapshot()  → 접근성 트리로 페이지 구조 파악
3. browser_take_screenshot()  → 스크린샷 캡처
4. 결과를 분석해서 요약 응답

 

예시 2: 로그인 플로우 자동화 테스트

로컬 개발 서버의 로그인 플로우가 제대로 동작하는지 빠르게 확인하고 싶을 때. E2E 테스트 코드를 작성하기 전에 탐색적으로 먼저 검증하는 용도로 유용하다.

사용자: http://localhost:3000/login 에 접속해서 이메일 입력칸에 test@example.com을 입력하고 비밀번호 칸에 password123을 입력한 뒤 로그인 버튼을 클릭해줘. 그리고 로그인 성공 여부를 확인해줘.

Claude 응답 (요약):

로그인 플로우를 단계별로 실행했습니다:

1. browser_navigate → http://localhost:3000/login 접속 완료
2. browser_snapshot → 페이지 구조 분석: 이메일 입력칸(ref=e3), 비밀번호 입력칸(ref=e5), 로그인 버튼(ref=e7) 확인
3. browser_type(ref=e3, "test@example.com") → 이메일 입력 완료
4. browser_type(ref=e5, "password123") → 비밀번호 입력 완료
5. browser_click(ref=e7) → 로그인 버튼 클릭
6. browser_snapshot → 페이지가 /dashboard로 리다이렉트됨. "환영합니다" 텍스트 확인

결과: 로그인 성공. /dashboard 페이지로 정상 이동하였고 "환영합니다, test@example.com" 메시지가 표시됩니다.

ref= 값이 뭔가요?
browser_snapshot이 반환하는 접근성 트리에는 각 요소에 ref 값이 부여된다. Claude는 이 ref 값으로 어떤 버튼을 클릭할지, 어떤 입력칸에 타이핑할지 식별한다. 개발자가 CSS 셀렉터를 직접 지정할 필요가 없다.

 

예시 3: 폼 작성 자동화 및 PDF 저장

반복적인 폼 입력과 결과 저장 작업을 자동화할 수 있다. 관리자 페이지에서 매번 같은 양식을 채워야 하는 경우에 유용하다.

사용자: https://example-form.com 에 접속해서 이름: 홍길동, 이메일: hong@example.com 으로 폼을 작성하고 제출 버튼을 클릭한 뒤, 완료 페이지를 PDF로 저장해줘

Claude 응답 (요약):

1. 페이지 접속 후 폼 구조 파악 완료 (이름, 이메일, 전화번호, 제출 버튼)
2. 이름 칸에 "홍길동", 이메일 칸에 "hong@example.com" 입력 완료
3. 제출 버튼 클릭 → "제출이 완료되었습니다" 페이지로 이동
4. browser_pdf_save로 완료 페이지를 PDF로 저장했습니다 → form-result.pdf

 

예시 4: 에러 상황 — 요소를 찾지 못할 때

실제로 자동화를 하다 보면 Claude가 요소를 찾지 못하거나 동적 콘텐츠 때문에 실패하는 경우가 있다. 이때 Claude가 어떻게 대처하는지 보자.

사용자: http://localhost:3000/dashboard 에 접속해서 "보고서 생성" 버튼을 클릭해줘

Claude 응답 (요약):

페이지에 접속하여 browser_snapshot으로 구조를 분석했으나, "보고서 생성" 버튼을 찾을 수 없습니다.

현재 페이지에서 확인된 버튼들:

• "대시보드" (ref=e2)
• "설정" (ref=e4)
• "리포트" (ref=e6) ← 이 버튼이 찾으시는 것일 수 있습니다

"리포트" 버튼을 클릭할까요? 또는 페이지를 스크롤해서 더 찾아볼까요?

동적 콘텐츠 대처 팁
SPA(Single Page Application)에서 비동기로 로딩되는 버튼이나 요소는 browser_snapshot 시점에 아직 렌더링되지 않았을 수 있다. 이때는 "잠깐 기다렸다가 다시 스냅샷을 찍어줘" 또는 browser_wait_for로 특정 텍스트가 나타날 때까지 대기하도록 요청하면 된다.

 

예시 5: 경쟁사 모니터링 — 가격 페이지 스크린샷 비교

정기적으로 경쟁사 웹사이트의 변경사항을 모니터링하는 실무 시나리오다.

사용자: https://competitor.com/pricing 에 접속해서 스크린샷을 찍고, 현재 가격 플랜 정보(플랜 이름, 가격, 주요 기능)를 표 형태로 정리해줘

Claude 응답 (요약):

pricing 페이지에 접속하여 스크린샷을 competitor-pricing.png로 저장했습니다. 접근성 트리 분석 결과:

플랜	가격	주요 기능
Starter	$9/월	기본 기능, 5GB 저장소
Pro	$29/월	팀 협업, API 접근, 50GB
Enterprise	문의	SSO, 전용 지원, 무제한

 

5. CLI 직접 사용과의 비교

Playwright MCP 없이도 Playwright CLI를 직접 사용하거나 코드를 작성해서 브라우저를 자동화할 수 있다. 세 가지 접근법의 차이를 비교해보자.

 

Playwright CLI 주요 명령어

# 테스트 실행

npx playwright test                        # 전체 테스트 실행
npx playwright test --headed               # 브라우저 창을 띄우고 실행
npx playwright test --ui                   # 인터랙티브 UI 모드로 실행
npx playwright test tests/login.spec.ts    # 특정 파일만 실행

# 코드 자동 생성 (코드젠) — 브라우저 조작을 녹화해 테스트 코드 생성
npx playwright codegen https://example.com

# 브라우저 설치
npx playwright install chromium

playwright codegen — 자동 코드 생성기
npx playwright codegen https://example.com을 실행하면 브라우저가 열리고, 사용자가 클릭·입력하는 동작을 실시간으로 Playwright 테스트 코드로 변환해준다. MCP와 비슷하게 "직접 조작"하지만, 결과물은 재사용 가능한 테스트 코드다.

 

세 가지 방법 비교

방법	장점	단점	추천 상황
Playwright MCP	자연어 요청으로 즉시 실행, 대화형 피드백	재현성 낮음, 토큰 비용 발생, CI/CD 통합 어려움	탐색적 테스트, 일회성 자동화, 빠른 버그 재현
playwright codegen	코드 자동 생성, 조작이 코드로 변환됨	생성 코드 수정 필요, AI 지원 없음	테스트 코드 초안 작성, 반복 플로우 녹화
Playwright CLI 직접	완전한 제어, 완벽한 재현성	API 학습 필요, 코드 작성 시간 소요	회귀 테스트, CI/CD 파이프라인, 정형화된 E2E

실용적인 3단계 조합 워크플로우
1단계: Playwright MCP로 "이 플로우가 되는지" 자연어로 빠르게 탐색 및 검증
2단계: playwright codegen으로 검증된 플로우를 테스트 코드 초안으로 변환
3단계: 생성된 코드를 다듬어 CI/CD 파이프라인에 통합

MCP로 탐색 → codegen으로 코드화 → CLI로 자동화하는 흐름이 효율적이다.

 

6. 주의사항 및 트러블슈팅

트러블슈팅 1: 브라우저가 열리지 않는 경우

문제: Playwright MCP를 추가했는데 브라우저가 아무것도 하지 않는다.
원인: Node.js 버전이 낮거나, Playwright 브라우저 바이너리가 설치되지 않은 경우
해결:

node --version  # v18 이상인지 확인
npx playwright install chromium  # 브라우저 바이너리 설치

 

트러블슈팅 2: Headed 모드에서 창이 뜨지 않는 경우

문제: --headed 옵션을 줬는데도 브라우저 창이 보이지 않는다.
원인: 디스플레이 환경이 없는 서버, 또는 IDE 워커 프로세스에서 실행되는 경우
해결: --port 플래그로 HTTP transport를 사용하거나, 직접 터미널에서 MCP 서버를 실행해야 한다. Docker 환경에서는 headless 모드만 지원된다. (출처: GitHub Issue #1175)

 

트러블슈팅 3: MCP 서버가 연결 안 되는 경우

문제: Claude가 Playwright Tool을 사용하지 못한다.
원인: 설정 파일 JSON 문법 오류, 또는 Claude Desktop/Code 재시작이 필요
해결:

# Claude Code에서 MCP 상태 확인
claude mcp list

# 또는 /mcp 슬래시 명령어로 상태 확인

 

트러블슈팅 4: 자동화가 중간에 멈추거나 실패하는 경우

팝업, CAPTCHA, 동적 콘텐츠 대처법

• 팝업/모달: browser_handle_dialog Tool로 alert·confirm 다이얼로그를 처리할 수 있다. 그러나 커스텀 UI 팝업은 browser_snapshot으로 구조를 파악한 뒤 직접 클릭해야 한다.
• CAPTCHA: Playwright MCP는 CAPTCHA를 자동으로 풀 수 없다. CAPTCHA가 있는 페이지는 headed 모드에서 수동으로 풀거나, CAPTCHA가 없는 테스트 환경을 별도로 구성해야 한다.
• 동적 콘텐츠/로딩 대기: browser_wait_for Tool로 특정 텍스트나 요소가 나타날 때까지 대기할 수 있다. 예: "로그인 완료" 텍스트가 보일 때까지 기다려줘.

 

트러블슈팅 5: CI/CD 서버 환경에서 사용할 때

Headless 모드가 필수인 환경
디스플레이가 없는 Linux 서버, Docker 컨테이너, GitHub Actions 등 CI/CD 환경에서는 반드시 --headless 플래그를 사용해야 한다. Headed 모드는 디스플레이 서버(X11 등)가 없으면 동작하지 않는다.

설정 예시 (GitHub Actions 또는 Docker 환경):

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

Playwright MCP는 주로 대화형 탐색적 작업에 최적화되어 있다. 반복 재현이 필요한 CI/CD 회귀 테스트에는 직접 작성한 Playwright 테스트 코드가 더 적합하다.

주의사항

• 보안: 실제 계정의 로그인 정보를 Claude에게 전달할 때는 주의가 필요하다. 민감한 환경에서는 테스트 계정을 사용하자.
• 재현성: 자연어 지시는 매번 미묘하게 다르게 해석될 수 있다. 정형화된 테스트가 필요하면 Playwright 코드로 작성해야 한다.
• 비용: 접근성 트리 스냅샷은 토큰을 소모한다. 복잡한 페이지에서 반복 실행하면 비용이 누적될 수 있다.
• Canvas/WebGL: Canvas 기반 애플리케이션은 접근성 트리에 정보가 없어 Snapshot 모드에서 동작이 제한될 수 있다. Vision 모드를 고려하자.

 

7. 개발자 커뮤니티 반응 (2026년 초 기준)

2026년 초 기준으로 Playwright MCP에 대한 개발자 커뮤니티의 반응은 대체로 긍정적이지만, 실무 한계에 대한 현실적인 피드백도 있다.

긍정적 반응

• 탐색적 테스트와 빠른 프로토타이핑에서 진입 장벽을 크게 낮춰준다는 평가가 많다.
• QA 엔지니어들 사이에서 "수동 테스트 작성자로서의 역할을 재고하게 만든다"는 반응이 있으며, AI 테스트 스위트를 오케스트레이션하는 방향으로 역할이 변화하고 있다는 의견이 있다.

실무 한계 지적

• Shadow DOM이 접근성 트리에서 보이지 않아 모던 디자인 시스템과 충돌할 수 있다는 점이 "2026년 AI 테스팅의 조용한 킬러"로 지적되고 있다.
• 26개 이상의 Tool이 제공되지만, Playwright의 모든 메서드를 그대로 노출한 구조라 AI 에이전트에 최적화된 설계는 아니라는 의견도 있다.

(참고: Bug0 - Playwright MCP Changes AI Testing in 2026, Speakeasy - The Playwright Proliferation Problem with MCP, Currents - State of Playwright AI Ecosystem in 2026)

 

8. 결론

Playwright MCP는 브라우저 자동화에 대한 진입 장벽을 대폭 낮춰주는 도구다. 테스트 코드를 직접 작성하지 않아도 자연어로 "이 사이트 접속해서 이렇게 해줘"라고 말하면 AI가 실제로 실행해준다.

이런 분께 추천한다:

• Playwright API를 배우기 전에 빠르게 웹 자동화를 써보고 싶은 분
• 탐색적 테스트나 일회성 스크래핑이 필요한 개발자
• UI 버그를 빠르게 재현하고 확인하고 싶은 QA 담당자
• 경쟁사 사이트 모니터링, 정기적인 스크린샷 비교 등이 필요한 분

Microsoft 공식 패키지인 @playwright/mcp를 사용하는 것이 가장 안정적이며, claude mcp add playwright npx '@playwright/mcp@latest' 한 줄로 바로 시작할 수 있다.

다음 편에서는 Figma MCP를 통해 디자인 파일을 코드로 변환하는 워크플로우를 소개하겠다.

참고 자료

• microsoft/playwright-mcp GitHub
• @playwright/mcp npm 패키지
• Using Playwright MCP with Claude Code — Simon Willison's TIL
• Playwright MCP Server: What You Need to Know — Autify