10분 만에 커스텀 MCP 서버 구축 및 배포 방법

Developers Digest 구독자 35,400명

요약

이 영상은 MCP 서버(모델 컨텍스트 프로토콜 서버)를 Cloudflare Workers를 통해 손쉽게 구축하고 배포하는 방법을 단계별로 설명합니다. 초기 프로젝트 생성부터 함수 구현, 문서화, 그리고 CLA 데스크탑 앱 및 Cursor, Windserve와의 통합까지 전 과정을 다룹니다. 또한, 실제 'say hello' 및 '랜덤 이미지 생성' 기능의 예시를 통해 배포 후 결과를 직접 확인할 수 있도록 도와줍니다. 영상 후반부에는 brilliant.org 스폰서 안내와 서버 확장성의 장점도 소개됩니다.

주요 키워드

mCP 서버 Cloudflare Workers 배포 함수 호출 Doc String JSON Payload CLA 데스크탑 앱 Cursor Windserve brilliant.org

하이라이트

🔑 영상 초반에 MCP 서버의 기본 개념과 기능 호출 방식에 대해 설명하며 전체 맥락을 제공함.
⚡️ Cloudflare Workers를 사용한 서버 배포 과정을 npx 및 mpw 명령어를 통해 단계별로 시연함.
🚀 'say hello'와 '랜덤 이미지 생성' 기능의 구현 예시로 실제 동작하는 서버 모습을 확인할 수 있음.
🌟 CLA 데스크탑 앱과 Cursor, Windserve와의 연동 과정을 통해 다양한 플랫폼에서의 적용 방법을 소개함.
📌 brilliant.org 스폰서 메시지를 통해 학습과 AI 기술 발전에 대한 추가 정보와 혜택을 전달함.

용어 설명

mCP 서버

모델 컨텍스트 프로토콜(Model Context Protocol) 서버로, 대규모 언어 모델과 상호작용하여 도구 호출 및 데이터 처리 등을 수행하는 서버를 의미합니다.

Cloudflare Workers

Cloudflare가 제공하는 서버리스 컴퓨팅 플랫폼으로, 별도의 서버 관리 없이 코드 실행 및 배포가 가능한 서비스입니다.

Doc String

함수가 수행하는 작업, 입력 파라미터, 반환하는 결과에 대해 설명하는 주석으로, 대규모 언어 모델에 해당 함수의 기능을 전달하는 역할을 합니다.

JSON Payload

서버와 클라이언트 간에 데이터를 전달하기 위해 사용되는 JSON 형식의 데이터 패키지입니다.

CLA 데스크탑 앱

mCP 서버와 연동하여 함수 호출과 도구 사용 등 상호작용을 관리하는 클라이언트 인터페이스를 제공하는 애플리케이션입니다.

영상은 MCP 서버 구축과 배포 방법에 대한 간단한 소개로 시작됩니다. 전반적인 목표와 사용될 기술들을 미리 설명합니다.

[00:00] MCP 서버 구축과 배포에 대한 소개. Model Context Protocol은 Anthropic이 개발한 프로토콜로, Cursor와 Winsrv에 통합되어 있음을 설명.

mCP 서버가 어떻게 작동하는지, 클라이언트 앱이 서버에 요청하여 도구 목록과 함수 호출을 처리하는 과정을 설명합니다. 이 부분에서는 JSON 페이로드와 함수 호출 방식의 인과 관계가 강조됩니다.

[00:44] Claude 데스크톱 앱과 MCP 서버 간의 상호작용 방식 설명. 도구 목록 요청부터 JSON 페이로드 전송까지의 프로세스 소개.

[01:17] 대규모 언어 모델(Sonnet, Haiku, Opus)이 함수를 호출하고 결과를 반환하는 과정 설명.

[02:00] 프로젝트 설정 방법 소개. index.ts 파일에서 API 통합 및 함수 구현 방법 설명.

npx 커맨드를 통해 Cloudflare Workers 템플릿으로 프로젝트를 초기화하고, mCP 데모 서버를 생성하는 과정을 시연합니다. 배포 전 초기 설정과 인증 절차를 안내합니다.

