소개
지피터스 게시글을 읽다보면 나중에 꼭 따라해봐야지! 하고 저장해두고 싶은 사례글들이 있다.
단순히 url 저장만 해두는 게 아니라,
분류해서 볼 수 있게 태그도 달고, 요약도 해서 저장하면 좋겠다
이걸 나중에 따라해볼 수 있도록 '따라해보기용 사례글'로 변환해서 저장하면 좋겠다
이렇게 해볼 수 있지 않을까?
클로드에 노션 mcp 설치하고
클로드한테 지피터스 사례글 url 주면서 '요약 정리 해줘'
어느정도 내가 원하는 방향대로 정리가 되면 '노션에다가 넣어줘'
(사실 누리님의 mcp 설치 사례글을 그대로 모각AI에서 다같이 따라해보려다가.. 잘 안됐다.. 역시 따라해보기용 사례글은 훨씬 더 친절해야해.. 🥲)
진행 방법
🔨 클로드앱에 노션 MCP 설치
클로드 데스크탑 앱 설치하기
노션에서 DB 하나 만들기 + DB id 값 복사해두기
노션 api key 발급 + 값 복사해두기 + 노션 DB에 연결 설정
Smithery 가서 노션 mcp 검색 (복사해둔 database_id값, api_key값 넣기)
클로드 앱 설정 파일에 코드 붙여넣고 앱 재실행
(만약 이렇게 했는데 오류가 난다면) node.js 컴퓨터에 설치하기
🌐 FireCrawl MCP 설치 (웹 스크랩 기능이 있음)
목적 : 클로드는 웹 url 을 읽을 수 없으므로, url 읽을 수 있는 도구를 또 손에 쥐어줘야 함! ( 윤스케어 님이 알려주심 ㅎㅎ)
방법 : FireCrawl 회원가입 후 API 키 발급 -> Smithery 가서 FireCrawl 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 계정 없다면 가입 후 로그인 하면 됨
Nodejs API 페이지의 스크린 샷
단계 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줄씩 붙여넣고 실행 !!
(참고) #는 주석이므로 복붙 안하기
🌐 FireCrawl MCP 설치 (웹 스크랩 기능이 있음)
웹 스크랩 기능이 있는 FireCrawl mcp를 설치해봅시다.
FireCrawl 웹사이트 가셔서 회원가입 -> API Key 발급하기
Smithery 가서 firecrawl 검색 -> 가장 다운로드 많은 것 클릭
이번에는 npm 코드를 터미널에 넣고 딸깍 설치하는 방법을 써서 설치해보자!
API 키 넣고 -> connect -> npm 코드 복사 -> 터미널 열어서 붙여넣고 실행 -> 클로드 앱 재실행 됨
알아서 바로 클로드 앱이 재실행 됨!
망치가 10개 더 추가된 것을 확인!
결과와 배운 점
자, 이제 클로드에게 명령해봅시다! 아주 잘 읽어줍니다.
클로드에서는 어떤 도구(망치)를 사용할 때 사용자에게 허락을 구합니다. 허용을 눌러줍니다.
이걸 노션 지피터스 북마크 DB에 저장해달라고 했습니다.
우와.. 너무 잘 저장해줬습니다..!!
클로드에서 지피터스 url 주고 내 맘대로 DB에 저장해서 북마크 기능 만들기 대성공!
추가 배운 점
따라해보기 사례글은 진짜 진짜 진짜 친절해야 한다 (은근 스킵된 단계들이 정말 많다)
