Gemini 2.5 Pro는 미친 듯이 좋습니다! - MCP 서버 구축 튜토리얼

채널 아이콘
All About AI 구독자 189,000명

요약

영상은 Google이 출시한 Gemini 2.5 Pro 모델을 활용해 MCP 서버를 구축하는 과정을 단계별로 설명합니다. 사용자는 다양한 문서 소스(Three.js, Open AI, 그리고 mCP Typescript SDK)를 벡터 스토어에 통합하여 최신 문서를 손쉽게 조회할 수 있도록 구성합니다. 또한, 실제 코딩 과정과 설정 오류 디버깅 과정을 통해 실전 개발 팁을 전달하며, 스폰서 Brilliant.org를 통해 AI 학습 자료에 대한 정보도 제공합니다. 마지막으로, 구축된 서버를 실제 질의에 활용하여 결과를 확인하는 모습과 앞으로의 활용 가능성을 언급합니다.

주요 키워드

Gemini 2.5 Pro MCP 서버 벡터 스토어 파일 검색 Three.js Open AI Node.js Brilliant.org API 키 IDE

하이라이트

  • 🚀 Gemini 2.5 Pro 모델을 이용하여 MCP 서버를 구축하는 새로운 워크플로우를 소개합니다.
  • 📌 다양한 문서(Three.js, Open AI, mCP SDK)를 벡터 스토어에 저장하여 최신 자료를 지속적으로 조회할 수 있도록 설정합니다.
  • ⚡️ Google AI Studio에서 Gemini 2.5 Pro를 선택하고, 실시간으로 코드를 생성 및 디버깅하는 과정을 자세하게 보여줍니다.
  • 🌟 Brilliant.org 스폰서십을 통해 AI 기초부터 심화까지 학습할 수 있는 인터랙티브 강좌를 추천합니다.
  • 📌 실제 터미널 작업과 코드 설정 과정을 통해 MCP 서버의 API 키, 벡터 스토어 ID 등 필수 환경설정을 함께 진행하는 모습을 담고 있습니다.

용어 설명

MCP 서버

Cursor와 연동되는 서버 환경으로, 문서나 코드 조각을 벡터 스토어에 저장해 활용할 수 있도록 구축된 시스템입니다.

벡터 스토어

문서의 텍스트를 일정 크기의 청크로 분할하여 저장하고, 검색 및 문맥 제공에 활용하는 데이터베이스입니다.

Gemini 2.5 Pro

Google이 실험적으로 출시한 최신 생성형 AI 모델로, 복잡한 코딩 및 문서 처리 작업에 활용됩니다.

파일 검색 (File Search)

Open AI 문서에서 필요한 정보를 검색하고 해당 결과를 벡터 스토어에서 추출하는 기능입니다.

[00:00:00] 소개 및 모델 언급

여행 중에도 Gemini 2.5 Pro 모델의 출시 소식을 소개하며, 이번 영상에서 MCP 서버 구축 튜토리얼을 진행할 것을 설명합니다.

구글이 Gemini 2.5 모델을 출시했고, 이를 활용해 Cursor MCP 서버를 구축하는 프로젝트를 시작하게 되었습니다.
[00:00:10] 서버 구축 개요

실제 MCP 서버 구축을 위한 기본 워크플로우를 개략적으로 설명하며, 필요한 문서 수집과 설정 방법을 안내합니다.

OpenAI의 벡터 스토어를 포함한 MCP 서버를 구축하여 최신 문서를 저장하고 관리하는 시스템을 만들 계획을 설명합니다.
[00:01:00] Brilliant.org 스폰서 소개

Brilliant.org의 AI 학습 강좌를 소개하며, 인터랙티브 학습 방식과 AI 원리를 이해하는 데 도움을 주는 자료들을 추천합니다.

Google AI Studio에서 Gemini 2.5 Pro 실험 버전을 선택하고 서버 구축을 위한 준비를 시작합니다.
스폰서 Brilliant.org의 AI 학습 과정을 소개하며, 대규모 언어 모델의 작동 방식과 실습 중심의 교육 방식을 설명합니다.
[00:02:27] 문서 수집 및 파일 준비