[02:29] Cloudflare 초기 설정 및 계정 생성 과정 안내.

[02:38] Cloudflare의 무료 티어 소개와 헬로 월드 템플릿을 사용한 타입스크립트 구현 시작. 자바스크립트나 파이썬(베타) 버전도 사용 가능함을 설명.

[02:56] 프로젝트 초기 설정 과정: git 설정과 애플리케이션 배포 옵션을 건너뛰고 MCP 데모 디렉토리에서 workers MCP 설정 시작.

프로젝트 디렉토리 이동, 워커 설정 및 서버 이름 지정 과정을 설명합니다. 설정 파일에 MCP 서버 정보가 작성되는 과정을 통해 구성원 간 연동이 이루어집니다.

[03:16] NPM 스크립트 설정과 Wrangler deploy 구성. index.ts 파일 내용 교체 및 MCP 서버 배포 완료.

[03:49] MCP 서버 이름 지정 및 Claude 데스크톱 구성 파일에 설정 저장. 기존 데모 프로젝트와 새로운 설정 비교.

[04:31] 프로젝트 구조 설명: 소스 테스트, 디스크 폴더, index.ts의 기본 MCP 서버 구현과 독스트링의 중요성 강조.

[05:07] 독스트링 작성의 중요성에 대해 설명하며, 함수의 목적, 매개변수, 반환 값 등을 명확히 문서화해야 함을 강조합니다.

index.ts 파일에서 간단한 'say hello' 함수 구현 예시와 함께, Doc String을 작성하여 대규모 언어 모델에 함수 기능을 정확히 전달하는 중요성을 강조합니다. 각 함수의 입력과 출력 포맷을 명확히 합니다.

[05:26] Claude 데스크톱 앱에서 MCP 도구를 시연하며, say hello 기능의 구현과 실행 과정을 보여줍니다.

[05:57] MCP의 작동 방식을 설명하고, 의도 감지부터 도구 선택, 응답 생성까지의 프로세스를 상세히 다룹니다.

[06:25] Cursor를 사용한 랜덤 이미지 생성기 구현과 Cloudflare 워커로의 배포 과정을 시연합니다.

MCP 서버가 CLA 데스크탑 앱에 등록되며, 'say hello' 기능이 정상 작동하는지 실시간으로 확인하는 과정을 보여줍니다. 사용자 인터페이스에서 도구 호출 결과가 나타나는 모습을 시연합니다.

[07:02] Brilliant.org 소개와 함께 그들의 혁신적인 학습 방식, 특히 AI 관련 과정의 특징을 설명합니다.

brilliant.org의 스폰서 메시지를 통해 교육 플랫폼과 AI 기술 발전에 대해 소개합니다. Cloudflare Workers의 높은 확장성과 수요에 따른 자동 스케일링을 강조합니다.

[07:41] 브릴리언트는 학자가 아니더라도 누구나 이용할 수 있는 분석적 사고력 향상 플랫폼입니다. 출퇴근길이나 여가시간에 효율적인 학습이 가능합니다.

[07:58] brilliant.org/SDdevelopers에서 30일 무료 체험과 연간 구독 20% 할인 혜택을 제공합니다.

[08:07] 클라우드플레어 워커의 장점은 수요에 따른 유연한 확장성과 사용량 기반 과금 체계입니다. AI 프로젝트에 특히 적합한 선택입니다.

[08:36] 프로젝트에는 테스트 파일 작성 기능과 자동 문서 생성 기능이 포함되어 있어 효율적인 개발이 가능합니다.

[09:05] Cloud Cursor와 Wind Serve에서 MCP 서버 설정 방법을 설명합니다. 각 서버는 고유한 키와 실행 명령어를 가집니다.

[09:34] 새로운 MCP 서버를 추가하고 설정하는 구체적인 과정을 단계별로 보여줍니다.

[10:15] 커서(Cursor)에서 MCP 서버 연결이 성공적으로 이루어지면 녹색 점으로 표시되며, 채팅 뷰나 작성기 뷰에서 사용 가능한 도구들을 확인할 수 있습니다.

