Claude Code에서 Playwright MCP 서버 설치 및 웹 자동화 사용법 완벽 가이드
요약
Claude Code에서 Playwright MCP 서버 사용하기 🎭
웹 자동화를 Claude와 함께! Playwright MCP 서버를 설정하고 사용하는 방법을 초보자도 따라할 수 있게 정리했습니다.
MCP가 뭐야? 🤔
MCP(Model Context Protocol)는 Claude가 외부 도구를 사용할 수 있게 해주는 다리 역할을 합니다. 쉽게 말해, Claude에게 "눈과 손"을 달아주는 거예요!
1. Playwright MCP 서버 설치하기 📦
터미널을 열고 다음 명령어를 실행하세요:
npm install -g @executeautomation/playwright-mcp-server
💡 Tip: npm이 없다면 먼저 Node.js를 설치하세요!
2. Claude Code에 연결하기 🔌
이제 Claude가 Playwright를 사용할 수 있도록 연결해봅시다:
# 기본 연결 (현재 프로젝트에서만)
claude mcp add playwright -- npx @executeautomation/playwright-mcp-server
# 모든 프로젝트에서 사용하려면
claude mcp add playwright -s user -- npx @executeautomation/playwright-mcp-server
🎯 여기서 잠깐!
playwright
는 원하는 이름으로 바꿀 수 있어요--
뒤에는 실행할 명령어가 옵니다-s user
는 모든 프로젝트에서 사용한다는 뜻
3. 연결 확인하기 ✅
Claude Code에서 다음 명령어로 상태를 확인하세요:
/mcp
Playwright 서버가 "Connected" 상태면 성공! 🎉
4. 이제 사용해보자! 🚀
📸 스크린샷 찍기
"https://www.google.com 스크린샷 찍어줘"
🔍 웹페이지 스크래핑
"네이버 뉴스에서 오늘의 헤드라인 가져와줘"
🤖 자동화 작업
"구글에서 'MCP protocol' 검색하고 결과 보여줘"
📊 페이지 분석
"https://github.com/trending 에서 인기 저장소 Top 5 보여줘"
5. 실전 예제 💪
You: playwright로 유튜브에서 '프로그래밍' 검색하고 상위 3개 영상 제목 알려줘
Claude: [Playwright를 실행하여 YouTube에 접속합니다...]
1. "파이썬 기초 10분 완성"
2. "개발자가 되는 가장 빠른 방법"
3. "2024 프로그래밍 언어 순위"
6. 문제 해결 🔧
서버 목록 확인
claude mcp list
서버 제거하고 다시 추가
claude mcp remove playwright
claude mcp add playwright -- npx @executeautomation/playwright-mcp-server
상세 정보 보기
claude mcp get playwright
🎓 고급 활용법
프로젝트별 설정
# 개발용
claude mcp add dev-browser -s local -- npx @executeautomation/playwright-mcp-server
# 프로덕션용
claude mcp add prod-browser -s local -- npx @executeautomation/playwright-mcp-server
팀과 공유하기
# .mcp.json 파일로 저장되어 Git에 커밋 가능
claude mcp add playwright -s project -- npx @executeautomation/playwright-mcp-server
마무리 🎬
이제 Claude가 웹을 자유롭게 탐색하고 자동화할 수 있게 되었어요! 웹 스크래핑, 테스팅, 모니터링 등 다양한 작업을 Claude와 함께 해보세요.
Happy Automating! 🤖✨