Claude로 Notion 작성하기 (Notion MCP)
안녕하세요 ! 오랜만입니다 😊ㅎㅎ
저번 포스팅에서는 MCP에 대해 알아봤었는데
오늘은 실제로 이 MCP로 무엇을 할 수 있냐!에 대해 알아보도록 하겠습니다.
일반인들 기준으로는 가장 유용한 플랫폼은 Notion이라 생각되어
Claude로 Notion을 연결시켜 한 번 작성해보도록 하겠습니다 !
또한 일반인들도 충분히 따라하실 수 있도록 일반인 관점에서 작성해보도록 하겠습니다 !
🌟본 포스팅은 Window 환경에서 진행합니다 !!🌟
📦 우선 준비물은 다음과 같습니다 !
1. Node.js
- Notion과 연결시키기 위한 통로라고 보시면 됩니다.
2. Claude Desktop (유료 버전)
- 크롬 브라우저에서 사용하는 것이 아닌, 내 컴퓨터에 클로드 프로그램을 설치합니다 !
- 또한 무료버전은 제약이 많기 때문에 유료 버전을 추천 드립니다 !!
- 스마트폰으로 클로드 앱으로 결제하시면 원화로 결제해서 더 저렴합니다 ㅎㅎ
3. Notion Desktop (선택)
- 굳이 설치를 안해도 되지만 편의성을 위해 Notion도 프로그램으로 설치합니다 !
4. VS Code (선택)
- MCP 연결을 위해 수정해야되는 부분이 있는데 그냥 코드 편집기라고 생각하시면 됩니다 !
1⃣ node.js를 설치해줍니다
(설치 주소 : https://nodejs.org/ko)
위 빨간 사각형을 눌러서 설치하시고, 나온 파일을 실행시켜 줍니다 !
이후로 계속 설치를 진행해줍니다.
이 단계는 Node.js를 도와주는 보조 도구를 설치하는 과정으로
앞으로 필요한 기능이 문제 없이 작동하게끔, 한 번에 설치하는 옵션입니다 !
이 과정에서 install을 누르면 예/아니오 누르는 창이 뜰텐데 반드시 '예' 를 눌러주셔야 됩니다 !!
이렇게 Finsh를 누르게 되면 node.js 설치가 끝납니다 이후 cmd(까만 창)이 뜰텐데
이후에 아무런 키나 두 번 눌러주시면 아까 말씀드렸던 보조도구들을 설치하기 시작합니다
이후 또 예/아니오 창이 뜰텐데 반드시 '예'를 눌러주시고 누르신 후에는
PowerShell이라는 파란창이 뜨고 설치가 시작됩니다
이 단계는 자동으로 필요한 도구들을 설치하는 화면입니다
(10분 정도 걸립니다 ! 잠시만 기다려주세요 !!!!)
이후 정상적으로 설치가 끝났다면 다음 로 넘어가시면 됩니다 !
⚠ 혹시나 다음과 같은 상황이라면 아래처럼 진행해주세요
해당 화면을 닫기를 누르시고 작업 표시줄에 Visual Studio Installer 라고 검색해주세요
2⃣ Claude Desktop을 설치 해주세요
(설치 주소 : https://claude.ai/download)
똑같이 설치 이후 프로그램을 실행시켜 줍니다
실행 이후 시작하기 버튼을 눌러 본인 계정을 로그인해주세요 !
로그인 이후 빙글빙글 도는 로딩바가 지속되는 경우 종료 후 재실행 해주세요
정상적으로 설치했다면 다음과 같이 Claude Desktop이 실행됩니다 !
3⃣ Notion Desktop 설치해주세요 !
(설치 주소 : https://www.notion.com/desktop)
설치 후 프로그램 실행시켜주시면 됩니다 !
이후 본인 계정으로 로그인해주세요 !
VS 코드 설치하기
(설치주소 : https://code.visualstudio.com/)
https://velog.io/@jjoung-2j/Visual-Studio-Code-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%84%A4
해당 VS Code는 재설치하기엔 제가 설치된 파일이 많아서 🥹 설치 방법 포스팅을 잘 해놓으신 분 링크를 남겨 놓을게요 !!
5⃣ 본격적으로 Notion MCP를 통해 Claude Desktop이랑 연결시키기 !!
https://www.notion.com/my-integrations노션에 로그인을 한 이후 위 경로로 이동하시면 다음과 같은 화면이 나옵니다 !!
이후 부터는 사진을 보고 차근차근 따라와주세요 !!
우선 API 이름에 사진과 같이 내 API 이름을 설정해주시고
워크 스페이스는 개인 워크 스페이스를 선택해줍니다
🌟반드시 유형은 프라이빗으로 해주세요 !! (개인정보 보호 목적)
저장하시면 다음과 같은 알림이 뜹니다 !
이후 사진과 같이 API 관리 창이 뜹니다 기본적으로 크게 수정할 부분은 없으며
⚠절대 프라이빗 API 통합 시크릿 키는 유출되면 안됩니다 !!!
이후 사용 권한 탭으로 이동해서 Claude가 수정할 수 있도록 페이지를 열어줍니다 !
저는 그냥 모든 페이지를 다 열어주도록 하겠습니다 😀 ㅎㅎ
🌟 이후 Claude Desktop으로 이동해주세요 !
설정 편집을 누르게 되면 다음과 같은 폴더로 이동하게 됩니다 !
이후 더블 클릭해서 VS Code로 실행시켜주시면 다음과 같은 화면이 나옵니다 !!!
이 부분에 다음 코드를 복사해서 우선 붙여넣어 주세요 !
{
"mcpServers": {
"notionApi": {
"command": "npx",
"args": ["-y", "@notionhq/notion-mcp-server"],
"env": {
"OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer [Notion 프라이빗 키를 넣어주세요요]\", \"Notion-Version\": \"2022-06-28\" }"
}
}
}
}
🌟 이후 노션 API 관리 사이트로 이동해주세요 !
사진의 표시하기 버튼을 누르면 Key가 보입니다 ! 해당 부분을 복사해주세요 !
복사 후 "[Notion 프라이빗 키를 넣어주세요]" 부분(대괄호 포함)을 지우고 복사한 키를 넣어주세요 !
⚠ Bearer과 Key 사이에는 반드시 공백 하나가 있어야됩니다 !
Ex) "Bearer ntn_xxxxx"
이후 Ctrl + S를 눌러주시고 VS Code를 종료해주세요 그 다음 Claude Desktop을 재실행 해줍니다 !!
이제 화면과 같이 도구 모양 버튼을 눌러주시면 notionApi라고 뜨게 됩니다 ㅎㅎ
🎉축하드립니다 ! Notion MCP 연결이 되었습니다 !!
이제 실습을 하러 가볼까요? 👨🔬
사진과 같이 "Notion MCP가 연결되어있어?"라는 질문으로 대화를 시작합니다
👀 이렇게 정상적으로 연결이 완료된 것을 볼 수 있습니다 !
이후 이 포스팅을 보시는 분들을 위해 환영 인사글의 페이지를 생성해보도록 하겠습니다 !
권한은 요청 단위별로 허용해주시거나 귀찮으시면 그냥 항상 허용 누르셔도...ㅎㅎ 대신 요청 단위별로 수락해주시는 게 더 안전합니다 !
이렇게 클로드가 직접 페이지를 만들어서 새로운 글을 작성해줬습니다 !
