MCP 앱

MCP Apps · 원문: modelcontextprotocol.io/extensions/apps/overview

아래는 원문을 한국어로 옮긴 미러입니다. 코드·명령은 원문 그대로이며, 가장 최신 정보는 하단 원문 링크에서 확인하세요.

MCP 호스트(Claude Desktop 등) 내에서 렌더링되는 인터랙티브 UI 애플리케이션

팁: 포괄적인 API 문서, 고급 패턴, 전체 명세는 공식 MCP 앱 문서를 방문하세요.

텍스트 응답만으로는 한계가 있습니다. 사용자가 데이터를 읽는 것만이 아니라 직접 상호작용해야 할 때도 있습니다. MCP 앱은 서버가 인터랙티브 HTML 인터페이스(데이터 시각화, 폼, 대시보드 등)를 반환하여 채팅 내에서 직접 렌더링될 수 있게 합니다.

왜 그냥 웹 앱을 만들지 않나요?

독립형 웹 앱을 만들어 사용자에게 링크를 보낼 수도 있습니다. 그러나 MCP 앱은 별도 페이지로는 불가능한 핵심 장점을 제공합니다:

컨텍스트 보존. 앱은 대화 내에 존재합니다. 사용자가 탭을 전환하거나, 위치를 잃거나, 어느 채팅 스레드에 그 대시보드가 있었는지 고민할 필요가 없습니다. UI는 대화를 이어가는 맥락과 함께 바로 그 자리에 있습니다.
양방향 데이터 흐름. 앱에서 MCP 서버의 모든 도구(tool)를 호출할 수 있고, 호스트가 새 결과를 앱으로 푸시할 수 있습니다. 독립형 웹 앱은 자체 API, 인증, 상태 관리가 필요하지만, MCP 앱은 기존 MCP 패턴을 통해 이를 얻습니다.
호스트 기능과의 통합. 앱은 호스트에 작업을 위임할 수 있으며, 호스트는 사용자가 이미 연결한 기능과 도구를 호출할 수 있습니다(사용자 동의 하에). 모든 앱이 직접 통합을 구현하고 유지하는 대신(예: 이메일 제공업체), 앱은 결과를 요청하면(예: "이 미팅을 일정에 추가해") 호스트가 사용자의 기존 연결 기능을 통해 이를 처리합니다.
보안 보장. MCP 앱은 호스트가 제어하는 샌드박스 iframe에서 실행됩니다. 부모 페이지에 접근하거나, 쿠키를 탈취하거나, 컨테이너를 벗어날 수 없습니다. 즉, 호스트는 서버 작성자를 완전히 신뢰하지 않고도 서드파티 앱을 안전하게 렌더링할 수 있습니다.

이런 속성이 사용 사례에 도움이 되지 않는다면, 일반 웹 앱이 더 간단할 수 있습니다. 그러나 LLM 기반 대화와 긴밀한 통합을 원한다면 MCP 앱이 훨씬 더 나은 도구입니다.

MCP 앱의 작동 방식

기존 MCP 도구는 호스트가 대화의 일부로 표시하는 텍스트, 이미지, 리소스(resource) 또는 구조화된 데이터를 반환합니다. MCP 앱은 도구가 도구 설명에 인터랙티브 UI에 대한 참조를 선언하고 호스트가 이를 제자리에 렌더링할 수 있도록 이 패턴을 확장합니다.

핵심 패턴은 두 가지 MCP 프리미티브(primitive)를 결합합니다: UI 리소스를 설명에 선언하는 도구와, 데이터를 인터랙티브 HTML 인터페이스로 렌더링하는 UI 리소스입니다.

LLM이 MCP 앱을 지원하는 도구를 호출하기로 결정하면 다음과 같은 일이 일어납니다:

