Agent-Ready Web: WebMCP로 AI 에이전트의 웹 작업을 간소화하기
📺 원본 영상: The agent-ready web: Simplify user actions with WebMCP — Tara Agyemang, Google 🎙️ 채널: AI Engineer 📅 정리 일자: 2026-06-12 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다. ⚠️ STT 품질 경고: 이 영상의 트랜스크립트는 STT 언어 감지 오류로 인해 영어 음성이 웨일즈어(Welsh)로 잘못 변환되었습니다.
webmcp,MCP,HTML,DOM,Chrome,Gemini,JSON schema,Maze Escape,CLI등 기술 용어는 원문 그대로 추출할 수 있었으나, 상당수 세부 발언은 복원 불가능한 수준으로 손상되었습니다. 본 리포트는 추출 가능한 기술 용어와 강연 컨텍스트를 기반으로 최대한 재구성한 것이며, 정확한 내용 확인을 위해 원본 영상 시청을 강력히 권장합니다.
개요
이 강연에서 Google의 Tara Agyemang은 AI 에이전트가 웹을 보다 효율적으로 활용할 수 있도록 설계된 새로운 브라우저 기술인 WebMCP(Web Model Context Protocol)를 소개한다. AI 에이전트가 현재 웹 상에서 간단한 작업 하나를 처리하기 위해서도 HTML 파싱, DOM 탐색, 스크린샷 분석 등 지나치게 복잡한 과정을 거쳐야 한다는 근본적인 문제를 지적하면서, 강연자는 WebMCP가 웹사이트와 에이전트 사이의 상호작용을 어떻게 표준화하고 단순화할 수 있는지를 Chrome 브라우저에서의 라이브 데모와 함께 설명한다.
AI 에이전트가 웹에서 겪는 근본적 문제
오늘날 AI 에이전트가 웹 상에서 무언가를 수행하려 할 때, 그 과정은 겉으로 보이는 것보다 훨씬 복잡하다. 강연자는 에이전트가 단순한 작업 하나를 처리하기 위해 얼마나 많은 단계를 거쳐야 하는지를 설명하면서 이 문제를 제기한다. 에이전트는 먼저 HTML 구조 전체를 파싱(parsing)하고, DOM(Document Object Model)을 탐색하여 어떤 요소가 클릭 가능하거나 입력 가능한지를 파악해야 한다. 그 다음에는 현재 화면의 스크린샷을 찍고, 화면에 표시된 모든 HTML 요소와 레이아웃을 분석한 후에야 비로소 실제 사용자가 원하는 행동을 취할 수 있다.
02:27 - AI 에이전트가 웹 작업 수행 시 거치는 단계들 - HTML 파싱, DOM 탐색, 스크린샷 분석 과정 도식화 슬라이드
이 과정은 단순히 비효율적인 것에 그치지 않는다. HTML을 해석하고 DOM을 탐색하는 작업은 에이전트의 컨텍스트 창(context window)을 대량으로 소비하며, 안정성 측면에서도 취약하다. 웹 페이지의 UI 구조가 조금만 바뀌어도 에이전트는 작업을 처음부터 다시 분석해야 하기 때문이다. 강연자는 이것이 현재 AI 에이전트가 실용적인 웹 동반자로 자리매김하는 데 있어 가장 큰 병목(bottleneck) 중 하나라고 강조한다.
기존 해결책과 그 한계: 시맨틱 웹의 가능성
강연자는 완전히 새로운 기술을 도입하기 전에, 웹 개발자들이 이미 활용할 수 있는 몇 가지 접근법을 언급한다. 시맨틱 HTML(Semantic HTML)을 올바르게 작성하고, 접근성(Accessibility) 관련 속성을 충실히 구현하며, 폼(Form) 요소를 표준에 맞게 마크업하는 것만으로도 에이전트의 웹 작업 효율을 상당히 높일 수 있다. 이는 에이전트가 화면을 픽셀 수준에서 직접 분석하는 대신, 의미 있는 HTML 구조를 통해 페이지의 의도를 파악할 수 있기 때문이다.
그러나 강연자는 이러한 접근법이 부분적인 해결책에 불과하다고 지적한다. 웹 개발자들이 이미 훌륭한 시맨틱 HTML을 작성하고 있더라도, 에이전트가 해당 웹사이트와 상호작용하는 방식을 명확히 정의하는 표준화된 인터페이스가 없다면 에이전트는 여전히 추측에 의존해야 한다. 강연자는 이를 “USB-C”에 비유하는데, 다양한 기기를 하나의 표준 포트로 연결하듯 에이전트와 웹사이트 간의 상호작용도 표준화된 방식이 필요하다는 논지다.
WebMCP란 무엇인가: MCP의 웹 확장
WebMCP를 이해하기 위해서는 먼저 MCP(Model Context Protocol)를 이해해야 한다. MCP는 AI 에이전트가 외부 서비스나 데이터 소스에 연결하기 위한 표준 프로토콜로, 에이전트가 다양한 도구(tool)를 일관된 방식으로 호출할 수 있게 해준다. 강연자는 WebMCP와 MCP의 관계를 흥미로운 비유로 설명한다. “WebMCP는 MCP에 대해 JavaScript가 Java에 대한 것과 같다.” 이는 WebMCP가 MCP의 정신을 계승하되 웹 환경에 특화된 형태로 재설계된 기술임을 함축한다.
WebMCP가 일반 MCP와 구별되는 핵심 차이점은 동작 환경에 있다. 기존 MCP는 에이전트가 외부 서비스에 연결하기 위해 별도의 서버 설정이나 인증 과정을 필요로 하는 반면, WebMCP는 웹 브라우저 내부에서 직접 동작한다. 웹사이트 개발자가 자신의 사이트에 WebMCP를 적용하면, AI 에이전트는 해당 사이트를 마치 명확한 API 문서가 있는 서비스처럼 인식하고 활용할 수 있게 된다. 이는 웹사이트와 에이전트 간의 상호작용을 근본적으로 단순화하는 접근이며, 강연자는 이것이 “모든 웹사이트를 에이전트를 위한 가치 있는 API로 만드는 것”이라고 설명한다.
04:38 - WebMCP 핵심 가치 제안 및 소개 슬라이드
Chrome에서의 WebMCP 동작 구조
현재 WebMCP는 Chrome 브라우저에서 실험적(experimental) 기능으로 제공된다. 강연자는 Chrome DevTools의 패널을 통해 WebMCP의 동작을 시연하는데, 이 패널은 “model context tool inspector”라는 명칭으로 지칭되며 현재 웹페이지가 에이전트에게 노출하는 모든 도구(tool)의 목록을 실시간으로 보여준다.
05:16 - Chrome DevTools MCP 패널 화면 - 웹페이지가 에이전트에게 노출하는 도구 목록 및 세부 정보
인증 측면에서는 두 가지 접근 방식이 존재한다. 에이전트는 현재 브라우저 세션의 컨텍스트에서 동작하므로 이미 로그인된 상태의 권한을 그대로 활용할 수 있으며, 필요에 따라 별도의 인증 흐름을 추가하는 것도 가능하다. 강연자는 사용자가 에이전트의 작업 내용을 항상 인지할 수 있어야 한다는 투명성(transparency) 원칙을 강조하면서, UI를 통해 에이전트의 행동이 실시간으로 반영되어야 함을 언급한다.
라이브 데모: Maze Escape 게임
강연의 핵심 시연은 “Maze Escape”라는 게임을 통해 진행된다. 이 게임은 Chrome 브라우저 내에서 실행되며, Gemini 모델(강연자는 Gemini 2.5 또는 유사한 버전을 사용한 것으로 보인다)을 에이전트로 활용하여 게임 내 작업을 수행하는 과정을 보여준다. 에이전트는 게임 화면을 픽셀 수준에서 분석하는 대신, WebMCP를 통해 게임이 노출한 구조화된 도구 인터페이스를 사용해 방(room)을 이동하고, 정보를 기록하며, 다음 단계로 진행한다.
16:28 - Maze Escape 데모 진행 중 - AI 에이전트가 WebMCP 도구를 활용해 게임 내 작업을 수행하는 장면
데모에서 주목할 점은 에이전트가 AI 모델이기 때문에 자연어로 된 복잡한 지시를 이해하고, 현재 상황을 추론하며, 목표 달성을 위한 연속적인 도구 호출을 계획할 수 있다는 점이다. WebMCP가 에이전트에게 명확한 도구 인터페이스를 제공하기 때문에, 에이전트는 화면을 해석하는 데 컨텍스트 창을 낭비하지 않고 오로지 게임의 논리적 진행에만 집중할 수 있다. 강연자는 동시에 에이전트의 작업 진행 상황이 사용자 인터페이스에도 반영되어, 사람이 에이전트가 무엇을 하고 있는지 항상 파악할 수 있어야 한다는 점을 강조한다. 이는 에이전트와 사람 간의 신뢰를 구축하는 데 있어 핵심적인 설계 원칙이다.
개발자를 위한 두 가지 API
WebMCP는 웹 개발자가 자신의 사이트에 에이전트 친화적인 인터페이스를 추가할 수 있도록 두 가지 API를 제공한다. 이 두 API는 각각 다른 사용 사례에 최적화되어 있으며, 개발자는 필요에 따라 두 방식을 혼용할 수도 있다.
선언적 API (Declarative API): HTML 속성 기반
선언적 API는 기존 HTML 폼(form)에 특별한 속성(attribute)을 추가하는 방식으로 동작한다. 개발자가 별도의 JavaScript 코드를 작성하지 않고도, HTML 마크업에 WebMCP 관련 속성을 추가하는 것만으로 해당 폼이 에이전트에게 구조화된 도구로 노출된다. 브라우저는 이 HTML 속성들을 파싱하여 자동으로 JSON Schema를 생성하고, 에이전트는 이 스키마를 참조하여 폼에 어떤 필드가 있는지, 어떤 값이 허용되는지, 그리고 어떤 작업을 수행할 수 있는지를 명확하게 파악한다.
13:10 - 선언적 API - HTML 폼 속성에서 자동 생성되는 JSON Schema 구조 예시
폼 제출 방식이나 기타 동작 속성도 HTML 선언을 통해 에이전트에게 전달할 수 있으며, 이는 웹 접근성(accessibility) 원칙의 자연스러운 확장으로 이해할 수 있다. 접근성을 위해 HTML을 명확하게 작성하는 개발자라면, 선언적 API를 도입하는 데 드는 추가 작업이 매우 적을 것이라는 점이 이 접근법의 큰 장점이다.
명령형 API (Imperative API): JavaScript 기반
보다 복잡하거나 동적인 상호작용이 필요한 경우에는 명령형 API를 사용한다. 이 API는 JavaScript를 통해 직접 도구를 정의하고 등록할 수 있도록 해주며, 개발자가 자신만의 JSON Schema를 작성하여 에이전트에게 노출할 도구의 입출력을 세밀하게 제어할 수 있다.
14:01 - 명령형 API - JavaScript로 WebMCP 도구를 직접 정의하는 코드 예시
명령형 API의 핵심은 도구 실행 후 결과를 에이전트에게 반환하는 구조에 있다. 에이전트가 어떤 행동을 취한 후 무슨 일이 일어났는지를 알아야 다음 단계를 결정할 수 있기 때문에, 개발자는 도구 호출의 결과를 명시적으로 에이전트에게 피드백해야 한다. 또한 도구 실행 결과에 따라 DOM 요소를 동적으로 생성하거나 업데이트하는 것도 가능하며, 이를 통해 에이전트의 작업 내용이 사용자 화면에 실시간으로 반영된다. 강연자는 이 양방향 통신 구조가 WebMCP 명령형 API를 특히 강력하게 만드는 요소라고 설명한다.
서비스 제공자와 사용자 모두를 위한 가치
WebMCP의 진정한 가치는 개별 기술 구현을 넘어, 생태계 전반에 걸친 이점에 있다. 강연자는 웹 서비스 개발자 관점에서, WebMCP를 도입하면 사용자들이 AI 에이전트를 통해 자신의 서비스를 더 쉽게 이용할 수 있게 된다고 설명한다. 중요한 점은 사용자가 WebMCP의 동작 원리를 전혀 몰라도 된다는 것이다. 에이전트가 알아서 WebMCP를 통해 서비스와 상호작용하고 필요한 작업을 완료해주기 때문에, 사용자는 에이전트에게 자연어로 목적만 전달하면 된다.
이는 복잡한 멀티스텝 워크플로우를 가진 서비스에서 특히 큰 의미를 가진다. 금융 서비스의 이체 절차, 여행 예약 플로우, 여러 단계의 폼 작성이 필요한 행정 서비스 등에서 에이전트가 WebMCP를 통해 각 단계를 자동으로 처리하면서도 사용자 확인이 필요한 지점에서 적절히 멈추고 안내를 요청할 수 있다. 강연자는 이를 통해 기존에 웹 서비스 사용이 어려웠던 사람들에게도 새로운 형태의 접근성이 열린다고 전망한다.
현재 상태와 시작하는 방법
WebMCP는 현재 실험적(experimental) 단계에 있으며, Chrome 브라우저에서만 동작한다. 강연자에 따르면 WebMCP를 활용하기 위해서는 Chrome의 실험적 플래그를 활성화하고 Chrome 웹 스토어에서 MCP 관련 확장 프로그램을 설치해야 한다. 이 설정 과정에 대한 상세한 가이드는 공식 블로그 포스트에 정리되어 있으며, 강연자는 화면에 해당 링크와 QR 코드를 표시한다.
💡 [영상 참조] 강연자는 이 시점에서 WebMCP 시작 가이드와 리소스 링크가 담긴 슬라이드를 보여줍니다. 📺 원본 영상에서 확인하세요.
개발자들이 직접 탐색할 수 있도록 6~7개의 예제 데모 코드도 함께 공개되어 있으며, 자신의 웹사이트에 WebMCP를 구현하고 테스트하는 과정을 돕는 CLI 도구도 제공된다. 강연자는 현재 API 설계가 아직 최종 확정되지 않은 실험적 형태임을 솔직하게 인정하면서, 개발자 커뮤니티의 피드백과 버그 리포트를 적극적으로 요청한다. 이러한 피드백이 WebMCP의 다음 단계 발전 방향을 결정짓는 중요한 근거가 될 것이라는 점을 강조한다.
미래 전망: 모든 웹사이트가 에이전트 API가 된다
강연의 마지막 부분에서 Tara Agyemang은 WebMCP가 지향하는 미래 비전을 제시한다. 현재 AI 에이전트들은 웹을 사용하기 위해 브라우저 자동화, 스크린샷 분석, HTML 스크래핑, 그리고 복잡한 스크립팅 과정을 거쳐야 하는데, 이는 비효율적이고 불안정하며 웹사이트의 UI가 조금만 변경되어도 에이전트의 작동이 중단될 수 있다는 취약성을 내포한다.
WebMCP가 광범위하게 채택된다면, 이 모든 우회로는 불필요해진다. 모든 웹사이트가 에이전트를 위한 명확한 도구 인터페이스를 노출하게 되고, 에이전트는 인간이 웹을 이용하는 것과 동일한 방식으로 — 하지만 훨씬 빠르고 정확하게 — 웹 서비스를 활용할 수 있게 된다. 강연자는 이것이 단순한 편의성의 문제가 아니라, AI 에이전트가 진정으로 유용한 웹 동반자가 되기 위한 필수적인 인프라 구축의 문제임을 강조하면서 강연을 마친다.
마무리 / 핵심 정리
Tara Agyemang의 이 강연은 AI 에이전트와 웹의 관계를 재정의하려는 Google의 시도를 보여준다. WebMCP는 기존의 브라우저 자동화나 웹 스크래핑 방식의 구조적 한계를 극복하고, 웹사이트와 AI 에이전트 간의 상호작용을 표준화하는 것을 목표로 한다. 선언적 API(HTML 속성 방식)와 명령형 API(JavaScript 방식)의 두 가지 접근 방식을 통해, 기존 코드베이스를 최소한으로 수정하면서도 에이전트 친화적인 인터페이스를 추가할 수 있다는 점은 실제 도입 가능성을 높이는 실용적인 장점이다.
현재 WebMCP는 Chrome에서만 동작하는 실험적 기술이지만, 그 개념이 웹 표준과 AI 에이전트 생태계 모두에 중요한 함의를 가진다는 점은 분명하다. MCP(Model Context Protocol)가 AI 에이전트와 외부 서비스를 연결하는 표준으로 자리 잡아가는 흐름 위에서, WebMCP는 동일한 패러다임을 브라우저 환경으로 확장하는 자연스러운 다음 단계다. 웹 개발자라면 지금 이 실험적 기능을 직접 탐색하고 피드백을 제공함으로써, 에이전트 시대의 웹 상호작용 표준이 형성되는 과정에 기여할 수 있는 기회를 가질 수 있다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | The agent-ready web: Simplify user actions with WebMCP — Tara Agyemang, Google |
| 채널 | AI Engineer |
| 리포트 작성 | 2026-06-12 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. STT 변환 과정에서 영어 음성이 웨일즈어(Welsh)로 잘못 변환되는 언어 감지 오류가 발생하여, 기술 용어 및 문맥 기반으로 최대한 내용을 복원하였습니다. 정확한 내용은 원본 영상을 참조해 주세요.