웹MCP(WebMCP) 개발자 도구와 선언형 API 정리 — 아직 절반만 완성된 이유

핵심 메시지

• 웹MCP는 웹페이지가 자신의 기능을 AI가 호출할 수 있는 '도구(tool)'로 노출하게 해 주는 방식이다.
• 새 버전에서는 크롬 개발자 도구에서 페이지가 제공하는 도구 목록을 확인하고 직접 실행·기록까지 볼 수 있게 됐다.
• 자바스크립트를 쓰는 명령형 API 외에, HTML 속성만 붙이면 되는 선언형 API가 추가돼 코드 없이도 도구를 등록할 수 있다.
• 그러나 브라우저의 AI 패널(예: 제미나이)에 실제로 연동되지 않아 '절반의 해법'에 머물러 있다는 것이 발표자의 핵심 지적이다.

쉽게 이해하기

웹MCP(WebMCP)는 웹페이지가 가진 기능을 AI가 직접 불러 쓸 수 있는 '도구'로 노출하는 구조다. 발표자는 이전 영상에서 치즈스테이크 가게 예제나 3D 모델링 도구 OpenSCAD를 웹MCP로 조작하는 모습을 보여 준 바 있고, 이번 영상에서는 그 이후 새로 추가된 두 가지 기능을 다룬다.

첫 번째는 크롬 개발자 도구 지원이다. 크롬 플래그(chrome://flags)에서 'MCP'를 검색하면 개발자 도구용 웹MCP 지원과 테스트용 지원 항목이 나타나고, 이를 켜면 개발자 도구의 Application 탭 아래 'WebMCP' 영역에서 현재 페이지가 제공하는 모든 도구 목록을 볼 수 있다. 각 도구의 설명을 확인하고, 입력값과 출력값을 보며 그 자리에서 직접 실행해 볼 수도 있다. 다만 결과가 사실상 JSON 문자열인데도 단순 텍스트로만 표시되는 점은 아쉬움으로 지적됐다.

두 번째는 선언형(declarative) API다. 기존에는 자바스크립트로 document.modelContext에 접근해 registerTool로 도구를 등록하는 명령형 방식을 썼다. 새 방식에서는 HTML 태그에 toolname, tooldescription, 그리고 입력 필드에 toolparamdescription 같은 속성만 추가하면 자바스크립트를 한 줄도 쓰지 않고 도구가 등록된다. 발표자는 메모리에 할 일을 담는 간단한 할 일 목록에 폼 속성만 붙여 addTodoItem 도구를 만들고, 개발자 도구에서 그 도구가 인식되는 것과 호출 기록이 남는 것을 보여 준다.

발표자는 웹MCP가 매력적이라면서도 여전히 '절반의 해법'이라고 강조한다. 나머지 절반은 이 기능을 실제 사용자에게 전달하는 것, 즉 브라우저의 AI 패널에 웹MCP를 통합하는 일이다. 크롬조차 아직 이를 지원하지 않는다는 점을 문제로 든다.

특히 구글이 웹MCP를 적극적으로 밀면서도 브라우저 확장과 개발자 도구에만 모델 컨텍스트 객체를 넣고, 정작 제미나이 AI 통합에는 연결하지 않는 이유를 이해하기 어렵다고 말한다. 개발자가 만든 도구가 브라우저의 AI와 직접 이어져야 비로소 진짜 쓸모가 생긴다는 것이다.

주요 인사이트

• 웹MCP의 가치는 '웹페이지 자체가 AI의 도구 공급원이 된다'는 데 있다. 페이지가 기능을 도구로 노출하면 AI가 그 기능을 직접 호출할 수 있다.
• 선언형 API는 진입 장벽을 크게 낮춘다. 자바스크립트 없이 HTML 속성만으로 도구를 정의할 수 있어, 프런트엔드 마크업만 다루는 사람도 참여할 수 있다.
• 개발자 도구 통합은 디버깅 경험을 개선한다. 도구 목록·입출력·호출 기록을 한곳에서 보며 테스트할 수 있기 때문이다.
• 표준을 밀어붙이는 것과 사용자에게 도달하는 것은 다른 문제다. 확장과 개발자 도구가 있어도 브라우저 AI 패널 연동이 없으면 최종 사용자는 그 이점을 누리지 못한다.

자주 묻는 질문

관련 AI 소식