Playwright MCP

작성 2026-04-12읽는 시간 10분

AI에게 브라우저라는 손을 달아주는 도구

이건 뭐예요?

AI 한테 "저 페이지에 들어가서 로그인 버튼 한번 눌러봐" 라고 말로 시켰는데, AI 가 실제로 브라우저를 열어서 그 일을 해낸다면 어떨까요? Playwright MCP 가 바로 그걸 가능하게 해주는 도구예요. 쉽게 말하면 AI 에게 "손" 을 달아주는 장치입니다.

조금 풀어서 설명해 볼게요. 원래 Playwright (플레이라이트) 는 마이크로소프트가 만든 브라우저 자동화 프레임워크예요. 공식 홈페이지 카피를 그대로 옮기면 "Playwright enables reliable web automation for testing, scripting, and AI agents" — 즉 "테스트·스크립트·AI 에이전트를 위한 웹 자동화" 라고 자신을 소개합니다. 크롬 계열(Chromium), 파이어폭스(Firefox), 사파리 엔진(WebKit) 까지 세 가지 브라우저를 하나의 API 로 다룰 수 있는 게 특징이에요. 원래는 개발자들이 웹사이트 테스트 자동화에 쓰던 도구였죠.

그리고 MCP (Model Context Protocol, 모델 컨텍스트 프로토콜) 는 클로드 같은 AI 가 외부 도구와 대화할 수 있게 해주는 "공통 언어" 예요. USB-C 포트를 떠올리면 쉬워요. 예전엔 기기마다 충전기 모양이 달라서 호환이 안 됐는데, USB-C 가 표준이 되면서 노트북·핸드폰·태블릿이 같은 케이블을 공유하게 됐죠. MCP 도 똑같아요. AI 모델과 외부 도구 사이에 "이렇게 말 걸면 돼" 라는 표준 규약을 정해 둔 겁니다.

Playwright MCP 는 이 둘을 합친 물건이에요. Playwright 라는 강력한 브라우저 자동화 엔진을 MCP 서버로 포장해서, 클로드 코드 같은 AI 에이전트가 "이 페이지 열어줘", "이 버튼 눌러봐", "콘솔 에러 메시지 읽어와" 같은 말을 하면 AI 가 실제로 브라우저를 띄워서 그 일을 수행합니다. Microsoft 가 직접 만든 공식 오픈소스이고, 2026년 4월 기준 GitHub 스타 3만 개가 넘는 검증된 프로젝트예요.

한 가지 멋진 점은, Playwright MCP 는 스크린샷(픽셀) 이 아니라 접근성 트리(accessibility tree) 를 사용한다는 거예요. 사람 눈으로 보는 화면 대신, 브라우저가 내부적으로 가지고 있는 구조화된 데이터를 읽습니다. 덕분에 "저 빨간 버튼 중에 왼쪽에서 세 번째" 같은 애매한 지시가 아니라, "Submit 이라는 이름의 버튼" 처럼 결정적(deterministic) 으로 동작해요. 토큰도 적게 들고 정확도도 높습니다.

우리는 이렇게 쓰고 있어요

솔직하게 말씀드리면, 지금 여러분이 보고 계신 오토프로그 랩스 사이트 자체가 Playwright MCP 를 실제로 사용하는 워크플로 위에 올라가 있어요. 이 글을 쓰고 있는 저의 클로드 코드 환경에 mcp__playwright__browser_navigate, mcp__playwright__browser_click, mcp__playwright__browser_snapshot, mcp__playwright__browser_console_messages 같은 도구가 이미 붙어 있거든요. 글만 쓰는 게 아니라 쓰고 난 뒤에 브라우저로 확인까지 할 수 있다는 뜻이에요.

구체적으로 어떻게 쓰고 있는지 세 가지만 소개할게요.

첫째, 글을 쓴 뒤 사이드바 렌더링 확인. 새로운 글을 docs/repos/mcp/playwright.md 같은 경로에 넣으면 Docusaurus (도큐사우르스, 이 사이트의 문서 엔진) 가 자동으로 사이드바에 항목을 추가해요. 그런데 sidebar_position 숫자를 잘못 쓰거나 frontmatter(문서 머리말) 에 오타가 나면 사이드바 순서가 꼬이거나 아예 글이 안 보일 때가 있어요. 저는 글을 쓴 뒤 Playwright MCP 로 로컬에 띄운 Docusaurus 에 접속해서, 사이드바에 새 글이 제 자리에 뜨는지 눈으로 한 번 확인합니다.

둘째, 깨진 링크 캡처. 오토프로그 랩스 에는 editor-agent (퇴고 전문 에이전트) 라는 게 있어서, 글에 들어간 모든 외부 링크를 WebFetch 로 한 번씩 찌르고 접속 가능한지 확인해요. 그런데 어떤 페이지는 200 OK 는 잘 떠도 실제로는 "페이지를 찾을 수 없습니다" 같은 걸 보여주는 경우가 있어요. 그럴 땐 Playwright MCP 로 실제 브라우저를 띄워서 browser_snapshot 으로 스크린샷을 찍고, 사람 눈에 어떻게 보이는지까지 검증할 수 있어요.

셋째, HOLOGRID 테마 회귀 테스트. 이 사이트는 HOLOGRID 라는 자체 테마(시안 색 홀로그램 느낌의 다크 테마) 를 쓰고 있어요. CSS 를 수정하면 어디서 어떻게 깨질지 예측이 어려워요. 저는 코드를 고친 뒤 Playwright MCP 에게 "홈, 강의 목록, Repos 목록, MCP 서브카테고리 페이지를 차례로 열고 각각 스크린샷 찍어줘" 라고 부탁합니다. 몇 초 안에 네 장이 나오니까 눈으로 한번 훑어보면 됩니다. 이게 코딩 1줄 모르는 제가 디자인 회귀 테스트를 돌리는 방식이에요.

