2025년 10월 Anthropic이 출시한 Claude Skills는 마크다운 파일만으로 AI의 능력을 확장하는 새로운 방식입니다. 이 글에서는 Playwright를 활용한 브라우저 자동화 Skill을 직접 사용해보면서 Claude Skills의 작동 원리와 활용법을 이해해봅니다. “웹사이트 테스트해줘”라는 한 마디로 Claude가 테스트 코드를 작성하고 실행하는 과정을 따라가다 보면, Skills가 MCP와 어떻게 다르고 왜 주목받는지 자연스럽게 알게 될 겁니다.
핵심 포인트:
- 자연어로 테스트 자동화: “구글 로딩 테스트해줘” 한 마디면 Claude가 Playwright 코드를 작성하고 브라우저를 실행해 결과까지 리포트합니다.
- 필요할 때만 로드되는 효율성: MCP가 수만 토큰을 미리 소비하는 반면, Skill은 수십 토큰으로 대기하다가 필요한 순간에만 로드됩니다.
- 마크다운 파일로 만드는 확장 기능: 복잡한 프로토콜 없이 SKILL.md 파일 하나와 몇 개의 스크립트만으로 Claude의 능력을 확장할 수 있습니다.
Playwright Skill 시작하기
Playwright Skill을 설치하는 방법은 세 가지가 있습니다. 가장 간단한 건 Claude Code의 플러그인 시스템을 이용하는 방법입니다.
방법 1: 플러그인 시스템 (권장)
Claude Code에서 다음 명령어를 입력하세요:
/plugin marketplace add lackeyjb/playwright-skill
/plugin install playwright-skill@playwright-skill마켓플레이스에 추가하고 플러그인을 설치하면 끝입니다. Skill 디렉토리로 이동해서 npm run setup을 실행하면 Playwright와 Chromium 브라우저가 자동으로 설치됩니다.
방법 2: 수동 Git 클론
~/.claude/skills 디렉토리에 직접 클론할 수도 있습니다:
cd ~/.claude/skills
git clone https://github.com/lackeyjb/playwright-skill.git
cd playwright-skill/skills/playwright-skill
npm run setup방법 3: 릴리스 다운로드
GitHub Releases 페이지에서 최신 버전을 다운로드해서 압축을 풀고, 위와 동일하게 Skill 디렉토리에서 npm run setup을 실행하면 됩니다.
설치가 완료됐다면 /help 명령어로 Skill이 제대로 로드됐는지 확인해보세요. 이제 첫 테스트를 실행할 시간입니다.
Claude Code에 이렇게 말해보세요: “google.com 로드 테스트 해줘”
그러면 Claude가 자동으로 Playwright 코드를 작성합니다. 브라우저가 열리고 구글 페이지가 로드되는 걸 눈으로 확인할 수 있습니다. 기본 설정이 headless: false라서 실제 브라우저 창이 보이거든요. 테스트가 끝나면 스크린샷과 콘솔 출력을 보여줍니다.
실제로 벌어지는 일
“웹사이트 테스트해줘”라고 말했을 때 뒤에서 무슨 일이 벌어지는 걸까요?
Claude는 먼저 사용 가능한 Skills를 스캔합니다. SKILL.md 파일의 frontmatter에 있는 짧은 설명만 읽습니다. “브라우저 자동화”, “Playwright”, “테스팅” 같은 키워드가 있다면 이 Skill이 필요하다고 판단하죠.
그다음 SKILL.md 전체를 로드합니다. 314줄 분량의 이 파일에는 Playwright를 사용하는 방법이 담겨 있습니다. “페이지 열기”, “요소 클릭하기”, “스크린샷 찍기” 같은 기본 패턴들이 예제와 함께 정리돼 있습니다.
Claude는 이 지침을 읽고 나서 사용자 요청에 맞는 Playwright 코드를 작성합니다. 코드는 run.js라는 실행기를 통해 실행됩니다. 이 실행기가 Playwright 라이브러리를 제대로 찾아서 실행할 수 있게 해줍니다.
// Claude가 생성한 코드 예시
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://google.com');
await page.screenshot({ path: '/tmp/google.png' });
console.log('✓ Google loaded successfully');
await browser.close();
})();브라우저가 실행되고 테스트가 진행되는 동안 모든 과정이 눈에 보입니다. 슬로우 모션 효과(기본 100ms)가 적용돼서 각 동작을 확인할 수 있습니다. 테스트가 끝나면 스크린샷과 콘솔 메시지가 결과로 돌아옵니다.
Skill이 작동하는 방식
Skill의 구조는 놀라울 정도로 단순합니다. 폴더 하나에 몇 개 파일이 전부입니다.
playwright-skill/
├── SKILL.md # Claude가 읽는 지침서 (314줄)
├── run.js # 코드 실행기
├── package.json # 의존성 관리
└── lib/
└── helpers.js # 선택적 유틸리티 함수SKILL.md는 YAML frontmatter로 시작합니다:
---
name: playwright-skill
description: Browser automation with Playwright for testing and validation
---name은 Skill의 고유 식별자입니다. description은 Claude가 이 Skill을 언제 사용해야 하는지 판단하는 핵심 정보입니다. 이 두 줄이 전체 Skills 시스템에서 각 Skill을 구분하는 유일한 메타데이터입니다.
그 아래는 마크다운으로 작성된 지침입니다. 코드 예제, 사용 패턴, 주의사항 등이 담겨 있습니다. Claude는 이걸 읽고 Playwright 코드를 어떻게 작성해야 하는지 학습합니다.
핵심은 Claude가 이 Skill을 필요한 순간에만 로드한다는 점입니다. 세션이 시작되면 모든 Skills의 frontmatter만 스캔합니다. 각 Skill당 수십 토큰 정도만 소비하죠. 실제로 브라우저 자동화가 필요한 순간이 오면 그때 SKILL.md 전체를 로드합니다.
더 자세한 API 정보가 필요하면 API_REFERENCE.md(630줄)를 추가로 읽습니다. 이것도 필요할 때만입니다. Progressive disclosure, 점진적 노출이라는 전략입니다.
Playwright MCP와 비교하면
같은 Playwright을 MCP 방식으로도 사용할 수 있습니다. Microsoft가 만든 MCP인데요. 둘은 접근법이 완전히 다릅니다.
Playwright MCP 방식:
MCP는 미리 정의된 도구 세트를 제공합니다. browser_click, browser_navigate, browser_snapshot 같은 함수들이 API 형태로 존재합니다. Claude가 이 도구들을 호출하면 MCP 서버가 실제 작업을 수행하고 결과를 돌려줍니다.
문제는 토큰입니다. MCP는 모든 도구의 설명과 매개변수를 처음부터 컨텍스트에 로드해야 합니다. 여러 MCP를 동시에 사용하면 컨텍스트 윈도우가 금방 차버립니다.
Playwright Skill 방식:
Skill은 코드를 직접 작성하게 합니다. Claude가 Playwright 코드를 생성하면 그걸 로컬에서 실행합니다. 스크린샷과 콘솔 출력만 돌려받습니다.
대기 상태에서는 314줄짜리 SKILL.md만 메모리에 있습니다. 실행 중에도 매번 접근성 트리 스냅샷을 주고받을 필요가 없습니다. 필요한 정보만 딱 돌아옵니다.
| 비교 항목 | Playwright MCP | Playwright Skill |
|---|---|---|
| 구조 | MCP 서버 + 정의된 도구 세트 | 마크다운 지침 + 실행 환경 |
| 토큰 사용 | 수만 토큰 (항상 로드) | 수십 토큰 (필요시 로드) |
| 작동 방식 | 도구 호출 → 서버 실행 → 결과 반환 | 코드 생성 → 로컬 실행 → 결과 반환 |
| 확장성 | 프로토콜 명세 필요 | 마크다운 파일 추가 |
| 유연성 | 정의된 기능만 사용 | 임의의 Playwright 코드 작성 |
MCP가 나쁘다는 게 아닙니다. 정확하고 일관된 작업이 필요할 때는 미리 정의된 도구가 더 안전할 수 있습니다. 하지만 Skill의 단순함과 효율성은 무시하기 어렵습니다.
실전 활용 시나리오
Playwright Skill로 뭘 할 수 있을까요? MCP가 제공하는 기본 기능은 물론이고, 더 나아가 Playwright가 할 수 있는 모든 작업이 가능합니다.
웹페이지 기능 테스트
“연락처 폼이 제대로 작동하는지 확인해줘”라고 말하면 Claude가 폼을 찾아서 테스트 데이터를 입력하고 제출 버튼을 클릭합니다. 성공 메시지가 나타나는지 확인하고 결과를 리포트합니다.
반응형 디자인 검증
“대시보드를 모바일과 데스크톱에서 스크린샷 찍어줘”라고 요청하면 뷰포트 크기를 바꿔가며 여러 스크린샷을 찍습니다. 모바일(375×667)과 데스크톱(1920×1080) 화면을 비교할 수 있습니다.
폼 제출 자동화
“회원가입 폼 채워서 제출해줘”라고 하면 필요한 필드를 자동으로 채웁니다. 이메일, 비밀번호, 이름 같은 입력값을 생성해서 넣고 제출까지 처리합니다.
링크와 이미지 검증
“깨진 링크 확인해줘”나 “모든 이미지가 제대로 로드되는지 확인해줘”처럼 말하면 페이지의 모든 링크를 크롤링하거나 이미지 로딩 상태를 확인합니다.
MCP는 미리 정의된 도구(browser_click, browser_navigate 등)만 사용할 수 있습니다. 반면 Skill은 Claude가 직접 Playwright 코드를 작성하기 때문에 더 유연합니다. 복잡한 시나리오나 특수한 케이스도 자연어로 설명하면 Claude가 적절한 코드를 만들어냅니다.
“이 버튼 클릭하면 모달이 뜨는지 확인해줘” 같은 요청도 가능합니다. Claude가 페이지 구조를 파악하고 적절한 셀렉터를 찾아서 테스트를 구성합니다. Playwright API를 외우고 있을 필요가 없습니다. 원하는 테스트를 자연어로 설명하면 됩니다.
단순함이 만드는 가능성
Playwright Skill이 특별한 이유는 복잡한 기능 때문이 아닙니다. 오히려 그 단순함 때문입니다.
마크다운 파일 하나로 Claude의 능력을 확장할 수 있습니다. MCP처럼 프로토콜 명세를 공부하고 서버를 구축할 필요가 없습니다. 텍스트 파일에 지침을 적으면 됩니다. Claude Code나 API의 Code Execution Tool처럼 코딩 환경만 있으면 바로 작동합니다.
Playwright Skill은 그런 가능성을 보여주는 한 사례입니다. 데이터 분석, 문서 생성, API 통합… 필요한 모든 영역에 적용할 수 있습니다. 폴더 하나, 마크다운 파일 하나면 충분합니다.
참고자료:
답글 남기기