[엘카데미] MCP 원데이 부트캠프 수료 후기

엘카데미 MCP 원데이 부트캠프 참여 인증!

0. MCP 원데이 부트캠프 신청 계기

엘카데미에서 MCP 원데이 부트캠프를 진행한다는 공지를 보고 호기심이 생겨 바로 교육 신청을 했었다..!

평소에도 AI를 자주 활용하고는 있었지만,

주로 코드나 궁금한 점에 대한 답변을 얻기 위한 용도에 한정되어 있었다.

그래서 'AI를 더 효과적으로 활용할 수 있는 방법은 무엇일까?' 하는 생각이 들던 차에

이번 교육이 좋은 기회가 될 것 같았다.

---

1. MCP란?

: Model Context Protocol

• AI 에이전트가 다양한 프로그램과 의사소통을 하는데 사용되는 규약
• Claude 인공지능을 개발한 Anthropic에서 2024년 11월 발표
• Open Source
  • 프로토콜 스펙
  • 구현용 라이브러리
  • 예시 MCP 서버

MCP는 작년 말, 정말 나온지 얼마 되지 않은 따끈따끈한 신상 기술이다.

그럼에도 구글 검색 트렌드 수치나, Github 즐겨찾기 수, Node.js용 SDK 다운로드 수 등에서 가파른 상승 곡선을 보여주고 있었다.

출처 : 부트캠프 강의 자료

또한 Anthropic 뿐 아니라 ChatGPT의 OpenAI, Gemini의 Google도 각각 올해 3월, 4월에 MCP에 대한 지원을 발표했다고 한다.

---

2. MCP 활용

MCP는 아래와 같이 활용이 가능하다.

1. 내가 사용 중인 AI에 여러 도구를 연결하여 생산성 향상
2. 내가 개발한 서비스를 AI와 손쉽게 연결할 수 있는 도구 제공
3. MCP를 사용할 수 있는 AI 챗봇 / 서비스 개발

이 중에서 이번 부트캠프에서는 주로 1번 활용법에 대해 교육이 진행되었다.

MCP를 통해 다른 Tool들과 AI를 연결하기

---

3. MCP 작동 방식

3.1. 작동 방식

MCP는 Client-Server 구조로 작동한다.

• Client : AI 기반으로 작동하는 애플리케이션
  • Chatbot, Editor 등 AI를 이용하는 창구
• Server : MCP 서버
  • 프로그램이나 데이터, 서비스 등과 소통하기 위한 인터페이스 역할
  • WEB API, HTTP, SDK 등 다양한 방식으로 프로그램과 연결 가능

Client와 Server는 1:1 관계를 가져야 하며,

MCP를 여러 프로그램에서 사용하려면 각 프로그램마다 별도의 클라이언트를 연결해야 한다.

또 서버와 프로그램 사이에는 특별한 제약이 없으며

WEB API와 같은 외부 인터페이스만 제공된다면 어떤 프로그램과도 연결이 가능하다.

출처 : 부트캠프 강의 자료

3.2. MCP 서버 연결 방식

MCP 서버의 위치에 따라 연결 방식이 2가지로 나뉜다.

• MCP 서버가 Local 내부에 위치 : stdio(Standard Input/Output) 연결
  
  • 쉘 명령어처럼 텍스트를 주고받는 방식으로 연결
• MCP 서버가 Local 외부에 위치 : SSE(Server-Sent Events) 연결
  • 서버에서 클라이언트로 실시간 데이터를 Push 할 수 있게 해줌

출처 : 부트캠프 강의 자료

3.3. 주고받는 데이터 형식

MCP 서버와 클라이언트 간에 데이터를 주고받는 형식은 json 형식이다.

데이터 내용 중 jsonrpc는 '고정된 MPC 프로토콜 버전' 정보이고,

나머지 필드들은 호출하려는 작업과 그에 맞는 필요한 값에 따라 유동적으로 채워진다.

{
  "jsonrpc": "2.0",
  "method": "doSomething",
  "params": {"value": 42},
  "id": 1
}

---

4. MCP 실습

이번 부트캠프에서의 MCP 실습은 엘리스 플랫폼에서 동작하는 챗봇인 AI 헬피를 통해 진행되었다.

우측 상단에 MCP 세팅 명령어를 볼 수 있도록 메뉴를 추가해주셔서,

실습할 항목들에 대해 세팅을 어떻게 하면 되는지 쉽게 확인할 수 있었다.

