[OSSCA 2025] [추가] MCP Apps의 등장

✨ 공부하며 성장하는 기록 공간입니다.
아직 부족한 점이 많고 배워야 할 것도 많지만, 그만큼 배우는 즐거움도 큽니다.
틀리거나 부족한 내용이 있다면 언제든지 편하게 지적해 주세요 😁

이 블로그는 오픈소스 프로젝트 githru-vscode-extension을 공부하고 기여한 내용을 정리한 공간입니다.
처음보다 성장해 있는 나 자신을 기대하며 꾸준히 기록해나가겠습니다!

 

서론

2025년 10월 9일 쯤 Stroyline UI를 만드는 MCP Tool을 개발하였고, 정적인 이미지의 한계 및 SVG 와 PNG의 이미지를 변환하여 컴포넌트를 렌더링하는 방식으로 개발하였습니다.

 

당시에는 MCP Tool을 통해 React 기반의 인터랙티브 UI를 직접 제공하기 어려웠기 때문인데,

프로젝트 작업을 마친 이후, 이러한 문제를 해결할 수 있는 새로운 기술이 등장했습니다.

 

바로 MCP Apps입니다.

 

하위는 Githru Storyline UI Tool을 개발할 당시와 지금 포스팅 할 때의 회고록으로 생각하면 좋을 것 같습니다.

더 자세한 MCP Apps를 정리한 포스팅 내용도 있으니 참고해보면 좋을 것 같습니다다.

https://dev-hiro.tistory.com/203

[MCP] MCP Apps - Interactive UI

 

기존 MCP Tool과 무엇이 다를까?

기존에 구현했던 Githru Storyline Tool의 처리 과정은 다음과 같았습니다.

Git Repository
      ↓
Analysis Engine
      ↓
React + D3
      ↓
SVG 생성
      ↓
Sharp (SVG → PNG)
      ↓
MCP Tool (Image Content)
      ↓
MCP Host
      ↓
정적 이미지 출력

이 방식에서는 React Component를 이미지로 변환하기 때문에 Hover, 클릭, 확대·축소와 같은 인터랙션을 유지할 수 없었습니다.

 

하지만 MCP Apps를 사용하면 다음과 같은 구조로 구현할 수 있습니다.

MCP Server
    │
    ├── Tool
    │    └── Git 데이터 분석
    │
    └── UI Resource
         └── React + D3 번들
                │
                ▼
        MCP Apps 지원 Host
                │
                ▼
       인터랙티브 Storyline

분석 결과는 Tool이 제공하고, React Component는 MCP Host가 제공하는 격리된 UI 실행 환경에서 렌더링하는 방식입니다.

따라서 SVG를 PNG로 변환하지 않고도 React와 D3를 활용한 인터랙티브 시각화를 구현할 수 있습니다.
(실제로 구현을 해보진 않았지만 할 수 있을 것이라고 생각합니다.)

MCP Apps는 어떻게 동작할까?

MCP Apps는 기존 MCP Tool의 content.type에 새로운 타입이 추가된 것이 아니라 Tool과 UI Resource를 연결하는 방식입니다. 

 

첫 번째, Tool에 UI Resource 등록

Tool의 _meta.ui.resourceUri에 UI 리소스 주소를 선언하고

_meta: {
  ui: {
    resourceUri: "ui://githru/storyline"
  }
}

두 번째, UI Resource 제공

MCP Server는 ui:// URI에 해당하는 HTML 및 JavaScript 리소스를 제공합니다.

초기 MCP Apps 표준에서는 text/html;profile=mcp-app 형식을 사용하고 있습니다. 이 HTML에 React와 D3를 번들링하여 포함할 수 있습니다.

 

세 번째, Host에서 UI 실행

MCP Apps를 지원하는 Host는 UI Resource를 가져와 샌드박스 iframe에서 실행합니다.

UI와 Host는 postMessage 기반의 JSON-RPC를 통해 통신하기에. UI는 Tool 실행 결과를 전달받거나, 허용된 범위에서 추가 Tool을 호출할 수도 있습니다.

 

MCP Apps 공식 예제

MCP 공식 GitHub에 제공된 예제를 따라 MCP Apps를 직접 구현해 보았습니다.

 

실습에서는 get-time이라는 MCP Tool을 등록하고, 해당 Tool에 UI Resource를 연결하여 실행 결과를 시각적으로 표시하도록 구성했습니다.

 

이를 통해 기존 MCP Tool의 텍스트 기반 응답을 넘어, MCP Apps를 활용해 사용자에게 인터랙티브한 UI를 제공하는 과정을 확인할 수 있었습니다.

그렇다면 기존 구현은 불필요해진 것일까?

그렇지는 않은게,

 

예를 들어 MCP Apps를 지원하지 않는 Host에서도 이미지를 표시할 수 있고, 정적인 결과를 저장하거나 공유하는 데 적합합니다.

반면 MCP Apps는 인터랙티브 UI가 필요한 경우에 더 유리합니다.

구분기준	PNG	MCP Apps
React 결과 표현	정적 이미지	실제 UI 실행
D3 시각화	가능	가능
Hover / 클릭	불가능	가능
SVG → PNG 변환	필요	일반적으로 불필요
UI 실행 환경	서버 측 렌더링 환경	Host의 샌드박스
호환성	이미지 지원 Host	MCP Apps 지원 Host

물론 MCP Apps에도 제약은 존재합니다.

 

모든 MCP Host가 해당 Extension(MCP Apps)을 지원하는 것은 아니며, UI는 보안상 격리된 환경에서 실행해야 합니다.

마무리

2025년 10월 Githru MCP Server를 개발할 당시에는 React Component의 시각화 결과를 MCP Host에 제공하기 위해 SVG를 PNG로 변환하는 방식을 선택했고, MCP Apps가 공식적으로 등장하면서, MCP Tool을 통한 UI 제공 방식에도 다양한 선택지가 있을 것 같습니다.

 

특히 이번에 구현했던 Githru Storyline처럼 사용자와 상호작용할 수 있는 시각화 기능은 MCP Apps와 잘 맞는 사례라고 생각하는데, 이번 작업을 다시 진행한다면 기존의 Analysis Engine과 Storyline Component를 재사용하면서, MCP Apps를 통해 인터랙티브 UI를 제공하는 방향도 검토해 볼 수 있을 것입니다.

 

MCP가 외부 도구와 데이터를 연결하는 프로토콜에서, 사용자와 직접 상호작용하는 UI까지 연결하는 방향으로 확장되고 있다는 점이 매력적이고 AI의 발전은 아직 끝나지 않은 것 같습니다.

---

참고 자료

• MCP Apps 공식 발표 — 2026.01.26
• MCP Apps Extension 제안 — 2025.11.21
• MCP Apps Specification (SEP-1865)
• MCP Apps 공식 GitHub Repository