이 강연에서 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가지가 준비되어 있어 용도에 맞춰 선택할 수 있도록 했습니다.

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

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

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

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

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

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