Claude Desktop에서 PlayWright MCP 서버를 적용해 보자.

Model Context Protocol 이란

다음 글과 영상을 통해 MCP 개념을 이해할 수 있다.

 

MCP 소개 글, Anthropic, "Introducing the Model Context Protocol", 2024/11/25 읽어보기 >

MCP 소개 세미나, Murag, M., "Model Context Protocol, Integrating LLMs to your tools & data", 2025/3/2 영상 보기>

 

이 글은 MCP의 기능을 이해하기 위해 기존 MCP 서버와 LLM 지원 AI를 이용하여 원하는 웹 사이트의 게시물을 정리, 요약 그리고 분석하는 예를 소개한다. MCP 서버는 기존 개발된 것을 사용할 수도 있고 직접 개발할 수도 있다. 예는 기존 MCP 서버로 PlayWright MCP 서버를 사용하고 LMM 지원 AI는 Claude Desktop을 사용한다. 

MCP 서버와 AI를 이용하여 웹 사이트의 게시물을 정리, 요약 그리고 분석한다.

Claude Desktopr과 Playwright MCP 서버를 준비한다.

MCP를 다음 3개 요소가 준비되어야 한다.

• MCP 호스트 - Claude Desktop, MCP 서버를 등록하고 연결
• MCP 서버 - Playwright MCP 서버(자동화 테스트), MCP 클라이언트가 사용하는 기능을 제공하는 서버
• MCP 클라이언트 - Claude Desktop(LLM 채팅), 기능을 실제 사용하는 Application이나 Agent

1) Claude Desktop 설치와 Playwright MCP 서버 이해

Claude Desktop은 Claude에 회원 가입하고 "Claude for Windows"를 다운로드해 설치한다. Claude는 Free 버전을 이용한다.

Claude Desktop for Windows

 

PlayWright MCP 서버에 대한 정보는 다음 사이트를 이용한다.

Playwright MCP 서버 소개 읽어보기 >

 

2) Node.js 설치

Playwright MCP 서버를 실행하기 위해 https://nodejs.org/ko/download에서 Node.js를 다운로드하여 설치한다.

Node.js 설치 사이트

3) Claude Desktop에 MCP 서버 등록(MCP host 역할)

메뉴 > 파일 > 설정 선택

설정에서 "개발자"를 선택하면 MCP 서버 등록 화면이 출력된다. "구성 편집"을 선택하면 claude_desktop_config.json 파일을 변경할 수 있다. claude_desktop_config.json 파일에 json 형식으로 MCP 서버 정보를 등록한다.

claude_desktop_config.json 파일을 연다.

파일에 다음 Playwright MCP 서버 정의를 입력한다. 내용은 Playwright MCP 소개 참조. 읽어보기 >

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

 

저장 후, 새로운 configuration을 적용하기 위해 Claude Desktop을 종료 후 다시 시작한다.

설치된 Playwright MCP 서버를 확인한다.

AI에서 MCP 서버를 사용하여 웹 사이트를 요약, 정리 그리고 분석한다.

Claude Desktop에서 원하는 내용을 채팅으로 요구한다.

https://chosun.co.kr 에서 최근 가장 인기있는 게시물 3개 리스트해줘

 

채팅의 결과로 Claude가 해당 사이트의 웹 구조를 읽어와 요구에 대한 답을 생성한다.

Playwright MCP 소개 의 아래 Quick Reference는 Playwright MCP 서버의 기능을 간단히 보여준다. 주로 웹 응용 테스트나 자동화에 사용할 수 있다.

Action	How to do it
Install server	Add standard config to your MCP client
Navigate to a page	Ask: "Go to https://example.com"
Click an element	Ask: "Click the Submit button"
Fill a form	Ask: "Fill in the email field with test@example.com"
Take a screenshot	Ask: "Take a screenshot of the page"
Run Playwright code	Ask: "Run this Playwright code: ..."
Mock an API	Ask: "Mock the /api/users endpoint to return ..."
Use headed mode	Default. Pass --headless to disable
Choose a browser	Pass --browser=firefox in args

 

2026 NDoStudio

2026/8/14 처음 2026/8/14