Claude Code의 토큰 비용을 95% 절감하는 오픈소스 Browser CLI 출시

실용적 조언

Claude Code 사용 시 MCP 오버헤드가 크다면 Bash 기반 Browser CLI로 대체하여 비용을 절감할 것.
handoff 명령어를 사용하여 수동으로 SSO/MFA 로그인을 수행한 뒤 resume으로 자동화 세션을 이어갈 수 있음.

섹션별 상세

Playwright MCP 사용 시 발생하는 과도한 토큰 소모 문제를 제기했다. browser_navigate와 browser_snapshot 호출 시 JSON 스키마 프레이밍으로 인해 실제 출력물은 짧음에도 불구하고 호출당 약 1,500토큰이 낭비되는 현상이 관찰됐다. 이는 에이전트 세션당 약 30,000토큰의 지출로 이어져 비용 효율성을 저해한다.

Bash 명령어로 작동하는 영속적 headless Chromium 데몬인 Browser CLI를 구축했다. AI 에이전트가 Bash를 통해 명령을 내리면 로컬 서버가 Playwright API를 호출하여 브라우저를 제어하고, 결과값만 간결하게 반환하는 구조를 채택했다. 이를 통해 호출당 토큰 사용량을 1,500개에서 75개 수준으로 약 95% 절감하는 성과를 거뒀다.

bash

browser-cli goto https://example.com # Navigate
browser-cli snapshot -i # ARIA tree with @e refs
browser-cli click @e3 # Click by ref
browser-cli fill @e5 "hello" # Fill input
browser-cli css @e3 font-size # Get computed CSS value
browser-cli inspect @e3 # Full box model + styles
browser-cli snapshot -D # Diff: what changed since last snapshot

Browser CLI를 사용하여 브라우저를 탐색하고 요소를 검사하거나 상호작용하는 기본 명령어 예시

기존 도구에서 지원하지 않는 고급 브라우저 검사 기능을 추가했다. inspect 명령어로 요소의 박스 모델과 16가지 핵심 스타일을 JSON으로 추출하며, style 명령어로 소스 코드 수정 없이 실시간 CSS 변조 및 실행 취소가 가능하다. 또한 snapshot -D 옵션을 통해 클릭 전후의 ARIA 트리 차이점을 분석하여 동작 여부를 명확히 검증한다.

Claude Code와의 원활한 통합을 위해 전용 규칙과 권한 설정을 제공한다. .claude/settings.json에 Bash 실행 권한을 부여하고 .claude/rules/ 폴더에 지침을 추가하면 Claude가 기본 MCP 대신 Browser CLI를 우선 선택하도록 유도할 수 있다. 실제 5가지 평가 시나리오에서 Claude가 모든 명령을 정확하게 선택하여 실행함을 확인했다.

json

{
  "permissions": {
    "allow": ["Bash(browser-cli*)"]
  }
}

Claude Code에서 Browser CLI를 사용할 수 있도록 Bash 실행 권한을 부여하는 설정 파일 예시

용어 해설

모델 컨텍스트 프로토콜(MCP): — Model Context Protocol의 약자로, AI 모델이 외부 도구 및 데이터 소스와 안전하고 표준화된 방식으로 통신하기 위해 Anthropic에서 제안한 개방형 프로토콜이다.
ARIA 트리(ARIA Tree): — 웹 페이지의 접근성 정보를 담은 구조적 데이터로, AI 에이전트가 시각적 요소 없이도 페이지의 버튼, 입력창 등 상호작용 가능한 요소들을 식별하는 데 사용된다.
토큰 오버헤드(Token Overhead): — 실제 유효한 정보 외에 프로토콜 규격 유지나 복잡한 데이터 구조(JSON 스키마 등)를 전송하기 위해 추가로 소모되는 토큰 비용을 의미한다.
헤드리스 브라우저(Headless Browser): — 사용자 인터페이스(GUI) 없이 백그라운드에서 실행되는 웹 브라우저로, 주로 웹 스크래핑, 자동화 테스트, AI 에이전트의 웹 탐색 용도로 활용된다.
JSON 스키마 프레이밍(JSON Schema Framing): — 데이터 전송 시 구조를 정의하기 위해 감싸는 메타데이터로, MCP와 같은 프로토콜에서 이 프레임이 커질수록 실제 내용보다 더 많은 토큰을 소모하게 된다.

언급된 도구

Browser CLI추천링크

Bash 기반의 경량 브라우저 제어 및 검사 도구

Playwright중립링크

브라우저 자동화 라이브러리

Claude Code중립

Anthropic의 CLI 기반 코딩 에이전트

언급된 리소스

GitHubBrowser CLI GitHub Repository