[10:34] MCP(Message Context Protocol)의 핵심 기능들을 살펴보면, hello 함수와 무작위 이미지 생성 함수가 구현되어 있습니다.

[10:45] Winsurf에서 MCP 설정 방법을 설명하며, Cascade 패널에서 MCP를 구성하고 새로운 서버를 추가하는 과정을 보여줍니다.

Cursor와 Windserve 인터페이스 내에서 MCP 서버 설정 방법을 상세하게 설명합니다. 명령 팔레트를 이용한 설정 등록과 테스트 결과 확인 과정을 안내합니다.

[11:22] 실제로 MCP 데모를 통해 인사 메시지를 보내고 무작위 이미지를 생성하는 기능을 시연합니다.

[00:00] 이 영상에서는

[00:01] 여러분이 어떻게 자신만의

[00:02] MCP 서버를 몇 분 만에

[00:05] 구축할 수 있는지 보여드리겠습니다.

[00:06] Model Context Protocol에 대해 모르시는 분들을 위해 설명드리자면,

[00:09] 이것은 작년 말에

[00:10] Anthropic에서 출시된 이후

[00:13] 상당한 관심을 받기 시작한

[00:14] 프로토콜입니다. 처음에는

[00:16] Anthropic 데스크톱 앱에서

[00:18] 시작되었지만, 그 이후로

[00:21] Cursor와 Winsrv 모두에

[00:22] 통합되는 것을 보았습니다. 이 영상에서

[00:25] 제가 보여드릴 것은

[00:26] MCP 서버를 Cloudflare에 배포하는 방법입니다.

[00:28] Cloudflare에서 공개한

[00:31] 이 훌륭한 리포지토리는

[00:33] 사실 충분한 관심을

[00:34] 받지 못했다고 생각합니다. 이것이

[00:36] MCP 서버 설정과 배포 방법을 가장

[00:39] 명확하게 보여주기 때문입니다. 본격적으로 시작하기 전에

[00:41] MCP가 어떻게 작동하는지

[00:42] 간단히 설명해 드리겠습니다. 예를 들어

[00:44] Claude 데스크톱 앱을 사용하는

[00:46] 사용자가 있다고 가정해보겠습니다. Claude 데스크톱 앱은

[00:49] 앱에 연결된 MCP 서버에

[00:51] 요청을 보내게 됩니다.

[00:53] 그리고 첫 번째로

[00:55] 서버에게

[00:56] 사용 가능한 도구 목록을

[00:58] 요청하게 됩니다.

[01:00] 또한 대규모 언어 모델에

[01:02] JSON 페이로드가 전송되어

[01:06] 모델에게 사용 가능한 도구들을

[01:09] 알려주게 됩니다.

[01:11] 이러한 도구들을 사용하려는 의도가 감지되면

[01:13] 해당 도구를 호출하라는 신호를 보냅니다.

[01:17] Claude 내에서

[01:19] 사용 중인 대규모 언어 모델이

[01:21] Sonnet이든 Haiku든

[01:23] 또는 Opus이든 간에

[01:25] 함수 호출이 필요하다고 판단하면

[01:28] MCP 서버로

[01:29] 해당 요청을 전송하게 됩니다.

[01:32] 이 요청에는 도구에서 필요로 하는

[01:35] 파라미터들이나

[01:36] 선택적 매개변수들이 포함된

[01:39] 페이로드가 포함될 수 있습니다.

[01:41] 그 다음 MCP 서버에서

[01:43] 함수가 호출되고, 함수가

[01:46] 필요한 작업을 완료하면

[01:48] 정보를 검색하거나

[01:50] 작업을 수행하고 정보를

[01:52] 업데이트할 수도 있습니다.

[01:54] 이 모든 것이 완료되면

[01:55] 도구 응답을 Claude 데스크톱 앱으로

[01:58] 다시 전송합니다. 이것이 작동하는 방식이며

[02:00] 설정을 완료하고 나면

[02:02] 얼마나 간단한지 보실 수 있습니다.

