Playwright MCP 서버

Playwright는 브라우저 자동화 도구로 널리 알려져 있으며, 주로 테스트 및 브라우저 작업 자동화에 사용됩니다. Playwright MCP 서버는 이러한 기능을 기반으로 하지만, 이번에는 직접적인 인간 사용이 아닌 AI 에이전트를 위해 설계되었습니다.

서버를 실행하면 모든 MCP 호스트를 연결하고 AI 에이전트에 Playwright의 전체 자동화 툴킷에 대한 액세스 권한을 부여할 수 있습니다.

이는 AI 에이전트가 온라인 구매, 최신 뉴스 검색, 이메일 답장 등 인간과 동일한 방식으로 웹 브라우저와 상호작용할 수 있음을 의미합니다.

이 글에서는 웹 스크래핑에 중점을 둘 것입니다. Playwright MCP 서버를 사용하면 브라우저 자동화뿐만 아니라 LLM이 웹에서 직접 데이터를 스크래핑하고 추출하는 데 필요한 저수준 도구를 얻을 수 있습니다.

Playwright MCP 서버

모든 MCP 서버와 마찬가지로 Playwright MCP 서버는 AI 에이전트에 노출될 수 있는 도구 세트를 제공합니다. 이 도구들은 개발자가 이미 알고 사용하는 Playwright API와 직접 매핑됩니다. 가장 중요한 몇 가지를 살펴보겠습니다:

Browser_click: AI 에이전트가 마우스를 사용하는 사람처럼 요소를 클릭할 수 있게 합니다.
Browser_drag: 드래그 앤 드롭 상호작용을 가능하게 합니다.
Browser_close: 브라우저 인스턴스를 닫습니다.
Browser_evaluate: AI 에이전트가 페이지 내에서 직접 JavaScript 코드를 실행할 수 있게 합니다.
Browser_file_upload: 브라우저를 통한 파일 업로드를 처리합니다.
Browser_fill_form: 웹 페이지의 양식을 작성합니다.
Browser_hover: 요소 위로 마우스 포인터를 이동합니다.
Browser_navigate: 모든 URL로 이동합니다.
Browser_press_key: 키 입력을 시뮬레이션하여 에이전트가 키보드 입력을 완전히 제어할 수 있게 합니다.

이러한 모든 도구를 AI 에이전트가 활용할 수 있으므로, 웹을 쉽게 탐색하고 데이터를 스크래핑할 수 있습니다. 어떻게 할 수 있는지 살펴보겠습니다.

Playwright MCP 서버를 활용한 웹 스크래핑

이 섹션에서는 Playwright MCP 서버를 사용하여 웹 스크래핑 작업을 수행합니다. AI 에이전트는 iPhone 16 모델의 최신 가격 정보를 수집할 것입니다. 작업을 단순화하기 위해 단일 출처인 Best Buy로 제한하겠습니다.

서버 구성

Playwright MCP 서버를 실행하려면 MCP 호스트가 필요합니다. Claude Desktop, Cursor, Gemini CLI 등 원하는 호스트를 사용할 수 있습니다. 본 문서에서는 VS Code를 사용하겠습니다.

Playwright MCP 서버는 Node.js로 구현된 로컬 MCP 서버이므로 진행 전에 Node가 설치되어 있는지 확인하세요.

서버를 설정하려면 MCP 호스트에 다음 구성을 추가해야 합니다:

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

이 설정은 VS Code에서 MCP 서버를 설정하는 방식에 적용되지만, 다른 MCP 호스트에서는 약간 다를 수 있습니다. 설정이 완료되면 AI 에이전트가 서버에서 제공하는 도구에 접근할 수 있게 됩니다. 이제 스크래핑을 시작할 수 있습니다.

MCP 서버를 이용한 스크래핑

첫 번째 단계는 BestBuy 웹사이트로 이동하는 것입니다. 이를 위해 AI 에이전트에게 사이트를 열도록 지시하면, Browser_navigate 도구를 사용하여 해당 사이트로 이동합니다.

다음으로 AI 에이전트에게 iPhone 16을 검색하도록 지시합니다. 이를 위해 Browser_press_key 도구를 사용하여 검색어를 입력합니다.

그런 다음 AI 에이전트는 Browser_click 도구를 사용하여 검색 버튼을 클릭합니다.

이렇게 하면 검색 결과가 표시됩니다. 에이전트가 페이지를 탐색하는 각 단계마다 현재 상태의 스냅샷을 캡처합니다. 이후 이 스냅샷들을 활용해 에이전트에게 필요한 정보를 추출하고 구조화된 형식으로 정리하도록 지시할 수 있습니다.

