WebMCP: Chrome 146에서 브라우저가 AI 에이전트의 툴 서버가 된다

개요

Google Chrome 146에서 WebMCP가 도입된다. 이것은 브라우저 자체가 MCP(Model Context Protocol) 서버로 동작하여, AI 에이전트가 브라우저를 직접 툴 서버로 활용할 수 있게 하는 혁신적인 기능이다.

기존에는 AI 에이전트가 웹 페이지와 상호작용하려면 Puppeteer, Playwright 같은 별도의 자동화 도구가 필요했다. WebMCP는 이 패러다임을 완전히 바꾼다. 브라우저가 스스로 MCP 서버가 되어, AI 에이전트에게 구조화된 툴과 데이터를 직접 제공하는 것이다.

MCP(Model Context Protocol)란?

MCP는 Anthropic이 제안한 오픈 프로토콜로, AI 모델과 외부 도구·데이터 소스 간의 표준화된 통신 규격이다.

graph LR
    Agent[AI 에이전트] -->|MCP 요청| Server[MCP 서버]
    Server -->|툴 목록 제공| Agent
    Server -->|실행 결과 반환| Agent
    Server -->|리소스 제공| Agent

MCP의 핵심 구성 요소는 다음과 같다:

• Tools: AI가 호출할 수 있는 함수 (검색, 폼 입력, 페이지 조작 등)
• Resources: AI가 읽을 수 있는 구조화된 데이터
• Prompts: 사전 정의된 프롬프트 템플릿

MCP 서버를 직접 구현해보고 싶다면 MCP 서버 직접 만들기 — Streamable HTTP 트랜스포트로 실제 AI 도구 구현하기를 참고하면 된다.

WebMCP의 작동 원리

WebMCP는 웹 페이지가 자신의 기능을 MCP 서버로 노출할 수 있게 한다. 웹 개발자는 자신의 사이트에서 AI 에이전트가 사용할 수 있는 툴과 데이터를 선언적으로 정의한다.

아키텍처

sequenceDiagram
    participant AI as AI 에이전트
    participant Chrome as Chrome 브라우저
    participant Web as 웹 페이지

    AI->>Chrome: MCP 연결 요청
    Chrome->>Web: WebMCP 지원 확인
    Web->>Chrome: 툴/리소스 매니페스트 반환
    Chrome->>AI: 사용 가능한 툴 목록 전달
    AI->>Chrome: 툴 실행 요청
    Chrome->>Web: 해당 기능 실행
    Web->>Chrome: 실행 결과
    Chrome->>AI: 결과 반환

핵심 변화

구분	기존 방식	WebMCP
브라우저 제어	Puppeteer/Playwright	네이티브 MCP
페이지 이해	DOM 파싱/스크래핑	구조화된 리소스
상호작용	CSS 셀렉터 기반	선언적 툴 호출
인증/권한	수동 설정	브라우저 내장
안정성	UI 변경 시 깨짐	API 수준 안정성

웹 개발자를 위한 WebMCP 구현

웹 개발자는 자신의 사이트에 WebMCP를 구현하여 AI 에이전트가 활용할 수 있는 기능을 노출할 수 있다.

예시: 전자상거래 사이트

// WebMCP 툴 정의 예시
navigator.mcp.registerTool({
  name: "search_products",
  description: "상품을 검색합니다",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "검색 키워드" },
      category: { type: "string", description: "카테고리 필터" },
      maxPrice: { type: "number", description: "최대 가격" }
    },
    required: ["query"]
  },
  handler: async (params) => {
    const results = await searchAPI(params);
    return { products: results };
  }
});

// 리소스 등록
navigator.mcp.registerResource({
  uri: "cart://current",
  name: "현재 장바구니",
  description: "현재 사용자의 장바구니 내용",
  handler: async () => {
    return { items: await getCartItems() };
  }
});

예시: SaaS 대시보드

// 대시보드 데이터를 AI 에이전트에 제공
navigator.mcp.registerTool({
  name: "generate_report",
  description: "지정된 기간의 분석 리포트를 생성합니다",
  inputSchema: {
    type: "object",
    properties: {
      startDate: { type: "string", format: "date" },
      endDate: { type: "string", format: "date" },
      metrics: {
        type: "array",
        items: { type: "string" }
      }
    }
  },
  handler: async (params) => {
    return await dashboardAPI.generateReport(params);
  }
});

AI 에이전트 생태계에 미치는 영향

WebMCP는 AI 에이전트의 웹 활용 방식을 근본적으로 변화시킨다.