[02:04] 복잡해 보일 수 있지만,

[02:06] 프로젝트를 초기화하고 나면

[02:08] 매우 간단합니다.

[02:10] index.ts 파일 안에 함수들이

[02:13] 준비될 것이고, 이는

[02:14] 기존 API를 래핑하거나

[02:17] 새로운 API를 만드는 등 무엇이든 될 수 있습니다.

[02:19] 먼저 할 일은

[02:21] npx create cloudflare@latest를

[02:23] 실행하고 이름을 mcp-demo로

[02:26] 지정하는 것입니다.

[02:29] 처음 설치하는 경우이고

[02:30] Cloudflare를 사용한 적이 없다면

[02:32] 계정을 만들고

[02:34] 인증 단계를 거쳐야 하며

[02:36] 관대한 무료 티어도 제공됩니다.

[02:38] Cloudflare에서도 무료 티어를 제공하고 있어서

[02:40] 이 모든 것을 무료로 시도해볼 수 있습니다.

[02:42] 이 예제에서는

[02:43] 헬로 월드 템플릿으로 시작하겠습니다.

[02:45] 이 예제에서는

[02:47] 타입스크립트로 구현하는 방법을

[02:48] 보여드리겠지만, 자바스크립트로도

[02:50] 구현할 수 있고 현재 베타 버전인

[02:52] 파이썬 버전도 있습니다.

[02:54] 모든 것을 설치하는데 잠시 시간이 걸립니다.

[02:56] git을 설정하는 옵션이 있는데

[02:58] 이번에는 설정하지 않겠습니다.

[03:00] 그리고 애플리케이션을 배포하는

[03:01] 옵션도 있지만 지금은

[03:03] 하지 않도록 하겠습니다.

[03:04] 이제 준비가 되었으니

[03:06] MCP 데모 디렉토리로

[03:08] 이동하겠습니다.

[03:11] 그리고 나서 NPX

[03:12] workers MCP를 실행하고 설정을 시작하겠습니다.

[03:16] 다음으로 화면에

[03:17] NPM 스크립트를 찾았다는 메시지가 표시되는데

[03:19] deploy 키에 Wrangler deploy가

[03:21] 포함되어 있다고 합니다. 이제 업데이트를

[03:23] 진행하도록 하겠습니다. 우리가 하는 것은

[03:25] 일반적인 Wrangler deploy 대신

[03:26] 문자열을 생성하는 것인데

[03:28] 곧 보시게 될 것입니다.

[03:30] 진행을 클릭하면

[03:31] index.ts의 내용을

[03:33] 교체할 것입니다.

[03:35] 여기서 코드가 배포되는 것을 볼 수 있고

[03:37] MCP 데모가 업로드되었습니다.

[03:40] 이제 우리의 워커가

[03:42] MCP 서버에 성공적으로 배포되었습니다.

[03:44] 이제 MCP 서버의 이름을

[03:47] 원하는 대로 지정할 수 있습니다.

[03:49] 저는 이번 경우에는

[03:50] MCP 데모라고 하겠습니다.

[03:52] 이름을 지정하면

[03:54] Claude 데스크톱 구성 파일에

[03:56] 작성하게 됩니다.

[03:59] 워커의 이름을 지정하면

[04:01] 구성이 Claude 데스크톱 구성

[04:03] 객체에 작성되는 것을 보실 수 있습니다.

[04:06] 여기가 모든 MCP 서버들이 있는 곳입니다.

[04:08] 저는 이미 여기에 다른 데모가 있는데

[04:11] 이는 이 영상을 녹화하기 전에

[04:13] 작업하던 또 다른 Cloudflare 워커의

[04:15] 예제입니다.

[04:17] 그리고 이것이

[04:19] 우리가 방금 설정한 것입니다.

[04:21] 여기에는 실행 방법에 대한 지침이 있고

[04:23] 또한 이것이 주로

[04:24] 우리가 Wind serve에서 사용할

[04:27] 예제입니다.

[04:28] 인터페이스에서 구성하고 나면

[04:31] 이제 우리 프로젝트를 살펴보면

