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