이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.
TL;DR
Indeed의 Dustin Mihalik이 MCP(Model Context Protocol) 앱에 UI 위젯을 추가할 때 발생하는 기술적 난제와 해결 원칙을 제시한다. 핵심은 모델이 UI에 표시된 내용을 인지하지 못하는 '블랙박스' 현상을 막기 위해 사용자에게 보여주는 모든 정보를 모델에게 데이터로도 전달하고, 상호작용 발생 시 모델의 컨텍스트를 실시간으로 업데이트해야 한다는 점이다. 특히 데이터 처리와 UI 렌더링 도구를 분리하여 모델이 자유롭게 데이터를 탐색하고 최종 결과만 위젯으로 출력하게 설계하는 것이 중요하다. 이를 통해 텍스트 기반 인터페이스의 한계를 극복하고 기능성과 브랜딩을 동시에 확보한 AI 에이전트를 구축할 수 있다.
챕터별 상세
MCP 앱에 UI가 필요한 이유
Indeed의 Dustin Mihalik은 Claude와 ChatGPT용 MCP 앱을 개발하며 얻은 실전 경험을 공유했다. 텍스트 기반 응답은 브랜딩이 불가능하고 외부 링크 연결 시 사용자가 채팅 환경을 이탈하게 만드는 문제가 있었다. UI 위젯을 도입하면 대화창 내에서 '지원하기' 버튼이나 상세 정보 팝업을 제공해 사용자 경험을 개선하고 이탈을 방지할 수 있다. 하지만 단순히 UI만 추가하면 모델이 화면에 무엇이 있는지 인지하지 못해 성능이 저하되는 부작용이 발생했다.
모델에게도 UI 데이터를 제공하라
사용자에게 보여주는 모든 정보는 반드시 모델에게도 데이터 형태로 전달되어야 한다. UI가 모델에게 '블랙박스'가 되면 사용자가 화면 내용을 바탕으로 질문했을 때 모델이 답변하지 못하는 상황이 발생한다. MCP 스펙의 `structuredContent` 필드를 활용해 UI 렌더링에 사용된 원본 데이터를 모델에 함께 반환해야 한다. 이를 통해 모델은 자신이 출력한 위젯의 내용을 정확히 파악하고 후속 대화를 이어갈 수 있다.
UI 존재를 도구 설명에 명시하기
도구 설명(Tool Description)에 결과가 UI 컴포넌트로 자동 표시된다는 사실을 명시하지 않으면 모델이 비효율적으로 작동한다. 모델은 UI가 생성된 것을 모르고 그 아래에 동일한 내용을 텍스트로 다시 요약해서 출력하려 하기 때문이다. "결과는 사용자에게 UI 컴포넌트로 자동 표시된다"는 문구를 도구 설명 상단에 추가하는 것만으로도 중복 출력을 방지하고 깔끔한 인터페이스를 유지할 수 있다.
typescript
registerAppTool(server, {
name: 'get-time',
.meta: { ui: { resourceUri } },
async () => {
return {
content: [{ type: 'text', text: time }],
structuredContent: { time }
};
}
});UI 리소스 경로와 모델용 구조화된 데이터를 함께 반환하는 MCP 도구 등록 예시
사용자 상호작용의 컨텍스트 업데이트
사용자가 UI 위젯 내에서 버튼을 클릭하거나 상세 정보를 열어보는 행위는 모델에게 보이지 않는 이벤트이다. 사용자가 특정 공고의 상세 내용을 보고 있는데 모델이 이를 모르면 대화의 맥락이 끊기게 된다. `updateModelContext` 메서드를 사용하여 사용자가 현재 어떤 항목을 선택했는지, 어떤 상세 데이터를 보고 있는지에 대한 정보를 모델의 컨텍스트에 실시간으로 주입해야 한다. 이는 쇼핑카트 앱에서 품목 수나 총액 변화를 모델에게 알리는 것과 같은 원리이다.
javascript
await app.updateModelContext({
content: [{ type: 'text', text: markdown }],
});사용자의 UI 상호작용 정보를 모델의 컨텍스트에 업데이트하는 코드
데이터 처리와 UI 렌더링의 분리
가장 핵심적인 원칙은 데이터 처리 로직과 UI 렌더링 로직을 완전히 분리하는 것이다. 하나의 도구가 검색과 렌더링을 동시에 수행하면 모델은 한 번의 호출로 작업을 끝내려 하며 데이터 탐색을 멈춘다. 대신 모델이 자유롭게 호출할 수 있는 순수 검색 도구와, 최종 결과 ID 목록을 받아 화면에 그리는 렌더링 도구를 별도로 구축해야 한다. Indeed 사례에서는 모델이 100개의 공고를 검색하고 자체적으로 5개를 필터링한 뒤 렌더링 도구를 호출하게 하여 정확도를 높였다.
작고 조합 가능한 도구 설계
UI보다 데이터 구조를 먼저 설계하고 작고 조합 가능한 도구(Composable Tools)를 만드는 것이 성공적인 MCP 앱의 열쇠이다. 렌더링 도구는 단순히 데이터를 보여주는 것을 넘어 모델이 왜 이 결과를 선택했는지에 대한 추론 근거를 함께 표시할 수 있도록 설계해야 한다. 예를 들어 '이 공고는 당신의 기술 스택과 90% 일치합니다'와 같은 모델의 판단 결과를 위젯에 포함시키면 사용자 신뢰도가 크게 향상된다. 데이터 중심의 설계는 모델의 유연성을 극대화하고 복잡한 사용자 요구사항에 대응할 수 있게 한다.
용어 해설
- 모델 컨텍스트 프로토콜(MCP)
- — LLM이 외부 데이터 소스나 도구와 표준화된 방식으로 통신할 수 있게 해주는 프로토콜이다. 이를 통해 서로 다른 AI 모델과 애플리케이션 간의 통합 비용을 줄이고 도구 사용의 일관성을 확보할 수 있다.
- UI 위젯(UI Widget)
- — 채팅 인터페이스 내에서 텍스트 외에 버튼, 카드, 상세 보기 창 등 시각적 요소를 제공하는 컴포넌트이다. 사용자에게 더 나은 브랜딩과 상호작용 경험을 제공하기 위해 사용된다.
- 모델 컨텍스트(Model Context)
- — LLM이 현재 대화 상태와 사용 가능한 정보를 파악하고 있는 범위이다. UI에서 발생한 사용자의 클릭이나 선택 사항이 이 컨텍스트에 반영되어야 모델이 정확한 후속 답변을 생성할 수 있다.
- 조합 가능한 도구(Composable Tools)
- — 하나의 거대한 기능을 수행하는 대신, 검색·필터링·렌더링 등 작은 단위로 쪼개진 도구들이다. 모델이 필요에 따라 이들을 조합해 복잡한 작업을 수행하게 함으로써 유연성을 높인다.
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 09. 10.수집 2026. 09. 10.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