[04:33] 매우 간단합니다.

[04:34] 소스 테스트와 디스크 폴더가 있고

[04:36] 먼저 index.ts를 살펴보면

[04:39] 이것이 가장 기본적인 MCP 서버 구현입니다.

[04:41] 여기에는 Cloudflare 워커가 있고

[04:44] 이 클래스 구조가 있습니다.

[04:46] 이것의 좋은 점은

[04:48] 독스트링으로 함수가 하는 일을

[04:50] 정의할 수 있다는 것입니다.

[04:53] 이는 매우 중요합니다. 왜냐하면

[04:56] 이것이 LLM에게

[04:58] 그 함수가 실제로 무엇을 하는지

[05:00] 알려주는 부분이기 때문입니다.

[05:02] 이 부분이 바로

[05:04] 대규모 언어 모델에 노출되는 부분입니다.

[05:07] 함수를 작성할 때 중요한 것은

[05:08] 독스트링을 작성할 때

[05:10] 함수가 무엇을 하는지 명확히 설명해야 합니다

[05:13] 필요한 매개변수가 무엇이고

[05:15] 마지막으로 함수나 서비스가

[05:17] 어떤 형식으로 무엇을 반환하는지도 포함해야 합니다

[05:19] 여기서는 간단한 say hello 함수가 있는데

[05:21] 반드시 해야 할 한 가지는

[05:23] 서버를 재시작하는 것입니다

[05:25] 지금부터 제가 할 것은

[05:26] Claude 데스크톱 앱을 열어보겠습니다

[05:27] Claude 데스크톱 앱을 열면

[05:29] MCP 도구가 하나 있는 것을 볼 수 있습니다

[05:32] 현재는 say hello만 있는데

[05:34] 이것은 새로운 MCP 서버에서 보내는

[05:37] 친근한 인사말입니다

[05:38] MCP 데모 서버에서 오는 것이죠

[05:40] 워커의 독스트링을 보면

[05:43] 새로운 워커의 MCP 서버에서 보내는

[05:46] 친근한 인사말이라고 되어 있습니다

[05:47] 이제 'developers digest에게 인사해줘'라고

[05:49] 입력하면 어떻게 되는지 보여드리겠습니다

[05:52] 이것이 실행되면 인사를 하려는 의도를 감지하고

[05:55] 우리가 요청과 함께 보낸

[05:57] 도구 목록을 확인할 것입니다

[05:59] 그리고 이 도구들 중에서

[06:01] say hello를 사용하기로 결정합니다

[06:04] 여기서 우리가 할 수 있는 것은

[06:06] 채팅을 허용하는 것인데

[06:08] 여기서 우리는

[06:10] 이름으로 'developers digest'를 페이로드로 보내고

[06:12] 서버로부터 받은 페이로드에는

[06:14] 'MCP 워커에서 developers digest에게 인사'라는

[06:17] 응답이 포함되어 있습니다

[06:18] 그리고 이 응답을 가지고

[06:20] 언어 모델이 새로운 응답을 생성할 것입니다

[06:23] 이것이 MCP의 기본 작동 방식입니다

[06:25] 이제 Cursor에게 랜덤 이미지 생성기를 요청해보겠습니다

[06:28] 여기서 독스트링과

[06:31] get random image 함수를

[06:32] 생성하는 것을 볼 수 있습니다

[06:35] 이것을 저장하고

[06:36] package.json을 확인해보면

[06:38] 앞서 본 배포 스크립트가 있습니다

[06:40] 이제 npm run deploy를 실행하면

[06:43] MCP 서버가 업데이트되어

[06:45] 랜덤 이미지 생성기 기능이 추가됩니다

[06:47] 흥미로운 점은

[06:50] Cloud 데스크톱 앱을 재시작해야 하지만

[06:52] 앱을 재시작하면

[06:54] say hello와 랜덤 이미지 생성기가

[06:56] 모두 표시됩니다

[06:58] 이제 Cloudflare 워커에 배포되었습니다

[07:00] 계속하기 전에

