WebMCP란 무엇인가 — 30초 요약

WebMCP(Web Model Context Protocol)는 구글과 마이크로소프트가 공동 개발하고 W3C Web Machine Learning 커뮤니티 그룹에서 표준화 작업 중인 브라우저 기반 AI 에이전트 인터페이스입니다. 2026년 2월 10일 얼리 프리뷰가 시작됐고, 3월 11일 구글 크롬 공식 개발자 블로그가 ‘MCP 사용 시기’ 가이드를 발표하며 본격적인 대중 인지도 형성에 나섰습니다.

핵심을 한 문장으로 요약하면 이렇습니다. “웹사이트가 AI 에이전트에게 ‘나는 이런 기능이 있고, 이렇게 불러라’고 공식적으로 알려주는 표준 방법.” 기존에는 AI 에이전트가 웹페이지를 스크린샷 찍고, HTML을 파싱하고, 버튼을 찾아 클릭하는 식으로 마치 외국어를 배우지 않은 여행자처럼 웹을 돌아다녔습니다. WebMCP는 그 여행자에게 현지 전용 API 가이드북을 쥐여 주는 기술입니다.

▲ 목차로 돌아가기

AI 에이전트가 웹에서 겪는 현실적 고통

ChatGPT Agent, Claude Code, OpenClaw 등 최신 에이전트 프레임워크가 아무리 똑똑해도, 웹페이지 앞에서는 길을 잃습니다. 현재 에이전트가 웹과 상호작용하는 방식은 크게 두 가지인데, 둘 다 심각한 결함이 있습니다.

스크린샷 기반 자동화의 한계

에이전트가 페이지 화면을 이미지로 캡처해 멀티모달 모델에 넘기면, 모델은 “검색창이 좌측 상단에 있는 것 같다”고 추론합니다. 문제는 이 이미지 처리에만 수천 토큰이 소비된다는 점입니다. 버튼 하나를 클릭하기 위해 AI가 4~5번의 추론을 반복하고, A/B 테스트로 UI가 살짝 바뀌면 전체 플로우가 깨집니다.

DOM 파싱 방식의 한계

HTML 소스를 통째로 읽는 방식도 마찬가지입니다. <div class=”btn-primary xs-12″> 같은 마크업은 사람 눈에도 어렵지만, AI 모델에게는 더더욱 비효율적인 외국어입니다. 실제 업무에 무관한 CSS 클래스와 구조 마크업이 컨텍스트 창을 잠식하고, 응답 지연과 비용 상승으로 이어집니다.

▲ 목차로 돌아가기

WebMCP 작동 원리: 두 가지 API 완전 해부

WebMCP는 navigator.modelContext라는 새로운 브라우저 API를 통해 동작하며, 웹사이트 개발자가 도구(Tool)를 등록하면 브라우저 내 AI 에이전트가 이를 발견하고 호출할 수 있습니다. API는 두 종류로 나뉩니다.

① Imperative API — 프로그래밍 방식으로 도구 등록

복잡한 동적 인터랙션에 적합한 방식입니다. JavaScript로 도구 이름·설명·입력 스키마·실행 함수를 정의해 registerTool()로 등록합니다. 아래는 이커머스 상품 검색 도구의 예시입니다.

// WebMCP Imperative API 예시
navigator.modelContext.registerTool({
name: "searchProducts",
description: "키워드와 카테고리로 상품을 검색합니다",
inputSchema: {
type: "object",
properties: {
query: { type: "string", description: "검색어" },
category: { type: "string", description: "상품 카테고리" }
},
required: ["query"]
},
execute: async ({ query, category }) => {
const results = await fetchProducts(query, category);
return { products: results, count: results.length };
}
});

에이전트는 이 도구를 발견하면 “searchProducts를 호출해 query=’무선 이어폰’을 넘기면 되겠다”고 판단합니다. 스크린샷 없이, DOM 파싱 없이 — 단 한 번의 함수 호출로 구조화된 JSON 결과를 받습니다.

② Declarative API — 기존 HTML 폼 그대로 활용

이미 깔끔하게 구조화된 HTML 폼을 가진 서비스라면 최소한의 코드 변경만으로 WebMCP를 적용할 수 있습니다. 폼 태그에 toolname과 tooldescription 속성만 추가하면 브라우저가 자동으로 에이전트 호환 스키마로 변환합니다.

