MCP Apps: Give the Model Data, Give the User a UI — Dustin Mihalik, Indeed

한 줄 핵심

MCP 앱을 만들 때는 UI를 붙이는 것보다 모델이 볼 데이터와 렌더링을 분리해, 텍스트 탐색과 시각적 표시를 동시에 잘 작동시키는 구조를 먼저 설계해야 한다.

시간별 요약

1. 0:00
   Indeed에서의 MCP 앱과 UI의 중요성 Indeed의 채용 검색과 AI 플랫폼 경험을 바탕으로, Claude ChatGPT와 내부 에이전트 Career Scout에 연결한 MCP apps 구축 경험을 공유한다. 이 영상은 실험적 소개가 아니라 실제 현장에서 얻은 시행착오 중심의 교훈에 초점을 둔다.
2. 1:22
   텍스트 결과와 링크 문제 텍스트 기반 검색 결과는 간단하고 유용하지만, 브랜드 노출이 약하고 링크를 안정적으로 제공하기 어렵다는 한계가 있다. 사용자 경험을 개선하려면 결과를 앱 안에서 보여주고, apply 버튼이나 상세 보기 모달처럼 클릭 가능한 UI를 함께 제공해야 한다.
3. 3:13
   모델이 사용자에게 보이는 것을 모두 보게 하라 기존 API만 호출해 화면에 HTML을 얹으면 모델은 실제로 무엇이 표시되는지 알 수 없어 블랙박스가 된다. 사용자에게 보여주는 구조화된 데이터와 HTML 리소스를 함께 제공하고, 새 데이터가 생기면 둘을 항상 동기화해야 한다.
4. 5:06
   설명에 UI 존재를 명시하라 데이터를 넘겨도 도구 설명이 바뀌지 않으면 모델은 여전히 텍스트 답변처럼 결과를 다시 서술하려 든다. 도구 설명에 결과가 UI 컴포넌트로 자동 표시된다는 점을 적어 두면, 모델의 설명과 화면 표시가 서로 덜 충돌한다.
5. 6:16
   모델이 볼 수 없는 상호작용 apply 버튼 클릭이나 상세 보기 모달처럼 사용자가 실제로 수행한 상호작용은 모델이 알 수 없으므로 별도로 전달해야 한다. update model context 같은 방식으로 선택된 항목과 현재 상태를 누적해 주면, 이후 요약이나 cover letter 생성 같은 후속 작업이 가능해진다.
6. 8:19
   데이터 처리와 렌더링 분리 모델이 UI가 이미 있다고 판단하면 탐색을 멈추기 쉬우므로, 검색과 렌더링을 한 도구에 섞지 않는 것이 중요하다. 먼저 텍스트 기반 도구로 데이터를 충분히 탐색하게 하고, 그다음 별도의 렌더 도구로 선택된 결과만 화면에 그리게 해야 한다.
7. 10:50
   검색 도구와 렌더 도구를 분리하기 search jobs는 UI를 반환하지 않는 순수 데이터 도구로 두고, render jobs widget은 ID 목록을 받아 화면을 구성하는 도구로 분리한다. 이렇게 하면 모델은 여러 번 검색하고 필터링한 뒤, 필요한 몇 개만 골라 렌더링하는 흐름을 유연하게 만들 수 있다.
8. 12:39
   모델의 추론을 직접 넣게 하기 렌더 도구에 ID만 넣는 대신, 왜 그 항목이 적합한지에 대한 이유나 강조할 문구를 함께 받으면 결과가 더 풍부해진다. 모델이 자신의 판단 근거를 UI에 주입하게 하면 사용자에게 더 설득력 있고 맥락 있는 화면을 제공할 수 있다.
9. 13:34
   데이터 우선과 작은 조합형 도구 좋은 MCP 앱은 UI부터가 아니라 모델에게 어떤 데이터를 줄지부터 설계해야 하며, 렌더링은 그 결과로 따라오는 부수 효과로 봐야 한다. 기능을 작은 검색 도구와 작은 렌더 도구로 쪼개면 모델의 탐색 자유도와 조합 가능성이 높아진다.

실무 인사이트

• MCP 앱 설계는 화면 구현보다 먼저 모델이 접근해야 할 데이터 단위를 정의하는 작업으로 시작하는 것이 효과적이다.
• 검색과 렌더링을 분리하면 같은 데이터로도 텍스트 탐색, 요약, 시각화 같은 서로 다른 사용자 경험을 유연하게 만들 수 있다.
• 도구 설명과 모델 컨텍스트를 정교하게 관리하면, 모델이 이미 보이는 UI를 다시 설명하거나 놓친 상호작용을 추측하는 문제를 줄일 수 있다.