[07:02] 오늘의 스폰서 Brilliant.org를 소개하겠습니다

[07:04] Brilliant는 AI 발전과 완벽하게 조화를 이루는

[07:07] 새로운 학습 방식을 제공합니다

[07:09] 여러분의 마음을 위한

[07:10] 피트니스 센터를 상상해보세요

[07:13] 모든 수업이 여러분의

[07:14] 정신적 능력을 향상시켜줍니다

[07:17] 수동적으로 앉아있는 대신

[07:18] 직접 도전적인 문제들을

[07:20] 해결해나갑니다

[07:22] 명확한 설명과 함께요

[07:24] 연구에 따르면 이 방식은

[07:26] 기존 학습 방법보다

[07:29] 6배 더 효과적입니다

[07:30] 최근에 출시된

[07:32] 대규모 언어 모델 과정이

[07:34] 특히 제 관심을 끌었는데

[07:36] AI 기술에 대한 포괄적이면서도

[07:39] 이해하기 쉬운 탐구를 제공합니다

[07:41] 브릴리언트는 학자가 아니어도

[07:43] 누구나 이용할 수 있도록 설계되었으며

[07:45] 분석적 사고력을 향상시키고

[07:48] 현대적 개념에 대한

[07:49] 이해를 높이고자 하는 모든 이를 위한 것입니다.

[07:51] 출퇴근길이나 점심시간, 저녁 여가시간에

[07:54] 브릴리언트는 자투리 시간을

[07:56] 가치있는 학습 기회로 바꿔줍니다.

[07:58] brilliant.org/SDdevelopers에 방문하시면

[08:01] 30일 무료 체험을 할 수 있고,

[08:03] 가입하시면 연간 구독료의

[08:05] 20% 할인을 받으실 수 있습니다.

[08:07] 워커를 사용할 때의 장점은

[08:10] 수요에 따라 확장이 가능하다는 점입니다.

[08:12] 사용자가 10명이든 10만 명이든

[08:15] 몇 시간 안에

[08:17] 수요에 맞춰 확장할 수 있죠.

[08:19] 워커의 정말 좋은 점은

[08:21] 사용하지 않을 때는

[08:23] 요금이 청구되지 않지만

[08:25] 갑자기 프로젝트가 성장하게 될 때

[08:27] AI 분야에서는 자주 있는 일인데

[08:29] 클라우드플레어 워커는

[08:32] 엔드포인트와

[08:34] MCP 서버 같은 것들을 설정하는데

[08:36] 매우 좋은 선택입니다.

[08:37] 프로젝트 내부에 대해

[08:39] 몇 가지 더 살펴보면

[08:41] 테스트 파일이 있어서

[08:42] 다양한 테스트를 작성할 수 있고

[08:43] 문서 생성 명령어는

[08:45] 영상 초반에 보았던 대로

[08:47] 워커에 대한 문서를 생성합니다.

[08:50] 여기에는 생성된

[08:52] 모든 문서가 포함되어 있습니다.

[08:54] '안녕하세요'라는 따뜻한 인사말처럼

[08:56] 우리가 Claw UI에서 봤던

[08:57] 모든 요소들이 있고

[09:00] 백엔드에서

[09:01] 대규모 언어 모델로

[09:03] 전송되는 내용도 있습니다.

[09:05] 다음은 Cloud Cursor와 Wind Serve에서

[09:08] 이것들을 설정하는 방법입니다.

[09:10] 여기 클라우드 데스크톱 설정이 있는데

[09:12] MCP 서버들이 있고

[09:14] 각 서버마다 고유한 키가 있습니다.

[09:17] 이 경우에는

[09:19] MCP 데모가 있고

[09:21] 이것을 실행하는 명령어와

[09:23] 접근 방법을 보여줍니다.

[09:25] Mac에서 Command Shift P를 누르고

[09:27] 명령 팔레트를 열어

[09:29] 커서 설정으로 가서

[09:31] MCP로 가면 새 MCP 서버 추가가 있습니다.

[09:34] 설정과 나란히

[09:36] 놓고 보겠습니다.