UI 사전 로딩: 도구 설명에는 ui:// 리소스를 가리키는 _meta.ui.resourceUri 필드가 포함됩니다. 호스트는 도구가 호출되기 전에도 이 리소스를 사전 로딩할 수 있어, 도구 입력을 앱으로 스트리밍하는 등의 기능을 활성화합니다.
리소스 가져오기: 호스트가 서버에서 UI 리소스를 가져옵니다. 이 리소스에는 JavaScript와 CSS가 함께 번들링된 HTML 페이지가 포함됩니다. 앱은 _meta.ui.csp에 지정된 출처에서 외부 스크립트와 리소스를 로드할 수도 있습니다.
샌드박스 렌더링: 웹 호스트는 일반적으로 대화 내의 샌드박스 iframe 안에서 HTML을 렌더링합니다. 샌드박스는 앱의 부모 페이지 접근을 제한하여 보안을 보장합니다. 리소스의 _meta.ui 객체에는 추가 기능(예: 마이크, 카메라)을 요청하는 permissions와 앱이 로드할 수 있는 외부 출처를 제어하는 csp가 포함될 수 있습니다.
양방향 통신: 앱과 호스트는 MCP의 방언을 형성하는 JSON-RPC 프로토콜을 통해 통신합니다. 일부 요청과 알림은 핵심 MCP 프로토콜과 공유되고(예: tools/call), 일부는 유사하며(예: ui/initialize), 대부분은 ui/ 메서드 이름 접두어를 가진 새로운 것입니다. 앱은 도구 호출을 요청하고, 메시지를 보내고, 모델의 컨텍스트를 업데이트하며, 호스트로부터 데이터를 받을 수 있습니다.

코드 · 명령

sequenceDiagram
    participant User
    participant Agent
    participant App as MCP App iframe
    participant Server as MCP Server

    User->>Agent: "show me analytics"
    Note over User,App: Interactive app rendered in chat
    Agent->>Server: tools/call
    Server-->>Agent: tool input/result
    Agent-->>App: tool result pushed to app
    User->>App: user interacts
    App->>Agent: tools/call request
    Agent->>Server: tools/call (forwarded)
    Server-->>Agent: fresh data
    Agent-->>App: fresh data
    Note over User,App: App updates with new data
    App-->>Agent: context update

앱은 호스트로부터 격리되지만, 보안 postMessage 채널을 통해 MCP 도구를 계속 호출할 수 있습니다.

MCP 앱 사용 시기

다음과 같은 사용 사례에 MCP 앱이 적합합니다:

복잡한 데이터 탐색. 사용자가 "지역별 판매량을 보여줘"라고 요청하면, 텍스트 응답은 숫자를 나열할 수 있지만 MCP 앱은 사용자가 지역을 클릭해 드릴다운하고, 세부 사항을 마우스오버로 확인하고, 지표를 전환할 수 있는 인터랙티브 지도를 렌더링할 수 있습니다.

많은 옵션 구성. 배포 설정에는 수십 가지 상호 의존적인 선택이 포함됩니다. 앞뒤로 주고받는 대화 대신("어느 지역이에요?" "인스턴스 크기는요?" "자동 확장을 활성화하나요?") MCP 앱은 유효성 검사와 기본값이 있는 폼으로 모든 옵션을 한 번에 표시합니다.

풍부한 미디어 보기. 사용자가 PDF를 검토하거나, 3D 모델을 보거나, 생성된 이미지를 미리 보고 싶을 때 텍스트 설명은 부족합니다. MCP 앱은 실제 뷰어(이동, 확대/축소, 회전)를 대화 내에 직접 임베드합니다.

실시간 모니터링. 라이브 메트릭, 로그, 시스템 상태를 보여주는 대시보드는 지속적인 업데이트가 필요합니다. MCP 앱은 영속적인 연결을 유지하여 사용자가 "지금 상태가 어떤가요?"라고 묻지 않아도 데이터가 변경될 때마다 화면을 업데이트합니다.

다단계 워크플로우. 경비 보고서 승인, 코드 변경 검토, 이슈 분류 등은 항목을 하나씩 검토하는 작업입니다. MCP 앱은 상호작용 전반에 걸쳐 지속되는 탐색 컨트롤, 작업 버튼, 상태를 제공합니다.

보안 모델

