[00:00]
모델 컨텍스트 프로토콜이
[00:02]
제 X 타임라인과 DM에서
[00:05]
많은 관심을 받고 있는 것 같습니다.
[00:08]
MCP에 관심을 보이는 분들이 많은데
[00:10]
대부분 실제 잠재력을 모르거나
[00:13]
시작하는 방법을 모르시더라고요.
[00:15]
맥락을 설명해드리자면,
[00:18]
작년 말 Anthropic이
[00:21]
놀라운 오픈소스 프로젝트를 공개했습니다.
[00:23]
MCP, 즉 Model Context Protocol인데요.
[00:26]
AI 어시스턴트를 데이터 소스와
[00:28]
연결하기 위한 새로운 표준입니다.
[00:31]
콘텐츠 저장소나 비즈니스 도구,
[00:33]
개발 환경 등과 연결할 수 있죠.
[00:36]
쉽게 말하면 AI가 사용할 수 있는
[00:39]
도구나 플러그인이라고 생각하시면 됩니다.
[00:41]
필수 기능에 대한 접근을 간소화하죠.
[00:43]
MCP로 무엇을 할 수 있는지 보여드리겠습니다.
[00:45]
21st Dev의 이 플러그인을 보세요.
[00:48]
Saras firm cloud에서 만든 플러그인인데요,
[00:51]
이것은 강력한 컴포넌트 라이브러리와 연동되는 MCP입니다.
[00:54]
프론트엔드 개발에 필요한 요소들을
[00:57]
쉽게 찾고 커스터마이즈할 수 있게 해주죠.
[00:59]
이 경우에 MCP는
[01:02]
AI를 실시간 데이터와 연결하고,
[01:05]
프론트엔드 개발을 더욱 효율적으로 만듭니다.
[01:07]
여기 또 다른 MCP 서버가 있는데,
[01:09]
이것은 Cloud AI가
[01:11]
3D 디자인 도구인 Blender와 직접 통신할 수 있게 해줍니다.
[01:14]
이 통합을 통해 Claude에게
[01:16]
간단히 프롬프트를 입력하면
[01:18]
미래적인 도시 스카이라인 같은 것을
[01:21]
Blender에서 3D 장면으로 생성할 수 있습니다.
[01:24]
이 경우 MCP 서버는
[01:26]
Claude와 Blender를 연결하여
[01:29]
AI가 명령을 보내고
[01:31]
데이터를 받을 수 있게 해줍니다.
[01:33]
이 데모들을 통해
[01:35]
명확한 아이디어를 얻으셨길 바랍니다.
[01:37]
아직 이해가 안 되셨다면,
[01:39]
영상에서 더 자세히 살펴볼 예정이니 걱정마세요.
[01:42]
본질적으로 이것은
[01:43]
매우 유용한 도구입니다.
[01:46]
AI 시스템을 파일, 앱, 데이터베이스 같은
[01:49]
데이터 소스와 연결하는 것을
[01:51]
간단하고 표준화된 방식으로 만들어주거든요.
[01:54]
모든 도구마다 맞춤 연결을
[01:56]
따로 만들 필요 없이,
[01:58]
MCP 서버가 범용 플러그처럼 작동하여
[02:01]
시간과 노력을 절약해줍니다.
[02:04]
AI 개발을 간소화하고
[02:06]
효율성을 높이며,
[02:08]
더 나은 데이터 접근성으로
[02:10]
AI를 더 스마트하게 만들 수 있죠.
[02:13]
모든 것이 안전하고 확장 가능합니다.
[02:15]
오늘은 MCP 서버를
[02:17]
Klein, Windsurf, Cursor와 같은
[02:20]
다양한 AI 에이전트와 함께 사용하는 방법을 보여드리겠습니다.
[02:23]
본격적으로 시작하기 전에,
[02:26]
오늘의 스폰서를 소개해드리겠습니다.
[02:27]
Code Gate입니다.
[02:30]
AI 코딩 어시스턴트를 위한
[02:33]
최고의 보안 솔루션이자
[02:35]
AI 프레임워크로,
[02:37]
코드를 안전하게 보호하고 AI 도구를 쉽게 관리하며
[02:40]
더 이상 비밀 유출 걱정이 없습니다.
[02:43]
가장 좋은 점은 완전한 오픈소스라는 거죠.
[02:45]
여러 모델을 사용하거나
[02:47]
민감한 데이터를 관리할 때도
[02:49]
Code Gate는 모든 AI 상호작용을 중앙화하고 보호합니다.
[02:52]
작업 공간 관리부터 실시간 위험 감지까지,
[02:55]
Code Gate는 여러분의 개발 과정이
[02:58]
안전하게 유지되도록 보장합니다.
[03:00]
개발을 안전하게 유지하면서
[03:02]
안전하고 효율적인 개발을 시작해보세요.
[03:05]
간단한 Docker 명령어로
[03:07]
AI 기반 코딩 지원을 보호할 수 있습니다.
[03:09]
CodeGate로 당신의 코드를 안전하게 지키세요.
[03:11]
당신의 코드는 안전할 가치가 있습니다.
[03:14]
Stack Lock의 CodeGate를 방문해보세요.
[03:17]
개발을 단순화하고 강화하세요.
[03:19]
아래 설명란의 링크를 통해
[03:20]
먼저 Windsurf로 시작하여
[03:21]
이를 설정하는 방법을 보여드리겠습니다.
[03:24]
그 다음 Cursor, 마지막으로 Clein을 보여드릴 건데
[03:26]
이것이 MCP 서버를 사용하는 최선의 방법입니다.
[03:28]
Windsurf를 사용하실 경우
[03:31]
설정 탭으로 이동하여
[03:34]
Windsurf를 통해 사용하실 수 있습니다.
[03:36]
설정 탭으로 이동한 다음
[03:37]
Cascade 설정으로 가시면
[03:40]
다양한 모델 컨텍스트 프로토콜 서버를
[03:43]
시작할 수 있습니다. 제공된 템플릿을
[03:45]
사용하거나 raw 설정 파일을 통해
[03:47]
MCP 서버를 직접 편집할 수 있습니다.
[03:50]
초보 개발자의 경우
[03:53]
설정이 약간 어려울 수 있지만
[03:54]
이미 생성된 다양한 템플릿을
[03:56]
사용할 수 있어 쉽게 사용 가능합니다.
[03:58]
미리 만들어진 템플릿을 사용할 수 있지만
[04:00]
지금 말씀드리자면
[04:02]
Cursor나 Clein에 비해
[04:05]
다른 에이전트들처럼
[04:06]
템플릿이 많지는 않습니다.
[04:08]
Cursor나 Clein에 비해 적은 편이죠.
[04:11]
GitHub School과 같은 여러 서버 템플릿이 있어서
[04:28]
AI 에이전트가 프롬프트를 기반으로
[04:31]
원하는 MCP 서버를 생성할 수 있게 해줍니다.
[04:34]
하지만 오늘 영상을 만든 주된 이유는
[04:36]
Klein과 Rot code 때문입니다.
[04:38]
Klein이나 Rot code를 모르시는 분들을 위해
[04:40]
설명드리자면, 이는 기본적으로 자율적인 AI 에이전트입니다.
[04:43]
저는 Klein을 선호하는데
[04:44]
Rot code보다 MCP 서버와의
[04:47]
호환성이 더 좋기 때문입니다.
[04:49]
Klein이 자체 마켓플레이스를 가지고 있어
[04:52]
MCP 서버와 더 잘 작동합니다.
[04:54]
이 마켓플레이스에서는
[04:56]
이미 만들어진 템플릿에
[04:58]
바로 접근할 수 있습니다.
[05:00]
Windsurf나 Cursor처럼
[05:02]
MCP 서버 설정을 위해
[05:04]
번거로운 과정을 거칠 필요가 없죠.
[05:07]
이미 만들어진 템플릿들이
[05:09]
다양한 카테고리로 준비되어 있어서
[05:11]
브라우저 자동화부터
[05:13]
데이터베이스까지 접근할 수 있습니다.
[05:16]
수많은 카테고리의 서버에 접근할 수 있죠.
[05:19]
제가 설치한 것들 중
[05:20]
몇 가지를 보여드렸는데
[05:22]
오늘은 가장 좋은 것들을
[05:23]
소개해드리고
[05:25]
사용법과 함께
[05:27]
Klein으로 직접 만드는 방법도
[05:29]
알려드리겠습니다.
[05:31]
Klein이 없으시다면
[05:33]
VS Code 마켓플레이스에서
[05:34]
무료로 쉽게 설치할 수 있습니다.
[05:37]
앱 비용 없이
[05:38]
완전히 무료로 설치 가능하며
[05:40]
더욱 좋은 점은 MCP 서버를
[05:43]
무료로 만들고 접근할 수 있다는 것입니다.
[05:46]
설정 탭으로 가서
[05:48]
API 제공자를 선택한 다음
[05:50]
VS Code LM API를 선택하면
[05:53]
Copilot API 키를 무료로 사용할 수 있습니다.
[05:56]
별도의 비용 지불 없이
[06:00]
완전히 무료로 이용 가능합니다.
[06:02]
이것에는 월별 제한이 있습니다.
[06:04]
그점을 유의해 주시고,
[06:05]
어떤 종류의 MCP 서버든 생성할 수 있습니다.
[06:09]
예를 들어, Node.js의 문서를 추출하는
[06:12]
MCP 서버를 만들고 싶다면
[06:13]
Node.js 문서에서 필요한 내용을 가져오고
[06:16]
필수적인 패키지들을 설치할 것입니다.
[06:19]
이 서버를 실행하는 데 필요한
[06:21]
패키지들이 설치되고 있는 것을
[06:23]
확인할 수 있습니다.
[06:25]
이것은 본질적으로 제가
[06:27]
Node.js 문서에서 파일 내용이나 메타데이터를
[06:30]
검색하는 데 도움을 주는 MCP 서버입니다.
[06:33]
대규모 언어 모델은
[06:34]
항상 최신 상태를 유지할 수 없지만,
[06:36]
이 경우에는 데이터 소스를
[06:38]
AI와 연결하여 Node.js를
[06:40]
참조할 수 있게 됩니다.
[06:43]
MCP 서버가 생성된 것 같고
[06:45]
이제 실제로 접근할 수 있습니다.
[06:48]
접근하기 위해서는 MCP 서버로 가서
[06:49]
설치된 항목으로 이동한 다음
[06:52]
방금 생성한 Node.js를 찾아보면 됩니다.
[06:54]
이것이 바로 생성된 것으로
[06:57]
모듈 문서 가져오기와
[06:59]
문서 검색과 같은 기능이 있습니다.
[07:01]
두 개의 개별 도구를 만들었죠.
[07:03]
이제 우리가 할 수 있는 것은
[07:05]
Cine으로 가서 다시 채팅으로 돌아가
[07:09]
'fs 모듈 문서의 내용을 보여줄 수 있나요?'라고
[07:12]
요청하면 생성된 MCP 서버를 사용하여
[07:14]
정확한 내용을 검색할 것입니다.
[07:17]
생성된 서버가 올바른 내용을
[07:19]
가져오는 것을 볼 수 있습니다.
[07:22]
모듈 문서를 가져오고 있고
[07:24]
요청하고 검색한 내용의 맥락을
[07:27]
제공하고 있습니다.
[07:30]
이 모든 것이 우리가 개발한 도구 덕분인데,
[07:32]
이 도구는 검색하고
[07:33]
올바른 모듈을 제공하는 기능이 있습니다.
[07:35]
당신을 위해
[07:37]
보시다시피 제가 찾고 있던 내용에 기반한
[07:39]
정확한 문서를 제공했습니다.
[07:41]
여기 또 다른 유용한 MCP 서버가 있는데
[07:43]
이것은 제가 최근에 마켓플레이스를 통해
[07:47]
설치한 것입니다.
[07:48]
이것은 브라우저 자동화를
[07:51]
도와주는 서버입니다.
[07:53]
Puppeteer인데, 이를 통해
[07:56]
스크린샷을 찍을 수 있고
[07:58]
실시간으로 브라우저 자동화를
[08:01]
수행할 수 있습니다.
[08:04]
놀라운 점은 제가
[08:07]
Puppeteer에 MCP 서버를 활용하라는
[08:09]
프롬프트를 보냈고, 제 채널에서
[08:11]
지난 7일 동안 가장 인기 있는 영상을
[08:14]
찾으라고 했더니, 도구를 사용해서
[08:17]
스크랩하여 보여주었는데,
[08:19]
Manis 영상이 가장 인기있었고 2일 만에 75K 조회수를
[08:22]
기록했다는 것을 알려줬습니다.
[08:24]
이것은 제가 꼭 추천하는 것인데,
[08:25]
정말 대단한 것은 제가
[08:27]
이 MCP 서버를 단 몇 분 만에
[08:29]
만들 수 있었고
[08:31]
이런 내용을 검색할 수 있다는 겁니다.
[08:34]
생각해보세요, 이것을
[08:36]
더 복잡한 작업으로 지시할 수 있어서
[08:37]
여러 페이지를 스크랩하고
[08:40]
로그를 제공할 수도 있습니다.
[08:43]
또 다른 유용한 MCP 서버는
[08:45]
Supabase입니다. 이것은
[08:47]
Supabase 프로토콜의 MCP 서버를 사용하여
[08:51]
간단한 데이터베이스 연결을
[08:54]
할 수 있게 해주고, 기본적으로
[08:56]
클라이언트 내에서
[08:58]
자연스러운 대화를 가능하게 합니다.
[09:01]
복잡한 쿼리가 필요 없이 AI에게 요청하여
[09:03]
리포트를 생성하거나 데이터베이스를
[09:06]
분석할 수 있습니다. 심지어
[09:08]
풀스택 앱을 쉽게 만들 수 있는데,
[09:10]
이 통합으로 데이터베이스와
[09:12]
시스템 작업이 가능합니다.
[09:15]
이것이 Model Context Protocol의
[09:17]
핵심입니다. Anthropic 팀에게 큰 박수를,
[09:19]
오픈소스로 만들어준 것과
[09:22]
Client 팀이
[09:23]
이 마켓플레이스를 개발하여
[09:26]
애드온과 플러그인으로
[09:28]
워크플로우를 향상시킬 수 있게 해준 것에 감사합니다.
[09:30]
이것들을 사용하시기를 추천드립니다.
[09:33]
AI가 더 나은 맥락을 얻고
[09:35]
이러한 도구들을 활용하여
[09:38]
작업을 더 효율적이고
[09:40]
생산적으로 실행하는 데 도움이 될 것입니다.
[09:42]
오늘 영상에서 사용한
[09:43]
모든 링크는 설명란에 남겨두겠습니다.
[09:45]
뉴스레터를 구독하시고
[09:46]
Patreon과 Twitter도 팔로우해 주세요.
[09:48]
마지막으로 구독과
[09:50]
알림 설정, 좋아요 부탁드리며
[09:51]
이전 영상들도
[09:53]
확인해 주세요. 많은
[09:54]
유익한 콘텐츠가 있습니다.
[09:56]
이것으로 마치겠습니다.
[09:58]
시청해 주셔서 감사합니다.
[09:59]
좋은 하루 보내시고
[10:01]
곧 다시 만나요. 안녕히 계세요!