MCP의 정의와 유용성, 그리고 VS Code, Claude, Cursor, Windsurf 등 다양한 환경에서의 활용 예시를 간략히 설명한다.
[00:00]
Model Context Protocol(MCP)가 정착된 상황에서, VS Code, Cursor, Windsurf 등 다양한 개발 환경에서 MCP를 설정하는 방법을 소개합니다. Wix MCP 서버를 예시로 사용하며, 개인 서버가 있어도 과정은 동일합니다.
Wix Studio 공식 문서에서 MCP 설정에 필요한 JSON 구성 객체를 확인한다. title, command, arguments 세 부분으로 이루어진 예시 파일을 살펴본다.
[00:41]
Claude Desktop에서 MCP 설정 과정을 실습합니다. 파일 > 설정 > 개발자로 이동하여 기존 Zapier 서버에 Wix MCP 서버를 추가하는 방법을 보여줍니다. 전체 설정을 덮어쓰지 않고 새로운 서버만 추가하는 방법을 설명합니다.
File > Settings > Developer 메뉴에서 기존 MCP 목록을 확인 후 Wix MCP 서버 정보를 JSON으로 추가한다. 설정 저장 후 애플리케이션 재시작 후 도구 목록에서 정상 등록 여부를 확인한다.
[01:17]
파일 저장 후 Claude Desktop 재시작이 필요하며, 설정이 제대로 적용되었는지 확인하는 과정을 거칩니다. Wix 계정 인증을 통해 MCP 서버를 활성화하고, 실제 Wix 웹사이트 목록을 불러오는 테스트를 진행합니다.
[01:55]
Claude의 웹 버전에서도 MCP 서버 통합이 가능합니다. 설정 > 통합에서 사용자 지정 통합 추가를 통해 MCP 서버 URL과 이름을 입력하여 Claude Cloud에서 사용할 수 있도록 설정합니다.
웹 버전의 Claude에서 Settings > Integrations > Custom integration 메뉴로 이동해 MCP 서버 URL과 이름을 입력한다. 브라우저 팝업으로 Wix 계정 인증을 거치면 Cloud 환경에서도 도구를 사용할 수 있다.
Cursor AI의 Settings > MCP servers에서 새 서버 추가를 선택하고 Wix MCP JSON 구성 객체를 붙여넣는다. OAuth 인증 후 도구 목록에서 정상 표시 및 간단한 Chat 테스트를 통해 작동을 확인한다.
[02:30]
Cursor AI에서 MCP 설정을 위해 오른쪽 상단 설정 메뉴에서 MCP 서버 섹션으로 이동합니다. 새로운 MCP 서버를 추가하기 위해 Wix 문서의 설정 정보를 활용합니다.
[02:41]
Cursor AI에서 MCP 설정을 위해 Wix 문서에서 JSON 객체 설정을 복사하고 저장한 후, 커서 설정에서 확인할 수 있으며 인증 후 MCP 서버를 통해 모든 도구를 사용할 수 있게 됩니다.
File > Preferences > Settings에서 Features > Chat > MCP 섹션을 찾아 settings.json을 수정한다. 기존 Python 예제를 대체해 Wix MCP remote 설정을 추가하고, 사이드바의 Start 버튼으로 서버를 실행해 Agent 모드에서 도구 목록을 확인한다.
[02:57]
채팅에서 상위 5개 Wix 웹사이트를 요청하여 MCP 연동을 테스트하고 성공적으로 결과를 확인합니다.
[03:03]
VS Code에서 MCP 설정은 더 복잡하며, 파일 > 기본 설정 > 설정 > 기능 > 채팅 > MCP 섹션으로 이동하여 mcp settings.json을 편집해야 합니다.
[03:22]
마이크로소프트는 설정 방식을 다르게 만들어서 전체 예제 대신 MCP 원격 섹션만 복사하여 Python 예제를 교체하고 시작 옵션에서 직접 실행합니다.
[03:42]
메인 대시보드에서 에이전트 모드로 진입하여 도구 섹션에서 사용 가능한 MCP 도구들을 확인하고, 추가된 Wix용 MCP 서버로 상위 10개 사이트를 성공적으로 요청합니다.
[04:02]
Windsurf에서 MCP 설정은 가장 복잡하며, 우측 상단 설정 > Windsurf 설정 > Cascade > 플러그인 관리로 이동하여 원시 설정 파일을 통해 MCP 서버를 설정합니다.
Windsurf의 Settings > Cascade > Manage plugins에서 raw config 파일을 열어 MCP 서버 JSON을 붙여넣는다. 수정 후 리프레시하면 배경에서 서버가 로드되고 대화창의 Tools 메뉴에서 사용할 수 있다.
[00:00]
Model Context Protocol, 즉 MCP는 이제 정착됐습니다.
[00:03]
이 영상에서는 VS Code,
[00:04]
여러 환경에서 설정하는 방법을 보여드리겠습니다.
[00:06]
Cursor나 Windsurf 같은 환경에서 말이죠.
[00:08]
Wix MCP 서버를 예시로 사용하겠습니다.
[00:11]
하지만 본인만의 서버가 있다면,
[00:13]
과정은 거의 동일합니다.
[00:14]
먼저 문서를 확인해보세요.
[00:16]
대부분의 사이트에는 이제 자체 MCP 페이지가 있고,
[00:18]
이것이 Wix Studio용 페이지입니다.
[00:20]
여기서 설정 객체를 찾으세요.
[00:22]
이런 모습이어야 합니다.
[00:24]
세 가지 주요 부분으로 구성됩니다.
[00:26]
먼저 제목인 Wix MCP remote,
[00:29]
그다음 npx 명령어,
[00:31]
그리고 패키지와
[00:33]
접근할 URL인 인수들입니다.
[00:35]
이 설정 파일을 사용하여
[00:38]
Claude Desktop, Claude Web, Cursor, Windsurf, VS Code를 연결할 수 있습니다.
[00:40]
이제 시작해보겠습니다.
[00:42]
Claude에서 맨 위의
[00:44]
파일을 클릭하고
[00:46]
설정을 선택한 다음 개발자로 이동하겠습니다.
[00:49]
여기에 모든 MCP 서버가 있습니다.
[00:51]
지금은 Zap만 있네요.
[00:53]
설정 편집을 선택하고
[00:55]
Wix를 추가하겠습니다.
[00:57]
설정 파일은 이런 모습입니다.
[00:59]
예시로 Zapier가 있고,
[01:01]
이 버전을 추가하고 싶습니다.
[01:03]
전체를 복사해서 붙여넣을 수도 있지만
[01:05]
그러면 현재 MCP 서버 설정을 덮어쓰게 됩니다.
[01:07]
대신 중요한 부분만,
[01:09]
즉 Wix MCP remote의
[01:11]
이 부분만 복사하겠습니다.
[01:12]
이렇게 하면 두 MCP 서버를
[01:15]
동시에 실행할 수 있습니다.
[01:17]
파일을 저장한 후,
[01:19]
Claude Desktop을 재시작해야 하고
[01:21]
새로운 설정 파일로
[01:23]
MCP 서버를 실행할 수 있게 됩니다.
[01:25]
제대로 적용됐는지 확인해보겠습니다.
[01:28]
파일과 설정으로 다시 가서
[01:30]
개발자로 이동합니다.
[01:32]
여기 Wix MCP 서버가 있습니다.
[01:34]
Wix 계정 인증이 필요한데,
[01:36]
Chrome 팝업으로 간단히 할 수 있습니다.
[01:37]
도구에서 보시면
[01:39]
사용할 수 있는 모든 도구가 포함된
[01:41]
Wix MCP 서버가 있습니다.
[01:43]
실제로 작동하는지 테스트해보겠습니다.
[01:45]
현재 Wix 웹사이트를 모두 나열하는
[01:47]
간단한 요청을 해보겠습니다.
[01:50]
외부 서드파티 MCP 도구 사용을 확인하겠습니다.
[01:52]
여기 모든 사이트가 나와 있습니다.
[01:54]
잘 작동하는 것 같네요.
[01:56]
Claude에는 웹 버전도 있습니다.
[01:59]
Claude의 클라우드 버전도
[02:01]
MCP 서버 통합을 지원하며
[02:03]
과정은 거의 동일합니다.
[02:05]
설정과 통합으로 가서
[02:07]
사용자 지정 통합 추가를 클릭하고
[02:10]
MCP 서버 URL을 가져옵니다.
[02:12]
이 경우 여기 있는 이 URL입니다.
[02:14]
그다음 이름도 추가합니다.
[02:17]
@Wix remote 이름을 사용해서 여기에 추가하겠습니다.
[02:20]
그러면 이전처럼 MCP 서버를 연결하여
[02:22]
인증할 수 있고
[02:24]
Claude Cloud에서
[02:26]
사용할 수 있게 됩니다.
[02:29]
Cursor AI용 MCP를 설정하려면
[02:32]
오른쪽 상단의 설정으로 가서
[02:34]
MCP 서버로 이동합니다.
[02:37]
그다음 새로 추가를 선택합니다.
[02:39]
이전처럼 Wix와 해당 문서로
[02:41]
JSON 객체를 위한 MCP 설정을 복사해오겠습니다.
[02:43]
이것을 저장한 후, 커서 설정으로 돌아가면
[02:46]
여기서 확인할 수 있습니다.
[02:47]
Claude처럼 인증이 필요할 수 있지만
[02:50]
이미 완료했기 때문에
[02:51]
MCP 서버를 통해 사용할 수 있는
[02:53]
모든 도구가 여기에 추가됩니다.
[02:55]
채팅에서 테스트해보겠습니다.
[02:57]
상위 5개 Wix 웹사이트를 요청하면
[02:59]
여기에 결과가 나타납니다.
[03:02]
VS Code에서 MCP를 설정하는 것은
[03:03]
조금 더 복잡합니다. 파일 > 기본 설정 > 설정으로 이동한 후
[03:06]
기능을 확장하고
[03:08]
채팅까지 스크롤을 내립니다.
[03:10]
그런 다음 계속 스크롤해서
[03:12]
MCP 섹션을 찾습니다.
[03:14]
여기서 mcp settings.json을 편집해야 하는데
[03:17]
다른 예제들과 비슷해 보입니다.
[03:20]
하지만 당연히 마이크로소프트는
[03:22]
이것을 조금 다르게 만들었습니다.
[03:24]
전체 예제를 복사하는 대신
[03:26]
MCP 원격 섹션만
[03:28]
복사하겠습니다.
[03:30]
여기에 붙여넣어서
[03:32]
제공된 Python 예제를
[03:34]
교체하겠습니다.
[03:36]
이제 여기 있는 시작 옵션에서
[03:38]
직접 실행할 수 있습니다.
[03:40]
이제 실행되고 있어야 합니다.
[03:42]
메인 대시보드로 돌아가서
[03:44]
에이전트 모드로 들어가야 합니다.
[03:46]
여기 있는 도구를 선택하면
[03:49]
현재 사용 가능한 모든 MCP 도구가
[03:51]
확장됩니다.
[03:53]
Wix용 MCP 서버가 추가된 것을 볼 수 있습니다.
[03:55]
여기서 테스트해보겠습니다.
[03:57]
다시 상위 10개 사이트를 요청하면
[03:59]
결과를 가져오는 것을 볼 수 있습니다.
[04:02]
마지막으로, Windsurf에서 MCP를 설정하는 것은
[04:04]
가장 복잡합니다.
[04:06]
우측 상단 설정으로 가서
[04:08]
Windsurf 설정으로 이동합니다.
[04:10]
여기 왼쪽에서 Cascade를 선택하고
[04:12]
플러그인 스토어를 열 수 있는
[04:14]
플러그인이 있습니다.
[04:15]
하지만 대신 플러그인 관리를 할 것입니다.
[04:18]
여기서 원시 설정 파일을 보고
[04:20]
MCP 서버를 설정할 수 있습니다.
[04:23]
MCP 서버 설정을 복사해서
[04:26]
Windsurf에 다시 붙여넣겠습니다.
[04:28]
여기서 플러그인 관리로 돌아가서 새로고침하면
[04:32]
백그라운드에 있는 현재 MCP 서버를 로드하고
[04:34]
이제 채팅에서
[04:36]
사용할 수 있습니다.
[04:37]
도구 아래에서 확인할 수 있고
[04:39]
모든 것이 제대로 작동하는지 간단히 테스트해보겠습니다.