이러한 접근 방식으로 사이트 스크래핑을 성공적으로 수행했습니다. 그러나 이 방법은 거의 모든 작업을 제어할 수 있는 완전한 통제권을 제공하지만, 여전히 상당히 저수준입니다. 데이터 스크래핑이 유일한 목표라면 광범위한 웹 자동화 기능이 필요하지 않을 수 있으므로 이 방법이 과도하게 느껴질 수 있습니다.

다음으로 Bright Data Web MCP 서버가 훨씬 높은 수준의 관점에서 동일한 작업을 수행하는 방법을 살펴보겠습니다.

Bright Data Web MCP 서버: 고수준 웹 스크래핑 MCP 서버

Bright Data 웹 MCP 서버는 웹 스크래핑을 위해 특별히 구축된 다양한 고수준 도구를 제공합니다. 여기에는 아마존과 같은 플랫폼에서 데이터를 추출하고, 개인 및 기업 프로필을 검색하며, 인스타그램 프로필, 게시물, 릴까지 수집하는 도구가 포함됩니다.

저수준에서 작동하는 Playwright MCP와 달리, Bright Data 웹 MCP 서버는 AI 에이전트의 스크래핑 과정을 단순화합니다. 심지어 봇 탐지나 CAPTCHA로 보호된 웹 페이지도 처리하여 기존 방식이 실패할 수 있는 환경에서도 에이전트의 안정적인 접근을 보장합니다.

이 단계별 안내에서는 Bright Data Web MCP 서버를 사용하여 이전에 Playwright MCP로 수행했던 동일한 작업을 수행해 보겠습니다. 기본적으로 두 가지 핵심 도구를 제공합니다:

검색 엔진 도구
마크다운 형식으로 데이터 스크래핑 도구

추가 도구는 프로 모드 활성화로 잠금 해제할 수 있지만, 현재는 이 두 가지 도구만 사용하겠습니다. 자세한 내용은 이 문서에서 확인할 수 있습니다.

서버 구성

로컬에서 실행되는 Playwright MCP 서버와 달리 Bright Data Web MCP 서버는 원격 MCP 서버입니다. 따라서 설정 과정이 약간 다릅니다. VS Code에서 설정하는 방법은 다음과 같습니다:

"BrightData": {
    "url": "https://mcp.brightdata.com/mcp?token=YOUR_API_KEY",
 }

연결하려면 Bright Data API 키가 필요합니다. 설정 완료 후 에이전트가 스크래핑을 시작할 준비가 됩니다.

MCP 서버를 이용한 스크래핑

먼저 에이전트에게 iPhone 16 가격에 대한 웹 검색을 수행하도록 지시합니다.

에이전트는 서버의 검색 엔진 도구를 사용하여 요청을 수행했습니다.

결과를 얻은 후, 에이전트에게 선택한 사이트(이 경우 Apple Store)에서 정보를 추출하도록 지시합니다. 에이전트는 스크랩된 데이터를 마크다운 도구로 활용하여 콘텐츠를 추출하고, 에이전트가 쉽게 처리하고 이해할 수 있는 마크다운 형식으로 반환합니다.

추출된 정보로 에이전트에게 구조화된 형식으로 정리하도록 지시하면, 이렇게 간단하게 데이터를 확보할 수 있습니다.

이 예시에서는 스크래핑 작업을 완료하기 위해 두 가지 도구만 사용했습니다. 그러나 Bright Data Web MCP 서버는 프로 모드에서 더 고급 사용 사례를 위해 탐색할 수 있는 추가 도구도 제공합니다. 자세한 예시는 이 상세한 문서에서 확인할 수 있습니다.

결론

본 문서에서는 AI 에이전트의 도움을 받아 MCP 서버를 활용해 웹을 스크래핑하는 방법을 살펴보았습니다. 먼저 브라우저 자동화에 대한 저수준 접근을 제공하여 에이전트가 모든 상호작용을 완벽하게 제어할 수 있게 하는 Playwright MCP 서버를 살펴보았습니다. 이후 더 높은 수준에서 작동하며, 봇 탐지 기능으로 보호된 사이트에서도 웹 스크래핑을 위해 특별히 설계된 전문 도구를 에이전트에 제공하는 Bright Data의 Web MCP 서버를 살펴보았습니다.

두 접근 방식 모두 장점이 있습니다. Playwright는 세밀한 브라우저 제어가 필요할 때 이상적이며, Bright Data는 프로세스를 단순화하여 필요한 정보 추출에만 집중할 수 있게 합니다.

이제 여러분 차례입니다. 두 MCP 서버를 직접 실험해보고 다음 프로젝트에 가장 적합한 것을 선택하세요.

문의하기 무료 체험 시작하기