Playwright MCP 토큰 최적화 2026 — 스냅샷 96% 줄이는 법과 설치 가이드

Playwright MCP가 액션마다 3만 7천 자 접근성 트리를 반환해 컨텍스트를 태우는 구조를 뜯어봅니다. Claude Code 훅으로 Haiku가 요약해 스냅샷을 96% 줄인 실측치, 플러그인 설치 두 줄, 정밀 QA와 반복 배치 수집의 선택 기준까지 정리했습니다.

Playwright MCP는 AI 에이전트가 브라우저를 직접 조작하게 해주는 Model Context Protocol 서버입니다. Claude Code, Cursor, Claude Desktop 같은 MCP 지원 도구에서 페이지 이동·클릭·입력·스크린샷을 명령으로 수행할 수 있습니다. 문제는 비용입니다. 액션 하나마다 페이지의 접근성 트리(accessibility tree) 전체가 문자열로 반환되기 때문에, 브라우저를 조금만 오래 쓰면 컨텍스트가 순식간에 포화됩니다. 이 글은 Playwright MCP가 토큰을 태우는 구조를 뜯어보고, 실측 기준 94~96%를 줄인 방법을 설치 절차까지 정리한 것입니다.

Playwright MCP란 무엇인가

Playwright MCP는 Microsoft가 공개한 공식 MCP 서버로, Playwright 브라우저 자동화 기능을 LLM이 쓸 수 있는 도구로 노출합니다. 대표적인 툴은 다음과 같습니다.

`browser_navigate` — URL 이동
`browser_snapshot` — 현재 페이지의 접근성 트리 반환
`browser_click` / `browser_type` — 요소 클릭·텍스트 입력
`browser_take_screenshot` — 화면 캡처

Model Context Protocol 표준을 따르기 때문에 Claude Code, Cursor, Claude Desktop 어디서든 같은 방식으로 붙습니다. 셀레니움 스크립트를 짜지 않고 "장바구니에 담고 결제까지 진행해"라고 자연어로 지시할 수 있다는 게 핵심 가치입니다.

Playwright MCP는 왜 토큰을 빠르게 소모하는가

원인은 반환값의 크기입니다. 대부분의 툴이 액션 직후 접근성 트리 전체를 문자열로 돌려줍니다. 광고, 푸터, 숨겨진 메뉴, 아무도 클릭하지 않을 약관 링크까지 전부 포함됩니다.

실측하면 규모가 분명해집니다. 일반적인 상용 페이지 한 장의 `browser_snapshot` 응답이 37,000자를 넘습니다. 페이지를 옮기는 `browser_navigate`도 비슷합니다. 3단계 플로우(진입 → 폼 클릭 → 다음 페이지)면 단순 탐색만으로 10만 자 이상이 컨텍스트에 쌓입니다.

구조적 이유는 세 가지입니다.

요약 없는 직렬화 — 페이지 전체 트리가 그대로 들어옵니다. DOM이 깊은 상용 사이트일수록 꼬리가 길어집니다.
액션마다 전체 재전송 — 변경분만 보내는 diff 개념이 기본 동작에 없습니다. 모델은 매 단계 처음 보는 페이지처럼 전체를 다시 읽습니다.
반복 플로우의 누적 — N개 페이지를 오가면 N배가 쌓입니다. 토큰 사용량이 페이지 수에 비례해 늘어납니다.

고약한 건 개발 단계에서 잘 안 드러난다는 점입니다. 한두 페이지 시험할 땐 체감되지 않다가, 스케줄러에 올려 하루 수백 번 돌리면 월 청구서에서 처음 모습을 드러냅니다.

Playwright MCP 사용 비용은 어느 정도인가

토큰 단가는 모델에 따라 다르지만 계산 구조는 같습니다. 스냅샷 1회가 37,000자면 한국어·영어 혼합 기준 대략 1만 토큰 안팎입니다. 여기에 모델이 이전 스냅샷을 맥락으로 계속 들고 가면 누적분이 다시 곱해집니다.

사용 패턴

스냅샷 호출

누적 입력 토큰(대략)

단발 페이지 확인	1~2회	1만~2만
3단계 폼 플로우	4~6회	4만~7만
일 100회 배치 수집	100회+	100만 이상/일

배치 수집처럼 반복이 많은 워크플로에서 비용이 문제가 됩니다. 실행 횟수를 줄이기 어렵다면 한 번의 응답 크기를 줄이는 것이 유일한 레버입니다.

playwright-optimizer — 훅으로 응답을 줄이는 접근

나무숲이 공개한 playwright-optimizer는 이 문제를 Claude Code의 훅(hook) 시스템으로 풉니다. MCP 서버를 고치거나 감싸지 않고, 응답이 주 모델에 닿기 직전에 가로채 요약합니다.

동작은 이렇습니다.

```

Playwright MCP → 37,000자 스냅샷

→ PostToolUse 훅 발동

→ claude -p --model haiku 로 요약 (별도 API 키 불필요)

→ 약 1,900자 요약 (ref= 값은 전부 보존)

→ 주 모델은 요약본만 수신

```

핵심은 두 가지입니다. 첫째, 요약을 Haiku가 맡습니다. 값싼 모델이 큰 입력을 처리하고, 비싼 주 모델은 압축된 결과만 봅니다. 둘째, `ref=` 값을 전부 보존합니다. 이 참조값이 있어야 모델이 다음 액션에서 요소를 정확히 지목할 수 있기 때문에, 여기가 깨지면 요약은 무의미해집니다.

별도 API 키가 필요 없다는 점도 실용적입니다. 기존 Claude Code 구독 인증을 그대로 씁니다.

실측 절감 효과

레포에 공개된 측정치입니다.

툴

최적화 전