Three.js 문서, mCP Typescript SDK 및 Open AI의 파일 검색 관련 문서를 복사하여 텍스트 파일로 정리하는 과정을 보여줍니다.

실제 프로젝트 구현을 위해 Cursor 문서를 수집하고, Node.js 기반의 TypeScript 서버 구축을 시작합니다.
Gemini에게 MCP 서버 구축 방법을 설명하기 위해 필요한 문서들을 준비합니다. MCP TypeScript SDK와 OpenAI의 텍스트 생성, 프롬프팅, 파일 검색 관련 문서들을 수집합니다.
벡터 데이터베이스 구축을 시작합니다. Three.js 문서를 기반으로 새로운 벡터 스토어를 만들기로 결정했습니다.
[00:04:20] 벡터 스토어 설정

Open AI의 스토리지 인터페이스를 사용해 벡터 스토어를 생성, 청크 사이즈와 오버랩 설정 등 세부 옵션을 설정하는 모습을 담았습니다.

Three.js 문서 파일들을 벡터 스토어에 업로드하고, 청크 크기 2000과 오버랩 400으로 고급 설정을 구성합니다. 빠른 처리 속도로 벡터 스토어가 성공적으로 구축됩니다.
[00:05:55] 서버 개발 환경 설정

Node.js 기반으로 프로젝트 디렉토리 생성, 필요한 의존성 설치 및 파일 구조를 구성하는 과정을 단계별로 설명합니다.

Vector 저장소 설정을 완료하고, 이를 활용할 서버 구축을 시작합니다. Google AI Studio의 Gemini 2.5 모델을 사용하여 작업을 진행합니다.
OpenAI의 Vector 저장소 기능을 사용하는 타입스크립트 기반 Cursor MCP 서버 구축을 위한 프롬프트를 작성합니다.
Gemini 2.5의 빠른 처리 속도와 추론 능력을 확인하며, 제공된 단계별 가이드를 따라 프로젝트 구조를 설정합니다.
프로젝트 초기화와 필요한 의존성 설치를 진행하고, 기본 설정 파일들을 생성합니다.
프로젝트의 주요 파일들(.env, types.ts, index.ts)을 생성하고 필요한 코드를 구현합니다. package.json 설정과 빌드 준비를 진행합니다.
패키지 설정과 빌드 과정에서 발생한 에러를 Gemini 2.5를 활용해 디버깅하고 수정된 index.ts 파일을 적용했습니다.
[00:10:12] mCP 연결 설정

MCP 서버와 연동하기 위해 API 키와 벡터 스토어 ID를 설정하는 JSON 파일을 생성하고, Cursor 환경에서 이를 활성화하는 방법을 보여줍니다.

MCP 연결을 위해 .cursor 폴더를 생성하고 mCP.json 파일을 설정했습니다. API 키와 벡터 스토어 ID를 구성했습니다.
커서를 재시작하고 MCP를 활성화하여 OpenAI 파일 검색과 Three.js 문서 검색 기능을 설정했습니다.
[00:11:39] 질의 테스트 및 결과 확인

‘How to create fog in 3js’라는 질의를 통해 벡터 스토어에서 검색된 문서 청크를 기반으로 결과를 받아 확인하는 과정을 시연합니다.

Three.js의 안개 생성 방법에 대한 문서를 검색하고 벡터 스토어를 통해 관련 정보를 성공적으로 가져왔습니다.
벡터 스토어에서 가져온 컨텍스트를 활용하여 MCP 서버 설정 시 라이브러리 문서를 효과적으로 활용하는 방법을 설명합니다.
[00:13:00] 마무리 및 추가 기대

모델의 속도와 토큰 처리 성능, 그리고 향후 GPU 드로우 이벤트 등을 언급하며, 이번 튜토리얼의 실용성과 앞으로의 활용 가능성을 강조합니다.

