[AI/MCP/Claude] 이제 진짜 '해줘'의 시대가 되었다!! MCP 사용하는 법(설치부터 사용 예시 까지)

 

MCP <- AI가 이제 다해준다.

이전에 ChatGPT가 Claude의 MCP 기술을 도입한다는 기사에 관해서 인포그래픽을 작성한 적이 있다. (아래 게시글 참조)

[AI]OpenAI, 경쟁사인 Claude의 MCP 기술 수용

이후 실제로 해당 기술을 사용해본 결과, 기존의 AI의 단점중 하나인 "확장성"에 관한 해결책이라고 본다.

ChatGPT가 채팅형 서비스를 통해 흥미를 불러일으키는데는 성공하였지만, 실제 업무에서 사용하기 위해서는 여러번의 시도와 코드 복사 붙여넣기 라는 한계를 넘지 못한 문제가 있었다.

최근 유행한 지브리도 결국엔 사진을 넣어야지만 동작한다.

 

이제는 복사 붙여넣기도 할 필요가 없어졌고 사용하는 플랫폼에 대한 지식기반이 없더라도 AI가 알아서 모든것을 작성해주는 시대가 된것이다.

MCP가 알아서 해준다.

 

---

 

MCP란?

MCP에 관해서 정말 많은 설명들과 자료들이 있고 MCP를 보통 USB 허브로 비유한다.

그 이유는 Plug and Play처럼 유선 마우스 usb를 꽂으면 별도의 프로그램 설치 없이도 마우스를 쓸 수 있는 것처럼 MCP를 연결만 하면 AI가 알아서 MCP를 활용한다는 얘기다.

MCP에 관한 예시이다.

 

---

 

뭘 할 수 있는데?

MCP가 좋다는 건 알겠는데, MCP로 뭘 할 수 있는지가 더 중요하다고 생각한다.

MCP라고 검색하면 정말 수많은 서비스들이 이미 MCP 서비스를 제공중인데 그 중 간단한 예시를 함께 만들어보자.

 

 

유튜브 노래 1개 틀고 천천히 따라해보자

하면서 진행이 안되거나 막히는 부분이 있으면 댓글에 작성바랍니다.

1개 2개 따라해보면 금방 이해될것이다.

---

 

Base기초) Node.js 설치하기

https://nodejs.org/ko/download/

Node.js — Node.js® 다운로드

 

엥? Claude 쓰는거 아니였나요?! <- Node.js는 무조건 설치해줘야 합니다,

프로그래머들이 npm,npx라는 명령어를 사용하여 MCP를 배포하는 경우가 많기 때문입니다.

정말 귀찮더라도 일단 쭉 진행해봅시다.

 

.msi로 설치파일을 다운로드 하고, 설치를 진행합니다.(설치는 그냥 다음/네 만 누르면 되니 Pass)

 

설치가 되었으면 cmd 명령창에 node -v 를 쳤을때 숫자가 나오면 정상적으로 설치한것 입니다.

이후 npm install npx -g 도 쳐서 npx를 설치합니다

 

수고 하셨습니다, 기본적으로 설치해야 하는 부분을 설치 완료 하였습니다.

다음 단계를 진행하세요 ^^

---

 

 

1) Claude Desktop 설치

https://claude.ai/download

본인 운영체제에 맞는 프로그램 다운로드 후 설치한다.

 

---

 

2) Claude Desktop 실행

설치한 claude desktop 열기

 

---

 

3) 좌측 상단의 메뉴 > 파일 > 설정 클릭

망치 모양은 MCP를 설정하면 나오는 거니 아무것도 안나오는게 정상입니다.

 

---

 

4) 개발자 > 설정 편집

---

 

5) 폴더가 열렸는데요??? > claude_desktop_config.json 메모장으로 열기

claude_desktop_config.json을 수정해야 한다.

 

---

 

6) 이제 사용하고 싶은 MCP를 찾아보자(https://smithery.ai/)

가장 간단하게 사용 가능한 Desktop Commander를 선택해보자

 

MCP를 모두 모아놓은 사이트다, 정말 많은 MCP들이 있다.

 

---

 

7) 뭔가 많은데요? 걱정 마세요.

Claude > npm > 명령어를 복사 > CMD에 해당 명령어 입력 + 실행

npx로 시작하는 명령어를 복사한다.

 

아래와 같이 cmd에서 명령어를 복붙한뒤 엔터치면 자동으로 설치된다,

 

---

 

8) 정말 거의 다왔습니다.

JSON > Windows > Copy로 설정구문을 복사합니다. <- 중요

제일 중요한 설정 코드입니다.

---

 

9) claude_desktop_config.json 기억나나요?(5번)

메모장에 복사한 내용을 붙여넣어주세요!
이후 저장

예시코드일뿐 달라도 괜찮습니다.

---

 

10) Claude Desktop 재시작 합니다.

재시작

---

 

11) 망치 모양이 보이면 성공!!

안보이면 "재시작"을 안했거나 Error가 우측 상단에 표시될겁니다.

이제 사용하면 됩니다.

 

 

12) 직접 원하는 MCP를 설치해보세요!!

 

아래 예시를 진행하기전에 Playwright를 직접 설치해 보시기 바랍니다.

---

 

 

휴! 이제 뭐하죠?

간단한 예시로 구글 뉴스의 정보를 가져와 볼까요?

허용이 몇번 나올 수 있습니다. 허용해주시면 됩니다.

pdf 말고 그냥 보여달라고 하는게 더 깔끔한것 같습니다.

 

내용을 인포그래픽으로 만들어서 파일로 저장해달라고 하니 알아서 저장해줍니다.(경로를 직접 지정하거나, 알려달라고 하면 알려줍니다.)

 

 

아주 간단하게 인포그래픽 파일을 받았습니다.

 

---

 

 

이게 끝인가요??? 별거 아닌데???

저희는 수많은 MCP들중 인터넷 컨트롤(Playwright)와 로컬 파일 컨트롤(Desktop commander)만 사용해서 간단한 기능을 실행해본것입니다.

 

Figma를 만들어볼까요? Figma에서 token을 받고 아래 명령어를 실행하고 config 설정을 하면 figma도 알아서 만들어줍니다.(cursor라는 코딩 프로그램을 사용해야 합니다 <-cursor는 다음번에 추가 게시글을 작성할것입니다.)

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

 

 

 

3D 모델을 만들고 싶나요? Blender MCP를 설치해보세요!

전문가가 아니라도 알아서 만들어줍니다.

 

Unreal MCP를 사용하면 게임도 만들 수 있습니다.

 

---

 

바이브 코딩에 MCP 날개를

MCP는 나온지 얼마 안되었지만 엄청난 속도로 서비스들이 늘어나고 있고 활용하는 방안들도 많이 나오고 있습니다.

이제 AI를 사용하여 개개인의 능력이 엄청나게 확장되는 시대가 되었습니다, 늦지 않게 최신 기술들을 빠르고 습득하는 것을 추천드립니다.

 

 

 

---

 

3줄 요약

1) MCP는 알아서 해준다.
2) 여러가지 MCP들을 활용하자
3) 바이브 코딩의 급격한 발전