MCP 앱은 샌드박스 iframe에서 실행되어 호스트 애플리케이션으로부터 강력한 격리를 제공합니다. 샌드박스는 앱이 부모 창의 DOM에 접근하거나, 호스트의 쿠키 또는 로컬 스토리지를 읽거나, 부모 페이지를 탐색하거나, 부모 컨텍스트에서 스크립트를 실행하는 것을 방지합니다.

앱과 호스트 간의 모든 통신은 postMessage API를 통해 이루어집니다. 호스트는 앱이 접근할 수 있는 기능을 제어합니다. 예를 들어, 호스트는 앱이 호출할 수 있는 도구를 제한하거나 sendOpenLink 기능을 비활성화할 수 있습니다.

샌드박스는 앱이 호스트나 사용자 데이터에 접근하는 것을 방지하도록 설계되었습니다.

프레임워크 지원

MCP 앱은 핵심 프로토콜과 마찬가지로 JSON-RPC 기반의 자체 MCP 방언을 사용합니다. 일부 메시지는 일반 MCP와 공유되고(예: tools/call), 다른 일부는 앱에 특화되어 있습니다(예: ui/initialize). 전송 방식은 stdio나 HTTP 대신 postMessage입니다. 모두 표준 웹 기본 요소이므로 어떤 프레임워크를 사용하거나 전혀 사용하지 않아도 됩니다.

@modelcontextprotocol/ext-apps의 App 클래스는 편의를 위한 래퍼이며, 필수가 아닙니다. 의존성을 피하거나 더 세밀한 제어가 필요하다면 postMessage 프로토콜을 직접 구현할 수 있습니다.

examples 디렉터리에는 React, Vue, Svelte, Preact, Solid, 바닐라 JavaScript를 위한 시작 템플릿이 포함되어 있습니다. 이는 각 프레임워크에 권장되는 패턴을 보여주는 예제이지 필수 사항은 아닙니다.

클라이언트 지원

참고: MCP 앱은 핵심 MCP 명세의 익스텐션입니다. 호스트 지원은 클라이언트마다 다릅니다.

MCP 앱은 현재 Claude, Claude Desktop, VS Code GitHub Copilot, Microsoft 365 Copilot, Goose, Postman, MCPJam, Archestra.AI에서 지원됩니다. 전체 익스텐션 지원 목록은 클라이언트 매트릭스를 참조하세요.

MCP 클라이언트를 개발하고 MCP 앱을 지원하려면 두 가지 옵션이 있습니다:

프레임워크 사용: @mcp-ui/client 패키지가 호스트 애플리케이션에서 MCP 앱 뷰를 렌더링하고 상호작용하기 위한 React 컴포넌트를 제공합니다.
AppBridge 기반 구축: SDK에는 샌드박스 iframe에서 앱 렌더링, 메시지 전달, 도구 호출 프록시, 보안 정책 적용을 처리하는 App Bridge 모듈이 포함되어 있습니다.

예제

ext-apps 저장소에는 다양한 사용 사례를 보여주는 즉시 실행 가능한 예제가 있습니다:

3D 및 시각화: map-server, threejs-server, shadertoy-server
데이터 탐색: cohort-heatmap-server, customer-segmentation-server, wiki-explorer-server
비즈니스 애플리케이션: scenario-modeler-server, budget-allocator-server
미디어: pdf-server, video-resource-server, sheet-music-server, say-server
유틸리티: qr-server, system-monitor-server, transcript-server
시작 템플릿: React, Vue, Svelte, Preact, Solid, 바닐라 JavaScript

자체 MCP 앱 구축을 시작하려면 빌드 가이드를 참조하세요.

원문(영어): https://modelcontextprotocol.io/extensions/apps/overview · 본 문서는 학습용 한국어 번역이며 원본의 권리는 원저작자(Model Context Protocol)에게 있습니다.

원문(영어): https://modelcontextprotocol.io/extensions/apps/overview

문서 이동

‹ 익스텐션 개요 MCP 앱 만들기 › · 전체 목차