graph TD
    subgraph 현재["현재: 스크래핑 기반"]
        A1[AI 에이전트] --> B1[Puppeteer/Playwright]
        B1 --> C1[DOM 파싱]
        C1 --> D1[불안정한 데이터 추출]
    end

    subgraph 미래["미래: WebMCP 기반"]
        A2[AI 에이전트] --> B2[Chrome MCP 서버]
        B2 --> C2[구조화된 툴 호출]
        C2 --> D2[안정적인 데이터 교환]
    end

1. 스크래핑의 종말

웹 사이트가 직접 구조화된 인터페이스를 제공하므로, 불안정한 DOM 스크래핑이 필요 없어진다. 사이트 UI가 변경되어도 MCP 인터페이스는 유지된다.

2. 에이전트 개발 간소화

AI 에이전트 개발자는 각 사이트별 커스텀 스크래핑 로직을 작성할 필요 없이, 표준화된 MCP 프로토콜로 모든 WebMCP 지원 사이트와 통신할 수 있다.

3. 보안과 권한 관리

브라우저가 중간 레이어로 동작하므로, 사용자의 동의 하에 안전하게 AI 에이전트의 접근을 제어할 수 있다. 기존 브라우저 보안 모델(CORS, CSP 등)이 그대로 적용된다.

4. 새로운 비즈니스 모델

웹 서비스가 AI 에이전트를 위한 MCP 엔드포인트를 제공하는 것이 SEO만큼 중요한 전략이 될 수 있다. “AI 에이전트 최적화(AEO)“라는 새로운 영역이 등장할 것이다.

다만 에이전트가 무엇을 알고 오는지도 함께 봐야 한다. Chrome 팀은 브라우저 API만 내놓는 게 아니라 에이전트가 참조할 문서 묶음도 배포하는데, 그 가이드 138개를 세어 보니 접근성이 2개, 검색이 0개였다. 엔드포인트를 열어 두어도 에이전트 쪽 사전에 그 개념이 없으면 호출은 오지 않는다.

다른 브라우저와 표준화 전망

현재 WebMCP는 Chrome 146에서 먼저 도입되지만, 웹 표준화를 통해 다른 브라우저로 확산될 가능성이 높다.

• Firefox: Mozilla의 AI 전략과 맞물려 도입 검토 가능성
• Safari: Apple Intelligence와의 통합 관점에서 주목
• Edge: Copilot과의 자연스러운 연동이 예상됨

MCP가 이미 오픈 프로토콜로 설계되어 있어, 브라우저 간 호환성 확보가 비교적 용이할 것으로 보다. MCP의 오픈 표준화 과정과 엔지니어링 팀의 도입 전략은 MCP가 오픈 표준이 되었다 — Linux Foundation 합류와 도입 로드맵에서 자세히 살펴볼 수 있다.

개발자가 준비해야 할 것

단기 (3-6개월)

1. MCP 프로토콜 스펙 학습 — 로컬 LLM으로 프라이빗 MCP 서버 구축하기에서 오프라인 환경에서 MCP를 직접 실험해볼 수 있다
2. 자사 서비스의 AI 에이전트 활용 시나리오 도출
3. Chrome 146 베타에서 WebMCP 실험 — 다만 그 뒤로 API 표면이 한 번 갈렸다. provideContext가 사라지고 navigator.modelContext로 재편된 경위는 WebMCP가 오리진 트라이얼에 들어왔다에 정리해 두었다

중기 (6-12개월)

1. WebMCP 인터페이스 설계 및 구현
2. AI 에이전트 호환 테스트
3. 보안 및 권한 모델 수립

장기 (1년 이상)

1. AEO(AI Engine Optimization) 전략 수립
2. 에이전트 전용 분석·모니터링 도입
3. 멀티 에이전트 시나리오 대응

결론

WebMCP는 웹의 다음 진화 단계다. 웹 페이지가 단순히 사람이 보는 UI에서, AI 에이전트가 활용하는 구조화된 서비스로 변모한다.

Chrome 146의 WebMCP 도입은 시작에 불과하다. 앞으로 모든 웹 서비스가 “사람을 위한 UI”와 “AI를 위한 MCP 인터페이스”를 동시에 제공하는 시대가 올 것이다.

웹 개발자에게 이것은 단순한 새 기능이 아닌, 웹의 존재 목적 자체를 재정의하는 전환점이다.

참고 자료

• MCP 공식 사이트
• Chrome 146 릴리스 노트
• @firt의 WebMCP 소개 트윗
• Anthropic MCP 발표