MCP 개념 이해 및 Claude Desktop을 통한 MCP 활용해보기

 

크게 화두가 되고 있는 MCP!

매번 활용해봐야지 하면서 미루고 미루다가 이번에 제대로 활용해보고자 한다.

배경지식이 거의 없는 상태이기 때문에 유튜브 영상 "MCP써야 진짜 Claude다! 500% 활용 튜토리얼 (개념부터 활용까지)"을 통해 MCP 개념과 활용 방법을 먼저 살펴보았다. 

 

🔻  MCP 개념

MCP는 Model Context Protocol의 약자로, 컨텍스트를 이해하고 필요한 액션을 취할 수 있도록 도와주는 프로토콜이다.

 

개발자가 api를 활용하면 다른 서비스들을 쉽게 사용할 수 있는 것처럼, MCP는 AI가 다른 서비스들을 이용하기 쉽게 도와주는 일종의 소통 방식으로 생각하면 된다.

 

 

🔻  MCP 구조

MCP의 구조는 크게 HOST(AI모델 활용할 서비스), Client, Server, Resource 단계로 구성되어있다.

 

▪️Host : ai모델을 활용할 수 있는 서비스 (ex. claude, n8n, cursor 등)

▪️Client : client는 host에 내포되어있는 것으로, host와 server 간의 소통을 도와주는 역할을 한다

▪️Server : 다양한 서비스를 표준화된 방식으로 활용할 수 있게 도와주는 역할을 한다. 따라서 연결하고 싶은 서비스마다 이 서버를 설치해서 활용을 하는 것. 구글, 노션, 슬랙 등을 사용하고 싶다면 각각의 서버를 설치해야 하는 것이다.

▪️Resource : 구글, 노션, 슬랙 등의 애플리케이션에 해당

 

예전에는 슬랙을 활용하고 싶다고 한다면, 슬랙 api를 가져와서 코딩을 일일이 다 했어야 했는데 이제는 서버를 설치만 하면 사용이 가능해진 것이다! 사용하고자 하는 기능별로 api call을 해줘야 하거나, 자동화 툴을 사용한다고 하더라도 각각의 모듈을 만들고 모듈마다 각기 다른 복잡한 설정들을 해줘야 했으며 다른 플랫폼에 사용하고 싶을 때 중복된 작업을 해줘야 했다.

 

하지만 이제는 사용하고자 하는 host별로 동일한 server만 설치를 해주면 동일한 작업을 할 수 있게 된 것이다!

서버만 설치해서 표준화된 방식으로 쉽게 여러 서비스를 적용할 수 있어 쉽게 여러 서비스를 적용할 수 있어 AI 에이전트를 만들기 수월해졌다. 앞으로는 공식적으로 MCP 서버를 제공하게 될 것이기 때문에 기능을 더 쉽게 사용할 수 있게 될 것이다.

 

한마디로 요약하면! MCP는 AI가 효율적으로 서비스와 소통하기 위한 표준화된 프로토콜을 제공하여 사용자가 서버만 붙이면 서비스를 쉽게 사용할 수 있도록 도와주는 프토로콜이다.

 

 

 

📌 환경 세팅

 

이제 어떻게 설치를 하는지에 대해 알아보자.

본 영상에서는 claude를 활용해서 설명해주고 있어 나도 claude 호스트를 사용한 예제를 먼저 살펴보려고 한다.

 

📍 Claude Desktop 설치하기

claude 웹페이지에서는 제공이 되고 있지 않으므로 우선 claude desktop을 설치해줘야 한다.

https://claude.ai/download

 

 

클로드의 설정 탭 > 개발자 옵션 > 설정 편집 선택

 

선택되어 있는 json파일에 들어가서 간단한 몇줄을 작성해주면 여러 MCP 서버를 설치할 수 있게 된다.

 

이 파일을 수정하기 전에 vscode와 node.js를 다운로드 해야한다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

 

이제 설치가 다 되었다고 가정하고 본격적으로 mcp를 구축해보자!

 

 

---

📌 MCP SERVER 설치하기

 

MCP 서버는 아래 github 링크를 포함하여, 구글링을 하면 쉽게 찾을 수 있다.

 

modelcontextprotocol/servers: Model Context Protocol Servers

GitHub - modelcontextprotocol/servers: Model Context Protocol Servers

 

