AI에게 웹 작업을 시키고 싶을 때가 있다. '이 사이트 들어가서 가격 긁어와', '폼에 이거 입력하고 제출해줘', '로그인 흐름이 잘 되는지 눌러봐' 같은 것들이다. Playwright MCP는 바로 이걸 가능하게 해주는, Microsoft가 만든 공식 브라우저 자동화 서버다.

무엇이 다른가 — 스크린샷을 안 쓴다

보통 AI에게 브라우저를 조작시키면 화면을 스크린샷으로 찍어 '눈으로 보고' 클릭할 위치를 찾는다. 느리고, 토큰도 많이 먹고, 자주 틀린다. Playwright MCP는 다르다. 화면 대신 페이지의 구조 정보(접근성 트리)를 읽는다. '여기 로그인 버튼이 있고, 여기 입력칸이 있다'는 걸 이미지가 아니라 데이터로 파악하므로 빠르고 정확하다. 별도의 이미지 인식 모델도 필요 없다.

무엇을 할 수 있나

• 페이지 이동, 클릭, 입력, 폼 채우기, 마우스 오버, 키보드 입력

• 페이지 구조 스냅샷 뜨기(현재 화면에 뭐가 있는지 파악)

• 네트워크 요청 확인, 쿠키·저장소 관리, 동작 녹화

반복적인 웹 테스트, 데이터 수집, 로그인·결제 흐름 점검 같은 데 특히 잘 맞는다.

설치와 연결

Claude Code라면 명령 한 줄이면 끝난다.

claude mcp add playwright npx @playwright/mcp@latest

설정 파일에 직접 넣는 경우(대부분의 MCP 도구 공통 형식):

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

쓰는 법

붙였다면 평소처럼 말로 시키면 된다. 예: '네이버 들어가서 오늘 메인 뉴스 제목 5개 가져와줘.' 그러면 AI가 브라우저를 열고, 페이지 구조를 읽어 이동·클릭하며 결과를 정리해 준다.

주의할 점

• 처음 실행 시 Playwright가 브라우저 엔진을 내려받을 수 있다(1회).

• 로그인이 필요한 사이트는 세션·자격증명 처리에 주의한다. 민감한 계정 정보는 직접 다루지 않게 한다.

• Node.js 환경이 필요하다.

출처와 다운로드

아래 참고링크의 공식 GitHub에서 전체 옵션을 확인할 수 있고, 하단 첨부파일로 저장소 전체를 zip으로 받아 볼 수 있다.