WebMCP 완전 가이드 — Google I/O 2026 발표, AI 에이전트가 웹사이트를 쓰는 방식이 바뀐다

 

AI 에이전트가 웹사이트를 쓸 때 지금까지는 눈 감고 버튼을 때려왔습니다. WebMCP는 웹사이트가 에이전트한테 직접 사용 설명서를 건네주는 표준입니다.

---

핵심 요약

→ WebMCP(Web Model Context Protocol) = AI 에이전트가 웹사이트를 구조적으로 사용할 수 있게 해주는 브라우저 표준 제안
→ 2026년 2월 Chrome 146 Canary 플래그로 첫 공개 → 5월 Google I/O 2026에서 공식 발표, Chrome 149 Origin Trial 예정
→ W3C Community Group Draft 상태 — 아직 정식 표준 아님, 하지만 방향성 명확
→ 핵심 문제 해결: 기존 브라우저 에이전트는 DOM 스크래핑·스크린샷 분석으로 작동 → 오류율 높고 UI 변경에 취약
→ WebMCP 사용 시 구조적 호출로 에러 67% 감소, 태스크 완료율 45% 향상
→ 두 가지 API: Declarative(HTML form 속성 추가) + Imperative(JavaScript로 툴 등록)
→ navigator.modelContext.registerTool() — AI가 호출 가능한 함수를 브라우저에 등록하는 핵심 API
→ MCP·A2A와 함께 Google의 에이전트 스택 세 번째 레이어 — MCP(인프라)·A2A(에이전트 간)·WebMCP(웹 인터랙션)
→ Microsoft가 공동 스펙 작성 참여 → Edge 지원 유력, Firefox Q3·Safari Q4 2026 예상
→ Google의 Anand Sagar는 WebMCP가 "AI 에이전트와 웹의 상호작용에서 USB-C 같은 역할"을 할 것이라고 표현했습니다.

---

실전 1 — 왜 지금 브라우저 에이전트가 문제인가

기존 브라우저 에이전트 동작 방식:

에이전트는 드롭다운을 클릭하고, DOM 업데이트를 기다리고, 스크린샷을 읽고, 다른 요소를 클릭하고, 또 기다립니다. 이건 지능이 아니라 매우 비싼 매크로입니다. 게다가 취약합니다. UI 변경이 에이전트 워크플로우를 망가뜨리고, 페이지네이션이 혼란을 주고, 동적 로딩이 발생한 적 없는 인터랙션을 환각하게 만듭니다.

구체적으로 어떻게 망가지는가:

[사용자] "이스탄불 호텔 예약해줘"

[기존 에이전트]
1. 호텔 사이트 접속
2. 스크린샷 분석
3. "체크인 날짜" 필드 추정해서 클릭
4. 달력 팝업 열림 → 다시 스크린샷
5. 날짜 클릭 → 종종 잘못된 날짜 선택
6. "예약" 버튼 추정 → "위시리스트 추가" 눌러버림
7. 오류 또는 원치 않는 결과

문제:
- UI 변경 즉시 워크플로우 파괴
- 스크린샷 분석 레이턴시 폭발
- 동적 컴포넌트(달력, 드롭다운) 처리 불안정

WebMCP 이후:

[사이트 개발자가 등록한 툴]
searchHotels({ city, checkIn, checkOut, guests })
bookHotel({ hotelId, roomId, guestInfo, paymentToken })

[에이전트]
→ 툴 발견 → 직접 함수 호출
→ DOM 스크래핑 없음, 스크린샷 없음
→ 정확하고 빠르고 안정적

---

실전 2 — WebMCP 아키텍처: 두 가지 API

Declarative API — HTML 속성만 추가 (가장 빠른 시작)

기존 HTML 폼에 속성 두 개만 추가하면 에이전트가 인식합니다.

<!-- 기존 HTML 폼 -->
<form action="/search" method="GET">
  <input name="q" placeholder="검색어" />
  <button type="submit">검색</button>
</form>

<!-- WebMCP 추가 후 -->
<form 
  action="/search" 
  method="GET"
  toolname="searchProducts"
  tooldescription="키워드로 상품을 검색합니다. 검색어를 q 파라미터에 전달하세요.">
  <input name="q" placeholder="검색어" />
  <button type="submit">검색</button>
</form>