punkpeye/awesome-mcp-servers: A collection of MCP servers.

GitHub - punkpeye/awesome-mcp-servers: A collection of MCP servers.

 

해당 링크에 나와있는 Third Party Servers는 기업에서 직접 제공한 mcp 서버이고,

community servers는 여러 개발자들이 다양한 환경에서 사용할 수 있도록 만들어서 공유를 한 mcp 서버이다.

 

 

📍 Firecrawl MCP Server

본 영상에서는 firecrawl을 통해 웹 크롤링을 하는 예제를 살펴보고 있다.

따라서 위 깃허브 링크에서 firecrawl을 누르고, 아래 코드를 복사해서 config 파일에 붙여넣기를 하면 서버 설치가 된 것이다!

 

다만, 여기서 api key를 생성해서 넣어줘야 한다.

아래 링크에 들어가서 api key를 생성해주자~

https://www.firecrawl.dev/

Firecrawl

 

이제 mcp server 설치가 끝난 것이고, claude desktop에서 사용을 하고 싶으면 claude desktop을 종료 했다가 다시 실행만 해주면 된다.

 

원래 망치 아이콘이 생겨서 mcp 도구를 사용할 수 있어야 한다고 하는데 나는 조정 아이콘을 누르니 firecrawl 도구들이 나와있었다.

 

 

 

📍 Slack MCP Server

slack mcp server를 제공하는 깃허브 링크에 들어가서 앱을 설치하고 scope을 설정하여 권한 설정을 해줘야 한다.

https://github.com/modelcontextprotocol/servers/tree/main/src/slack

servers/src/slack at main · modelcontextprotocol/servers

 

먼저, slack app 을 만들어보자. github에 있는 slack app 만드는 링크를 눌러 "Create New App"을 클릭하고

앱 이름과 workspace를 지정해준다.

 

description, icon, background color 등을 지정한 뒤 save changes를 하고

 

Settings > OAuth & Permissions에 들어가서 scopes를 설정해줘야 하는데, github에 어떤 bot token scope을 설정해주면 좋은지가 다 나와있어서 그대로 따라서 오른쪽 사진처럼 OAuth Scope을 추가해주면 된다.

 

 

그리고 위로 OAuth Tokens 타이틀이 보이는 곳까지 올라가서 install to [workspace]를 누르면 끝!

 

다시 slack mcp server 깃허브 페이지로 돌아가 "Usage with Claude Desktop" 아래 npx 버전의 코드를 config 파일에 붙여넣으면 되는데, 이번에는 전체를 다 복사하지 말고, slack 부분의 {} 만 복사해서 기존 config에 이어서 작성해주자.

 

slack bot token은 oauth token 생성하면 나오는 key 값을 넣어주면 되고

slack team id는 슬랙 채널(웹페이지 기준) url에 T로 시작하는 부분을 복사해주면 된다 :

 

config 파일 코드 예시는 다음과 같다 : 

{
    "mcpServers": {
      "mcp-server-firecrawl": {
        "command": "npx",
        "args": ["-y", "firecrawl-mcp"],
        "env": {
          "FIRECRAWL_API_KEY": "fc-apikey 생성해서 넣기",
  
          "FIRECRAWL_RETRY_MAX_ATTEMPTS": "5",
          "FIRECRAWL_RETRY_INITIAL_DELAY": "2000",
          "FIRECRAWL_RETRY_MAX_DELAY": "30000",
          "FIRECRAWL_RETRY_BACKOFF_FACTOR": "3",
  
          "FIRECRAWL_CREDIT_WARNING_THRESHOLD": "2000",
          "FIRECRAWL_CREDIT_CRITICAL_THRESHOLD": "500"
        }
      },
      "slack": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-slack"
        ],
        "env": {
          "SLACK_BOT_TOKEN": "xoxb-토큰",
          "SLACK_TEAM_ID": "T웹페이지 url 확인",
          "SLACK_CHANNEL_IDS": "C채널 클릭 후 웹페이지 url 확인"
        }
      }
    }
  }

 

그리고 나서 slack 채널에서 상단의 멤버가 나오는 아이콘을 누르고 통합을 누르면 앱을 추가할 수 있다!

이전에 생성한 AI뉴스 생성 앱을 추가해주자

 

