Claude와 Cursor에 날개를 달아줄 'Playwright/Puppeteer MCP 서버'를 소개합니다! 🚀 (브라우저 자동화)
75
설명
최근 Anthropic이 발표한 MCP(Model Context Protocol) 덕분에 AI 툴들의 확장성이 어마어마해지고 있습니다. 오늘은 그중에서도 AI가 직접 브라우저를 열고, 스크롤하고, 클릭하며 웹 서핑과 스크린샷 캡처까지 수행할 수 있게 만들어주는 Playwright / Puppeteer MCP 서버를 소개해 드리려고 합니다.
그동안 Claude나 Cursor를 쓰면서 "최신 웹페이지 내용을 긁어와서 분석해 줘", "특정 사이트 로그인해서 화면 좀 캡처해 줘" 라고 했을 때 AI가 한계를 느꼈다면, 이 MCP 서버가 완벽한 해결책이 될 것입니다.
💡 Playwright/Puppeteer MCP 서버란?
AI 모델(Claude Desktop, Cursor 등)이 로컬 환경이나 가상 환경에서 실제 크롬 브라우저를 제어할 수 있도록 연결해 주는 다리(Protocol)입니다.
- 주요 기능: 웹페이지 방문, 클릭 및 텍스트 입력, 스크롤 제어, 스크린샷 촬영, 웹 페이지 HTML/텍스트 파싱 등.
- 활용 예시: "뉴스 사이트에서 실시간 트렌드 기사 5개 요약해 줘", "내 로컬 웹 서버(localhost:3000) 띄우고 UI 디자인 잘 나오는지 스크린샷 찍어서 확인해 줘" 등의 복잡한 브라우저 자동화 작업을 AI가 알아서 수행합니다.
🛠️ 개발 환경별 적용 및 설정 방법
가장 대중적인 Claude Desktop과 Cursor에 적용하는 방법을 정리했습니다.
1. Claude Desktop에 적용하기
Claude Desktop은 공식적으로 MCP를 지원하므로 설정 파일만 수정하면 바로 쓸 수 있습니다.
1) 설정 파일 열기
- Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
2) mcpServers 항목에 아래 설정 추가
참고: 안전하고 관리하기 쉬운 @modelcontextprotocol/server-puppeteer 공식 서버 기준입니다.
JSON
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
}
}
1) Claude Desktop 재시작
- 오른쪽 하단에 플러그 모양(또는 망치 아이콘)이 활성화되면 성공입니다!
2. Cursor에 적용하기
Cursor에서도 MCP 기능을 완벽하게 지원합니다. GUI 설정을 통해 몇 번의 클릭만으로 등록할 수 있습니다.
1) Cursor를 실행한 뒤 설정(Settings) > Features > MCP 메뉴로 이동합니다.
2) + Add New MCP Server 버튼을 클릭합니다.
3) 팝업창에 아래와 같이 정보를 입력합니다.
- Name: puppeteer (또는 자유롭게 입력)
- Type: command
- Command: npx -y @modelcontextprotocol/server-puppeteer
4) Save를 눌러 저장합니다.
5) 초록색 불이 들어오며 Connected 상태가 되는지 확인합니다.
🔥 실제 사용 예시 (Prompt)
설정을 마치셨다면 에이전트(Agent) 모드나 대화창에서 다음과 같이 요청해 보세요.
💬 "https://news.ycombinator.com 에 접속해서 상위 5개 글 제목이랑 링크 긁어와서 요약해 줘."
💬 "현재 개발 중인 http://localhost:3000 메인 화면 스크린샷 찍어서 UI 컴포넌트 배치에 어색한 부분 없는지 리뷰해 줄래?"
그러면 AI가 "Running tool: puppeteer_navigate..." 같은 메시지를 띄우며 실제로 브라우저를 조작하는 신기한 경험을 하실 수 있습니다.
⚠️ 주의사항 및 팁
- Node.js 필요: npx 명령어를 사용하므로 PC에 Node.js(버전 18 이상 권장)가 설치되어 있어야 합니다.
- 보안 유의: AI가 로컬 브라우저를 제어하므로, 신뢰할 수 없는 프롬프트나 위험한 사이트 접근은 주의하는 것이 좋습니다.
MCP를 통해 AI의 손발을 묶어두지 말고, 진짜 '에이전트'처럼 활용해 보세요! 질문이나 더 좋은 활용 팁이 있다면 댓글로 공유 부탁드립니다. 감사합니다.
신고 · 불법·유해·아동 안전(CSAE) 관련 콘텐츠
댓글 0
아직 댓글이 없습니다. 로그인하면 바로 의견을 남길 수 있습니다.