1. MCP(모델 컨텍스트 프로토콜)의 개념 및 장점 [0]

thumbnail MCP(모델 컨텍스트 프로토콜)는 AI 모델이 다양한 외부 서비스와 효율적으로 소통하고 필요한 작업을 수행하도록 돕는 표준화된 프로토콜이다.

1.1. MCP의 정의 및 구성 요소 [4]

  1. MCP는 AI 모델의 소통 방식이다. [4]
    1. MCP는 모델 컨텍스트 프로토콜의 약자이다. [4]
    2. AI 모델이 컨텍스트를 잘 이해하고 필요한 액션을 취하도록 돕는 프로토콜이다. [5]
    3. 개발자가 API를 활용하여 다양한 서비스를 연결하는 것처럼, MCP는 AI 모델이 다른 서비스를 쉽게 이용하도록 돕는 소통 방식이다. [6]
  2. MCP는 4단계로 구성된다. [6]
    1. 호스트(Host): AI 모델을 활용할 수 있는 서비스를 의미한다. [7]
      1. 예시: 클로드, 커서, 윈프(AI 코딩 편집기), M8(AI 에이전트 자동화 툴) 등이 있다. [8]
    2. 클라이언트(Client): 호스트와 서버 간의 통신을 돕는 역할을 한다. [10]
    3. 서버(Server): 다양한 서비스를 표준화된 방식으로 활용할 수 있도록 돕는 가장 중요한 개념이다. [11]
      1. 연결하고 싶은 서비스마다 해당 서버를 설치하여 활용한다. [12]
      2. 예시: 구글 캘린더 서버, 슬랙 서버, 노션 서버 등이 있다. [13]
    4. 리소스(Resource): 서버를 통해 연결되는 실제 외부 서비스들을 의미한다. [6]

1.2. MCP의 장점 [16]

  1. 다양한 서비스 연동이 간편하다. [16]
    1. MCP를 활용하면 호스트 서비스에서 다양한 서비스를 사용하고 싶을 때 해당 서버만 설치하면 바로 사용할 수 있다. [17]
    2. MCP가 없다면, 각 서비스의 API를 활용하여 코딩하거나 자동화 툴에서 모듈을 추가하고 인증 및 세부 설정을 개별적으로 해야 한다. [18]
    3. 이러한 개별 설정은 시간이 오래 걸리고, 다른 플랫폼에서 활용할 때 중복 설정의 번거로움이 발생한다. [22]
    4. MCP는 이러한 번거로움을 제거하여, 동일한 MCP 서버만 설치하면 동일한 작업을 바로 수행할 수 있게 한다. [22]
  2. AI 에이전트 구축이 수월해진다. [26]
    1. 서버만 설치하여 표준화된 방식으로 여러 서비스를 쉽게 적용할 수 있으므로 AI 에이전트를 만드는 것이 훨씬 쉬워진다. [26]
  3. 효율적인 서비스 활용이 가능하다. [27]
    1. MCP가 AI 에이전트를 위한 표준 프로토콜이 되면, 많은 서비스가 MCP 서버를 공식적으로 제공하게 될 것이다. [27]
    2. 이는 사용자가 직접 설정하는 것보다 더 효율적으로 서비스를 활용할 수 있게 한다. [28]
    3. 결론적으로 MCP는 AI가 서비스와 효율적으로 소통하기 위한 표준화된 프로토콜을 제공하여, 사용자가 서버만 설치하면 손쉽게 서비스를 활용할 수 있도록 돕는다. [29]

2. 클로드 데스크톱에서 MCP 서버 설치 및 활용 방법 [30]

thumbnail 클로드 데스크톱 앱에 MCP 서버를 설치하여 인터넷 검색, 웹 크롤링, 슬랙 메시지 전송, 노션 페이지 업데이트 등 다양한 작업을 수행할 수 있다.