<!-- WebMCP Declarative API 예시: 레스토랑 예약 폼 -->
<form
toolname="reserveTable"
tooldescription="레스토랑 테이블을 예약합니다"
toolautosubmit="true"
>
<input name="date" type="date" placeholder="예약 날짜">
<input name="guests" type="number" placeholder="인원 수">
<select name="time">
<option value="18:00">오후 6시</option>
<option value="19:00">오후 7시</option>
</select>
</form>

toolautosubmit="true"를 설정하면 에이전트가 파라미터를 채우는 즉시 자동 제출까지 처리합니다. 기존 HTML 폼이 잘 정리된 서비스라면 사실상 속성 3개 추가만으로 에이전트 호환이 완성됩니다.

▲ 목차로 돌아가기

WebMCP vs MCP — 헷갈리면 이 표 하나로 정리

WebMCP라는 이름 때문에 Anthropic의 Model Context Protocol(MCP)과 같은 것으로 오해하는 분들이 많습니다. 하지만 둘은 작동 계층 자체가 다릅니다. 경쟁 관계가 아닌 상호 보완 관계입니다.

실무적으로 생각하면 이렇습니다. 여행사가 백엔드 예약 시스템을 ChatGPT나 Claude에 연결할 때는 MCP 서버를 씁니다. 동시에 소비자용 웹사이트에 WebMCP를 구현하면, 사용자가 브라우저에서 AI 에이전트와 함께 여행 일정을 짤 때 에이전트가 직접 날짜 검색·좌석 선택 기능을 호출할 수 있습니다. 두 기술을 함께 쓰면 시너지가 극대화됩니다.

▲ 목차로 돌아가기

지금 당장 써볼 수 있는 실전 사용법

WebMCP는 아직 프로덕션 배포 단계가 아니지만, Chrome 146 Canary를 통해 지금 바로 체험할 수 있습니다. 개발자·마케터·AI 에이전트 빌더라면 지금 실험해두는 것이 6개월 뒤 큰 차이를 만듭니다.

• 1
  Chrome Canary 설치: google.com/intl/ko/chrome/canary에서 Chrome 146 이상 Canary 버전을 다운로드합니다. 일반 Chrome과 별도로 설치되므로 기존 브라우저에 영향이 없습니다.
• 2
  플래그 활성화: 주소창에 chrome://flags/#enable-webmcp-testing을 입력하고 “WebMCP for testing” 항목을 Enabled로 설정 후 브라우저를 재시작합니다.
• 3
  Model Context Tool Inspector 설치: 크롬 웹스토어에서 해당 확장 프로그램을 설치하면, WebMCP 도구가 등록된 페이지에서 어떤 도구가 노출되는지 직접 확인하고 수동으로 실행해볼 수 있습니다.
• 4
  구글 여행 데모 체험: 구글이 제공하는 라이브 여행 예약 데모에서 전체 흐름(도구 발견 → 파라미터 입력 → 결과 수신)을 처음부터 끝까지 경험할 수 있습니다. Gemini API 지원을 통해 자연어 명령으로 도구를 호출하는 시나리오도 포함됩니다.
• 5
  얼리 프리뷰 프로그램(EPP) 참가: developer.chrome.com/docs/ai/join-epp에서 신청하면 공식 API 문서, 업데이트 사전 공지, 피드백 채널에 접근할 수 있습니다.

▲ 목차로 돌아가기

실제 활용 시나리오: B2B·B2C 업무 자동화

WebMCP가 정식 표준으로 자리잡으면 어떤 실제 업무가 바뀔까요? 구글과 Search Engine Land가 제시한 구체적 사례를 한국 맥락에 맞게 재구성했습니다.

B2B 시나리오

① 구매 자동화: 여러 도매 플랫폼이 checkInventory()와 getVolumePricing() 도구를 등록해두면, 구매 담당자의 AI 에이전트가 여러 사이트에서 재고·가격을 동시에 조회하고 최적 옵션으로 발주까지 처리합니다. 지금처럼 각 플랫폼 탭을 번갈아 열 필요가 없습니다. ② 견적 수집: B2B 공급사가 requestQuote()를 구현해두면, 구매 에이전트는 동일한 사양서를 10개 공급사에 동시 제출하고 결과를 비교 테이블로 정리합니다. ③ 화물 운임 조회: 물류 플랫폼의 getShippingRate()와 schedulePickup() 연동으로 AI가 최저 운임 선택 후 픽업까지 예약합니다.

