![[TIP]Playwright CLI&SKILL(MCP vs CLI:Skill)](/_next/image?url=https%3A%2F%2Ftzmluihlahuykicindyt.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fblog%2Fthumbnails%2F1770623504840_zixzd8.jpg&w=3840&q=75)
[TIP]Playwright CLI&SKILL(MCP vs CLI:Skill)
단순한 CLI 도구가 아닙니다. Claude Code나 OpenClaw 같은 에이전트의 Global Skills 폴더에 주입되어, AI가 직접 웹을 탐색하고 결과를 가져오게 만드는 에이전트 전용 확장 스킬입니다.
🔄 Workflow Summary
| Step | Description | Output |
|---|---|---|
| 1 | 패키지 전역 설치 | npm install -g @playwright/cli |
| ↓ | ||
| 2 | 브라우저 설치 | playwright-cli install |
| ↓ | ||
| 3 | 스킬 주입 | playwright-cli install --skills ⭐ |
| ↓ | ||
| 4 | AI 자연어 명령 | "애플 홈페이지 들어가서 아이폰 가격 확인해" |
📖 상세 가이드
1. 핵심 컨셉: "명령어가 아닌 스킬이다"
기존 MCP는 AI가 서버와 통신하며 데이터를 주고받는 방식이라 느리고 토큰 소모가 심했습니다.
Playwright CLI 스킬 방식은 에이전트가 설치된 로컬 스킬 파일을 직접 읽어 실행하므로 훨씬 빠르고 효율적입니다.
핵심 특징:
| 특징 | 설명 |
|---|---|
| 에이전트의 눈과 손 | AI가 "웹사이트 들어가서 버튼 눌러"라는 말을 들었을 때, 내부적으로 Playwright 스킬을 호출해 실행합니다 |
| 파일 기반 컨텍스트 | 스크린샷이나 페이지 내용을 토큰으로 다 쑤셔 넣는 게 아니라, 로컬에 저장하고 AI가 필요할 때만 그 파일을 읽게 합니다 |
2. 설치 및 스킬 등록 (Setup Skills)
에이전트가 이 기능을 인식하게 하려면 '스킬 설치' 과정이 핵심입니다.
Step 1: 패키지 설치
npm install -g @playwright/cli
Step 2: 워크스페이스 및 브라우저 세팅
playwright-cli install
Step 3: 스킬 주입 (가장 중요) ⭐
이 명령어를 실행하면 에이전트(예: Claude Code)가 인식할 수 있는 위치에 스킬 정의 파일들이 복사됩니다.
playwright-cli install --skills
참고: 이 과정에서 global_skills 또는 프로젝트의 스킬 폴더에 playwright.js 같은 스킬 세트가 생성됩니다.
3. 에이전트를 통한 실제 사용 (How AI uses it)
사용자는 더 이상 playwright-cli를 입력하지 않습니다. 대신 에이전트에게 자연어로 시킵니다.
사용 예시:
사용자: "애플 홈페이지 들어가서 최신 아이폰 가격 알아보고 스크린샷 찍어줘."
에이전트의 내부 동작 (Internal):
// 에이전트가 내부적으로 호출하는 스킬 함수들
playwright.open_url({ url: "https://apple.com" })
playwright.click({ selector: "text=iPhone" })
playwright.screenshot({ path: "iphone_price.png" })
- 스킬 호출:
playwright.open_url()로 페이지 열기 - 상호작용:
playwright.click()으로 아이폰 섹션 클릭 - 결과 저장:
playwright.screenshot()으로 스크린샷 저장 - 파일 읽기: 저장된 파일을 읽어 사용자에게 답변
📊 MCP vs 스킬 방식 비교
| 비교 항목 | MCP 방식 (Server-based) | Playwright 스킬 방식 (CLI-based) |
|---|---|---|
| 호출 방식 | 네트워크를 통한 원격 호출 | 에이전트가 로컬 스킬 파일을 직접 실행 |
| 토큰 관리 | 데이터가 강제로 LLM에 전송됨 | 에이전트가 필요한 파일만 골라 읽음 |
| 성능 | 오버헤드가 큼 (느림) | 네이티브 실행 (매우 빠름) |
| 기능 확장 | 서버 설정을 바꿔야 함 | 스킬 파일을 수정하거나 추가하면 끝 |
★ Insight ─────────────────────────────────────
MCP 방식은 모든 데이터를 LLM 토큰으로 변환해서 전송해야 하므로,
스크린샷이나 큰 HTML 페이지 처리 시 비효율적입니다.
반면 스킬 방식은 에이전트가 로컬 파일 시스템을 직접 활용하므로,
대용량 데이터를 파일로 저장하고 필요할 때만 읽어올 수 있어 훨씬 효율적입니다.
(약 90퍼센트 절감효과)
─────────────────────────────────────────────────
🛠️ GitHub에서 찾아낸 꿀팁 (Advanced Skills)
1. Persistent Context (영구적 컨텍스트)
스킬을 통해 실행되는 브라우저는 세션이 유지됩니다.
장점:
- 한 번 로그인해두면 에이전트가 다음 작업에서도 로그인된 상태로 웹핑을 할 수 있습니다
- 쿠키, 세션 스토리지가 보존되어 재로그인 불필요
2. Run Code 스킬
단순 클릭/입력을 넘어, AI가 복잡한 Playwright 스크립트(js)를 직접 작성해서 run-code 스킬로 던질 수 있습니다.
의미:
- AI가 스스로 자동화 코드를 짜서 실행하는 수준까지 가능합니다
- 복잡한 웹 자동화 작업도 자연어 한 줄로 해결
✨ 활용 팁
- 에이전트 선택: Claude Code, GitHub Copilot 등 지원하는 에이전트 확인
- 스킬 위치 확인:
global_skills폴더나 프로젝트 스킬 폴더에 playwright.js 파일 확인 - 로그인 활용: Persistent Context를 활용해 한 번만 로그인하고 세션 유지
- 복잡한 작업: Run Code 스킬로 AI가 직접 Playwright 스크립트 작성하게 하기
📚 추가 리소스
- Playwright CLI GitHub: 공식 저장소
- Claude Code Skills: Claude Code 스킬 문서
- Playwright Documentation: Playwright 공식 문서
★ Insight ─────────────────────────────────────
스킬 방식의 가장 큰 장점은 에이전트의 자율성입니다.
MCP 방식에서는 서버가 미리 정의한 기능만 사용할 수 있었지만,
스킬 방식에서는 에이전트가 로컬 스크립트를 직접 실행하고,
필요하면 새로운 코드를 작성까지 할 수 있습니다.
이는 AI 코딩 에이전트의 가능성을 획기적으로 확장합니다.
─────────────────────────────────────────────────
⚠️ 면책 조항
본 가이드를 따르면서 발생하는 모든 결과에 대한 책임은 전적으로 사용자 본인에게 있습니다. 이 문서는 참고용으로 제공되며, 작성자는 어떠한 손해나 문제에 대해 책임지지 않습니다.
금지 사항:
- 본 내용을 악의적인 목적으로 사용하는 것을 엄격히 금지합니다.
- 웹 스크래핑 시 서비스 약관을 위반하거나 과도한 요청을 보내는 것을 금지합니다.
- 타인의 권리를 침해하거나 불법적인 활동에 사용하는 것을 금지합니다.
- 상업적 목적의 무단 복제나 재배포를 금지합니다.
본 가이드의 내용은 학습 및 교육 목적으로만 사용해야 합니다.