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! 🤖✨