Glance: Claude Code를 위한 오픈 소스 MCP 브라우저 서버 출시

섹션별 상세

AI 에이전트가 웹 브라우저를 직접 제어하지 못하는 한계는 복잡한 자동화 작업의 병목으로 작용했다. Glance는 Playwright를 기반으로 한 Chromium 브라우저를 에이전트에 연결하여 터미널 환경에서도 웹 조작이 가능하게 한다. 이를 통해 에이전트는 단순한 텍스트 처리를 넘어 실제 웹 환경에서의 상호작용을 수행한다. 개발자는 별도의 브라우저 창 없이도 에이전트가 수행하는 웹 작업을 실시간으로 모니터링할 수 있다.

Claude Code, Glance MCP 서버, Chromium 브라우저 간의 상호작용을 보여주는 아키텍처 다이어그램 — DiagramClaude Code가 도구 호출을 보내면 Glance MCP 서버가 Playwright API를 통해 Chromium 브라우저를 제어하고, 그 결과(스크린샷, DOM 데이터)를 다시 에이전트에게 전달하는 흐름을 설명한다. 이는 Glance가 에이전트와 브라우저 사이의 중계 역할을 함을 명확히 보여준다.

단순한 페이지 로딩을 넘어 클릭, 폼 채우기, 세션 기록 등 30가지 전문화된 도구를 에이전트에 제공한다. 에이전트는 브라우저의 접근성 스냅샷과 인라인 스크린샷을 직접 확인하며 사람처럼 웹 요소를 식별하고 조작한다. 이러한 시각적 피드백 루프는 에이전트가 웹 페이지의 실제 렌더링 상태를 기반으로 정확한 판단을 내리게 돕는다. 결과적으로 텍스트 기반 에이전트가 가졌던 시각적 인지 능력의 부재를 보완한다.

복잡한 웹 애플리케이션의 품질 보증을 위해 다단계 E2E 테스트와 시각적 회귀 테스트 기능을 지원한다. 300개 이상의 테스트 단계에서 97%의 통과율을 보이며 실제 운영 환경에서의 안정성을 입증했다. 개발자는 JSON이나 자연어로 테스트 시나리오를 정의하여 에이전트에게 자동화된 검증을 맡길 수 있다. 이는 수동 테스트 시간을 단축하고 배포 전 UI 결함을 조기에 발견하는 데 기여한다.

근거

실제 운영 환경의 300개 이상 테스트 단계에서 97%의 통과율을 기록했다. — Battle-tested: 97% pass rate across 300+ test steps in production.

기업 환경에서의 안전한 사용을 위해 보안 프로필, 속도 제한, URL 허용/차단 목록 필터링 기능을 포함한다. 로컬 개발, 제한적 접근, 개방형 접근 등 세 가지 보안 프로필을 통해 에이전트의 브라우징 권한을 세밀하게 제어한다. 이는 AI 에이전트가 의도치 않은 웹 사이트에 접근하거나 과도한 요청을 보내는 위험을 방지한다. 관리자는 정책에 따라 에이전트의 활동 범위를 명확히 규정할 수 있다.

이미지 분석

Screenshot
npx를 사용한 실행 방법과 Cursor/Desktop용 JSON 설정 예시를 제공하여 사용자가 즉시 도구를 도입할 수 있는 구체적인 방법을 제시한다. 또한 E2E 브라우저 테스터 에이전트 설치를 위한 curl 명령어도 포함되어 있다.
Glance MCP 서버를 시작하기 위한 설정 코드와 확장 프로그램 설치 명령어를 보여주는 스크린샷

용어 해설

모델 컨텍스트 프로토콜(MCP): — AI 모델이 로컬 데이터나 외부 도구에 안전하게 접근할 수 있도록 Anthropic이 제안한 개방형 표준 프로토콜이다. 이를 통해 에이전트는 브라우저, 데이터베이스, 파일 시스템 등과 직접 상호작용할 수 있다.
플레이라이트(Playwright): — 웹 브라우저 자동화를 위한 오픈 소스 라이브러리로, Chromium, Firefox, WebKit 엔진을 제어할 수 있다. Glance는 이를 활용해 AI 에이전트가 웹 페이지를 탐색하고 조작하게 한다.
시각적 회귀 테스트(Visual Regression Testing): — 소프트웨어 변경 전후의 UI 스크린샷을 픽셀 단위로 비교하여 의도치 않은 디자인 변화를 감지하는 테스트 기법이다. AI 에이전트가 웹 앱의 시각적 무결성을 검증하는 데 사용된다.

코드 예제

json

{
  "mcpServers": {
    "glance": {
      "command": "npx",
      "args": ["glance-mcp"],
      "env": {
        "BROWSER_HEADLESS": "false"
      }
    }
  }
}

Cursor나 Claude Desktop에서 Glance MCP 서버를 연동하기 위한 설정 파일 예시

기술

Claude Code
MCP
Chromium
Playwright

활용 사례

E2E 테스트 자동화
시각적 회귀 테스트
웹 데이터 수집 및 폼 자동 입력

언급된 리소스

GitHubGlance GitHub