AI와 대화하던 중 텍스트 응답 대신 실제 온라인 쇼핑몰처럼 상품을 둘러보고 클릭해서 구매할 수 있다면? 이제 SF가 아닌 현실이 되었습니다. MCP-UI 덕분입니다.
텍스트 지옥에서 벗어나야 할 때
“운동화 좀 찾아줘”라고 AI에게 부탁했을 때 받는 답변을 떠올려보세요. 온통 텍스트로 가득한 상품명, 가격, 설명들. 그리고 URL을 복사해서 새 탭을 열고 다시 검색하는 번거로운 과정. 이런 경험 때문에 많은 사람들이 ChatGPT를 ‘화가 나서 그만 사용하게’ 되었다고 합니다.
문제의 핵심은 명확합니다. 텍스트만으로는 한계가 있다는 것입니다. 온라인 쇼핑을 할 때 상품 이미지를 보고 싶고, 항공권을 예약할 때는 좌석 배치도를 확인하고 싶습니다. 레스토랑을 찾을 때는 사진과 리뷰를 한눈에 보고 싶어 합니다.
기존 AI 인터페이스는 얼리어답터나 개발자들에게는 괜찮을지 모르지만, 일반 사용자들에게는 불편할 수밖에 없습니다.
MCP-UI: 웹과 AI를 잇는 다리
MCP-UI(Model Context Protocol User Interface)는 이런 문제를 해결하기 위해 등장했습니다. 핵심 아이디어는 간단하면서도 혁신적입니다. ‘AI 대화에 실제 웹 UI 컴포넌트를 바로 임베드하자’는 것입니다.
Monday.com의 개발자인 이도 살로몬(Ido Salomon)과 리아드 요세프(Liad Yosef)가 주도하여 개발한 이 기술은 다음과 같은 철학을 바탕으로 합니다:
“인간을 위해 10년 이상 축적된 웹 UI/UX 노하우를 AI 때문에 버릴 이유가 없다”
MCP-UI는 텍스트 응답을 대신해 실제 쇼핑 카탈로그, 좌석 배치도, 예약 양식 등을 AI 대화창에 직접 표시할 수 있게 해줍니다. 마치 웹사이트를 방문한 것처럼 클릭하고 상호작용할 수 있습니다.
실제로 어떻게 작동할까?
MCP-UI의 작동 방식을 몇 가지 예시로 살펴보겠습니다.
온라인 쇼핑의 변화
기존 방식: “나이키 에어맥스 270 검은색 280mm 159,000원입니다. 링크: nike.com/…”
MCP-UI 방식: AI 대화창 안에 실제 Shopify 스토어가 나타나고, 상품 이미지를 클릭하고 장바구니에 담을 수 있습니다. 브랜드 고유의 디자인과 색상도 그대로 유지됩니다.
여행 계획이 한결 쉬워짐
“부산행 비행기표 찾아줘”라고 요청하면, 텍스트 목록 대신 실제 항공사 웹사이트처럼 좌석 배치도가 나타납니다. 원하는 좌석을 클릭하면 자동으로 목적지 날씨 정보까지 가져와 줍니다.
맛집 검색도 더 직관적으로
동네 레스토랑을 찾으면 사진, 평점, 메뉴가 포함된 카드 형태로 표시됩니다. 바로 주문까지 할 수 있어서 번거로운 단계가 사라집니다.
기술적으로 어떻게 구현되나?
MCP-UI는 보안을 최우선으로 설계되었습니다. 모든 UI 컴포넌트는 샌드박스 처리된 iframe에서 실행되며, 메시지 전송을 통해서만 상위 애플리케이션과 통신합니다.
현재 지원하는 컨텐츠 유형:
- 외부 URL: 기존 웹앱을 iframe으로 임베드
- Raw HTML: CSS와 JavaScript가 포함된 커스텀 HTML 컴포넌트
- Remote DOM: 보안이 강화된 워커에서 UI 렌더링
개발자 입장에서는 시작이 매우 간단합니다:
return createUIResource({
type: 'html',
content: '<h1>Hello World</h1>'
});이렇게 간단한 코드만으로도 AI 대화에 인터랙티브한 UI를 추가할 수 있습니다.
누가 이익을 보는가?
MCP-UI는 여러 이해관계자들에게 각각 다른 가치를 제공합니다.
에이전트 개발자들: Goose 같은 플랫폼에서 MCP-UI 지원을 구현하면 사용자 경험이 크게 개선됩니다.
MCP 서버 개발자들: UI 컴포넌트를 만들어 기존 서비스와 연결할 수 있습니다.
서비스 제공업체들: Shopify, Square 같은 회사들이 자체 플랫폼용 풍부한 인터페이스를 만들 수 있습니다.
일반 사용자들: 더 직관적이고 시각적인 AI 상호작용을 경험할 수 있습니다.
특히 주목할 점은 네트워크 효과입니다. 한 번 만든 Shopify MCP-UI 컴포넌트는 Goose부터 VS Code 확장까지, 그리고 미래의 모바일 AI 어시스턴트까지 모든 호환 가능한 에이전트에서 작동합니다.
접근성 혁명이 시작된다
MCP-UI의 진짜 잠재력은 접근성에 있을지도 모릅니다. 이도 살로몬은 이렇게 설명했습니다:
“사용자를 알고 사용자의 선호도에 맞게 UI를 구축하는 에이전트보다 더 접근성이 좋은 것이 또 있을까요? 전 세계 모든 웹앱이 이를 지원하고 구축해야 한다고 생각하지 않아도 됩니다.”
즉, AI가 각 사용자의 접근성 요구사항을 파악해서 맞춤형 인터페이스를 생성할 수 있다는 뜻입니다. 시각 장애인을 위한 음성 인터페이스, 거동이 불편한 사용자를 위한 대형 버튼 등 개별 맞춤화가 가능해집니다.
이미 시작된 미래
기술은 준비되었고, 이제는 도입이 관건입니다. 다행히 주요 업체들이 이미 움직이고 있습니다.
Shopify는 모든 스토어에 MCP 지원을 출시했습니다. 수백만 개의 상점에서 실제 상거래 경험을 테스트할 수 있는 거대한 실험장이 마련된 셈입니다.
Block의 Goose는 이미 MCP-UI를 지원하고 있고, Zed, Replit, Codeium, Sourcegraph 등의 개발 도구 회사들도 통합 작업을 진행 중입니다.
직접 체험해보고 싶다면
MCP-UI를 직접 경험하고 싶다면 몇 가지 옵션이 있습니다:
- 문서 확인: mcpui.dev에서 자세한 문서와 예제를 확인할 수 있습니다
- 커뮤니티 참여: Discord 서버에서 개발자들과 소통할 수 있습니다
- Goose에서 테스트: Block의 Goose를 설치해서 실제 MCP-UI를 경험해볼 수 있습니다
개발자라면 기존 MCP 서버에 UI 리소스를 추가하는 간단한 실험부터 시작해보는 것을 추천합니다.
상호작용하는 AI의 시대
MCP-UI는 단순히 예쁜 인터페이스를 만드는 기술이 아닙니다. AI와 인간의 상호작용 방식을 근본적으로 바꾸는 패러다임 전환입니다.
상품을 구매할 때는 이미지와 상호작용하고, 여행을 계획할 때는 시각적 지도와 일정표를 사용하고, 캘린더를 관리할 때는 친숙한 인터페이스 패턴을 사용하는 것이 자연스럽습니다. MCP-UI는 이 모든 것을 AI와의 대화 안에서 가능하게 만듭니다.
텍스트 중심의 AI 상호작용 시대는 끝나가고 있습니다. 더 스마트하고 직관적인 인터페이스의 미래가 이미 시작되었습니다.
참고자료:
Comments