지금 이 순간, AI 에이전트가 내 웹사이트를 쓸 때 실제로 무슨 일이 벌어지는지 아시나요?
화면을 캡처하고, 픽셀을 분석하고, "버튼이 여기쯤 있겠지"를 추측합니다. 레이아웃이 조금만 바뀌어도 실패하는 구조예요. 이걸 업계에선 비전 기반 자동화라고 부르는데, 솔직하게 말하면 AI가 눈 감고 내 사이트를 더듬는 것에 가깝습니다.
Google이 Google I/O 2026에서 이 구조 자체를 뒤집었어요. Chrome이 에이전트 시대의 웹을 선언했고, 세 가지 발표가 AI 에이전트와 웹의 관계를 새로 썼습니다.
지금 AI 에이전트는 내 사이트를 어떻게 쓰는데?
대부분의 AI 에이전트가 웹 자동화를 할 때 쓰는 방식은 이렇습니다. DOM 전체를 다운로드해서 파싱하거나, 스크린샷을 찍어 좌표를 추측해요. "예약 버튼이 오른쪽 하단 파란 버튼이겠지"를 반복하면서 토큰을 소비합니다.
문제는 이 방식이 비결정론적이라는 거예요. 사이트 디자인이 조금만 바뀌면 실패하고, 에이전트마다 같은 작업을 다르게 처리해요. 그리고 목적을 추측하는 데만 토큰 대부분을 씁니다.
Chrome이 뒤집은 것 — "추측" 대신 "선언"
WebMCP(Web Model Context Protocol)는 Google과 Microsoft가 공동 제안한 오픈 웹 표준이에요. 핵심 아이디어는 단순합니다. 에이전트가 버튼의 목적을 추측하게 하지 말고, 웹사이트가 먼저 선언하면 되잖아요.
항공권 예약 사이트를 예로 들면, 기존엔 에이전트가 페이지를 분석하며 "출발지 입력창이 여기 있겠지, 날짜 선택기는 저기겠지"를 반복했다면, WebMCP 방식에선 사이트가 이렇게 선언합니다:
WebMCP 방식: 에이전트가 직접 함수 호출
book_flight({ origin: "ICN", destination: "JFK", date: "2026-08-01" }) — 사이트가 이 함수를 선언하면, 에이전트는 화면을 볼 필요 없이 직접 호출해요.
2025년 9월 W3C Web Machine Learning Community Group의 공식 표준으로 채택됐고, Chrome 146 Canary(2026년 2월)에서 첫 브라우저 구현이 등장했어요. 2026년 5월 Google I/O 직후 Chrome 149 Origin Trial로 누구나 실제 사이트에서 테스트할 수 있게 됐습니다.
Expedia, Booking.com, Shopify, TurboTax, Target 등이 이미 실험 중이에요. 이 사이트들에서 에이전트 작업 완료가 기존 비전 기반 대비 8~12배 빠르고, 토큰 사용량은 약 90% 줄었다는 보고가 나왔습니다.
구현 방법은 두 가지입니다:
| Declarative API | Imperative API | |
|---|---|---|
| 방법 | HTML 폼에 data-mcp-tool 속성 추가 | JS로 document.modelContext.registerTool() 등록 |
| 적합한 경우 | 기존 폼을 빠르게 에이전트 대응할 때 | 커스텀 로직·복잡한 입출력이 필요할 때 |
| 유연성 | 기본 수준 | JSON Schema로 입출력 완전 제어 |
주의: Chrome 150부터 API 이름이 바뀌었어요
navigator.modelContext는 deprecated. document.modelContext를 써야 합니다.
함께 온 두 가지 — DevTools와 코딩 가이드
Google I/O 2026에서 WebMCP만 발표된 게 아니에요. AI 에이전트 시대를 위한 개발 도구 두 가지가 더 나왔습니다.
Chrome DevTools for Agents 1.0이 정식 출시됐어요. AI 코딩 에이전트가 이제 실제 브라우저에서 코드를 실행하며 콘솔 로그, 네트워크 트래픽, 접근성 트리에 직접 접근할 수 있어요. LY Corporation은 이 도구로 수동 성능 분석 업무의 96~98%를 자동화했다고 밝혔어요. Claude Code 마켓플레이스, Gemini CLI, Antigravity 2.0에서 바로 사용 가능합니다.
Modern Web Guidance는 AI 코딩 에이전트가 최신 웹 표준대로 코드를 짜도록 이끄는 블루프린트예요. npx modern-web-guidance install 한 줄로 100개 이상의 검증된 패턴을 AI가 참고하게 됩니다. Baseline과 통합돼 접근성, 성능, 보안이 자동으로 고려돼요.
에이전트가 웹 자동화 방식을 바꾸는 게 아니라, 웹이 에이전트에 맞게 스스로를 선언하는 방식으로 패러다임 자체가 뒤집혔어요.
지금 당장 시작하는 법
- Chrome 149 Origin Trial 등록
Chrome 149 이상에서 Chrome Origin Trial 등록 페이지에서 도메인을 등록합니다. 로컬 테스트는chrome://flags/#enable-webmcp-testing플래그를 켜면 바로 시작할 수 있어요. - Declarative API로 기존 폼 마킹
있는 HTML 폼에data-mcp-tool="예약하기"같은 속성을 추가하는 것만으로 에이전트가 도구로 인식합니다. 코드 변경을 최소화하며 가장 빠르게 시작하는 방법이에요. - Imperative API로 커스텀 도구 등록
document.modelContext.registerTool()로 이름, 설명(500자 이내), JSON Schema 입출력, 실행 콜백을 등록합니다. 에이전트가 이 정보를 읽고 정확하게 호출해요. - 보안 설정 챙기기
금융·파괴적 액션에는requiresUserApproval: true필수. 외부 데이터에는untrustedContentHint, 읽기 전용 작업엔readOnlyHint를 붙여요. Cross-origin iframe 허용은allow="tools"로만. - Chrome DevTools for Agents로 검증
Claude Code 마켓플레이스에서 Chrome DevTools 플러그인을 설치하면 에이전트가 내 도구를 어떻게 호출하는지 실시간으로 디버깅할 수 있어요.