2.1. MCP 서버 설치를 위한 사전 준비 [30]

  1. 클로드 데스크톱 앱 설치 [32]
    1. 웹 버전 클로드에서는 MCP를 활용할 수 없으므로, 클로드 데스크톱 앱을 설치해야 한다. [33]
    2. 클로드.ai/다운로드에 접속하여 운영 체제에 맞는 앱을 설치한다. [34]
    3. 설치 후 앱의 설정 탭에서 개발자 옵션으로 들어가 설정 편집 아이콘을 누른다. [35]
    4. 클로드.config.json 파일이 표시된다. [36]
  2. 보조 프로그램 설치 [37]
    1. VS 코드(VS Code) 설치: 파일 작업을 편리하게 하기 위한 코드 편집기이다. [38]
      1. 메모장이나 텍스트 편집기로도 JSON 파일을 편집할 수 있지만, VS 코드가 더 편리하다. [39]
      2. 코드.비주얼스튜디오.com에서 운영 체제에 맞게 설치한다. [41]
    2. 노드 JS(Node.js) 설치: 로컬에 MCP 서버를 설치할 때 활용하는 프로그램이다. [42]
      1. 노드js.org에 접속하여 다운로드 섹션에서 운영 체제에 맞게 설치한다. [44]

2.2. 파이어크롤(Firecrawl) 및 슬랙(Slack) MCP 서버 설치 및 활용 [49]

  1. 파이어크롤 MCP 서버 설치 [49]
    1. 목표: 인터넷 검색 및 웹 크롤링을 통해 AI 최신 뉴스 정보를 가져와 리포트를 만들고 슬랙으로 전송한다. [50]
    2. MCP 서버 정보 확인: 기터브(GitHub) 사이트에서 MCP 서버 정보를 찾는다. [52]
      1. 기터브는 코드를 공유하는 사이트이다. [53]
      2. 클로드에서 공식적으로 링크한 리포지토리(Repository)에서 필요한 MCP 서버를 찾는다. [56]
      3. 기터브에서 검색하여 다양한 개발자들이 만든 MCP 서버도 활용할 수 있다. [61]
      4. 레퍼런스 서버: 클로드 측에서 MCP 성능을 보여주기 위해 제공하는 서버들이다. [66]
        1. 예시: 파일 시스템, 기터브 연동, 슬랙 연동 서버 등이 있다. [67]
      5. 서드파티 서버: 각 서비스 회사에서 직접 MCP 서버를 만들어 제공하는 경우이다. [70]
      6. 커뮤니티 서버: 개발자들이 자발적으로 만든 MCP 서버이다. [72]
    3. 파이어크롤 서버 설치: 서드파티 서버에서 파이어크롤을 찾아 설치한다. [75]
      1. 파이어크롤은 간단한 웹페이지 크롤링에 많이 사용된다. [76]
      2. 파이어크롤 설치 문서에서 클로드 데스크톱 앱 설치 방법을 확인하고, 제공된 코드를 복사한다. [78]
      3. 클로드 데스크톱 앱의 클로드.config.json 파일을 VS 코드로 열어 복사한 코드를 붙여 넣는다. [81]
    4. API 키 설정: 파이어크롤은 외부 서비스이므로 API 키를 통해 사용자 인증이 필요하다. [87]
      1. 파이어크롤 개발자 사이트(dev.파이어크롤.com)에 회원 가입하고 신용카드 정보를 등록한다. [93]
      2. 무료 티어가 제공되므로 결제 없이 테스트할 수 있다. [96]
      3. 대시보드에서 API 키를 생성하거나 기존 키를 복사하여 VS 코드의 API 키 부분에 붙여 넣고 저장한다. [97]
      4. 이 과정은 파이어크롤 문서에 있는 복잡한 코드를 간단한 명령어로 실행하는 것과 같다. [107]
    5. 클로드 데스크톱 재실행: 클로드 데스크톱 앱을 완전히 종료하고 다시 실행한다. [109]
      1. 재실행 후 앱에 망치 모양 아이콘이 생기고, 이를 누르면 파이어크롤 관련 툴들이 추가된 것을 확인할 수 있다. [114]
      2. 연결 버튼을 누르면 설치된 서버 목록에 파이어크롤 MCP가 표시된다. [117]
  2. 슬랙(Slack) MCP 서버 설치 [119]
    1. 슬랙 앱 생성 및 권한 설정: 슬랙 앱을 생성하고 필요한 권한을 부여한다. [123]
      1. 기터브 페이지의 레퍼런스 서버에서 슬랙을 선택하고 설치 가이드를 확인한다. [121]
      2. 슬랙 앱스 페이지로 이동하여 새 앱을 생성하고 이름을 지정한다. [123]
      3. 앱의 디스플레이 정보를 설정하고 아이콘을 추가한다. [137]
      4. OAuth & Permissions 탭에서 봇 토큰 스코프에 필요한 권한(예: chat:write, channels:read 등)을 추가한다. [143]
      5. 권한 부여 후 앱을 슬랙 워크스페이스에 설치한다. [147]
    2. 슬랙 MCP 서버 코드 추가: 슬랙 설치 가이드에서 MCP 서버 코드를 복사하여 클로드.config.json 파일에 추가한다. [150]
      1. 기존 파이어크롤 코드 뒤에 콤마(,)를 추가하고 슬랙 관련 코드를 붙여 넣는다. [151]
      2. 중괄호 개수에 유의하여 슬랙 부분만 정확히 복사한다. [154]
    3. 환경 변수 설정: 슬랙 봇 토큰과 슬랙 팀 ID를 클로드.config.json 파일에 입력한다. [161]
      1. 봇 토큰은 슬랙 앱의 OAuth & Permissions 탭에서 복사한다. [165]
      2. 팀 ID는 슬랙 채널 URL에서 T로 시작하는 부분을 복사한다. [167]
      3. VS 코드에서 파일을 저장한다. [168]
    4. 슬랙 채널에 앱 참여시키기: 메시지를 보낼 슬랙 채널에 생성한 앱을 추가한다. [169]
      1. 채널 설정에서 통합 섹션으로 이동하여 앱 추가 버튼을 누르고 생성한 앱을 찾아 추가한다. [170]
      2. 이 과정을 통해 앱이 해당 채널에 참여하게 되어 메시지를 보낼 수 있게 된다. [175]
    5. 클로드 데스크톱 재실행: 클로드 데스크톱 앱을 종료하고 다시 실행한다. [178]
      1. 재실행 후 망치 아이콘에 슬랙 기능들이 추가된 것을 확인할 수 있다. [180]
      2. 연결 버튼을 누르면 설치된 서버 목록에 슬랙 MCP가 표시된다. [182]
  3. 파이어크롤 및 슬랙 MCP 활용 실습 [183]
    1. AI 뉴스 리포트 생성 요청: 클로드에 파이어크롤을 사용하여 테크크런치에서 AI 최신 뉴스 5개를 가져와 리포트로 정리해 달라고 요청한다. [184]
      1. 각 뉴스의 헤드라인과 기사 링크를 포함하고, 출력 형식은 슬랙 블록킷 호환 JSON으로 지정한다. [185]
      2. 슬랙 블록킷 호환 JSON은 슬랙에서 예쁘게 보이도록 형식을 지정하는 것이다. [187]
      3. 클로드는 파이어크롤로 만든 리포트를 슬랙에 보내기 좋은 형식으로 자동 변경한다. [187]
      4. 클로드가 파이어크롤 사용 권한을 요청하면 허용한다. [191]
      5. 클로드가 슬랙 메시지 형태로 주요 뉴스를 담은 리포트를 작성한다. [194]
    2. 슬랙으로 리포트 전송 요청: 생성된 리포트를 슬랙 채널(AI 뉴스 채널)에 게시해 달라고 요청한다. [198]
      1. 클로드가 슬랙 도구 사용 권한을 요청하면 허용한다. [200]
      2. 클로드는 리스트 채널에서 AI 뉴스 채널 ID를 찾아 해당 채널로 메시지를 보낸다. [201]
      3. 슬랙에서 메시지가 제대로 도착했는지 확인한다. [203]
      4. MCP 서버를 연결하면 클로드 내에서 크롤링 및 메시지 전송 작업이 가능하여 생산성을 높일 수 있다. [208]