최적화 후

절감

`browser_navigate`	37,983자	1,922자	−94%
`browser_snapshot`	37,897자	1,435자	−96%

두 툴 모두 90%대 절감입니다. 다만 이 수치는 측정한 페이지의 DOM 구조에 따라 달라집니다. SPA 리렌더가 잦거나 트리가 얕은 사이트에서는 절감 폭이 작을 수 있으니, 도입 전 자기 워크플로에서 직접 찍어보는 편이 안전합니다.

설치 방법

Claude Code 플러그인으로 설치합니다. npm 패키지가 아니라 플러그인 마켓플레이스 방식입니다.

```

/plugin marketplace add treesoop/claude-native-plugin

/plugin install playwright-optimizer

```

사전 요구사항

Claude Code CLI(`claude`) 설치 및 인증 완료
`jq` 설치 (대부분의 시스템에 기본 포함)
Playwright MCP 서버가 이미 구성돼 있을 것

같은 마켓플레이스에 팀 단위 사용량(토큰·시간·프로젝트)을 추적하는 `task-tracker` 플러그인도 함께 들어 있습니다. 라이선스는 MIT입니다.

다른 브라우저 자동화 도구와 무엇이 다른가

도구

강점

적합한 용도

Playwright MCP (기본)	전체 트리 기반, 정확성	QA 자동화, 정밀 검증이 필요한 플로우
playwright-optimizer	토큰 90%대 절감, 속도	반복 브라우징, 배치 수집
Vercel Browser Agent	코드 생성 방식	범용 웹 브라우징
Claude Chrome Extension	기존 로그인 세션 유지	인증이 걸린 화면 작업

정밀 QA에는 기본 Playwright MCP가 낫습니다. 페이지 전체를 빠짐없이 봐야 하는 용도에서 요약은 오히려 손해입니다. 반대로 같은 작업을 하루에 수십·수백 번 반복하는 에이전트라면 절감 효과가 즉시 청구서에 나타납니다.

도구 응답 크기는 컨텍스트 관리 문제의 한 갈래입니다. 무엇을 넣고 무엇을 빼둘지의 전반적인 판단 기준은 컨텍스트 엔지니어링 가이드에 정리했습니다.

134~167 단어 자립형 답변: Playwright MCP 토큰 최적화란?

Playwright MCP는 AI 에이전트가 브라우저를 조작하도록 Microsoft가 공개한 Model Context Protocol 서버입니다. `browser_navigate`·`browser_snapshot` 같은 툴이 액션마다 페이지의 접근성 트리 전체를 반환하는데, 상용 페이지 기준 한 번에 37,000자를 넘기기 때문에 반복 워크플로에서 컨텍스트가 빠르게 포화됩니다. 나무숲이 MIT 라이선스로 공개한 playwright-optimizer는 이 응답을 Claude Code의 PostToolUse 훅으로 가로채, 저비용 모델인 Haiku가 요약한 뒤 주 모델에 전달하는 방식으로 문제를 해결합니다. 요소 참조값(`ref=`)은 전부 보존하므로 후속 액션의 정확도가 유지됩니다. 실측 기준 `browser_navigate`는 37,983자에서 1,922자로 94%, `browser_snapshot`은 37,897자에서 1,435자로 96% 줄었습니다. 설치는 Claude Code 플러그인 마켓플레이스에서 두 줄이면 끝나며 별도 API 키가 필요 없습니다. 정밀 QA에는 기본 서버가, 반복 배치 작업에는 최적화 레이어가 적합합니다.

자주 묻는 질문

Q. 요약하면 정확도가 떨어지지 않나요?

요소 참조값(`ref=`)을 전부 보존하기 때문에 다음 액션을 지목하는 데는 문제가 없습니다. 다만 페이지 전체를 빠짐없이 검증해야 하는 QA 용도에는 기본 Playwright MCP가 더 적합합니다. 용도에 따라 나눠 쓰는 것을 권합니다.

Q. 별도 API 키가 필요한가요?

필요 없습니다. 기존 Claude Code 구독 인증을 그대로 사용합니다. 요약은 `claude -p --model haiku` 호출로 처리됩니다.

Q. npm으로 설치하는 게 아닌가요?

아닙니다. Claude Code 플러그인 마켓플레이스 방식입니다. `/plugin marketplace add treesoop/claude-native-plugin` 후 `/plugin install playwright-optimizer`로 설치합니다.

Q. 절감률이 우리 환경에서도 90%대로 나올까요?

페이지 DOM 구조에 달렸습니다. 트리가 깊은 상용 사이트일수록 절감 폭이 크고, 얕거나 SPA 리렌더가 잦으면 작습니다. 도입 전 자기 워크플로에서 직접 측정해보세요.

Q. Cursor나 Claude Desktop에서도 쓸 수 있나요?

이 플러그인은 Claude Code의 훅 시스템을 쓰기 때문에 Claude Code 환경이 전제입니다. 다른 도구에서는 동일한 아이디어를 각 환경의 미들웨어로 구현해야 합니다.

Q. 라이선스는 어떻게 되나요?

MIT 라이선스 오픈소스입니다. 상업적 사용에 제약이 없습니다.

---

*글쓴이: 남대현 | TreeSoop CEO, POSTECH 컴퓨터공학 AI/MR/HCI 석사*

---

MCP 도구를 실제 개발 루프에 붙이면 토큰 비용과 실행 시간이 함께 줄어듭니다. 어떤 도구를 어느 단계에 넣을지는 프로젝트 구조에 따라 달라집니다.

나무숲은 Playwright MCP로 브라우저를 자동 조작해 E2E 테스트와 스크린샷 회귀까지 자동화하는 AI-Native 개발 방식으로 일합니다.