10년 차 프런트엔드 개발자의 WebMCP 기반 에이전트 친화적 웹사이트 구축기

커뮤니티 반응

작성자의 프로젝트에 대해 긍정적인 반응이 주를 이루며, WebMCP가 향후 웹 UX의 표준이 될 가능성에 대해 논의가 이루어지고 있습니다.

주요 논점

01찬성다수

웹사이트가 인간뿐만 아니라 AI 에이전트에게도 기능을 노출하는 방향으로 진화해야 한다.

합의점 vs 논쟁점

합의점

웹 기능을 도구화하는 과정에서 보안과 남용 방지 대책이 매우 중요하다.
WebMCP는 에이전트와 웹의 상호작용을 표준화하는 유망한 프로토콜이다.

실용적 조언

WebMCP를 처음 시도한다면 mcp-b 라이브러리를 사용하여 기존 웹 흐름을 도구로 연결해 보라.
공개된 도구 호출 흐름에는 반드시 속도 제한(Rate Limiting)이나 인증 로직을 추가하여 남용을 방지해야 한다.

섹션별 상세

작성자는 웹사이트의 사용자 흐름(User Flow)을 AI 에이전트가 호출 가능한 도구로 노출해야 한다고 제안했다. WebMCP 프로토콜을 통해 사이트 내의 스캔, 대기 명단 등록, 예약 등의 기능을 에이전트가 인식하고 실행할 수 있는 구조로 설계했다. 이는 단순한 웹 페이지를 넘어 AI가 직접 상호작용할 수 있는 인터페이스로의 진화를 의미한다.

기술 스택은 Next.js, React, TypeScript를 기반으로 하며 백엔드 데이터 처리를 위해 Convex를 사용했다. WebMCP 레이어는 mcp-b 라이브러리를 통해 연결하여 브라우저 확장 프로그램 없이도 도구 호출 과정을 실시간으로 확인할 수 있는 시뮬레이션 쇼케이스를 구현했다. Cursor와 같은 AI 코딩 도구를 활용해 프런트엔드와 백엔드, 보안 레이어를 통합하는 과정을 가속화했다.

공공 스캔 흐름을 도구로 노출했을 때 발생할 수 있는 남용 가능성을 확인하고 이를 방어하기 위한 보안 강화 작업을 진행했다. 도구 호출 과정을 사용자에게 기술적으로만 보여주는 것이 아니라 페이지 상에서 가독성 있게 표현하는 UI/UX적 고민이 수반됐다. 실제 도구 레이어와 시뮬레이션용 레이어를 분리하여 프로토콜 테스트의 정확성을 높였다.

언급된 도구

WebMCP추천링크

웹사이트 기능을 AI 에이전트 도구로 노출하는 프로토콜

Convex추천

실시간 백엔드 및 데이터베이스 서비스

mcp-b추천

WebMCP 연결 및 통신을 위한 라이브러리

Cursor추천

AI 기반 코드 편집기

언급된 리소스

DemoWebMCP Ready Demo