메시지 입력란 하단에 플러그 모양을 클릭하면 MCP 연결을 할 수 있는 MCP Servers 세팅 팝업이 제공되고,

이름 및 연결 방식, 명령어를 입력하여 저장하여 MCP 서버 세팅이 가능했다.

엘리스 측에서 제공해준 클라우드 환경 내에서

파일 읽고 쓰기 / MCP 서버 세팅을 진행하여 실습은 모두 stdio 연결 형식으로 진행되었다.

MCP Servers 세팅 팝업

실습은 크게 3가지로 진행되었고, 마지막 실습은 3가지를 종합해서 각자의 웹 페이지를 만드는 것으로 진행했다.

 

4.1. Filesys

• 로컬 파일을 읽고, 수정할 수 있는 MCP 서버

엘리스에서 제공해준 클라우드 파일 경로에서 파일을 만들고, 목록을 보고 수정 등을 할 수 있었다.

시를 쓰게 하고 텍스트 파일로 저장을 한다던지,

svg 형식으로 그림을 그려서 저장하게 한다던지 등의 동작을 해볼 수 있었다.

(캡쳐를 남겨둘걸... 대화 기록 남지 않음 + API Key가 만료되어서 실제 동작 이력을 볼 수가 없다 🥲)

 

4.2. GitHub (GitHub 계정 액세스 토큰 발급 필요)

• GitHub 계정과 연동하여 사용할 수 있는 MCP 서버
  • 리포지토리 생성
  • 파일 업로드
  • 이슈 관리

헬피에게 원하는 코드를 만들도록 명령한 후에,

그 코드를 내 GitHub 계정에 연동하여 직접 리포지토리를 만들고, 커밋 및 푸시까지 할 수 있었다.

그것도 모자라서 내가 이슈를 등록한 후에 확인 후 개선하고 닫으라고 하면

이슈 내용을 분석 후 코드를 수정해서 다시 커밋까지 해주었다.

내 코드 실력으로는 만들 수 없을 웹 게임이나 웹 사이트를 만들어 볼 수 있어서 신기했다..

MCP가 커밋하고 작성한 경우 커밋 메시지 / 코멘트 형식을 정해주니 그 내용대로 실제 작성해주었다.. 신기방기

 

4.3. Figma (Figma 계정 액세스 토큰 발급 필요)

• Figma 계정과 연동하여 디자인 정보 읽기가 가능한 MCP 서버

내 Figma에 저장되어있는 Figma 디자인을 헬피에게 보여주고 이대로 웹사이트를 만들어 달라고 했더니

거의 유사하게 만들어주었다...

헬피 성능 이슈로 인해서 완전히 똑같은 수준까지는 아니었지만 그래도 유사도가 매우 높은 수준이랄까..?

프롬프트에 반응형 등의 옵션을 넣으면 그 내용도 포함해서 페이지를 작성해주었다.

왼쪽 : Figma 원본 / 오른쪽 : Figma 원본 토대로 헬피가 만든 사이트 (옵션으로 색상은 변경해달라고 요청했음)

---

5. MCP 원데이 부트캠프 수료 후기

나는 정말 AI 기능의 새발의 피 정도밖에 사용하지 않고있었구나.. 싶었다

똑똑한 챗봇 정도로만 사용해오다가 코드를 직접 만들고, 분석하고, 배포하고 개선시키는 것까지 해보니

API가 제공되는 다른 프로그램에서도 사용해보고 싶어졌다.

특히.. HTML/CSS/JS 공부하겠다고 책까지 사서 기초 공부를 했었는데

뭔가 필요가 없어진 느낌이었다..😂 기획서나 디자인만 주면 알아서 뭐든 만들어주겠구나..싶고

그래도 이 기능으로 포트폴리오에 응용해 볼 생각이 들긴 해서, 아이디어를 얻었다는거에 일단 만족해보기로 했다.

이론 설명도 잘 풀어서 설명해주셨고, 실습 위주로 직접 다뤄볼 수 있는 시간이었어서 재밌게 수업을 들었던 것 같다..!

그리고 수료생들을 위해서 6월 동안 수업 2가지를 들을 수 있게 해주셔서 더 공부해볼 수 있을 것 같아 매우 Good!

엘카데미에 종종 이런 수업 기회가 생기면... 주제만 맞는다면 꼭 참석하고 싶다!

추가 제공 수업 2건!