메인 콘텐츠로 건너뛰기
TilnoteAI 스퀘어

MCP Apps: 에이전트 대화 속 UI 확장을 한 번에 이해하기

wislan
wislan
•조회수 18
요약

클립으로 정리됨 (생성형 AI 도구 활용)

출처 및 참고 : https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/

핵심 요약

MCP Apps는 텍스트 위주의 에이전트 대화에 대시보드, 폼, 뷰어 같은 웹 UI를 그대로 끼워 넣을 수 있게 하는 공식 확장입니다.
하나의 오픈 표준으로 만들어져 Claude, ChatGPT, VS Code 등 여러 클라이언트에서 같은 코드를 재사용할 수 있고, 보안과 샌드박스 모델도 함께 정의되어 있습니다.
스타트업 입장에서는 "한 번 만들면 여러 에이전트·IDE에 깔리는 인터랙티브 도구"를 만들 수 있는 플랫폼이라고 보면 됩니다.

MCP Apps란 무엇인가

MCP Apps는 모델 컨텍스트 프로토콜(MCP) 위에서 동작하는 "대화형 UI 플러그인" 개념입니다.

기존 MCP 도구는 주로 텍스트나 구조화된 데이터(JSON 등)를 반환했지만, MCP Apps를 쓰면 차트, 폼, PDF 뷰어, 지도, 3D 뷰처럼 브라우저 UI를 대화창 안에 직접 렌더링할 수 있습니다.

사용자는 채팅을 떠나지 않고도 필터링, 클릭, 선택, 드릴다운 같은 상호작용을 할 수 있고, 모델은 그 행동을 실시간으로 감지해 다음 응답에 활용합니다.

스타트업 관점에서 보면 "챗봇 + 웹앱"을 따로 만들지 않고, 대화 UI 안에 필요한 웹 화면을 바로 꽂아 넣는 방식의 제품 구조를 설계할 수 있습니다.

어떤 문제를 해결하는가

기존의 텍스트 기반 인터페이스는 단순 질의·응답에는 좋지만, 복잡한 탐색·설정·리뷰에는 한계가 컸습니다.

예를 들어 데이터 분석 결과를 표로 보여준 뒤 "지난주만", "매출순 정렬", "47번 행 상세 보기" 같은 요청을 할 때마다 다시 프롬프트를 보내야 했고, 컨텍스트는 계속 늘어나며 사용자 경험도 점점 느려집니다.

MCP Apps는 이런 반복 프롬프트를 UI 상호작용으로 치환합니다.
사용자는 UI에서 바로 필터·정렬·선택을 하고, MCP App은 그 행동을 모델 컨텍스트로 보내어 "사용자가 이런 선택을 했다"는 상태를 유지합니다.

결과적으로, 모델은 고차원적인 요약·추론·추천에 집중하고, UI는 리스트·차트·미디어·워크플로 조작 같은 인간에게 익숙한 상호작용을 담당하는 구조가 됩니다.

동작 구조: Tool 메타데이터와 UI 리소스

MCP Apps의 기술적인 구조는 크게 두 가지 요소로 나뉩니다.

첫째, MCP Tool 정의에 UI 관련 메타데이터를 추가합니다.
도구 정의에 _meta.ui.resourceUri 필드를 넣어 어떤 UI를 사용할지 지정합니다.

// UI 메타데이터가 포함된 Tool 예시
{
  name: "visualize_data",
  description: "Visualize data as an interactive chart",
  inputSchema: { /* ... */ },
  _meta: {
    ui: {
      resourceUri: "ui://charts/interactive"
    }
  }
}

둘째, ui:// 스킴으로 제공되는 UI 리소스가 있습니다.
이는 서버가 제공하는 번들된 HTML/JS 파일이며, 클라이언트(host)가 이를 가져와 샌드박스 iframe으로 렌더링합니다.

클라이언트와 UI는 postMessage 위의 JSON-RPC로 양방향 통신을 합니다.
이를 통해 툴 실행 결과를 UI로 보내고, UI에서 다시 서버 툴 호출이나 컨텍스트 업데이트 요청을 보낼 수 있습니다.

App API: UI와 MCP 호스트 간 통신

개발자는 @modelcontextprotocol/ext-apps 패키지가 제공하는 App 클래스를 사용해 UI와 MCP 호스트 간 통신을 구현합니다.

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App();
await app.connect();

// 호스트로부터 툴 실행 결과를 수신
app.ontoolresult = (result) => {
  renderChart(result.data);
};

// UI에서 서버 툴 호출
const response = await app.callServerTool({
  name: "fetch_details",
  arguments: { id: "123" },
});

// 모델 컨텍스트 업데이트
await app.updateModelContext({
  content: [{ type: "text", text: "User selected option B" }],
});