2.3. 퍼페티어(Puppeteer) 및 노션(Notion) MCP 서버 설치 및 활용 [209]

  1. 퍼페티어(Puppeteer) MCP 서버 설치 [209]
    1. 목표: 유튜브 동영상 탭에서 최신 영상 10개를 크롤링하고, 채널 리포트를 생성하여 노션 페이지에 업데이트한다. [210]
    2. 퍼페티어는 브라우저를 조종하여 자동화 작업을 수행하는 프로그램이다. [213]
      1. 원래 자바스크립트로 코딩해야 하지만, MCP 서버로 설치하면 프롬프트로 작동하여 사용이 간편해진다. [215]
    3. 퍼페티어 서버 설치: 레퍼런스 서버에서 퍼페티어를 찾아 설치한다. [217]
      1. 기터브 페이지의 레퍼런스 서버에서 퍼페티어를 선택한다. [218]
      2. MPX 버전 코드를 복사하여 클로드.config.json 파일에 추가한다. [220]
      3. 퍼페티어는 오픈소스 라이브러리이므로 인증이 필요 없어 바로 설치가 완료된다. [226]
      4. VS 코드에서 파일을 저장한다. [225]
  2. 노션(Notion) MCP 서버 설치 [230]
    1. 노션 서버 정보 확인: 커뮤니티 서버에서 노션을 검색하여 가장 많이 활용되는 버전을 선택한다. [230]
    2. 노션 통합(Integration) 생성 및 권한 설정: 노션에서 통합을 생성하고 시크릿 키를 발급받는다. [234]
      1. 노션에 로그인 후 제공된 링크를 통해 통합 생성 페이지로 이동한다. [239]
      2. 새 통합을 생성하고 이름을 지정한 후 저장한다. [241]
      3. 시크릿 키를 복사한다. [244]
      4. 노션 데이터베이스에 업데이트할 페이지(예: 유튜브 채널 리포트)로 이동하여 우측 상단의 연결(Connection)에서 생성한 통합을 연결한다. [245]
    3. 노션 MCP 서버 코드 추가: 노션 설치 가이드에서 MPX 버전 코드를 복사하여 클로드.config.json 파일에 추가한다. [249]
      1. 노션 부분만 복사하여 VS 코드에 붙여 넣는다. [250]
      2. API 토큰(통합 토큰) 부분에 발급받은 시크릿 키를 붙여 넣고 저장한다. [253]
  3. 클로드 데스크톱 재실행 [253]
    1. 클로드 데스크톱 앱을 종료하고 다시 실행한다. [253]
    2. 재실행 후 연결(Connection)에 퍼페티어와 노션이 추가된 것을 확인할 수 있다. [254]
  4. 퍼페티어 및 노션 MCP 활용 실습 [256]
    1. 유튜브 채널 분석 리포트 생성 요청: 클로드에 퍼페티어를 사용하여 유튜브 채널 동영상 탭에서 최근 10개 영상 리스트, 구독자 수, 영상 개수, 영상별 지표를 확인하고 채널 분석 리포트를 작성해 달라고 요청한다. [256]
      1. 클로드가 퍼페티어 사용 권한을 요청하면 허용한다. [258]
      2. 퍼페티어는 브라우저 창을 띄워 해당 사이트로 이동하여 정보를 확인한다. [259]
      3. 클로드는 프롬프트 하나로 실시간으로 코딩을 실행하며 정보를 가져온다. [265]
      4. 클로드가 크롤링한 정보를 바탕으로 채널 분석 리포트를 작성한다. [267]
    2. 노션에 리포트 업데이트 요청: 생성된 리포트를 노션 유튜브 채널 리포트 데이터베이스에 새로운 페이지로 생성해 달라고 요청한다. [274]
      1. 클로드가 노션 MPC 서버 사용 권한을 요청하면 허용한다. [278]
      2. 클로드는 노션 포맷으로 리포트를 변경하여 추가한다. [282]
      3. 리포트 길이가 길어 한 번에 접근할 수 없는 경우, 클로드는 섹션별로 나누어 추가한다. [284]
      4. 노션에서 새로고침하여 페이지가 생성되고 내용이 업데이트되었는지 확인한다. [289]

2.4. MCP 활용 시 유의사항 [298]

  1. MCP 서버는 아직 도입된 지 얼마 안 된 프로토콜이므로 모든 서버가 잘 작동하지 않을 수 있다. [301]
  2. 일부 서버는 버그가 발생하거나 실행 도중 멈출 수 있으므로 테스트가 필요하다. [302]
  3. 챗GPT도 MCP를 도입할 예정이므로, 클로드로 먼저 테스트해보고 나중에 챗GPT에 적용되면 활용하는 것이 좋다. [304]