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

소개

지피터스 게시글을 읽다보면 나중에 꼭 따라해봐야지! 하고 저장해두고 싶은 사례글들이 있다.

단순히 url 저장만 해두는 게 아니라,

  • 분류해서 볼 수 있게 태그도 달고, 요약도 해서 저장하면 좋겠다

  • 이걸 나중에 따라해볼 수 있도록 '따라해보기용 사례글'로 변환해서 저장하면 좋겠다

이렇게 해볼 수 있지 않을까?

  1. 클로드에 노션 mcp 설치하고

  2. 클로드한테 지피터스 사례글 url 주면서 '요약 정리 해줘'

  3. 어느정도 내가 원하는 방향대로 정리가 되면 '노션에다가 넣어줘'

(사실 누리님의 mcp 설치 사례글을 그대로 모각AI에서 다같이 따라해보려다가.. 잘 안됐다.. 역시 따라해보기용 사례글은 훨씬 더 친절해야해.. 🥲)

진행 방법

🔨 클로드앱에 노션 MCP 설치

  1. 클로드 데스크탑 앱 설치하기

  2. 노션에서 DB 하나 만들기 + DB id 값 복사해두기

  3. 노션 api key 발급 + 값 복사해두기 + 노션 DB에 연결 설정

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

  5. 클로드 앱 설정 파일에 코드 붙여넣고 앱 재실행

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

🌐 Web search MCP 설치

목적 : 클로드는 웹 url 을 읽을 수 없으므로, url 읽을 수 있는 도구를 또 손에 쥐어줘야 함! ( 윤스케어 님이 알려주심 ㅎㅎ)

방법 : Smithery 가서 Web Search MCP 검색 후 설치


🔨 클로드앱에 노션 MCP 설치

1. 클로드 데스크탑 앱 설치하기

https://claude.ai/download 접속해서 본인 OS 에 맞는 앱을 설치

2. 노션에서 DB 하나 만들기 + DB id 값 복사해두기

  • Full page로 데이터베이스 하나 생성

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

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

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

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

3. 노션 api key 발급 + 값 복사해두기 + 노션 DB에 연결 설정

  • 노션 설정 > 연결 > 개발자 API 어쩌구 클릭

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

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

화살표가있는 한국 앱

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

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

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

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

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

  • 단계 2,3번에서 복사해 둔 노션 api key, database_id를 차례로 붙여두기

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

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

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

5. 클로드에 노션 MCP를 연결하기

  • 방법은 2가지인데 1번을 더 추천 (쉬움)

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

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

한국 HTML 편집자 스크�린 샷

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

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

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

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

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

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

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

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

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

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

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

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

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

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


🌐 Web search MCP 설치

  • 설치 수가 많은 것 중 api key를 요구하지 않는 친구를 찾았음 (키 발급 또 하기 귀찮아..)

  • 사용 가능 도구 확인해보니, fetch_content를 보니까 url을 읽어주는 것 같음.

  • 이번에는 npm 코드를 터미널에 넣고 딸깍 설치하는 방법을 써서 설치해보자!

  • 알아서 바로 클로드 앱이 재실행 됨!

  • 망치가 2개 더 추가된 것을 확인!

결과와 배운 점

자, 이제 클로드에게 명령해봅시다!

  • 아주 잘 읽어줍니다.

  • 근데...... 아주 잘 읽어준 후에 답변을 다 생성한 후에... 갑자기 대화 내용이 사라집니다.....

    • 이거 해결해야 노션에 정리하는 것 까지 성공할 것 같아요ㅜㅜㅜㅜㅜ

추가 배운 점

  • 따라해보기 사례글은 진짜 진짜 진짜 친절해야 한다 (은근 스킵된 단계들이 정말 많다)

5
4개의 답글

👉 이 게시글도 읽어보세요