이 객체는 "클라이언트 안에서 돌아가는 작은 에이전트 클라이언트" 역할을 합니다.
툴 결과를 받아 화면을 갱신하고, UI에서 추가 툴을 호출하며, 사용자의 행동을 모델 컨텍스트로 전송해 이후 대화 흐름에도 반영할 수 있습니다.

이 모든 것이 표준 postMessage 위에서 동작하기 때문에 특정 프론트엔드 프레임워크(React 등)에 종속되지 않고, 기존 웹앱 자산을 재활용하기도 쉽습니다.

보안 모델: 샌드박스와 통제 지점

MCP Apps는 "외부 서버가 제공하는 UI 코드"를 실행해야 하므로, 보안 모델이 핵심입니다.

우선 모든 UI는 샌드박스 iframe에서 실행되어 브라우저의 민감한 권한이나 클라이언트 내부 리소스에 직접 접근하지 못합니다.

둘째, 호스트는 사전에 UI 템플릿(HTML 등)을 검토한 뒤에만 렌더링하도록 구성할 수 있습니다.
기업 환경에서는 이 단계에서 화이트리스트/리뷰 프로세스를 붙이기 좋습니다.

셋째, UI와 호스트의 모든 통신은 JSON-RPC 메시지로 기록 가능하게 설계되어 감사(audit) 및 디버깅이 쉽습니다.

마지막으로, UI에서 서버 툴을 호출할 때 사용자의 명시적인 승인 과정을 거치도록 강제할 수 있어, 과도한 자동 실행을 막을 수 있습니다.

결국, "외부 앱을 대화에 꽂아 넣지만, 실행과 권한은 호스트가 최종 통제하는 구조"라고 이해하면 됩니다.

클라이언트 지원과 표준의 의미

MCP Apps는 이미 여러 주요 클라이언트에서 지원되거나 도입이 진행 중입니다.

Claude 웹/데스크톱, Goose, VS Code Insiders에는 현재 지원이 들어가 있고, ChatGPT도 순차 적용 중입니다.
JetBrains, AWS, Google DeepMind 등도 이 확장을 활용하는 방향을 검토하고 있습니다.

이 말은, MCP Apps 기반으로 하나의 인터랙티브 도구를 만들면 향후 다양한 대화형 클라이언트와 IDE에서 재사용될 가능성이 크다는 뜻이며, 스타트업 관점에선 "멀티 클라이언트 에이전트 UI 플랫폼"에 올라탄 것과 같습니다.

이미 MCP-UI나 OpenAI Apps SDK를 쓰고 있다면, MCP Apps는 그 패턴을 정식 표준으로 묶은 형태라 마이그레이션도 비교적 수월합니다.

예제와 시작점

공식 ext-apps 저장소에는 여러 참고 구현체가 제공되어 있습니다.
3D 시각화를 위한 threejs-server, 지도 UI를 제공하는 map-server, PDF 뷰어인 pdf-server, 시스템 모니터링 대시보드용 system-monitor-server, 악보 표시를 위한 sheet-music-server 등 다양한 샘플이 포함되어 있습니다.

자신이 만들고 싶은 사용 사례와 가장 가까운 예제를 골라 코드 구조와 통신 패턴을 그대로 따라가는 방식으로 시작하면 구현 속도를 크게 줄일 수 있습니다.

문서와 퀵스타트, NPM 패키지, 예제는 다음 리소스를 통해 접근할 수 있습니다.

인사이트

MCP Apps는 "챗봇에서 끝나던 에이전트 경험"을 "앱 수준의 인터랙티브 워크플로"로 끌어올리는 표준입니다.

스타트업 입장에서 전략적으로 활용하려면,

  1. 단순 Q&A를 넘어 사용자가 반복 조작하는 영역(대시보드, 설정, 리뷰, 편집 등)을 먼저 찾고,

  2. 그 부분을 MCP App으로 분리해 "대화 안에서 끝나는 미니 웹앱"으로 설계하며,

  3. Claude/ChatGPT/IDE 등 다중 클라이언트에서 재사용될 수 있는 구조로 만들어 두는 것이 좋습니다.

초기에는 기존 웹앱의 일부 화면을 MCP App으로 포팅해 "에이전트 보조 UI"로 붙여보고, 유저 피드백이 좋으면 점차 핵심 워크플로 전체를 에이전트+앱 조합으로 재구성하는 식으로 단계적 접근을 추천합니다.

출처 및 참고 : MCP Apps - Bringing UI Capabilities To MCP Clients | Model Context Protocol Blog

#MCP Apps#대화형 UI#에이전트 도구#웹앱 통합#멀티클라이언트 지원

이 노트는 요약·비평·학습 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.