한마디로, Playwright MCP 는 "글을 썼으면 끝" 이 아니라 "글을 쓴 뒤 실제로 어떻게 보이는지" 까지 AI 가 책임질 수 있게 해주는 마지막 퍼즐 조각이에요.

한번 써볼까요?

Microsoft 공식 저장소는 microsoft/playwright-mcp 이고, 공식 npm 패키지 이름은 @playwright/mcp 예요. 설치는 따로 필요 없어요. npx (Node.js 에 기본 포함된 패키지 실행기) 로 바로 띄울 수 있거든요.

공식 README 가 제시하는 표준 설정은 아래 JSON 한 조각이에요. MCP 를 지원하는 어떤 클라이언트(클로드 데스크톱, VS Code, Cursor, Windsurf 등) 에서든 이 모양을 자기 설정 파일에 넣으면 끝납니다.

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

실행 전 준비물은 딱 하나, Node.js 18 이상 만 설치되어 있으면 돼요. Node.js 가 없다면 공식 사이트 에서 LTS 버전을 먼저 깔아주세요. 최초 실행 시 @playwright/mcp 와 브라우저 바이너리를 자동으로 내려받으므로 처음 한 번은 몇 분 걸릴 수 있어요.

클로드 코드 터미널에서는 이렇게

클로드 코드 사용자라면 JSON 설정 파일을 직접 건드릴 필요가 아예 없어요. 공식 README 에 적힌 한 줄 명령으로 끝납니다. 아래 명령어를 클로드 코드가 실행되고 있는 일반 터미널(PowerShell, 명령 프롬프트, 또는 Mac/Linux 의 Terminal) 에 그대로 복사해서 붙여 넣고 Enter 만 누르세요.

# 1. Node.js 18 이상이 깔려 있는지 먼저 확인 (v18.x.x 이상이면 OK)
node -v

# 2. 클로드 코드에 Playwright MCP 서버 등록 (공식 README 그대로)
#    이름은 "playwright", 실행기는 npx, 패키지는 @playwright/mcp 최신판
claude mcp add playwright npx @playwright/mcp@latest

# 3. 제대로 등록됐는지 목록 확인 — "playwright" 가 보이면 성공
claude mcp list

Windows 도 Mac/Linux 도 명령어 자체는 똑같아요. 단 Windows PowerShell 에서 복사 붙여넣기가 안 될 때는 제목 표시줄을 오른쪽 클릭해서 "편집 → 붙여넣기" 를 써주세요.

등록이 끝났으면 클로드 코드를 한 번 껐다 켜서 새 세션을 여세요. 그리고 아래처럼 말로 시켜보면 됩니다.

Playwright MCP 로 https://autofrog.kr/lab 에 접속해서
메인 페이지 스크린샷 한 장 찍어줘

그러면 클로드가 browser_navigate 로 페이지를 열고 browser_take_screenshot 으로 PNG 를 만들어서 결과를 보여줘요. 여기까지 왔다면 여러분의 AI 에게 "손" 이 달린 거예요.

혹시 등록을 취소하고 싶다면 claude mcp remove playwright 한 줄이면 깔끔하게 내려갑니다.

이런 분께 추천해요

Playwright MCP 는 "AI 에게 브라우저 조작을 맡기고 싶은 모든 상황" 에 쓰입니다. 코드를 쓰지 못해도 말로 지시만 할 수 있으면 충분해요. 구체적으로 이런 분들께 특히 잘 맞습니다.

랜딩 페이지 카피를 고친 뒤 실제 브라우저에서 확인하고 싶은 비개발자. "이 문구를 고친 다음에 페이지 열고 스크롤 내려가면서 스크린샷 찍어줘" 한마디면 끝나요. 개발자한테 "한 번만 봐주세요" 부탁할 필요가 없어집니다.
스타트업 대표인데 서비스 상태 점검을 매번 수동으로 하고 있는 분. "우리 서비스 로그인 페이지 열고 콘솔 에러 있는지 확인해줘" 같은 루틴을 아침마다 AI 에게 맡길 수 있어요. 에러가 있으면 스크린샷과 함께 보고서를 받게 됩니다.
E2E 테스트(end-to-end, 실제 사용자 흐름을 모방하는 테스트) 를 AI 에게 시키고 싶은 학생 개발자 또는 QA 담당자. 테스트 코드를 직접 짜지 않고도 "회원가입부터 결제까지 한번 돌려봐" 라고 시키면 Playwright MCP 가 브라우저를 조작하면서 단계별 결과를 리포트해줍니다. 자동화 입문용으로도 좋아요.

정리하면 Playwright MCP 는 "AI 한테 브라우저를 조작할 줄 아는 손을 하나 달아주는 도구" 예요. 이 손은 24시간 피곤하지도 않고, 실수도 적고, 시키면 바로 움직여요. 이걸 한 번 붙여두면 "AI 한테 맡길 수 있는 일" 의 범위가 눈에 띄게 넓어집니다.

참고 링크

▸개정 이력1건

v12026-04-12초판

이건 뭐예요?​

우리는 이렇게 쓰고 있어요​

한번 써볼까요?​

클로드 코드 터미널에서는 이렇게​

이런 분께 추천해요​

참고 링크​