MCP

Playwright MCP: 클라이언트에서 첫 브라우저 탐색 마치기

MCP 클라이언트에서 접근성 스냅샷으로 브라우저를 구동해 지정한 페이지를 방문하려는 사람을 위한 안내입니다. 전제는 이 컴퓨터에 Node.js 18 이상이 이미 설치되어 있어야 한다는 점입니다.

Official source · Playwright MCP

Install

npx @playwright/mcp@latest

누구를 위한 안내인가

이 안내는 이미 MCP 클라이언트를 쓰고 있으며, 이 컴퓨터에서 브라우저를 띄워 페이지 자동화를 할 준비가 된 사람을 대상으로 합니다. 지금 당장 Playwright MCP를 현재 클라이언트에 연결할지 여부를 판단하면 되며, 긴 소개글로 먼저 읽기 위한 글이 아닙니다. 가장 단단한 전제는 이 컴퓨터의 Node.js가 18 이상이어야 한다는 점입니다. 버전이 부족하면 설정을 계속 쓰지 마십시오. 저장소는 이것을 브라우저 자동화 능력을 제공하는 MCP 서버로 설명하며, 스크린샷이 아니라 접근성 스냅샷으로 페이지를 이해합니다. 반드시 받아들여야 할 것은 두 가지입니다. 이 컴퓨터에 브라우저 관련 프로세스가 나타난다는 점, 그리고 당신이 지정한 주소로 실제 방문이 일어난다는 점입니다. 저장소만 둘러보고 클라이언트에 어떤 브라우저 동작도 시키지 않을 생각이라면 이 경로는 맞지 않습니다. 증거에는 적용 산업, 직무, 팀 규모가 적혀 있지 않으며, 여기서도 상상 속의 사용자 프로필을 보태지 않습니다.

3분 만에 첫 시도 마치기

공식 표준 MCP 설정, 이 한 경로만 사용합니다. 지금 쓰고 있는 MCP 클라이언트 자체의 서버 설정 위치를 여십시오. 증거는 구체적인 파일 이름을 주지 않으므로 해당 클라이언트의 MCP 설정 입구로 열면 됩니다. 이름이 playwright인 서비스를 추가하고, 명령은 npx, 인자는 @playwright/mcp@latest로 둡니다. 이와 나란히 두 번째 주 설치 방식을 두지 마십시오.

먼저 이 컴퓨터가 Node.js 18 이상을 충족하는지 확인한 뒤, 아래 JSON을 설정에 그대로 넣으십시오. 바이트가 같아야 하며, 키 이름과 공백을 바꾸지 마십시오:

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

저장한 뒤 해당 클라이언트를 다시 시작하거나 다시 불러오십시오. 성공 신호는 도구 목록에 browser_navigate와 browser_navigate_back라는 두 이름이 나타나는 것입니다. 이름이 드러나야 연결된 것입니다. 브라우저 창이 뜨는지, 페이지가 열리는지를 설치 완료로 보지 마십시오.

연결된 뒤에는 탐색용 호출을 한 번만 합니다. browser_navigate를 사용하십시오. 증거가 기록한 것은 도구 이름뿐이며, 매개변수 표도, 예시 URL도, 되돌리기 경로도 없습니다. 따라서 채울 내용은 그때 클라이언트가 보여주는 도구 설명을 따라야 하며, 매개변수나 엔드포인트를 스스로 만들어 내지 마십시오. 이 호출은 이 컴퓨터의 브라우저가 당신이 준 주소를 방문하게 하고, 네트워크 요청과 페이지 로드를 일으키며, 이 컴퓨터에 브라우저 관련 프로세스를 남깁니다. 읽기 전용 동작이 아니고, 위험이 없는 동작도 아닙니다. 호출 전에 주소는 본인이 지정한 것이고 그 주소가 방문을 받아들일 수 있는지 확인해야 합니다. 호출 후에는 이번 호출이 반환되었는지를 확인 지점으로 삼으십시오. 이어서 browser_navigate_back를 쓰면 마찬가지로 브라우저의 현재 페이지가 바뀌고, 네트워크 요청이 다시 생길 수 있습니다. 호출 전에 현재 세션에 돌아갈 수 있는 방문 기록이 이미 있는지 확인하십시오.

사용 사례

사례 1: browser_navigate로 당신이 분명히 지정한 페이지를 엽니다. 시점은 두 도구 이름이 이미 나타났고, 방문을 받아들일 수 있는 주소를 손에 가지고 있을 때입니다. 증거가 대응할 수 있는 것은 이 도구 이름뿐이며, 예시 URL도 없고 매개변수 필드도 적혀 있지 않습니다. 부작용은 실제 탐색과 네트워크 접근입니다. 호출 전에 주소를 다시 확인하고, 호출 후에는 이번 호출이 끝났는지 보십시오. 로컬 오프라인 미리보기로 이해하지 말고, 페이지 내용을 읽지 않는다고 가정하지 마십시오.

사례 2: browser_navigate_back로 이전 페이지로 돌아갑니다. 시점은 같은 탐색 세션에서 방금 탐색을 마쳤을 때입니다. 증거는 마찬가지로 이 도구 이름만 주며, 기록 목록 API도 없고 되돌리기나 undo 경로도 없습니다. 성공한 앞방향 탐색이 아직 없다면 뒤로 가기가 실패하거나, 예상하지 않은 페이지로 떨어질 수 있습니다. 실패 후 상태는 증거가 설명하지 않습니다. 이 호출 역시 현재 페이지를 바꾸고 네트워크를 다시 요청할 수 있습니다. 호출 전에 실제로 탐색한 적이 있는지 확인하십시오. 확인 지점은 여전히 이번 호출이 반환되었는지입니다.

사용 경계

실행 하한은 Node.js 18 이상이며, 낮은 버전으로 억지로 돌리지 마십시오. 능력은 브라우저 자동화에서 멈추며, 스크린샷이 아니라 접근성 스냅샷을 쓴다고 설명되어 있습니다. 증거에는 스크린샷류 도구가 나오지 않고, 브라우저 닫기, 세션 정리, 제거, undo 명령도 없습니다. 네트워크 없음, 이 컴퓨터에서의 읽기 없음, 프라이버시 경계 없음을 가정하지 마십시오. 탐색하는 순간 대상 사이트는 방문되고, 페이지 내용은 클라이언트 컨텍스트에 들어갈 수 있으며, 이 컴퓨터에도 브라우저 프로세스가 나타납니다. 첫 시도가 실패하면 먼저 Node 버전과 JSON이 공식 조각과 바이트 단위로 같은지 확인한 다음, 두 도구 이름이 나타났는지 보십시오. 증거에 나오지 않은 설치 방식으로 바꾸지 마십시오. 증거에서 이름을 대지 않은 능력을 이미 지원된다고 보지 마십시오.