그런 다음 다시 claude desktop을 종료하고 실행해주면 slack 기능이 추가가 된 것을 볼 수 있다.

 

 

---

📌 [예제1] 크롤링을 하여 슬랙에 메시지 전송하기

 

우선 다음과 같이 프롬프트를 작성하고, 슬랙에 전송하지 말고 결과만 받아보자.

 

그러면 아래와 같이 허용을 할 것인지를 물어보는데, 허용을 눌러주면 오른쪽처럼 뉴스가 촤르르 정리되어 나올 것이다.

 

이게 슬랙으로 바로 보내질 수 있다니... 내가 코딩하지 않아도 mcp 서버만 설치하면 가능하다니.. 너무 신기하다..

 

슬랙에 보내기 위해 프롬프트에 "해당 리포트를 슬랙 채널 'xxx'에 slack에서 보기 좋은 형태로 게시해줘"라고 쳐보면!

자동으로 슬랙에 메시지가 보내진다... 개신기해!!!!

 

 

---

 

📌 [예제2] 동영상 크롤링 & 리포트 생성, 노션 페이지 생성

 

📍 Puppeteer MCP server

본 예제에서는 '퍼펫티어'를 활용해서 브라우저를 자동으로 조정하여 크롤링을 진행하고 있다.

https://github.com/modelcontextprotocol/servers/tree/main/src/puppeteer

servers/src/puppeteer at main · modelcontextprotocol/servers

 

똑같이 mcp server가 쭉 나열되어있는 깃허브에서 reference server > puppeteer > npx로 가서 하단 부분을 claude의 config 파일에 복붙!

 

 

📍 Notion MCP server

https://github.com/suekou/mcp-notion-server

GitHub - suekou/mcp-notion-server

가장 많이 사용되고 있는 suekou 버전을 사용해보자!

 

Setup 부분을 읽어보면

▪️ integration page를 먼저 만들어서 secret key를 발급받고

▪️ 업데이트 해주고 싶은 노션 데이터베이스에 앞서 생성한 integration을 연결해주는 작업을 해야한다.

 

이 작업들을 해봅시다~

 

 

integration 만드는 링크로 들어가서 다음과 같이 세팅을 해주고

 

노션에서 본인이 원하는 데이터베이스를 선택한 후, 연결(connection)에서 생성한 integration app을 선택해주면 된다.

그 다음 다시 깃허브로 가서 config에 넣을 npx 버전의 configuration을 복붙해주고, integration token만 발급받은 토큰으로 업데이트 해주면 된다.

 

다시 클로드 데스크탑을 종료 후 다시 실행해주면 노션과 퍼펫티어의 도구들이 추가된 것을 확인할 수 있을 것이다.

 

프롬프트에 다음과 같이 작성을 하여 내가 좋아하는 찰스엔터의 유튜브 채널 정보를 크롤링 해보았다.

" puppeteer를 사용해서 https://www.youtube.com/@CharlesEnter유튜브 채널 동영상 탭에서 최근 10개 영상 리스트를 보고, 채널 구독자수와 영상 개수, 그리고 영상별 지표를 확인하고, 채널에 대한 분석 리포트를 작성해줘."

 

그러면 다음과 같이 보고서가 작성이 된다.

 

작업 과정을 보니 크롬 브라우저가 실행이 되고, 퍼펫티어가 스크린샷을 찍어서 정보를 분석한다. RPA는 클릭 이벤트까지 모두 처리를 하지만, 스크린샷을 찍어서 작업을 수행하는 면에서 유사하다고 생각되었다.

 

여기서 수정을 하길 원한다면 기존에 claude를 사용했듯이 프롬프트에 수정사항을 요청하면 된다.

 

우리는 내용이 만족스럽다고 가정하고 이를 노션에다가 저장하는 작업으로 이어나가보자!

 

 

아래 보이는 사진에서 나온 프롬프트처럼 작성을 해주면 너무너무 신기하게 노션에 바로 저장이 된다 (미쳤다)

 

 

 

끄읏!

다음 포스트에서는 파일 정리 자동화, 유튜브 내용 요약, hwp 문서 자동 생성 기능을 claude를 활용해서 구현해보고자 한다.

 

 

 

 

 

---

 

출처

MCP써야 진짜 Claude다! 500% 활용 튜토리얼 (개념부터 활용까지) - YouTube