oneshot
oneshot
🐶 AI 찐친
🚀 SNS 챌린지 달성자

닿님 MCP 따라하기(지피터스 북마크 기능 만들기 - 클로드 X 노션 MCP (그대로 따라만 하면 됨)

왕초보가 귀동냥으로 MCP(망치파티)를 넘겨다 보다가 닿님 사례에 (그대로 따라만 하면 됨)에 솔깃하여 해보았다. (https://www.gpters.org/dev/post/create-gipeters-bookmark-function-OxpAqiba4SgWQMb)

닿님은 3친절(친절 친절 친절)을 강조하면서 사례를 작성했는데, 왕초보에게는 턱도 없이 부족했다. 닿님 사례를 그대로 복사해서, 왕초보에게 필요한 왕친절 사례를 작성해본다.

  1. 시작 전: 거의 병적인 극T의 습관대로 시작 전에 돌다리를 두드려 본다.

'MCP를 왜 해야만 하는가?'

MCP(MODEL CONTEXT PROTOCOL)이 여러가지 상이한 도구들을 사용할 수 있는 USB-C라는 것까지는 알겠는데, MCP와 유사한 도구들, GPTs, 검색(구글/네이버), GOOGLE A2A와 어떻게 다를까? ChatGPT가 깔끔하게 정리해 주었다.

항목

GPT + 검색 기능만 있을 때

GPT + MCP 있을 때

Claude / Perplexity

Google A2A

정보 검색 가능

✅ 웹 공개된 정보만

✅ 도구 연결 시 다양해짐

✅ 매우 강력한 검색 및 요약 가능

✅ Google 내부 정보 접근 및 정리

웹사이트 로그인

❌ 로그인 불가

✅ 도구 연동 시 가능

🔶 일부 가능 (내장 크롤링)

✅ Gmail, Drive 등 Google 계정 기반 서비스 연동

도구 실행 (시트, 설문, 캘린더 등)

❌ 설명만 가능

✅ API로 외부 도구 실행 가능

❌ 외부 도구 실행 어려움

✅ Google 앱들 직접 실행 (메일 전송, 일정 생성 등)

논문 검색 및 요약

🔶 제한적 (웹 기반 검색만)

✅ 논문 API 연동 가능

✅ 자동 요약 및 메타데이터 정리 우수

❌ 논문용 기능 없음 (일반 사용자 지원용 아님)

생태계

OpenAI ChatGPT + Web tool

GPTers 기반, 외부 도구와 연동

자체 내장형 웹 검색/요약 엔진

Google Agent 시스템 전용

적용 예시

“이 책에 대해 알려줘” → 설명

“이 책 사다줘” → 실행까지 완료

“이 책에 대한 논문 표로 정리해줘” → 자동화

“캘린더에 회의 일정 추가해줘” → 직접 캘린더 작업

<왕초보 수준의 간단한 설명 요약>

  • GPT + 검색: 길 안내만 가능

  • MCP: 길 안내 + 대신 심부름까지

  • Claude/Perplexity: 똑똑한 네비 + 요약 비서

  • A2A: Google 사무실 전용 직원 (구글 일만 똑부러지게 처리)

  1. *(닿님 사례) CLAUDE, NOTION, SMITERY, GITHUB, NODE.JS, FIRECRAWL들을 서로 연결시킨다. 그러고도 GPTERS에서 내가 원하는 URL을 찾아서 붙여 넣어야 한다. 거기에다가 NOTION에 저장해 달라고 별도록 부탁을 해야 한다.

    • 허태명님의 멋진 사례에, 문의했다.

      '외부에서 MCP를 달면 왜부에서 GPTers 검색, 요약, 저장이 가능한가요?'

    아직은 외부 검색은 안 된다는 회신.

    https://www.gpters.org/dev/post/registering-mcp-server-g-W0TvwdMC8TrUnYP

(왕초보의 혼자말: 망치가 뭐하는 거지? 자동 검색도 안 된다고, 수동으로 한다는데?? 메모했다가 나중에 고수님들에게 물어보기로)

  1. 자! 이제 넋두리는 그만하고 일단 망치를 만들어 보자! 3친절 닿님 그림자를 밟아보자. 따라만 하면 된다는데---

    (결과: 왕초보에게는 3친절만 가지고는 택도 없다. 왕친절이 필요하다. 고수님들의 컴퓨터에는 이미 많은 사양들이 설치되어 있다. 그리고 웬만한 것은 다 경험하여 알고 있기 때문에 생각조차 할 필요가 없다.

    그러나 왕초보의 컴퓨터는 기본 사양조차 없다. 아주 기본 적인 경험도 없다. 모든 것이 첫 경험이다. 한 발작 한 발작 내 딛을 때마다 대단한 인내력을 요한다)

    ************************************

    (닿님 사례)

    1. 클로드 데스크탑 앱 설치하기 https://claude.ai/download 접속해서 본인 OS 에 맞는 앱을 설치

    2.

    노션에서 DB 하나 만들기 + DB id 값 복사해두기 Full page로 데이터베이스 하나 생성

    새 페이지 옵션은 화면에서 강조 표시됩니다

적절히 필요한 필드를 설정해준다

나는 제목, 태그, URL, 1문단 요약 정도 만들고, 페이지 내부에 정리된 내용을 적어달라고 요청할 계획이다

앱에서는 노션 페이지 URL 이 노출되지 않으므로 share -> copy link 해서 직접 URL을 어디선가 붙여놓고

이미지와 같이 노션 홈 url 뒤에 이어지는 1cc... 문자열 (물음표 전까지)이 database_id이므로 복사해둔다

데이터베이스 ID가 강조 표시된 Google 검색 페이지의 스크린 샷

(왕초보) 여기까지는 그냥 저냥 쉽게 따라 할 수 있었다.

  1. 노션 api key 발급 + 값 복사해두기 + 노션 DB에 연결 설정 노션 설정 > 연결 > 개발자 API 어쩌구 클릭

    한국 구글 드라이브 설정의 스크린 샷

새 통합 을 눌러 제목, 워크스페이스, internal(프라이빗) 설정 후 저장

나오는 api key 표시 후 복사해두기

AP 버튼이 강조된 한국 앱

(왕친절) “이제 노션 DB 페이지에 가서 지금 방금 만든 API를 연결하기”가 안 되어서 한참을 헤매다가 나중에 가서야 ‘저장’ 안한 것을 발견한 왕초보의 눈물겨운 희소식.

이제 노션 DB 페이지에 가서 지금 방금 만든 API를 연결하기

우측 상단 점 3개 -> 연결 -> 만든 API 선택

4. Smithery 가서 노션 mcp 검색 (복사해둔 database_id값, api_key값 넣기)

  • Github 계정으로만 로그인 가능

  • 만약 Github 계정 없다면 가입 후 로그인 하면 됨

  • (왕친절) smithery와 github의 관계를 잘 모르는데다가, 닿님이 보여주는 notion, notion api를 못찾아 한참을 헤매고 거의 포기단계에 이르러 claude의 도움으로 https://smithery.ai/?search=notion 를 검색하여 왼쪽 중간에 있는 notion api를 찾아냄. 

Nodejs API 페이지의 스크린 샷
  • 단계 2,3번에서 복사해 둔 노션 api key, database_id를 차례로 붙여두기

  • (참고) 노션 api key만 넣어도 작동은 하지만, 정확하게 어떤 DB에 데이터를 생성해야 하는지 클로드가 계속 헷갈려 할 수 있으므로 Database_id 까지 꼭 넣어두기!!

  • (참고) 왼쪽에 Tools 부분에는 이 MCP가 사용할 수 있는 도구 목록이 있음 (총 17개)

    • 내 노션에 페이지를 생성하거나, 읽거나, 수정하거나, 삭제/보관하거나 등이 가능

  1. 클로드에 노션 MCP를 연결하기 방법은 2가지인데 1번을 더 추천 (쉬움)

1번 - npm 클릭 후 터미널 열고 명령어 실행

2번 - Json 클릭 후 클로드 앱 설정 파일에 코드 붙여넣고 앱 재실행

1번 - npm 코드 복사 후 터미널(윈도우는 명령프롬프트 창)에서 붙여넣고 엔터

  • 알아서 클로드 앱 종료시켰다가 다시 켜줌. 바로 망치가 생김!

  • 텍스트 파일을 보여주는 컴퓨터 화면의 스크린 샷

(왕친절)닿님의 친절한 안내로 ‘CLAUDE와 NPM코드를 연결해야 한다고 해서, NPM을 복사하여 CLAUDE에 넣으려고 프롬프트 창을 찾아 헤매다가, CLAUDE 문의한 후 프롬프트는 클라우드 프롬프트가 아니라 윈도우 프롬프트였다는 것을 나중에 알게 됨.

혹시나 했는데 역시 NPM코드는 안되네요. 

  1. 2번 - Json 코드 복사 -> 클로드 설정 파일 열어서 붙여넣고, 클로드 직접 종료 후 재실행!

    Mac OS X의 한국 키보드

    (왕친절) NODE.JS를 복사하여 CLAUDE  설정 에 넣으려고 하는데 설정을 아무리 찾으려 해도 못 찾겠네요.  클라우드를 다시 열면 된다는데 몇 번을 몇 번을 다시 시작해도 안 되네요.   클라우드에서 윈도우를 누르고  클라우드를 다시 다운 받아야 하네요. 

    • 만약 코드 에디터가 없다면, 메모장으로 열어도 됩니다

    • 코드 붙여넣고 저장 -> 클로드 앱 껐다가 켜기

    • 이때 기존 { } 는 다 지우고 다시 덮어쓰기!

    • 망치를 얻었다면 성공입니다!!!

    (왕친절) SMITHERY < NOTION < INSTALATION < MANUAL < WINDOW < JSON COPY

프로그램 설치를 보여주는 웹 페이지의 스크린 샷

(왕친절) 망치가 어디에 생길까요? 일반 대화창에는 안 생겨요. WINDOW를 클릭할 수 있는 CLAUDE (BETA버전)을 매번 다운 받아야 하나요? 그렇지는 않을텐데??? CLAUDE를 열면 왼쪽 상단 3줄 표시를 클릭 < 개발자 모드 클릭 (거의 포기상태에서 강의를 충실히 듣지 않은 탓).

(왕친절) WINDOW용 CLAUDE가 안 보이면, 왼쪽 상단에 세줄도 안 보이면, CLAUDE 왼쪽 하단 이름을 클릭하면, ‘WINDOW용 CLAUDE 다운 받기’가 보여요. 이 것을 클릭하여 다운받으면 됩니다. 껐다 켜기를 반복하여 벌써 10번째 다운을 받았네요.

(왕친절) 다운을 받았는데 설정 < 개발자 < 설정 편집에서 무엇을 어떻게 해야하는지 아무것도 안해도 되는지 헷갈리네요.  claude_desktop_config.json 파일을 열어서 메모장에 저장해 두었던 json포맷을 복사해서 기존 것을 모두 지우고 붙여넣기를 한 후 파일 < 저장을 하면 되네요. 

(왕친절) claude를 닫었다가 열었는데 망치는 없고, notion-api-mcp ‘failed’만 있어요. 원인은 메모장에 복사 붙여넣기했는데, back slash가 전부 W”로 바뀌어요. 메모장이라 그런가봐요. CLAUDE가 시키는대로 notepad++를 다운 받아 붙여넣기 했는데 저장위치(Claude_API_MCP)를 못찾고 실패. ㅠㅠ. 나중에 알게 된 메모장에서 ‘ctrl + H’ 로 (찾기 W”) (바꾸기 \) (모두 바꾸기)로 해결했어요. ‘자! 이젠 망치가 생길까? 두근 두근’

(왕친절) 여전히 failed 의 연속이네요. 메모장에서 ‘ctrl + H’ 로 (찾기 W”) (바꾸기 \) (모두 바꾸기)로 해결이 되었는 줄 알았는데 도로 (W”) 로 되었네요.결국은 Node.js 다운로드해야 한다네요. 쉽다고 해서 쉬운 줄 알았더니 결국 할 것 다 하네요. 

(왕친절) 그래도 안 되네요. CLAUDE가 이번에는 VSCODE를 다운 로드 해야 한다네요(완전 똥개 훈련). 우여 곡절 끝에 ‘claude_desktop_config.json’ 을 찾아, claude가 시키는대로 새 파일을 만들어 내용 변경을 했어요.

(왕친절) 그런데 또 개발자 대화창을 못 들어가고 CLAUDE와 이틀을 씨름 했어요. 결국 CLAUDE포기, 나도 포기 (CLAUDE에게 심한 욕을 해주었는데 CLAUDE는 젊잖게 사과를 함)

6. (만약 이렇게 했는데 오류가 난다면) node.js 컴퓨터에 설치하기

  • 이유 : 노드 js 가 설치되어있어야만 mcp 서버가 작동한다고 함

  • 노드 js 다운로드 사이트에 접속 -> 자동으로 내 os 및 환경에 맞는 설치코드가 떠있음

  • 터미널 (윈도우는 명령 프롬프트) 열어서 코드 순서대로 실행

    • 한 번에 붙여넣는 게 아니고, 단계별로 1줄씩 붙여넣고 실행 !!

    • (참고) #는 주석이므로 복붙 안하기

(왕친절) 원저자 닿님께 SOS. 2일동안 CLAUDE와 씨름 한 것을 5분만에 해결해줌. 드디어 망치가 탄생 우와~~~ 마지막 문을 여는 방법을 몰랐음. 점3개(상병) 개발자만 열려고 했음. 일반창 열듯이 ‘새채팅’을 열면 망치가 보이는 것을, 엉뚱한 문을 열려고 했음. 

  1. 한국인

(왕친절) 나도 얻었다 망치! 꿈에도 그리던 망치!

Yun Young- 스크린 샷 썸네일

(왕친절) 그런데 이 것이 끝이 아니란다. Claude는 url을 못 읽으므로 fire crawl을 달아야 한단다.(도대체 내가 이 걸 왜 시작했지?)

(왕친절) 망치 생성 후, FIRE CRAWL < API KEY 발급 < SMITERY API KEY 넣고, NPM 코드 복사 < 터미널(?) 붙여 넣고 실행 < 클로드 앱이 열리지가 않는다.

(왕친절) 망치 27개는 포기. 망치 17개로 만족하자!

🌐 FireCrawl MCP 설치 (웹 스크랩 기능이 있음)

  • 웹 스크랩 기능이 있는 FireCrawl mcp를 설치해봅시다.

  • FireCrawl 웹사이트 가셔서 회원가입 -> API Key 발급하기

오렌지 버튼이 강조 표시된 페이지의 스크린 샷

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

  1. 닿님이 해놓은 것을 따라만 하는데도, 1주일 꼬박 걸렸다. 많은 시행착오와 연습이 필요하다.

  2. 한글 메모장에 문제가 있다는 것을 알게 되었다. 백슬래시 가 원화 표시 '\'로 저장된다.

  3. 개발하시는 분들이 대단하다는 것을 느꼈다.

  4. 활용계획:

    1) 심사중에 있는 영어 박사 논문들을 1차 2차 3차 시간 별로 노션에 저장해 놓았다가 MCP를 이용하여 변경 내용들을 확인해 본다.

    2) 심리상담 내용들을 1회부터 10회까지 노션에 보관했다가 MCP를 이용하여 변화 내용을 시각화 한다.

    3) 매일 쓰고 있는 감사일기를 MCP를 이용하여 시간 별, 내용 별로 시각화 한다.

5
2개의 답글

👉 이 게시글도 읽어보세요