[09:38] 새 서버 추가를 클릭하면

[09:40] 원하는 이름을 지정할 수 있는데

[09:42] 저는 MCP 데모라고 하겠습니다.

[09:44] 명령어에서는

[09:46] 이 값들을 복사하면 됩니다.

[09:48] 먼저 명령어를 가져오고

[09:51] run MCP demo를 입력한 다음

[09:54] 워커 URL을 가져오고

[09:55] 마지막으로 경로를 가져옵니다.

[09:58] 개인적으로 커서 구현에서

[10:00] 마음에 들지 않는 점은

[10:01] Claw 데스크톱 앱과

[10:03] Wind Surf에 있는 MCP 설정이

[10:05] 더 마음에 든다는 것인데

[10:07] 곧 보시게 될 겁니다.

[10:09] 이제 이것을 추가하면

[10:12] 연결을 테스트하고

[10:13] 성공하면

[10:15] 여기서 보면

[10:16] 녹색 점이 표시되는데, 내가 만약

[10:19] 커서 내의 채팅 뷰나 작성기 뷰를 열면

[10:20] 여기서 할 수 있는 것은

[10:22] 요청을 보낼 때 어떤 도구들이 사용 가능한지 물어볼 수 있습니다

[10:26] 여기서 보면

[10:27] 핵심 기능들이 있는데

[10:29] 재미있는 점은 커서가

[10:30] 메시지 컨텍스트 프로토콜이라고 표시하는데

[10:33] 사실 여기에는

[10:34] 이 두 단어 사이에 약간의 환각이 있습니다

[10:36] 하지만 어쨌든 우리의 도구들이

[10:38] 여기 사용 가능하고, hello 함수와

[10:39] 방금 설정한 무작위 이미지 생성 함수도

[10:42] 사용할 수 있습니다

[10:43] Cloudflare 워커에서 설정한 대로죠

[10:45] Winsorf에서 이것을 설정하는 것은

[10:47] 매우 간단합니다. 오른쪽 패널의

[10:49] Cascade로 가서

[10:51] MCP 구성을 클릭하면

[10:53] 여기에 MCP 서버들이 있고

[10:56] 여기 제가 이미 Neon용으로 만들어 둔 것이 있습니다

[10:59] 방금 만든 MCP 서버에 접근하기 위해

[11:02] 필요한 것은 이 구성을 복사하고

[11:04] Neon 아래에 쉼표를 추가한 다음

[11:06] 새로운 서버를 추가하면 됩니다

[11:09] 저장하고 나서

[11:11] 한 가지 꼭 해야 할 것은

[11:13] 서버를 새로고침하는 것입니다

[11:15] 이렇게 하면 파일을 확인하고

[11:17] 이제 여기서 볼 수 있듯이

[11:19] MCP 데모에 접근할 수 있게 됐습니다

[11:22] 이제 'developers digest에 hello'라고 하고

[11:25] 무작위 사진을 생성해 달라고 요청해보겠습니다

[11:30] 자, 이렇게 보내면

[11:33] MCP 서버로부터 'hello developers digest'라는

[11:35] 인사 메시지가 왔고

[11:38] 무작위로 생성된 이미지도 받았습니다

[11:40] Winsurf의 멋진 점은

[11:41] 에디터 내에서 바로

[11:43] 이미지를 보여준다는 것입니다

[11:45] 자, 이제 영상을 마무리하겠습니다

[11:46] 제가 보여드린 모든 것의 링크는

[11:47] 영상 설명란에 넣어두겠습니다

[11:50] 이걸 시도해보시고 싶다면

[11:51] 여러분이 사용하고 있는 다양한 MCP 서버들 중

[11:53] 가장 유용하다고 생각하는 것이나

[11:55] MCP 서버로 무엇을 만들 계획인지

[11:56] 알려주시면 정말 좋겠습니다

[11:58] 댓글로 듣고 싶습니다

[12:00] 이 영상이 도움이 되었다면

[12:01] 댓글, 공유, 구독 부탁드립니다

[12:03] 다음 영상에서 만나요

[12:05] 감사합니다