→ 기존 코드 변경 없이 속성 2개 추가로 에이전트 지원
→ 폼 제출 워크플로우 그대로 유지
→ 가장 간단한 방법, 정적 사이트에 적합

Imperative API — JavaScript로 완전한 툴 등록

더 복잡한 인터랙션·동적 로직에 사용합니다.

// navigator.modelContext가 지원되는지 확인
if ('modelContext' in navigator) {

  // 읽기 전용 툴 (검색, 조회)
  navigator.modelContext.registerTool({
    name: 'searchInventory',
    description: '재고를 검색합니다. 키워드, 카테고리, 가격 범위로 필터링 가능.',
    inputSchema: {
      type: 'object',
      properties: {
        query: { 
          type: 'string', 
          description: '검색 키워드' 
        },
        category: { 
          type: 'string', 
          description: '상품 카테고리 (electronics, clothing, food)',
          enum: ['electronics', 'clothing', 'food']
        },
        maxPrice: { 
          type: 'number', 
          description: '최대 가격 (원)' 
        },
        inStock: { 
          type: 'boolean', 
          description: '재고 있는 상품만 표시' 
        }
      },
      required: ['query']
    },
    annotations: { 
      readOnlyHint: true  // 읽기 전용 명시 → 에이전트가 안전하게 호출
    },
    execute: async (input) => {
      const results = await fetchProducts(input);
      return { 
        products: results,
        total: results.length
      };
    }
  });

  // 쓰기 툴 (장바구니 추가, 예약 등)
  navigator.modelContext.registerTool({
    name: 'addToCart',
    description: '상품을 장바구니에 추가합니다.',
    inputSchema: {
      type: 'object',
      properties: {
        productId: { type: 'string', description: '상품 ID' },
        quantity: { type: 'number', description: '수량', minimum: 1 }
      },
      required: ['productId', 'quantity']
    },
    // readOnlyHint 없음 → 에이전트가 상태 변경임을 인식, 사용자 확인 요청 가능
    execute: async (input) => {
      const result = await cart.add(input.productId, input.quantity);
      return { 
        success: true, 
        cartTotal: result.total,
        message: `${result.productName} ${input.quantity}개가 장바구니에 추가됐습니다.`
      };
    }
  });

}

---

실전 3 — MCP·A2A와의 관계

WebMCP가 헷갈리는 이유 중 하나가 기존 MCP와 이름이 비슷하기 때문입니다.

세 프로토콜이 명확하게 레이어를 나눕니다. MCP는 에이전트-인프라 연결(데이터베이스, API, 파일 시스템)을, A2A는 벤더 간 에이전트-에이전트 조율을, WebMCP는 브라우저 안에서의 에이전트-웹사이트 인터랙션을 담당합니다. 세 프로토콜, 세 레이어, 에이전트가 실제 세계에서 어떻게 동작하는지에 대한 하나의 일관된 답변입니다.

에이전트 스택 전체 구조:

[에이전트]
    ↓ MCP
[인프라 레이어]
DB·API·파일시스템·외부 서비스

    ↓ A2A
[에이전트 간 통신]
다른 에이전트와 협업·조율

    ↓ WebMCP
[브라우저 레이어]
웹사이트 UI와 구조적 상호작용

기존 MCP와 WebMCP의 차이:

기존 MCP WebMCP

실행 환경	서버·로컬 프로세스	브라우저 (클라이언트사이드)
정의 위치	별도 MCP 서버	웹페이지 JavaScript
대상	개발자가 설치한 툴	방문한 모든 웹사이트
백엔드 필요	필요	불필요 (프론트엔드만으로 가능)
인증	개발자 설정	브라우저 세션 기반

---

실전 4 — React에서 WebMCP 통합

import { useEffect } from 'react';

