목록 · 개발·코드

Playwright MCP

클로드가 브라우저를 직접 열고 누르고 입력합니다. 화면 사진이 아니라 접근성 트리를 읽어 요소를 집으므로, 눈으로 보고 좌표를 찍는 방식보다 안정적입니다. 마이크로소프트가 직접 만들어 관리합니다.

바이브코딩·만들기 용도. 같은 목적의 다른 도구를 한 장에 모아 두었습니다.

도도리 AI연구소 · 최종 수정 2026년 9월 21일 · CC BY-NC 4.0

플레이라이트 MCP 설치하는 법

설정 파일에 세 줄을 넣으면 끝납니다. 터미널을 몰라도 됩니다.

1. 설정 파일을 엽니다.
   Windows%APPDATA%\Claude\claude_desktop_config.json복사

   macOS~/Library/Application Support/Claude/claude_desktop_config.json복사
   파일이 없으면 새로 만드십시오. 메모장이나 텍스트 편집기면 충분합니다.
2. 아래 내용을 붙여 넣고 저장합니다.

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

   전체 복사
   이미 mcpServers가 있다면 그 안쪽에 항목만 추가하십시오. 중괄호를 두 번 쓰면 오류가 납니다.
3. Claude 앱을 완전히 껐다가 다시 켭니다. 창만 닫으면 반영되지 않습니다. Windows는 작업 표시줄 아이콘에서 종료, macOS는 Cmd+Q로 완전히 끄십시오. 이 단계를 빠뜨려서 안 된다고 하는 경우가 가장 많습니다.

먼저 알아 둘 것

이런 일을 시킵니다

만든 화면을 직접 확인시키기

고친 페이지를 열어 눌러 보게 하고, 어긋난 곳을 사진으로 받습니다.

로그인 뒤에만 보이는 화면 다루기

사람이 한 번 로그인해 두면 그 뒤 화면까지 이어서 조작합니다.

양식 한 번에 채우기

browser_fill_form 으로 입력칸 여러 개를 한 번에 채우고 보내기까지 시킵니다.

브라우저 오류 찾기

browser_console_messages 와 browser_network_requests 로 콘솔 오류와 실패한 요청을 받아 원인을 좁힙니다.

붙었는지 확인하기

설정을 마쳤으면 대화창에 이렇게 물어보십시오. 도구가 실제로 붙었으면 답이 돌아옵니다.

플레이라이트 MCP 안 될 때 확인할 것

브라우저를 실제로 띄웁니다

내 컴퓨터에서 도는 서버입니다. 처음 쓸 때 브라우저를 내려받으므로 시간이 걸리고, 원격 주소만 넣는 방식과 다릅니다.

열린 화면으로 무엇이든 할 수 있습니다

로그인된 상태로 붙이면 그 계정으로 누르고 보내는 일까지 됩니다. 결제나 삭제가 걸린 화면에서는 무엇을 시킬지 미리 정해 두십시오.

browser_evaluate 와 browser_run_code_unsafe 는 다릅니다

뒤엣것은 이름 그대로 안전장치가 없는 실행입니다. 모르는 페이지에서 쓰지 마십시오.

도구 수는 설정에 따라 달라집니다

저희가 센 25개는 아무 옵션 없이 띄운 기본값입니다. 기능을 켜면 늘어납니다.

언제 쓰고, 언제 안 쓰나

만든 화면을 클로드가 직접 열어 확인하게 하고 싶을 때 씁니다. 크롬 개발자도구만 필요하면 더 가벼운 길이 따로 있습니다.

비슷한 것 중에 왜 이걸

chrome-devtools-mcp 와 정면으로 겹칩니다. 갈림길은 이렇습니다. 크롬 개발자도구 MCP 는 이미 열려 있는 크롬에 붙어 성능·네트워크·콘솔을 들여다보는 데 강합니다. 이것은 브라우저를 스스로 띄워 누르고 입력하는 데 강하고, 접근성 트리로 요소를 집어 화면이 조금 바뀌어도 잘 버팁니다. 보기만 할 것이면 크롬 개발자도구, 조작까지 시킬 것이면 이쪽입니다. 같은 이름의 playwright 플러그인은 시험 코드를 짜 주는 쪽이라 하는 일이 다릅니다.

자주 묻는 것

플레이라이트 MCP(Playwright) 는 어떻게 설치합니까?

주소가 아니라 명령으로 도는 서버입니다. 클로드 코드에서는 `claude mcp add --scope user playwright -- npx @playwright/mcp@latest` 로 넣습니다. 클로드 데스크톱이라면 설정 파일의 mcpServers 에 command 를 npx, args 를 ["@playwright/mcp@latest"] 로 적으십시오. 저희가 이 명령으로 직접 띄워 도구가 응답하는 것까지 확인했습니다(2026-09-20).

플레이라이트 MCP(Playwright) 에 도구가 몇 개 들어 있습니까?

아무 옵션 없이 띄우면 25개입니다. 저희가 2026년 9월 20일에 직접 세었고 serverInfo 는 Playwright 1.64.0 이었습니다. 페이지 이동, 누르기, 양식 채우기, 화면 갈무리, 콘솔 메시지, 네트워크 요청, 자바스크립트 실행, 탭 다루기가 들어 있습니다. 저장소 문서에는 더 많은 이름이 나오는데 일부는 따로 켜야 나옵니다.

플레이라이트 MCP(Playwright) 연결이 안 될 때는 무엇을 봅니까?

내 컴퓨터에서 도는 서버라 node 가 PATH 에 있어야 합니다. 처음 띄울 때 브라우저를 내려받으므로 시간이 걸리고, 그동안 응답이 없는 것처럼 보입니다. 회사망에서 막히면 내려받기가 실패하니 프록시 설정을 확인하십시오.

플레이라이트 MCP(Playwright) 와 크롬 개발자도구 MCP 중 무엇을 씁니까?

보기만 할 것이면 크롬 개발자도구 MCP 가 가볍습니다. 이미 열려 있는 크롬에 붙어 성능·네트워크·콘솔을 들여다봅니다. 누르고 입력하는 조작까지 시킬 것이면 이쪽입니다. 접근성 트리로 요소를 집어 화면이 조금 바뀌어도 잘 버팁니다.

플레이라이트 MCP(Playwright) 는 요금이 듭니까?

마이크로소프트가 오픈소스로 내놓았고 커넥터 자체에 요금이 붙지 않습니다. 내 컴퓨터에서 도는 서버라 외부 계정도 필요 없습니다. 자세한 것은 https://github.com/microsoft/playwright-mcp 에서 확인하십시오.

개발·코드 도구를 고를 때

코드 생성·리팩터링·리뷰를 돕는 도구입니다. 사내 코드가 외부 서버로 전송되는 구조인지, 무료 요금제의 컨텍스트 길이 제한이 어디까지인지 확인하세요.

공식 사이트에서 계정 만들기

제휴 관계가 없는 일반 링크입니다.

별점과 댓글

이 MCP 서버을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

함께 보면 좋은 도구

어느 단계에 무엇을 붙일지 모르겠다면 콘텐츠 제작 단계별 MCP 120종을 보십시오. 기획부터 성과 확인까지 여덟 단계로 갈라 두었습니다.