Web to MCP는 무료인가

무료 요금제가 있고 월 캡처 횟수에 제한이 있다. Pro는 연간 $30 결제로 월 $2.5이며 캡처 무제한과 우선 지원을 제공한다.

어떤 AI 어시스턴트를 지원하나

Cursor와 Claude Code를 위해 만들었고 안내도 둘 다 다룬다. 컴포넌트는 Model Context Protocol로 전달하므로, 개인 MCP URL을 읽는 클라이언트라면 연결할 수 있다.

쓰려면 프로그래밍을 알아야 하나

아니지만 알면 편하다. MCP URL을 설정 파일에 붙여 넣어야 하니 개발 도구에 조금 익숙하면 좋다. 캡처 자체는 요소를 클릭하는 것뿐이다.

캡처한 컴포넌트를 저장하나

공식 사이트는 컴포넌트 데이터가 MCP를 통해 어시스턴트로 바로 가고 자사 서버에는 저장되지 않는다고 밝힌다. 선택한 요소만 캡처하고 페이지 전체는 가져오지 않는다고도 설명한다.

어시스턴트가 컴포넌트를 정확히 재현하나

Web to MCP는 정확한 DOM 구조, 정확한 CSS 값, 스크린샷을 보장한다. 다만 최종 결과는 모델과 프롬프트에 달려 있다. 제공자에 따르면 대부분 첫 시도에서 90% 이상 정확도에 도달하고, 이후 작은 조정을 거친다.

Web to MCP

WebToMCP · 코딩

Web to MCP는 실제 웹사이트의 컴포넌트를 캡처해 그 코드와 스타일을 Cursor나 Claude Code로 바로 보내는 Chrome 확장 프로그램 겸 Model Context Protocol 서버다.

도구 방문

Web to MCP 소개

What Is Web to MCP

Web to MCP가 푸는 문제는 아주 구체적이고 번거롭다. AI 어시스턴트에게 UI 컴포넌트를 설명하는 일이다. "둥근 모서리에 그라데이션이 들어간 파란 버튼"이라고 타이핑하는 대신, 진짜 요소를 가리켜서 보내면 된다.

도구는 함께 맞물리는 두 부분으로 나뉜다. Chrome 확장 프로그램이 둘러보는 모든 사이트에서 캡처를 맡고, MCP 서버가 캡처한 컴포넌트를 어시스턴트로 전달한다. 이미 Cursor나 Claude Code를 쓰면서 추측이 아닌 픽셀 단위 출발점을 원하는 개발자를 겨냥한다.

가장 큰 한계는 범위다. Web to MCP는 어시스턴트에 재료를 넣어줄 뿐, 스스로 코드를 쓰거나 고치지 않으며 결과물의 품질은 모델과 프롬프트에 달려 있다. Chrome 브라우저와 Google 계정도 필요하고, 공용 서버가 아니라 개인 MCP URL로 동작한다.

Getting Started

Chrome 웹 스토어에서 Web to MCP 확장 프로그램을 설치한다.
Google 계정으로 로그인해 자신만의 MCP URL을 만든다.
그 URL을 어시스턴트 설정 파일에 넣는다 (Cursor는 .cursor/mcp.json, Claude Code는 자체 MCP 설정을 읽는다).
아무 웹사이트를 열고 확장 프로그램 아이콘을 눌러 선택 모드를 켠다.
원하는 요소를 클릭해 참조 id를 복사한 뒤, 어시스턴트에게 재현을 요청한다.

제품 정보

Web to MCP의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.

무료 플랜예

유료 플랜$2.5/mo (billed yearly at $30)

플랫폼Chrome extension, MCP server (Cursor and Claude Code)

개발사WebToMCP

카테고리코딩

출시일Jan 2026

최근 업데이트Oct 2025

웹사이트 방문 수2.9K

웹사이트 글로벌 순위6.1M

API 제공 여부예

주요 기능

클릭 한 번으로 컴포넌트 캡처

확장 프로그램 아이콘을 누르고 선택 모드로 전환해 페이지의 아무 요소나 고른다. Web to MCP는 렌더링된 그대로의 DOM 구조와 계산된 CSS를 기록하므로, 어시스턴트는 방문자가 보는 것과 같은 것을 받는다. 개발자 도구를 열 필요도, 스타일을 손으로 옮길 필요도 없다.

MCP를 통한 직접 전달

캡처한 컴포넌트는 계정에 묶인 개인 URL을 써서 Model Context Protocol로 어시스턴트에 도착한다. URL을 설정에 적으면 Cursor와 Claude Code가 도구를 스스로 찾아낸다. 대화에서는 id로 요소를 참조하니, 전달 과정이 원래 쓰던 도구 안에서 끝난다.

프레임워크에 얽매이지 않는 출력

캡처는 React, Vue, Angular, 순수 HTML과 CSS 사이트에서 똑같이 작동한다. 프레임워크 속이 아니라 렌더링 결과를 읽기 때문이다. 이어서 어시스턴트가 그 맥락을 당신이 만들어 나가는 스택에 맞춘다. 다만 결과를 이끌려면 프롬프트에 프레임워크와 디자인 시스템을 적어 두는 게 좋다.

픽셀만이 아닌 의미 맥락

스크린샷과 달리, 여기에는 의미 있는 HTML, 정확한 CSS 값, 주변 구조와 호버 상태 같은 레이아웃 맥락이 들어간다. 이 세밀함 덕분에 어시스턴트가 이미지를 다시 해석하는 대신 보기에 가까운 결과를 노릴 수 있다. Web to MCP는 데이터가 어시스턴트로 바로 가고 자사 서버에는 저장하지 않는다고 밝힌다.

개인 전용 MCP 엔드포인트

로그인한 계정마다 Google 로그인 후 전용 MCP URL이 발급된다. 프로젝트용이나 전역 설정 파일에 붙여 넣으면 연결은 나만의 것이 된다. 서버를 직접 세우는 것과 달리, 설치는 몇 분이면 끝난다.

Claude Code와 Cursor 지원

설치 안내는 Cursor와 Claude Code 둘 다 다룬다. 이 도구가 중심에 둔 두 어시스턴트다. Cursor에서는 .cursor/mcp.json에 항목을 넣고, Claude Code에서는 MCP 설정 파일을 고친다. 두 경로 모두 설치 후 '캡처하고 참조하기'라는 같은 흐름을 따른다.