function ProductPage({ products, onAddToCart }) {
  
  useEffect(() => {
    if (!('modelContext' in navigator)) return;

    // 컴포넌트 마운트 시 툴 등록
    navigator.modelContext.registerTool({
      name: 'getProductDetails',
      description: '현재 페이지의 상품 목록을 반환합니다.',
      inputSchema: {
        type: 'object',
        properties: {
          category: { 
            type: 'string', 
            description: '필터할 카테고리' 
          }
        }
      },
      annotations: { readOnlyHint: true },
      execute: async ({ category }) => {
        const filtered = category 
          ? products.filter(p => p.category === category)
          : products;
        return { products: filtered, count: filtered.length };
      }
    });

    navigator.modelContext.registerTool({
      name: 'addProductToCart',
      description: '상품을 장바구니에 추가합니다.',
      inputSchema: {
        type: 'object',
        properties: {
          productId: { type: 'string' },
          quantity: { type: 'number', minimum: 1, default: 1 }
        },
        required: ['productId']
      },
      execute: async ({ productId, quantity = 1 }) => {
        onAddToCart(productId, quantity);
        return { 
          success: true, 
          message: `장바구니에 추가됐습니다.` 
        };
      }
    });

    // 컴포넌트 언마운트 시 툴 해제
    return () => {
      navigator.modelContext.unregisterTool('getProductDetails');
      navigator.modelContext.unregisterTool('addProductToCart');
    };
  }, [products]);

  return <div>...</div>;
}

---

실전 5 — Chrome 149 이전 지금 당장 쓰는 법

Origin Trial은 Chrome 149부터지만 지금 당장 실험할 수 있는 방법이 있습니다.

방법 1. Chrome Canary + 플래그 활성화:

1. Chrome Canary 다운로드 (일반 Chrome과 별도 설치)
2. chrome://flags 접속
3. "WebMCP for testing" 검색 → 활성화
4. 브라우저 재시작
5. navigator.modelContext 사용 가능

방법 2. MCP-B 폴리필 사용 (크로스브라우저):

// 폴리필 로드 후 동일한 API 사용
navigator.modelContext.registerTool({
  name: 'myTool',
  // ...
});

방법 3. WebMCP Inspector로 디버깅:

Chrome DevTools → WebMCP 패널 (Chrome 149+)
또는 webmcpinspector.com/inspect/ 에서
현재 페이지에 등록된 WebMCP 툴 확인 가능

---

실전 6 — 보안 모델

WebMCP에서 가장 중요한 부분입니다.

readOnlyHint 패턴:

// 읽기 전용 툴 — 에이전트가 사용자 확인 없이 호출 가능
navigator.modelContext.registerTool({
  name: 'getFlightPrices',
  annotations: { readOnlyHint: true },  // 상태 변경 없음을 명시
  execute: async (input) => { ... }
});

// 쓰기 툴 — 에이전트가 사용자에게 확인 요청 권장
navigator.modelContext.registerTool({
  name: 'bookFlight',
  // readOnlyHint 없음 → 에이전트가 결제 전 사용자 확인
  execute: async (input) => { ... }
});

원칙:

→ 민감한 액션(결제·삭제·전송)에는 readOnlyHint 사용 금지
→ 툴 이름과 description은 명확하게 — AI가 잘못 호출하면 사이트 책임
→ execute 안에서 별도 권한 검증 필수 — WebMCP가 인증을 보장하지 않음

---

실전 7 — 현재 상태와 로드맵

WebMCP는 현재 Chrome 146 Canary에서 "WebMCP for testing" 플래그 뒤에서 사용 가능합니다. 스펙은 W3C 커뮤니티 인큐베이션에서 공식 드래프트로 전환 중입니다. Microsoft가 스펙을 공동 작성 중이어서 Edge 지원이 유력합니다. 업계 관측에 따르면 Firefox Q3 2026, Safari Q4 2026에 정식 지원이 예상됩니다.

일정 이벤트

2026년 2월	Chrome 146 Canary 플래그 공개
2026년 5월	Google I/O 2026 공식 발표
2026년 Chrome 149	Origin Trial 시작 (실사용자 테스트)
2026년 Q3	Firefox 지원 예정
2026년 Q4	Safari 지원 예정
2027년	W3C 정식 표준화 예상

---

✅ 지금 해야 할 것 / ❌ 아직 기다려야 할 것

✅ 지금 ❌ 아직

Chrome Canary + 플래그로 실험 시작	프로덕션 배포 — Origin Trial 이후
MCP-B 폴리필로 크로스브라우저 프로토타입	Safari/Firefox 지원 전 전체 사용자 대상
기존 HTML 폼에 Declarative API 속성 추가 연습	W3C 정식 표준 전 스펙 안정화 대기
Lighthouse "Agentic Browsing" 감사 항목 파악	카탈로그/디렉토리 기반 툴 발견 메커니즘