← 갤러리로 돌아가기

🔌 MCP 도구 연결 지도

AI가 이메일·캘린더·노션 같은 외부 도구에 어떻게 연결되는지 클릭해서 확인해보세요
💡 아래 도구를 클릭해보세요. 그 도구가 연결됐을 때 AI가 어떤 걸 할 수 있는지 예시가 나타납니다.
🤖 Claude
↓ MCP로 연결됨 ↓
도구를 하나 클릭해보세요. 연결됐을 때 가능한 예시 요청과 결과를 보여드릴게요.

💬 한 줄 정리

MCP(Model Context Protocol)는 AI가 여러 외부 도구·데이터에 표준화된 방식으로 연결될 수 있게 해주는 규격이에요. AI 입장에서는 "이 요청을 처리하려면 어떤 도구가 필요한지" 판단하고, 그 도구를 호출해서 결과를 받아온 뒤, 그 결과를 답변에 반영해요. 표준화된 연결 방식 덕분에, 새로운 도구가 나와도 매번 처음부터 연동을 새로 만들 필요 없이 비교적 쉽게 연결할 수 있어요.

🧾 이 페이지, 이런 프롬프트로 만들었어요

아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.

"MCP 도구 연결"을 설명하는 단일 HTML 페이지를 만들어줘.

- 중앙에 "Claude" 허브 박스, 그 아래 Gmail·구글 캘린더·Notion·Slack·파일/드라이브·웹검색
  6개의 "도구" 칩을 그리드로 배치
- 각 도구 칩을 클릭하면, 그 도구가 연결됐을 때 가능한 예시 요청과 AI의 응답 예시가
  아래 영역에 나타나게 해줘 (도구마다 다른 예시 텍스트)
- 마지막에 MCP가 무엇인지, 어떻게 동작하는지 한 문단으로 쉽게 설명하는 요약을 추가해줘
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘
이 페이지는 AI(Claude)가 만든 예시 자료입니다 — 강의 데모용