AI에 MCP로 날개달기 (Cursor + MCP로 깃,노션 등 연동하기)
FrontEnd

AI에 MCP로 날개달기 (Cursor + MCP로 깃,노션 등 연동하기)

728x90

요즘은 AI를 쓰고 안쓰고에 따라서 개발 생산성이 사람마다 천지차이로 나는 것 같다.

 

최근에 커서를 알게 된 이후로, VSCODE는 내 컴퓨터에서 거의 fade-out 되기 직전이다.

https://www.cursor.com/

 

Cursor - The AI Code Editor

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

www.cursor.com

 

커서?

VSCODE를 포크떠서 만든 에디터로, 코파일럿처럼 IDE 내에서 AI를 사용할 수 있다.

 

월 20달러 (GPT 유료플랜이랑 동일)한 가격으로 이용할 수 있다.

 

개인적으로 코파일럿보다 매우매우 똑똑한 친구라고 생각한다. 내 프로젝트의 구조를 전반적으로 알고있기도 하고, 특히 미리 내가 할 일을 예측해서 도와주는 생산성이 말이 안된다.

 

간단한 예시로 내가 A파일에서 export하는 함수이름과 사용방식을 다 바꿨을 때, 탭 몇번 누르다보면 A의 함수를 쓰고있는 다른 파일들도 다 변경된다. 단순히 이름을 바꾸는게 아니라, 사용방식에 따라 다 바꿔진다.

 

사실 커서의 편리함은 말보다는 직접 체감하는게 빠르다고 생각한다. 2주동안은 커서 유료플랜을 무료로 체험할 수 있으니 한번 해보는걸 권장한다 ㅎㅎ

MCP?

아래 유튜브가 설명이 잘 되어있다.

https://www.youtube.com/watch?v=oAxunD8k0C8&t=397s

 

 

현재 대부분 개발자들이 AI를 접해본 경험이 있다. MCP는 AI에게 손을 달아주는 역할을 해준다.

 

결과론적으로 아래와 같은 일을 AI에게 시킬 수 있다.

 

  • "내가 최근에 작업한 PR 목록을 가져오고 정리해줘"
  • "[PR링크] 이 PR에 대해 리뷰해줘"
  • "지금 내가 이 브랜치에서 작업 한 내용을 가지고 PR을 만들어서 깃헙에 올려줘"
  • "지금 내가 보고있는 파일을 명세서 형식으로 노션에 정리해줘"
  • "[피그마 링크] 이 피그마 대로 기본적인 JSX 템플릿을 짜줘"

 

즉, AI의 결과물이 단순히 특정 Text에 국한되는게 아니라 AI에게 특정 도구들의 사용법을 연결해서 일을 시킬 수 있다. (앞으론 무얼 먹고 살아야 하는가)

 

심지어 대부분 유명한 툴들 (git, notion, figma, 등등..)은 이미 MCP가 다 만들어져 있다.

 

 

아래 사이트에서 만들어져 있는 MCP Protocol을 가져와서 연결하기만 하면된다.

https://smithery.ai/

 

Smithery - Model Context Protocol Registry

Enable AI agents to seamlessly interact with VS Code, enhancing their capabilities to modify files, open projects, and check extension statuses. Streamline your development workflow by integrating AI assistance directly into your coding environment. Experi

smithery.ai

 

 

예를 들어서 git을 연결해보자. MCP는 커서에 국한된 프로토콜은 아니므로 코파일럿, 클루드 등등 다 가능하지만 나는 커서를 예를들어서 설명을 해보겠다.

 

Cursor - preference - cursor setting - MCP

 

 

 

여기에 + Add new global MCP server를 누른 후, 만들어진 json파일에 정보를 추가하기만 하면 끝난다.

 

json정보는 방금 올린 Smithery 페이지에서 얻을 수 있다. 예를들어 git을 검색해 보자.

 

제일 다운로드 많은 github

 

 

많은 사람들이 사용한 프로토콜을 사용해보자.

 

로그인을 안했다면 로그인을 진행해주고, github PersonalAccessToken을 깃헙에 가서 다운받아준다.

 

github - profile - setting - developer setting - perseonal access token (classic) - generate new token(classic) - ( 권한은 자유롭게 repo정도 풀어주면 좋다. )

 

 

이후 발급받은 토큰을 넣고 connect해주고 json 탭을 보면 복사할 수 있는 값이 나온다.

 

밑은 토큰 부분이라 잘랐습니다

 

이 값을 커서 세팅의 mcp.json에 넣고, 커서를 재부팅하기만 하면 연결된다.

 

 

똑~같은 방법으로 지라, 노션들의 툴에도 적용이 가능하다. 아래는 지라를 연동한 후에 간단한 질문을 해본 결과이다.

 

 

 

간단한 질문을 해본거지만 내코드베이스를 바탕으로 지라이슈를 생성하거나 정리하여 노션이나 위키 등에 정리해주는 작업도 가능하다.

 

특히 Figma는 디자인을 활용해 템플릿도 만들어준다..

 

끄읏 -!

728x90