Claude와 Cursor에 날개를 달아줄 'Playwright/Puppeteer MCP 서버'를 소개합니다! 🚀 (브라우저 자동화)
33
설명
최근 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) 관련 콘텐츠
제목글쓴이조회
- AI 토큰, 절반은 대화 습관에서 샌다 — 사용량 줄이는 실전 체크리스트[0]JD0
- [소개] AI 코딩 에이전트를 위한 오픈소스 애자일 기획 도구, SprintiQ를 소개합니다![0]JD22
- 🚀 Claude와 Cursor에서 @ttsc/graph 100% 활용하기 (프롬프트 context 최적화)[0]RA27
- 노트북 RTX 3060(6GB)으로 외부 유출 없는 완전 오프라인 'AI 문서 비서' 구축 성공 후기[0]도파민중독72
- Claude와 Cursor에 날개를 달아줄 'Playwright/Puppeteer MCP 서버'를 소개합니다! 🚀 (브라우저 자동화)[0]RA32
- 내 AI 비서에게 GitHub 권한을? GitHub MCP Server 소개 및 설정 가이드 (Claude, Cursor)[0]RA41
- "레딧(Reddit) 글로 챗GPT 답변 조작 가능"… AI 검색의 치명적 허점 발견[0]Nedai41
- [정보] "구글 검색어 순위는 끝났다" 이제는 GEO(생성형 엔진 최적화)의 시대[0]TYRRELL66
- Claude와 Cursor에서 Memory Palace / MemPalace 설정 방법[0]TYRRELL86
- 토큰 소모량을 60~95%까지 줄여주는 Headroom 사용 방법[1]Nedai3,113
- 기획자의 서비스 직접 만들기 #2 - 놓친 부분들[0]Nedai91
- 기획자의 서비스 직접 만들기 #1[0]Nedai82
- AI 툴 비용은 얼마씩 사용하고 계신가요?[0]Nedai68
- 변하고 있다는 간호사 문화[0]Nedai91
- 남미의 위험한 나무.jpg[0]Nedai93
- 소심한 댕댕이 입양 후기.jpg[0]도파민중독67
- 슬픈낙서[0]도파민중독56
- 지금 빽다방에서 싸움남ㅠㅠ[0]도파민중독58
- 에베레스트 보험 사기 사건.jpg[0]Nedai60
- 함바집 밴 당한 중소기업[0]Nedai63
- 말투 더러운 MBTI 순위[0]Nedai76
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.