B2C 시나리오

① 멀티 쇼핑몰 가격 비교: 쿠팡·네이버쇼핑·G마켓이 각각 searchProducts()와 checkPrice()를 등록하면, 소비자의 AI 에이전트가 초 단위로 전 플랫폼 최저가를 비교하고 장바구니 담기까지 수행합니다. ② 식당 예약: 식당 앱들이 browseMenu()와 reserveTable()을 구현하면, “오늘 저녁 7시 4인 한식 예약해줘” 한 마디로 여러 식당 비교 후 예약이 완료됩니다. ③ 부동산 탐색: 직방·다방이 searchProperties()와 scheduleShowing()을 지원하면 매물 검색에서 방문 예약까지 에이전트가 원스톱으로 처리합니다.

▲ 목차로 돌아가기

WebMCP의 한계와 주의할 점

WebMCP는 분명 혁신적인 방향이지만, 현재 단계에서는 신중하게 접근해야 할 이유도 분명히 존재합니다. 과도한 기대를 경계하는 것이 오히려 올바른 준비입니다.

① 아직 표준이 아닌 ‘제안’ 상태

WebMCP는 W3C 정식 표준이 아닌 커뮤니티 그룹 초안입니다. 크롬 팀 자체도 임베디드 LLM API 일부 기능을 롤백하는 방향을 논의 중이라고 밝혔습니다. API 스펙이 크게 바뀔 가능성이 있고, 파이어폭스나 사파리가 구현 시점을 발표하지 않은 점도 주목해야 합니다.

② 완전 자율 에이전트 용도가 아닙니다

WebMCP 스펙은 명시적으로 헤드리스·완전 자율 자동화를 비목표(Non-goal)로 선언합니다. 사용자가 브라우저 앞에 있는 협력적 시나리오에 최적화됐습니다. 사람 없이 24시간 백그라운드에서 돌아가는 자동화는 기존 MCP 서버나 RPA 도구가 더 적합합니다.

③ 보안과 프라이버시 과제

에이전트가 브라우저 내 활성 세션을 통해 도구를 호출하는 구조는 편리하지만, 잘못 설계된 도구가 민감한 작업을 수행할 위험이 있습니다. 특히 toolautosubmit="true" 설정은 에이전트가 확인 없이 폼을 제출하게 하므로, 금전 거래나 개인정보 전송 관련 도구에는 반드시 사용자 확인 단계를 별도로 설계해야 합니다.

▲ 목차로 돌아가기

Q&A 5선 — 자주 묻는 질문

▲ 목차로 돌아가기

마치며 — 총평

WebMCP는 “AI가 웹을 쓰는 방법”을 근본적으로 바꾸는 기술입니다. 지금까지 AI 에이전트는 웹 앞에서 마치 지도 없이 낯선 도시를 헤매는 여행자였습니다. WebMCP는 그 도시의 모든 건물이 AI를 위한 공식 입구를 내어주는 것과 같습니다.

가장 인상적인 설계 철학은 “인간과 에이전트의 협력”을 기술적 기본값으로 삼았다는 점입니다. 완전 자율 자동화를 비목표로 명시한 결정은, 지금 AI 업계가 지나치게 자율성만 강조하는 흐름 속에서 오히려 신선합니다. 사용자가 화면을 보며 에이전트와 함께 결정을 내리는 구조는 실제 업무 현장에서 훨씬 현실적이고 안전한 접근입니다.

아직 표준 확정까지는 시간이 필요합니다. 하지만 구글과 마이크로소프트가 공동 코드를 이미 크롬에 탑재했다는 사실은, 이 방향이 단순한 실험이 아님을 분명히 합니다. 2000년대에 검색엔진을 무시했던 사이트들이 트래픽 경쟁에서 뒤처졌듯, 에이전틱 웹 전환기에 WebMCP를 무시하는 서비스는 다음 세대 사용자 접점 경쟁에서 뒤처질 위험이 있습니다. 지금이 바로 실험을 시작할 적기입니다.

▲ 목차로 돌아가기