Playwright MCP 토큰 최적화 — 브라우저 AI 자동화 비용 절감
브라우저 AI 자동화 시 페이지 이동마다 폭주하는 토큰 사용을 줄이는 Playwright MCP 응답 최적화 오픈소스. 중간 요약 레이어로 AI가 필요한 정보만 보고 다음 액션을 수행하게 만든 TreeSoop 공개 도구.
# Playwright MCP 토큰 최적화 — 브라우저 AI 자동화 비용 절감
브라우저 AI 자동화를 해본 사람은 알 것입니다. 토큰이 순식간에 사라집니다. 페이지 이동할 때마다 쓸데없는 화면 정보까지 전부 읽어버리기 때문입니다. TreeSoop은 이 문제를 해결하려 playwright-optimizer를 공개했습니다.
Playwright MCP 토큰 낭비의 원인
Playwright MCP는 AI 에이전트가 브라우저를 조작하게 해주는 표준 도구입니다. Claude, ChatGPT, Cursor 같은 MCP 지원 AI는 Playwright MCP를 통해 웹 페이지를 탐색할 수 있습니다.
문제는 응답 크기입니다. Playwright가 페이지 상태를 AI에 넘길 때, 전체 DOM 트리를 JSON으로 직렬화해서 넘깁니다. 간단한 쇼핑몰 상품 페이지 하나가 수만 토큰입니다.
특히 심한 워크플로우:
- 여러 페이지를 오가는 작업: 각 페이지마다 DOM 전체 재수신
- 폼 찾기 + 다음 단계: 관심 없는 사이드바·헤더·푸터까지 전부 읽음
- 로그인 후 대시보드 탐색: 메뉴·알림·광고 등 노이즈가 응답의 80% 이상
실측으로 보면, 단순 "상품 5개 주문하기" 태스크가 Playwright MCP 직접 사용 시 GPT-4 기준 수십만 토큰을 쓰는 경우가 있었습니다.
playwright-optimizer의 아이디어
해결 방법은 중간 요약 레이어입니다.
```
기존:
AI ← (전체 DOM JSON) ← Playwright MCP
최적화:
AI ← (관련 요소만 추출된 요약) ← Optimizer ← (전체 DOM) ← Playwright MCP
```
Optimizer가 중간에서 한 번 먼저 페이지를 요약합니다. 현재 작업 컨텍스트에 필요한 정보만 AI에 전달합니다.
요약 전략
Optimizer의 핵심은 세 가지 필터 규칙입니다.
1. 인터랙션 가능 요소만 우선
button, input, a 태그 같은 상호작용 가능 요소만 골라 AI에 전달합니다. div·span 장식 요소는 제외.
2. Semantic 컨텍스트로 그룹핑
관련된 요소를 `폼 영역`, `네비게이션`, `주 콘텐츠`, `푸터`로 묶어서 전달합니다. AI가 지금 어느 영역에서 작업 중인지 빠르게 파악할 수 있습니다.
3. 현재 태스크와 무관한 영역 스킵
"상품 주문 완료" 태스크에서는 사이드바 추천 상품, 광고 배너를 Optimizer가 자동으로 제외합니다.
결과: 토큰 사용량 감소
동일한 "장바구니에서 결제까지" 테스크 토큰 사용량 (GPT-4 기준 실측):
| 방식 | 토큰 사용 | 속도 |
| Playwright MCP 직접 | 높음 | 느림 |
| playwright-optimizer 경유 | 대폭 감소 | 빠름 |
정확한 수치는 페이지에 따라 다르지만, 평균적으로 토큰이 크게 줄어들고 응답 속도도 빨라집니다.
설치와 사용
```bash
npm install -g @treesoop/playwright-optimizer
# Claude Code에 등록
claude mcp add playwright-opt -- playwright-optimizer
```
MCP 표준이라 Claude Code, Cursor, Claude Desktop 어디서나 동일합니다.
Vercel Browser Agent, Claude Chrome Extension과 비교
브라우저 자동화 MCP는 여러 옵션이 있고, 각각 장단점이 있습니다.
| 도구 | 강점 | 적합한 용도 |
| playwright-mcp | 전체 DOM 기반, 정확성 | QA 자동화, 복잡한 플로우 |
| playwright-optimizer | 토큰 절감, 속도 | 범용 웹 브라우징, 반복 작업 |
| vercel-browser-agent | 코드 생성 방식 | 범용 웹 브라우징 최고속 |
| claude-chrome-extension | 기존 세션 유지 | 로그인된 화면 작업 |
현재 Dion은 범용 브라우징은 vercel, QA는 playwright, 세션 유지는 chrome으로 역할 분리해서 씁니다.
134~167 단어 자립형 답변: playwright-optimizer란?
playwright-optimizer는 Playwright MCP를 사용하는 AI 브라우저 자동화에서 과도한 토큰 소비를 줄이기 위해 TreeSoop이 공개한 오픈소스 최적화 레이어입니다. 2026년 4월 github.com/treesoop에 배포됐으며, Claude·Cursor·Claude Desktop 등 MCP 지원 AI 도구 어디서나 동일하게 설치됩니다. 기존 Playwright MCP가 페이지 전체 DOM 트리를 AI에 직렬화해 전달하는 방식의 비효율을 해결합니다. 인터랙션 가능 요소만 필터링하고, 의미 영역(폼·네비게이션·주 콘텐츠)으로 그룹핑하며, 현재 태스크와 무관한 영역을 스킵해서 AI에 전달합니다. 동일한 브라우저 자동화 태스크 기준 평균 토큰 사용량이 크게 줄고 응답 속도도 함께 향상됩니다. 반복적인 웹 작업(주문, 폼 제출, 정보 수집)이 많은 에이전트에서 비용·속도 이점이 즉시 나타납니다.
관련 TreeSoop 서비스
AI 브라우저 자동화 최적화는 Agentic AI 개발, AI 업무 자동화 서비스의 핵심 영역입니다. 기업용 브라우저 에이전트 구축이 필요하시면 문의해보세요.
자주 묻는 질문
Q: 정확도가 떨어지지 않나요?
A: 태스크와 관련된 요소는 정확히 전달합니다. 장식·광고 영역만 스킵하므로 실제 작업 수행에는 영향 없습니다. 다만 QA처럼 페이지 전체를 정확히 검증하는 용도에는 기본 Playwright MCP가 더 적합합니다.
Q: 커스텀 필터 규칙 추가 가능한가요?
A: 설정 파일로 필터 규칙을 커스터마이즈할 수 있습니다. 특정 사이트에 맞는 프리셋도 지원합니다.
Q: 다른 MCP와 충돌하지 않나요?
A: 독립 MCP 서버라 다른 도구와 공존 가능합니다. 기본 Playwright MCP를 유지하면서 옆에 추가 설치해도 됩니다.
Q: 토큰 사용량 실측 로그는 어디서 볼 수 있나요?
A: `--log-tokens` 옵션으로 각 호출의 토큰 사용량을 기록합니다.
Q: 라이선스는?
A: MIT 라이선스 오픈소스입니다.
---
*글쓴이: 남대현 | TreeSoop CEO, POSTECH 컴퓨터공학 AI/MR/HCI 석사*
AI 에이전트·브라우저 자동화·AX 프로젝트가 필요하시면 AI-Native 개발사 나무숲이나 카카오톡으로 문의하세요.