Molayo

© 2026 Molayo

Qiita헤드라인2026. 06. 17. 12:39

Claude Code의 스킬에 "괜찮은 MCP App 만들어줘"라고 통째로 맡겼더니, 괜찮은 조작 가능한 대시보드가 만들어졌다

요약

Claude Code의 'create-mcp-app' 스킬을 사용하여 대화형 인터페이스 내에서 조작 가능한 대시보드를 생성한 사례를 소개합니다. MCP App은 단순한 텍스트 답변을 넘어, 버튼 클릭을 통해 백그라운드 서버를 동작시키고 데이터를 저장하는 등 '사용 가능한 화면'을 제공합니다.

핵심 포인트

  • Claude Code의 스킬을 통해 대시보드 형태의 MCP App을 자동 생성 가능
  • MCP App은 데이터(Tool)와 UI의 세트로 구성되어 상호작용 제공
  • 화면 조작(검색, 정렬 등)과 백그라운드 동작(파일 저장)이 핵심 기능
  • AI가 HTML 전체를 처리하지 않고 데이터만 주고받아 효율적임

이 강연에서 MCP Apps가 매우 좋아 보여서 바로 사용해 보았습니다.

Claude Code의 **MCP App을 만드는 스킬 (create-mcp-app)**을 사용하여, "괜찮은 MCP App 만들어줘"라고 거의 통째로 맡겨 보았습니다. 결과물로 나온 것은 데이터를 표와 그래프로 보여주고, 검색·정렬이 가능하며, 버튼으로 저장도 할 수 있는 작은 대시보드입니다.

이 기사는 "직접 처음부터 작성했다"는 이야기가 아니라, 부탁했을 때 무엇을 할 수 있고 어떻게 만들어졌는지에 대한 기록입니다. 비엔지니어 분들도 흐름과 이미지만 파악하실 수 있으면 좋겠습니다.

아직 개발 중이라 위치가 이동될 가능성이 있으며, 로컬 버전이지만 코드는 아래에 있습니다.

평소 AI 채팅 도구는 "글자로 대답하는" 것뿐입니다. MCP App을 사용하면 채팅 안에 "조작 가능한 화면"이 나타나게 됩니다.

한마디로 말하면, 채팅의 답변이 "읽는 것"에서 "사용하는 것"으로 변하는 느낌으로, 화면 안의 버튼을 누르면 백그라운드에서 서버가 동작하여 데이터를 저장하거나, 나아가 다른 도구를 호출하는 것도 가능합니다.

부탁해서 만든 대시보드는 다음과 같은 화면입니다.

  • 값의 크기에 따라 늘어나는 막대그래프와 건수·합계·평균 등의 집계
  • 라벨 검색과 정렬, 카테고리 표시 On/Off
  • 저장 형식(JSON / CSV / HTML)을 선택하여 버튼 하나로 파일 저장

이 UI 자체는 GitHub Copilot Chat으로부터 나온 화면입니다.

제가 한 일은 거의 "플러그인을 넣고", "부탁하고", "실행하고 조금 수정하고 실행해서 확인했다"가 전부입니다.

Claude Code의 플러그인 마켓플레이스에서 modelcontextprotocol/ext-app을 추가하고, mcp-apps 플러그인을 설치하여 이 안에 있는 스킬을 사용합니다. 아니, 사실상 사용되는 것입니다.

/plugin marketplace add modelcontextprotocol/ext-app
/plugin install mcp-apps@mcp-apps
/reload-plugins

그다음은 "괜찮은 MCP App 만들어줘"라고 부탁하기만 하면 됩니다. 스킬이 주제 후보(대시보드/타이머 등)를 제시해 주었기에 대시보드를 선택하자, 샘플을 바탕으로 코드 일체를 생성하고 필요한 것의 도입부터 동작 확인까지 해주었습니다.

MCP App의 내용은 "데이터를 반환하는 역할 (Tool)"과 "화면을 내보내는 역할 (UI)"의 세트입니다. AI가 도구를 호출하면, 호스트(Claude Desktop이나 GitHub Copilot Chat 등)가 화면을 표시하고 데이터를 흘려보냅니다.

포인트는 화면의 내용(HTML)은 AI의 머리(Context)를 통하지 않는다는 점입니다. 따라서 화면 그 자체는 몇 번을 사용하더라도 주고받는 것은 "데이터"뿐입니다.

검색이나 정렬은 화면 안에서만 완결되는 조작입니다. 이것만이라면 AI에게 HTML을 만들게 해서도 비슷한 일을 할 수 있을 것입니다. MCP App이 정말로 효과적인 부분은 화면의 버튼이 백그라운드의 서버를 동작시킨다는 점입니다. 이번에는 "저장" 버튼이 그 역할을 합니다.

이번에는 단순한 로컬 저장으로 구현했지만, 저장 형식은 3가지가 준비되어 있어 용도에 맞춰 선택할 수 있도록 했습니다.

형식무엇으로부터 만드는가용도
JSON데이터 그 자체나중에 읽기·가공하기
CSV데이터를 표로 변환Excel 등으로 열기
HTML화면의 겉모습을 복제브라우저로 열어서 공유하기

"글자로 충분하다 → 일반적인 도구"

"한 번 보여주기만 하면 된다 → AI 생성 HTML"

"조작하게 하고 싶다·조작이 백그라운드에서 동작한다 → MCP App"

정도로 요약할 수 있을 것 같습니다.

  • mcp-apps 플러그인의 create-mcp-app 스킬을 사용하면 누구나 쉽게 시작할 수 있다
  • MCP App은 "데이터를 반환하는 도구 + 화면을 내보내는 UI"의 세트
  • 화면은 AI의 컨텍스트 외부에 있으므로 토큰을 늘리지 않는다

이번에 작성된 MCP Apps는 참고용으로 아래 Git에 올려둡니다.

AI 자동 생성 콘텐츠

본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0