다양한 클라이언트와 IDE에서 문서 기반 설정의 장점과 OpenAI, Three.js 등의 실제 구현 경험을 공유합니다.
Gemini 2.5 Pro의 뛰어난 성능과 향후 Cursor, Windsurf 등 다른 클라이언트와의 통합 가능성에 대해 논의합니다.
Gemini 2.5 Pro의 벤치마크 결과를 살펴보며, GPT-3.5와 Claude 3.5를 능가하는 85.8점의 우수한 성능을 확인합니다.
제가 지난 며칠 동안 출장 중일 때
구글이 Gemini 2.5 모델을 출시했습니다.
아직 사용해볼 시간이 없었는데요.
오늘 영상이 정말 기대됩니다.
Gemini 2.5를 사용해서
Cursor MCP 서버를 구축해보도록 하겠습니다.
제가 평소에 하는 워크플로우를 따라
어떻게 설정하는지 보여드리고
여러분의 필요에 맞는 MCP 서버를
어떻게 구축하는지 배워보겠습니다.
오늘은 OpenAI의 벡터 스토어가 있는
MCP 서버를 만들어보려고 합니다.
여기에 문서들을 저장할 수 있어서
Cursor에서 항상 최신 문서를
원하는 주제에 대해 가질 수 있죠.
제가 만든 Three.js 문서
벡터 스토어가 있는데, 이걸 사용해볼 수도 있겠네요.
제가 이러한 벡터 스토어를
만들 때 사용하는 워크플로우를 보여드리고
MCP 서버와 어떻게 연결하는지
설명해드리도록 하겠습니다.
우선 Google AI Studio에서
시작해보도록 하겠습니다.
Gemini 2.5 Pro 실험 버전을 선택하겠습니다.
가장 먼저 해야 할 일은
Gemini를 위한 컨텍스트를 수집하는 것입니다.
MCP 서버를 실제로 구축하기 위해서죠.
하지만 그전에
오늘의 스폰서
brilliant.org를 살펴보겠습니다.
ChatGPT나 생성형 AI 모델이
실제로 어떻게 작동하는지 궁금하셨나요?
brilliant.org에는 완벽한 강좌가 있습니다.
무대 뒤를 들여다볼 수 있는
제가 가장 좋아하는 건
'AI의 작동 방식' 강좌입니다.
대규모 언어 모델 입문부터
다음 단어 예측, 더 큰 컨텍스트 윈도우
경사 하강법, 심지어
자신만의 대규모 언어 모델 구축까지
다루고 있습니다.
Brilliant의 장점은
단순히 수동적으로 보기만 하는 게 아니라
복잡한 주제를 단순하고 직관적으로 만드는
인터랙티브 수업에 참여한다는 겁니다.
Brilliant의 접근 방식은
단순히 강의를 보는 것보다 6배 더 효과적이에요.
깊이 있는 이해를 쌓을 수 있고
문제 해결 능력도 향상시킬 수 있습니다.
커리어를 위한 실력 향상이든
AI에 대한 단순한 호기심이든
Brilliant는 더 스마트하게 배울 수 있도록
하루 몇 분만으로도 도와줍니다.
AI의 작동 방식과 수천 개의
인터랙티브 강좌를 탐험하려면
brilliant.org/allaboutai를 방문하거나
화면의 QR 코드를 스캔하세요.
설명란의 링크를 클릭하고
30일 무료 체험을 시작하세요.
첫 200명에게는 연간 프리미엄 구독
20% 할인도 제공됩니다.
이 영상을 후원해 준
Brilliant에 감사드립니다. 이제 프로젝트로 돌아가겠습니다.
먼저 문서를 수집하는 것부터 시작하겠습니다.
Cursor에 대한 문서를 가져올 건데요.
우리가 필요한 모든 컨텍스트를
여기 문서에서 가져오겠습니다.
이 페이지를 복사할 건데
TypeScript로 서버를 만들 거니까
Node.js를 선택하도록 하겠습니다.
여기 정보들을 준비해뒀는데요.
Gemini를 사용해서
cursor-mcp.txt 파일을 만들어보겠습니다.
자, 이제 내용을 붙여넣어보죠.
Gemini에게 MCP 서버를
Cursor에서 어떻게 구축하고 설정하는지에 대한
정보를 입력할 건데요. 저는 또한
MCP TypeScript SDK의 문서와
정보도 가져오고 싶습니다. 다시 한 번
이 문서들을 모두 복사해서
새 파일을 만들어보겠습니다
파일 이름은
typescript-mcp.txt로 하고 붙여넣기 하겠습니다
물론 우리는 문서에서
정보가 더 필요합니다
OpenAI 문서로 가보죠
문서 페이지에서
텍스트 생성과 프롬프팅
문서를 가져오면 될 것 같네요
이것을 openai-1.txt로 저장하고
문서를 붙여넣겠습니다
새 파일을 하나 더 만들어서
OpenAI용으로 만들건데
파일 검색이라고 하죠
벡터 스토어를 사용할 때 필요한
문서니까요. OpenAI 페이지로 돌아가서
문서를 더 살펴보면
파일 검색 문서가 있네요
여기 편리한 복사 버튼이 있어서
이걸 사용하면 되겠죠
여기에 붙여넣기 하고
이제 Gemini에 필요한
문서는 모두 준비된 것 같습니다
MCP 서버를 구축하기 위해서
벡터 데이터베이스를 준비하는 것부터
시작해보죠. 어떤 종류의 벡터 데이터베이스를
구축할지 생각해봅시다
벡터 스토어로 가보면
새로운 벡터 데이터베이스를 위한
컨텍스트가 필요합니다
Three.js 문서를
다시 구축해보려고 합니다
벡터 스토어를 만들 때는
OpenAI 스토리지에서 생성을 클릭하고
이름을 지정하면 됩니다
Three.js-docs라고 하고
이미 하나가 있으니까
2를 붙여서 구분하고
이제 파일 추가를 클릭해서
필요한 파일들을 정의하면 됩니다
제 벡터 스토어를 구축하고 싶다면
설명란에 있는 링크로
가시면 됩니다
거기에
Three.js 문서의 모든 텍스트 파일을
업로드해뒀습니다. 이 문서들에는
필요한 모든 내용이 담겨 있어요
vibe 코딩이나 게임을 만들고 싶다면
이 문서들이 정말 귀중한 자료가 될 거예요
자, 이제 Three.js 파일들을 업로드해보죠
git clone을 사용해서
제 파일들을 가져와서
열어보고 모든 Three.js 파일들을
벡터 스토어에 넣어보겠습니다
여기 모든 파일이 있으니
이것들을 위로 드래그해서 올리고
이제 고급 옵션을 설정할 수 있는데
청크 크기를 설정할 수 있습니다
청크 크기를 2,000으로 설정하고
오버랩은 400으로 하면 될 것 같네요
이건 각 청크의 크기를 나타내는데
5개의 청크를 추출하면 이 토큰 수만큼
되는 거죠
이 정도면 충분할 것 같고
첨부를 클릭하면 이제
벡터 스토어가 구축되기 시작합니다
꽤 빠르게 처리되는 걸 볼 수 있죠
이름을 저장하면 여기 IDE에서
나중에 필요한 것들을 볼 수 있습니다
이건 나중에 사용할 것이니 일단 넘어가고,
기본적으로 Vector 저장소 설정은 완료됐습니다.
이제 실제로 이 Vector 저장소를 사용할
서버를 구축해야 합니다.
Google AI Studio로 돌아가보겠습니다.
여기 2.5 모델이 준비되어 있네요.
이제 준비된 파일들을 업로드하기만 하면 됩니다.
여기 문서와 컨텍스트가 있는데
이것들을 여기에 넣고
프롬프트를 작성해보겠습니다.
서버를 만들기 위한 프롬프트를 작성해볼게요.
프롬프트는 다음과 같습니다.
'타입스크립트로 Cursor MCP 서버를 만들어보겠습니다.
OpenAI의 파일 검색 Vector 저장소 기능을 사용하여
파일을 검색하고
Vector 저장소에서 청크를 반환하는 도구가 필요합니다.
코드를 작성하고 단계별 설정 가이드를
작성해주세요.'
이것이 우리가 할 일입니다.
물론 전체 컨텍스트도 추가했으니
이제 실행해보겠습니다.
Gemini 2.5가 설정을 도와줄 것입니다.
이건 사고와 추론이 가능한 모델이라
각 단계를 살펴볼 수 있습니다.
속도도 꽤 빠른데요,
이 영상 촬영 전에 간단히 테스트해봤는데
속도가 상당히 만족스럽네요.
일단 이걸 접어두고
결과를 기다려보겠습니다.
좋습니다. 이제 단계별 가이드가 나왔네요.
이대로 따라가보겠습니다.
Node.js가 이미 설치되어 있으니
디렉토리를 만들어보겠습니다.
단계별 가이드를 따라가볼게요.
디렉토리를 만들건데요,
이름은 'two'로 하겠습니다.
디렉토리를 만들고 Cursor에서 열어보겠습니다.
이렇게 하면 될 것 같네요.
터미널도 열어두고,
Cursor에서 이렇게 열면 되겠죠.
좋습니다. 터미널도 열어두고
첫 번째로 초기화를 해야 합니다.
그걸 먼저 진행해보죠.
패키지를 가져오고,
이제 의존성들을 설치해야 합니다.
복사와 붙여넣기가 많이 필요할 텐데,
아직 Cursor에 통합되지 않았지만
이 예제에서는 문제없을 것 같습니다.
저는 정말 기대되는데요,
통합 IDE에서 이걸 시도해보고 싶네요.
root에 config.json을 만들어보겠습니다.
새 파일을 만들고 코드를 가져와서
구조를 만들어보죠.
여기 코드를 가져올 수 있겠네요.
이제 구조를 만들어볼 텐데요,
source/index.ts, types.ts, .env 파일을
생성할 겁니다.
구조를 잡아보겠습니다.
자, 구조가 완성됐으니
다시 돌아가서
코드를 가져와보겠습니다.
.env 파일이 필요한데,
이걸 붙여넣고,
Vector 저장소 ID와 OpenAI 키가 필요합니다.
.gitignore도 단계별로 설정하고,
types.ts도 가져와서 저장하고,
이제 메인 파일인 index.ts를
복사해서 붙여넣고 저장하겠습니다.
다시 돌아가서
package.json을 만들고 빌드해보겠습니다.
돌아가서 package.json을 생성하고
빌드를 시작해보겠습니다.
package.json을 만들고 빌드를 진행할게요.
패키지를 연결하기 위해, 제가 모든 것을
설정해보겠습니다. 이게 한 번에 될지
아니면 수정이 필요할지
한번 확인해보겠습니다.
자, 이제 빌드를 시도해볼게요.
npm run
build를 실행하겠습니다.
에러가 발생했네요. 괜찮습니다.
이 에러를 복사해서 Gemini 2.5로
디버깅을 해보겠습니다. 에러 내용을
여기에 붙여넣고 실행하면
몇 가지 문제가 있다는 걸 알 수 있습니다.
수정된 새로운 index.ts를
받았네요. 이걸 복사해서 돌아가서
새로운 코드를 붙여넣어보겠습니다.
이제 더 나아보이네요.
다시 빌드해볼까요? 완벽합니다. npm
link도 실행해보죠. 좋습니다.
이제 거의 준비가 됐고
커서를 생성해야 합니다.
.cursor라는 새 폴더를 만들고
파일을 하나 생성해야 합니다.
mCP.json이라는 파일을 만들어야 할 것 같네요.
이제 MCP 연결을 설정하기 위한
JSON 파일이 필요합니다.
Gemini 2.5가 이걸 준비했는지 볼까요?
여기 MCP JSON이 있네요.
API 키는 숨기고,
API 키를 넣어야 합니다.
이걸 복사해서 JSON 파일에
build 폴더의 index.js를 가리키도록 하고
API 키와
벡터 스토어 ID가 필요합니다.
OpenAI로 돌아가서
스토리지에서
ID를 복사해오겠습니다.
돌아와서 벡터 스토어 ID를
붙여넣고 OpenAI 키를
가져와서 넣어주겠습니다.
완료했고, 이제
커서를 나갔다가 다시 들어가보겠습니다.
커서를 다시 열고 설정으로
가서 설정을 클릭하고
MCP를
활성화하면 됩니다.
OpenAI 파일 검색이
보이고 Three.js 문서 검색도 있네요.
한번 시도해볼까요?
이것들을 모두 닫고 채팅을
열어보겠습니다. 이제 테스트는
프롬프트로 해볼 수 있는데,
Three.js에서 안개를 만드는 방법에 대한
문서를 찾아보겠습니다. 에이전트를 선택하고
실행하면
MCP 도구에 연결되고
완벽하네요. Three.js에서
안개 생성 방법에 대한 쿼리를
실행할 겁니다.
이 쿼리를 받아서
벡터 스토어로 보내고
Three.js 문서에서 안개에 대한
모든 정보를 가져와서
컨텍스트로 반환할 겁니다.
잘 작동하길 바라면서 보죠.
결과가 나왔네요.
완벽합니다. 응답에서
몇 가지 결과를 얻었고
커서가 이걸 활용할 수 있습니다.
Three.js 문서에 따르면
안개를 만드는 두 가지 방법이 있고
선형 안개와 파라미터들이 있습니다.
이렇게 매우 유용한
문서를 커서로 가져올 수 있죠.
파일 검색 도구를 사용해서요.
아래로 스크롤하면 모든
벡터 스토어에서 가져온 모든 컨텍스트를
보실 수 있는데, 제가 생각하기에
에이전트 워크플로우를 구현하고 싶다면
MCP 서버를 설정할 때 작업하고자 하는
라이브러리의 문서를 활용하는 것이
매우 도움이 될 것입니다.
문서는 계속 변경되고
새로운 버전이 나오기 때문에
이러한 정보를 클라이언트 사이드
IDE나 Cursor, Clo code와 같은
Winden Surf 등의 클라이언트에
제공하면
문서를 활용한 이런 설정으로 더 나은 결과를 얻을 수 있습니다.
저는 많은 MCP 서버를 구축했는데
OpenAI 문서나 Three.js 문서를 활용했고
설정하기가 매우 쉽습니다.
여기서 보여드린 가이드만 따라하면 되는데
오늘 특히 말씀드리고 싶은 것은
Claude Gemini 2.5 Pro를 사용하면서 정말 만족스러웠다는 점입니다.
이 모델을 더 탐구해보고 싶어서 정말 기대되고
다른 프로젝트에도 시도해볼 예정입니다.
그리고 곧 이것이
Cursor에도 통합될 수 있을 것 같고
아마도 Windsurf 같은
다른 클라이언트에서도 사용할 수 있을 것 같습니다.
한번 지켜보도록 하죠.
저도 시도해보고 싶은데
이것의 가장 좋은 점은
토큰 수가 엄청나게 크다는 것이고
속도도 훌륭합니다. 벤치마크를
재미삼아 한번 살펴보겠습니다.
Live Bench를 보시면
제가 정말 좋아하는
코딩 평균을 보고
정렬해보면, 와우! 85.8점으로 최상위권입니다.
이는 GPT-3.5를 뛰어넘고
Claude 3.5를 큰 차이로 앞서고 있습니다.
이 모델을 더 탐구해보고 싶고
구글이 정말 발전했다고 봅니다.
1년 전만 해도 많은 사람들이 구글을 무시했지만
최근에 매우 훌륭한 컴백을 보여주었죠.
이 모델을 더 테스트해보는 것이 기대됩니다.
오늘 뭔가를 배우셨길 바라고
흥미로웠길 바랍니다.
이런 서버를 만드는 것은 꽤 멋진 일이고
저는 정말 MCP의 팬입니다.
다음 영상에서는
MCP에 대해 더 자세히 다뤄볼 것 같은데
OpenAI도 MCP를 채택했기 때문에
다음 영상에서 더 자세히 다뤄보도록 하겠습니다.
아마도 다음 영상에서
이 채널에서 다룰 예정이니
기대해주세요.
시청해주셔서 감사합니다.
마지막으로 한 가지 더,
제 채널의 NVIDIA GPU 추첨은
이번 주말에 있을 예정입니다.
GPU 당첨 기회를 잡으신 분들은
이번 주말 결과를 기대해주세요.
시청해주셔서 감사합니다.
곧 뵙겠습니다. 좋은 하루 보내세요.