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

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

Glance는 Claude Code와 같은 AI 에이전트가 실제 웹 브라우저를 제어할 수 있도록 돕는 오픈 소스 MCP 서버이다. Playwright 기반의 Chromium 브라우저를 활용해 페이지 탐색, 클릭, 폼 입력 등 30가지 이상의 도구를 제공한다. 에이전트가 직접 스크린샷을 보고 시각적 회귀 테스트나 복잡한 E2E 테스트 시나리오를 수행할 수 있는 것이 특징이다. 보안 프로필과 URL 필터링 기능을 갖추고 있으며, 실제 운영 환경에서 97%의 높은 테스트 성공률을 기록했다.

배경

Claude Code 또는 MCP 호환 클라이언트(Cursor, Claude Desktop 등), Node.js 및 npx 실행 환경

대상 독자

Claude Code 또는 Cursor를 사용하여 웹 자동화 및 테스트를 수행하려는 개발자

의미 / 영향

이 도구는 AI 에이전트가 웹 브라우저를 '눈'으로 보고 조작할 수 있게 함으로써 QA 자동화의 패러다임을 바꿉니다. 특히 MCP 표준을 따르므로 다양한 AI 클라이언트에서 브라우저 제어 기능을 즉시 확장할 수 있는 생태계를 조성합니다.

섹션별 상세

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

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

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

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

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

이미지 분석

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

코드 예제

json

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

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

실무 Takeaway

Claude Code 사용 시 Glance MCP 서버를 연동하면 터미널 내에서 실제 브라우저를 실행하고 스크린샷 기반의 웹 디버깅을 수행할 수 있다.
Playwright 기반의 30가지 도구를 활용해 복잡한 웹 폼 입력이나 다단계 인증 흐름이 포함된 E2E 테스트를 AI 에이전트에게 자동화시킬 수 있다.
보안 프로필 기능을 설정하여 AI 에이전트가 접근 가능한 URL 범위를 제한함으로써 프로덕션 환경에서의 보안 사고를 예방할 수 있다.

언급된 리소스

GitHubGlance GitHub