Claude × Playwright MCP 가이드 2026: AI가 진짜 브라우저를 직접 조작하기
Playwright MCP를 Claude에 연결하면 AI가 실제 브라우저를 클릭·입력·조작한다. 스크린샷이 아니라 접근성 트리 스냅샷 방식이라 정확하고 토큰 효율이 높다. claude mcp add 한 줄 설치부터 데이터 추출·E2E 테스트, 그리고 한계까지 직접 확인해 정리했다.
Higgsfield로 영상, Notion으로 정리를 다뤘으니 오늘은 자동화다. Claude에 Playwright(플레이라이트) MCP를 붙이면, “이 사이트 열어 로그인하고 이 표 뽑아줘” 하면 AI가 실제 크롬을 띄워 직접 클릭하고 입력한다. 마이크로소프트 계열 공식 서버고 설치는 명령어 한 줄이다. 흥미로운 건 이게 스크린샷을 보는 방식이 아니라는 점인데, 아래에서 푼다.
뭐가 가능해지나?
Claude가 진짜 브라우저(Chromium·Firefox·WebKit)를 조작한다.
- 페이지 열고 클릭·입력·폼 작성·제출
- 표·목록 데이터 추출(스크래핑)
- E2E 테스트 자동화(“로그인 → 장바구니 → 결제까지 되는지 확인해줘”)
- 반복 웹 작업을 말로 지시
비전 모델(이미지 인식) 없이도 된다. 이게 핵심이다.
왜 이게 되나 — 스크린샷을 안 본다?
보통 “AI가 화면 보고 클릭한다”고 하면 스크린샷을 떠올린다. Playwright MCP는 접근성 트리(accessibility tree) 스냅샷 방식이다. 픽셀이 아니라 페이지 구조를 텍스트로 읽고, 각 요소에 고유 ref(참조)를 붙여 정확히 집는다.
- 결정적(deterministic) 조작 — “세 번째 버튼” 같은 애매함 없이 ref로 콕 집는다
- 토큰 효율 — 스냅샷 하나가 약 200~400 토큰(스크린샷·DOM은 수천 토큰)
이 구조가 왜 강한지는 MCP가 표준이 된 배경과 함께 보면 이해가 빠르다.
언제 쓰나
| 잘 맞는 상황 | 덜 맞는 상황 |
|---|---|
| 반복 폼 작성·로그인·데이터 추출 | 캔버스·특수 위젯 등 접근성 트리에 안 잡히는 UI |
| E2E·회귀 테스트 자동화 | 픽셀 단위 시각 검증(스크린샷 보조) |
| 웹 워크플로를 대화로 처리 | 완전 서버리스/클라우드 전용 환경 |
설치 방법
Claude Code라면 정말 한 줄이다.
claude mcp add playwright npx @playwright/mcp@latest사용자 스코프에 등록되고, 로컬 stdio 서브프로세스로 실행되며, 기본은 headed 크롬이다. Claude Desktop·Cursor·VS Code·Windsurf 등 MCP 클라이언트에서도 쓸 수 있다.
사용 방법
연결됐다면 말로 시키면 된다.
“이 사이트 열어 로그인 폼 채우고 제출해줘” “이 페이지에서 상품명·가격을 표로 정리해줘” “회원가입 → 결제 흐름이 에러 없이 되는지 테스트해줘”
Claude가 browser_snapshot으로 페이지 구조를 받고, ref로 요소를 집어 클릭·입력한다. 이런 자동화를 업무 전반으로 넓히는 그림은 AI 도구를 엮는 실전 조합과 이어진다.
특이점·한계 (직접 확인)
주력 도구는 browser_snapshot(접근성 트리)이고, 시각 확인이 필요할 때만 browser_screenshot(PNG)을 쓴다. 로컬 실행 방식이라 브라우저가 설치돼 있어야 하고 내 PC에서 돈다(클라우드가 아니다). 접근성 트리에 잘 안 잡히는 요소(캔버스·특수 위젯)는 조작이 까다로울 수 있으니 감안하자.
노하우·꿀팁
기본은 스냅샷으로 두고, 스크린샷은 “눈으로 확인”이 필요할 때만 최소로 쓰면 토큰이 절약된다. 요소가 헷갈리면 ref를 명시해 지시하면 오작동이 준다. 반복 테스트는 흐름을 단계별로 나눠 시키는 편이 안정적이다.
자주 묻는 질문
Q. AI가 스크린샷을 보고 클릭하나? 아니다. 기본은 접근성 트리 스냅샷(구조화된 텍스트)을 읽어 요소의 ref로 조작한다. 시각 검증이 필요할 때만 스크린샷을 별도로 쓴다.
Q. 설치가 어렵나?
Claude Code면 claude mcp add playwright npx @playwright/mcp@latest 한 줄이다. Claude Desktop·Cursor 등 다른 MCP 클라이언트도 지원한다.
Q. 어떤 브라우저를 쓰나? Chromium·Firefox·WebKit을 지원하며 기본은 headed Chromium이다. 로컬에서 실제 브라우저로 실행된다.
Q. 테스트 자동화에 쓸 수 있나? 쓸 수 있다. 로그인→결제 같은 E2E 흐름을 말로 지시해 검증할 수 있고, 결정적 ref 조작이라 재현성이 좋다.
