10배 AI 코딩: MCP와 Cursor가 모든 것을 해결하다!

Creator Magic 구독자 104,000명

요약

이 영상은 MCP와 Cursor를 활용하여 AI 코딩의 새로운 가능성을 보여줍니다. 전통적인 API와 달리 MCP는 도구를 유연하게 선택하고 에러 상황에 적응하며 문제를 해결하는 특징을 갖습니다. PostgreSQL 데이터베이스, GitHub 리포지터리 관리, 브라우저 도구를 통한 자동 디버깅 등 다양한 통합 사례가 데모로 소개됩니다. 또한, Zapier 웹훅과 연동한 자체 MCP 서버 구축 과정을 통해 개발 생산성을 극대화하는 방법을 제시합니다.

주요 키워드

MCP Cursor Zapier PostgreSQL GitHub API 브라우저 도구 AI 코딩 Webhook 디버깅

하이라이트

🔑 MCP는 기존의 API보다 유연하게 여러 도구와 연동되어 AI 코딩을 더 효율적으로 수행합니다.
⚡ 화면에는 데이터베이스(PostgreSQL)와 GitHub, 브라우저 도구 등 다양한 서비스와의 통합 데모가 실시간으로 진행됩니다.
🚀 에러 발생 시, MCP는 스스로 쿼리와 코드를 수정해 문제를 해결하는 적응형 프로세스를 보여줍니다.
🌟 Zapier 웹훅 연동을 통한 자체 MCP 서버 구축 시연은 수천 개의 통합 가능성을 열어둔다는 점에서 큰 의미를 갖습니다.
📌 전반적인 데모를 통해 MCP와 Cursor의 결합이 AI 코딩의 생산성과 자동화를 크게 향상시킴을 강조합니다.

용어 설명

MCP

Model Context Protocol(모델 컨텍스트 프로토콜)의 약어로, AI 모델과 외부 도구 간의 상호작용을 유연하게 관리하는 프로토콜을 의미합니다.

API

Application Programming Interface의 약어로, 전통적으로 정해진 방식으로 도구나 서비스와 통신하는 인터페이스입니다.

Cursor

AI 코딩 어시스턴트 도구로, MCP와 연동하여 실시간으로 코드 생성 및 오류 진단을 돕는 역할을 합니다.

Zapier

수천 개의 웹서비스와 연동할 수 있는 자동화 플랫폼으로, 다양한 앱 간의 작업을 연결해줍니다.

PostgreSQL

오픈 소스 관계형 데이터베이스 관리 시스템으로, 영상에서는 데이터 조회 및 통합 데모에 사용됩니다.

영상은 MCP의 기본 개념과 AI 코딩 어시스턴트인 Cursor와의 통합을 소개합니다. 도구 간의 유연한 연동과 실시간 에러 수정 기능을 강조합니다.

[00:00] Mike가 MCP의 강력한 기능을 소개하며, AI 코딩 어시스턴트 Cursor를 데이터베이스, GitHub 등과 연결하고 브라우저 오류를 실시간으로 수정할 수 있는 기능을 설명합니다.

그림 걸기 비유를 통해 전통적인 API와 MCP의 차이를 설명합니다. MCP는 도구가 없거나 다른 대체 수단을 유연하게 활용하는 능력을 보입니다.

[00:24] MCP와 API의 차이점을 설명합니다. MCP는 인간처럼 유연하게 대처하는 반면, API는 정해진 도구만 사용할 수 있어 더 경직되어 있다고 비유적으로 설명합니다.

[01:26] Zapier와의 파트너십을 소개하고, 이전 MCP 영상을 먼저 시청할 것을 권장합니다.

MCP를 통해 PostgreSQL 데이터베이스에 연결하고, SQL 쿼리를 실행하는 방법을 시연합니다. 데이터를 읽기 전용으로 안전하게 조회하는 프로세스를 보여줍니다.

[01:41] PostgreSQL 데이터베이스 서버를 사용하는 방법을 설명하기 시작합니다. Cursor에서 MCP 서버를 설정하는 과정을 단계별로 보여줍니다.

[02:47] AI 기반 YouTube 댓글 도우미 앱의 데이터베이스 연결 설정을 진행합니다. 로컬 환경에서 안전하게 실행되는 데이터베이스 URL을 설정하고 연결을 확인합니다.

[03:10] PostgreSQL MCP 통합의 특징으로, 데이터베이스 안전을 위해 읽기 전용 쿼리만 지원됩니다. 이는 실험 중 실수로 데이터를 변경하는 것을 방지하기 위한 조치입니다.

[03:35] AI 에이전트를 사용하여 데이터베이스의 댓글을 조회합니다. AI가 자동으로 SQL 쿼리를 생성하고 실행하여 댓글 데이터를 분석하고 요약합니다.

[04:30] 더 복잡한 쿼리 테스트를 진행합니다. 최근 댓글 작성자를 찾는 과정에서 오류가 발생했지만, MCP의 적응형 특성으로 인해 문제를 자동으로 해결하고 성공적으로 데이터를 가져옵니다.

GitHub 개인 접근 토큰을 사용한 MCP 설정과 리포지터리 생성과 코드 백업 과정을 설명합니다. 버전 관리와 협업 효율성을 높이는 방법을 시연합니다.

[05:26] GitHub MCP 통합을 시작하면서 코드 버전 관리의 중요성과 GitHub의 기본적인 사용법을 설명합니다.

[06:01] GitHub 개인 액세스 토큰 설정 방법을 상세히 설명하며, 보안과 권한 설정의 중요성을 강조합니다.

[07:00] 새로운 MCP 서버를 GitHub으로 추가하고 실제 토큰을 적용하는 과정을 보여줍니다.

[07:20] GitHub 초보자를 위해 AI를 활용한 실제 사용 예시를 보여주며, readme 파일 생성과 저장소 설정을 시연합니다.

[07:53] git 초기화 오류를 발견하고 해결하는 과정을 통해 MCP의 실제적인 문제 해결 능력을 보여줍니다.

[08:07] GitHub에 새로 생성된 MCP cursor 저장소를 확인하고, 2분 전에 성공적으로 커밋된 것을 확인했습니다.

Chrome 확장 프로그램과 MCP 브라우저 도구를 연동해 콘솔 에러를 자동으로 감지하고 수정하는 방법을 데모합니다. 실제 앱의 오류 해결 과정을 보여줍니다.

[08:34] MCP 사용에 어려움이 있는 사용자들을 위해 커뮤니티 프리미엄 섹션의 튜토리얼을 소개하고, Mac/PC 설치 및 서버 연결 문제 해결 방법을 안내했습니다.

[08:53] 브라우저 도구 MCP를 소개하며, 앱 개발 시 발생하는 문제를 해결하는 데 도움이 된다고 설명했습니다.

[09:09] AI 댓글 어시스턴트 'Comment Genie'를 시연하며, 유튜브 채널 댓글에 대한 AI 답변 생성 기능을 보여줬습니다.

[09:26] 브라우저의 콘솔을 통한 문제 해결 방법을 설명하고, 재생성 버튼 클릭 시 발생하는 오류를 확인했습니다.

[10:13] 브라우저 도구 MCP의 설치 방법과 요구사항을 설명하고, 리포지토리 클론 과정을 시연했습니다.

Zapier 웹훅을 호출할 수 있는 간단한 MCP 서버를 직접 구축하는 과정을 시연합니다. 이를 통해 다양한 앱과의 복잡한 연동 가능성을 탐구합니다.

타임라인 정보가 없습니다.

구축된 시스템의 최종 결과와 테스트 성공 사례를 공유합니다. 시청자들에게 추가 정보와 커뮤니티 참여를 독려하며 마무리합니다.

타임라인 정보가 없습니다.

[00:00] 안녕하세요, 저는 Mike입니다. 이번 영상에서는 MCP에 대해 더 자세히 알아보도록 하겠습니다.

[00:03] MCP의 심층적인 기능에 대해 살펴보죠.

[00:05] 상상해 보세요.

[00:06] AI 코딩 어시스턴트 Cursor를 데이터베이스, GitHub 등 모든 것과 연결하고,

[00:11] 심지어 브라우저 오류를 감지하고 실시간으로 수정할 수 있게 만드는 것을요.

[00:15] 이것이 바로 MCP의 힘입니다.

[00:16] 끝까지 시청해 주세요. 제가 직접 MCP 서버를 구축해보면서

[00:20] 얼마나 쉽거나 어려운지 살펴볼 예정입니다.

[00:23] 놓치지 마세요.

[00:24] 먼저, 지난 주 커뮤니티에서 자주 받았던 질문에 답해보려 합니다.

[00:27] 최근 일주일 동안 많이 받은 질문인데요.

[00:29] MCP와 API의 차이점에 대한 것입니다.

[00:32] API는 오래전부터 있었고 AI가 인터넷의 다양한 것들과

[00:35] 연결될 수 있게 해주지 않았나요?

[00:37] 왜 MCP가 필요할까요?

[00:39] 이렇게 생각해보세요.

[00:41] 벽에 그림을 걸려고 한다고 상상해보세요.

[00:43] 그리고 앞에 못과 나사가 있다고 해봅시다.

[00:46] MCP를 사용하는 AI는 정확히 인간처럼 생각합니다.

[00:49] 그래요, 못과 나사가 있네요.

[00:51] 못을 사용하는 게 훨씬 쉬우니까 못을 쓰겠다고 할 거예요.

[00:54] 하지만 못을 치워버리면, MCP를 사용하는 AI는 다시 살펴보고 이렇게 말할 겁니다.

[00:59] 못은 없지만 걱정 마세요. 나사가 있네요.

[01:03] 벽걸이 플러그를 사용하면 될 것 같아요.

[01:05] 쉽게 해결할 수 있죠. 하지만 API, 전통적인 API는

[01:09] 좀 더 경직되어 있고 다르게 작동합니다.

[01:11] 기본적으로 지정된 도구만을 사용하도록 프로그래밍되어 있죠.

[01:16] 그래서 '그림을 걸려면 못이 필요해'라고 생각하다가

[01:18] 갑자기 못을 치워버리면 그것들이 없어졌을 때

[01:22] AI는 '어떻게 해야 할지 모르겠다'며 에러를 출력합니다.

[01:25] 게임 오버죠.

[01:26] 이 영상을 위해 파트너십을 맺은 Zapier에 감사드립니다.

[01:29] 이런 멋진 도구들을 여러분께 소개할 수 있게 도와주셨습니다.

[01:32] 그리고 혹시 제가 이전에 만든

[01:34] MCP 첫 번째 영상을 보지 않으셨다면, 먼저 그 영상을 보시는 것을 추천드립니다.

[01:38] 이번 영상은 AI 코딩에 대한 것이고 정말 마음에 드실 거예요.

[01:41] 자, Model Context Protocol GitHub으로 이동해보겠습니다.

[01:45] 물론 이 영상에서 언급된 모든 것들의 링크는 아래에 있습니다.

[01:47] 설명란을 확인해주세요.

[01:49] 여기서 그들이 만든 여러 서버들을 보실 수 있습니다.

[01:52] 먼저 PostgreSQL이라는 데이터베이스 서버를 사용해보겠습니다.

[01:55] 매우 인기 있는 데이터베이스죠.

[01:56] 제가 실제로 제 앱 중 하나에서 사용하고 있어서 어떻게 작동하는지 보여드리겠습니다.

[01:59] 이것을 살펴보면

[02:00] 시작하는데 필요한 것은 데이터베이스 이름뿐입니다.

[02:04] 이는 MPC 지침에 나와있습니다.

[02:06] 이것을 복사해두겠습니다.

[02:08] 이제 Cursor로 이동하겠습니다.

[02:09] Cursor에서 오른쪽 상단의 설정으로 이동합니다.

[02:12] 그리고 MCP를 찾아보겠습니다.

[02:14] 여기서 '새 MCP 서버 추가'를 클릭합니다.

[02:18] 이렇게 하면 다양한 세부 정보를 입력할 수 있습니다.

[02:21] 간단하게 하기 위해 이것을 'database'라고 이름 짓겠습니다.

[02:25] 실행할 명령어는 'npx -y'가 될 것입니다.

[02:29] 그리고 앞서 복사한 이름을 붙여넣습니다.

[02:32] 여기까지 했는데, 매우 중요한 것이

[02:34] 명령어 끝에 데이터베이스 이름을 넣어야 합니다.

[02:37] Postgres 데이터베이스가 실행 중인지 확인하세요.

[02:41] 다행히 저는 이미 실행 중입니다.

[02:43] 여기 로컬에서 실행 중인 Comment Genie의 모든 설정이 있네요.

[02:47] AI 기반 YouTube 댓글 도우미 앱이 있고, 데이터베이스도 있습니다

[02:52] URL이 여기 있네요.

[02:52] 보시다시피 매우 안전한 사용자 이름과 비밀번호를 사용했죠.

[02:56] 하지만 모두 로컬이라서,

[02:57] 인터넷에 노출되지 않아요. 그래서 이 URL을 복사하겠습니다.

[03:01] 이걸 치우고 데이터베이스 URL을 마지막에 붙여넣기 하겠습니다.

[03:06] 추가를 클릭하면 짜잔! 연결이 됐네요.

[03:08] 이제 데이터베이스를 쿼리할 수 있는 도구가 생겼습니다.

[03:10] 여기서 중요한 점은 '읽기 전용 SQL 쿼리 실행'이라고 표시된 것입니다.

[03:15] 공식 PostgreSQL 데이터베이스 MCP 통합은

[03:20] 읽기 전용만 지원합니다.

[03:21] 아마도 실험하다가 실수로

[03:24] 데이터베이스에 대량의 데이터를 쓰는 것을 방지하기 위해서겠죠.

[03:28] 물론 쓰기를 허용하는 다른 버전들도 있을 거예요.

[03:31] 이것은 앱을 코딩할 때 정말 강력한 기능이 될 겁니다.

[03:35] 자, 이제 커서의 AI 에이전트에게

[03:37] 데이터베이스에 있는 댓글들을 확인해달라고 요청해보겠습니다.

[03:42] 좋아요.

[03:42] 데이터베이스의 댓글을 확인하는 것을 도와주겠다고 하네요.

[03:45] 이미 MCP 도구를 호출하고 SQL 쿼리를 실행하고 있습니다.

[03:49] 제 능력 밖의 일인데,

[03:50] AI가 대신 해주니 정말 좋네요.

[03:52] 그냥 '도구 실행'을 누르면 실행됩니다.

[03:55] 벌써 모든 댓글을 가져왔네요.

[03:57] 보세요. 데이터베이스의 모든 내용이 여기 있습니다.

[03:59] 곧

[04:00] 커서 안의 AI가 볼 수 있는 모든 것을 요약해서 알려줄 거예요.

[04:04] 19개의 댓글이 보이네요.

[04:05] 모든 댓글이 2025년 3월 날짜네요.

[04:08] 아직 답글이 달린 댓글은 없습니다.

[04:10] 모든 종류의 세부 정보를 알려주고 있어요.

[04:12] 프리미어 프로와 Audacity에 대한

[04:14] 기술적인 질문들도 요약해주네요.

[04:17] 참고로 이건 제 오디오 관련 다른 채널에서 가져온 거예요.

[04:21] 오디오 편집과 성우 연기에 대한 감사 댓글과 질문들이네요.

[04:24] 꽤 만족스럽네요.

[04:25] 데이터베이스 첫 쿼리로는 괜찮은 것 같아요.

[04:28] 잘 되고 있으니

[04:29] 한 번 더 해보겠습니다.

[04:30] 다른 질문을 해볼게요.

[04:32] 데이터베이스에서 가장 최근 댓글 작성자 7명을 찾아주세요.

[04:35] 자, 됐네요.

[04:37] 실행된 걸 볼 수 있어요. 이번엔 보지도 않고

[04:39] 그냥 도구를 실행해보겠습니다. 보세요.

[04:41] 첫 번째 쿼리에서 오류가 발생했네요.

[04:43] 이게 바로 제가 말씀드린 MCP가 AI가 가진 도구에 적응하도록 하는 부분입니다.

[04:48] API였다면 오류가 발생했을 때

[04:50] 그냥 멈추고 오류라고만 했을 텐데,

[04:52] 지금은 적응을 시도하고 있어요.

[04:55] 다시 실행해볼게요.

[04:56] 이제 댓글 작성자를 찾을 수 있는 방법을 찾고 있습니다.

[04:59] 좋아요. 작성자 컬럼이 'author'라는 걸 발견했네요.

[05:02] 쿼리를 수정해보겠습니다.

[05:04] 정말 대단하네요.

[05:05] 타임스탬프도 포함해야 한다는 걸 알아챘어요.

[05:07] 실시간으로 수정하고 있습니다.

[05:09] API로는 할 수 없는 일을 MCP로 해내고 있어요.

[05:14] 자, 드디어 올바른 쿼리가 나왔네요. 보세요.

[05:16] 제 유튜브 채널의 최신 댓글들을 이렇게 쉽게 가져왔습니다.

[05:21] 정말 놀랍네요.

[05:22] 이게 바로 실제로 작동하는 AI를 위한 MCP의 슈퍼파워입니다.

[05:26] 좋습니다. 흐름이 좋으니 GitHub 통합으로 넘어가 보겠습니다.

[05:30] 이것은 GitHub MCP입니다.

[05:32] GitHub은 정말 좋은 도구인데요

[05:34] 코드를 저장하고 버전 관리하는데 아주 유용합니다.

[05:36] 대규모 앱을 만들 때

[05:37] 실수를 방지하기 위해 코드를 계속 GitHub에 업로드하면 됩니다.

[05:41] 이것이 GitHub의 기본적인 사용법인데, MCP를 사용하면 더욱 쉬워집니다.

[05:45] 한번 살펴볼까요? 여기 개요와 튜토리얼이 있네요.

[05:48] 정말 많은 특별한 기능들이 있습니다.

[05:50] GitHub에 읽고 쓸 수 있는 기능이 정말 멋지죠.

[05:52] 복잡해 보이지만, 실제로 필요한 건 이것뿐입니다.

[05:55] MPC 명령어에서 이 한 줄만 있으면 됩니다.

[06:01] 아, GitHub 개인 액세스 토큰도 필요하겠네요.

[06:05] 그것도 설정해 보도록 하겠습니다.

[06:07] 세분화된 토큰을 설정하려면 GitHub으로 이동해서

[06:10] 여기 설정으로 들어갑니다.

[06:11] 스크롤을 내려서 개발자 설정을 찾으세요.

[06:15] 그러면 여기서 볼 수 있는데

[06:16] 개인 액세스 토큰이 있고, 세분화된 토큰을 선택하세요.

[06:20] 그 다음 새 토큰을 생성합니다.

[06:23] 이름을 지정해야 합니다.

[06:24] MCP라고 지정해 보겠습니다.

[06:26] 만료 날짜를 설정하고

[06:27] 최소 7일로 설정하겠습니다.

[06:29] 원하면 설명도 추가할 수 있죠.

[06:30] 모든 저장소에 대한 접근 권한을 부여하겠습니다.

[06:33] 이 권한 설정은 매우 중요합니다. 매우 신중해야 하는데요

[06:37] 잘못된 권한을 부여하면 코드와 GitHub 계정에 심각한 영향을 줄 수 있기 때문입니다.

[06:41] 권한을 너무 많이 주면 위험할 수 있어요.

[06:43] 과도한 접근 권한을 주면 안 됩니다.

[06:44] 전체에 대해 읽기, 쓰기 권한만 부여하겠습니다.

[06:47] 완료되면 이런 형태의 명령어가 생성됩니다.

[06:50] 먼저 GitHub 액세스 토큰을 맨 앞에 넣고

[06:52] 그 다음에 y를 입력하고, GitHub MCP 서버 주소를 입력합니다.

[06:56] GitHub MCP 서버에 접근하기 위한 주소를 넣으세요.

[07:00] 이제 새로운 MCP 서버를 추가해 보겠습니다.

[07:02] 이번에는 GitHub이라고 이름 짓겠습니다.

[07:04] 그리고 이 명령어를 사용할 건데

[07:06] 제가 실제 GitHub 개인 액세스 토큰을 포함시켰습니다.

[07:10] 추가해 보겠습니다.

[07:11] 자, 추가됐네요. 초록색으로 표시되었어요.

[07:12] 우리가 가진 권한들을 보세요.

[07:14] GitHub에서 할 수 있는 일이 정말 많아졌네요.

[07:17] 정말 놀랍습니다.

[07:18] 그럼 이걸 실제로 어떻게 활용할 수 있을까요?

[07:20] 여러분께 말씀드리자면

[07:21] GitHub을 처음 사용하시는 분들을 위해

[07:23] 어떻게 사용하는지 AI가 도와드릴 수 있습니다.

[07:27] 한번 시도해 볼까요?

[07:28] readme 파일을 만들어 달라고 해보죠.

[07:29] 이모지가 잔뜩 들어간 재미있는 내용으로 hello라고 써달라고 해보겠습니다.

[07:33] 그리고 이걸 제 GitHub에 git 저장소로 만들어달라고 할 거예요.

[07:38] 공개 저장소로 부탁드립니다.

[07:39] 좋아요, 먼저 멋진 nonsensical Readme 파일을 만들고 있네요.

[07:43] 가장 놀라운 저장소가 될 거예요.

[07:45] 저는 옷과 창의성을 사랑합니다.

[07:47] 파티에 오신 것을 환영합니다.

[07:48] 이제 이것이 완성되었고

[07:49] MCP 도구를 호출해서 저장소를 만들어야 합니다.

[07:53] 여기서 MCP의 강력함이 드러나는데요

[07:54] 뭔가 잘못되어 에러가 발생했네요.

[07:57] 로컬에서 git을 초기화하지 않았기 때문입니다.

[07:59] AI가 이것을 발견했죠.

[08:01] 자, 초기화해 보겠습니다. 진행 중이에요.

[08:03] 저장소로 만들고 있습니다.

[08:05] 좋아요. 도구가 완료됐다고 하는데, 잘 됐을까요?

[08:07] GitHub 프로필을 새로고침해 볼까요.

[08:09] 보세요, 여기 있네요.

[08:10] MCP cursor라고 오타가 났지만, 안에는 정말 멋진 저장소가 있어요.

[08:15] 환영합니다, 파티에 오신 것을!

[08:17] 세상에나!

[08:18] 이걸 보신 분들은 제가 완전히 미쳤다고 생각하시겠지만,

[08:22] 보시다시피 2분 전에 커밋이 됐어요.

[08:24] 이 모든 게 훌륭한 MCP 도구를 사용해서 완성됐죠.

[08:28] 게다가 git 사용법을 알 필요도 없었어요.

[08:31] 자동으로 코드를 백업해 줬거든요.

[08:33] 정말 멋지죠.

[08:34] 그런데 MCP로 어려움을 겪고 계시다면,

[08:36] 제 커뮤니티 프리미엄 섹션에 좋은 튜토리얼이 있어요.

[08:38] 아이콘 아래 링크를 확인해보세요.

[08:41] Mac이나 PC에 설치할 때 서버 전송 오류가 발생하거나

[08:45] MCP 서버 연결에 다른 문제가 있다면,

[08:48] 제 커뮤니티에서 모든 답을 찾으실 수 있어요.

[08:50] 아래 링크를 확인하세요. 이제 좀 더 고급 기능으로 넘어가볼게요.

[08:53] Cursor와 같은 AI 코딩 도구를 위한 마지막 MCP 도구는

[08:56] 브라우저 도구입니다.

[09:00] 앱을 만들다가 뭔가 원하는 대로 작동하지 않아

[09:02] 어려움을 겪어보신 적 있나요?

[09:05] 브라우저 도구 MCP가 그걸 해결해줄 수 있어요.

[09:08] 어떻게 하는지 보여드릴게요.

[09:09] 여기 제 AI 댓글 어시스턴트인 Comment Genie가 있습니다.

[09:12] 제 유튜브 채널의 모든 댓글을 분석해서

[09:16] 도움이 되는 AI 답변을 생성하고 수정해서 게시할 수 있죠.

[09:19] 자, 보세요.

[09:20] 여기 몇 가지 좋은 댓글 제안이 있네요.

[09:22] 다 잘 돌아가고 있어요. 한동안 이걸 사용해왔는데,

[09:24] 정말 잘 작동합니다.

[09:26] 보통 무언가를 만들다가 문제가 생기면,

[09:29] 콘솔에서 찾을 수 있죠.

[09:30] 웹 브라우저에서 어떻게 찾을 수 있을까요?

[09:33] Chrome같은 대부분의 크로미움 기반 브라우저에서 가능합니다.

[09:36] 저는 지금 Chrome을 사용하고 있어요.

[09:37] 마우스 오른쪽 버튼을 클릭하고 '검사'를 누른 다음 콘솔 탭으로 이동하세요.

[09:43] 보이시나요?

[09:44] 여기엔 아무것도 없네요. 오류가 없다는 뜻이에요.

[09:46] 제 앱은 잘 작동하는 것 같지만, 한 가지 문제가 있어요.

[09:50] AI로 댓글을 다시 생성하려고 할 때

[09:53] 재생성 버튼을 누르면 이 귀찮은 오류가 뜨고,

[09:57] 재생성 버튼을 누를 때마다 오류가 계속 발생하는 걸 볼 수 있죠.

[10:02] 이건 분명히 제가 해결해야 할 문제입니다.

[10:05] 예전에는 앱을 열고 브라우저에서 테스트한 다음,

[10:09] 콘솔 오류를 모두 복사해서 Cursor에 붙여넣고 수정을 시도했어요.

[10:13] 하지만 브라우저 도구 MCP가 이 모든 것을 자동화해줍니다.

[10:16] 여기 설치 방법이 나와 있는데요.

[10:19] 이전에 사용했던 MCP 서버들보다는 좀 더 복잡하지만,

[10:23] 시작하기는 꽤 쉬워요.

[10:25] 요구사항을 보면 Node만 있으면 됩니다.

[10:27] 이전 영상에서 설명했었죠.

[10:29] Google Chrome이나 비슷한 크로미움 브라우저, 그리고 Cursor 같은 MCP 앱이 필요해요.

[10:34] 좋아요, 이건 다 갖춰져 있네요.

[10:36] 이제 작동을 위해 리포지토리를 클론해야 합니다.

[10:39] Cursor에서 터미널을 열어볼게요.

[10:42] 터미널에 명령어를 붙여넣으면

[10:45] 리포지토리가 클론될 거예요.

[10:47] 됐네요. Comment Genie에 클론됐습니다.

[10:49] 상관없어요. 이건 임시로 하는 거니까요.

[10:52] 이제 여기에 있는 Chrome 확장 프로그램을 설치해야 합니다.

[10:56] 브라우저에서 방금 클론한 browser-tools-MCP를 보면,

[11:00] Chrome 확장 프로그램이 거기에 있는 것을 볼 수 있습니다.

[11:03] 이제 Chrome에 설치해 보겠습니다.

[11:04] Chrome에서 확장 프로그램 관리로 이동해야 합니다.

[11:08] 개발자 모드가 켜져 있는지 확인하세요.

[11:10] 그런 다음 '압축해제된 확장 프로그램을 로드합니다'를 클릭하고 해당 위치로 이동합니다.

[11:13] Comment Genie browser tools MCP 폴더로 이동하고

[11:16] Chrome 확장 프로그램을 선택하면 끝입니다. 정말 간단하죠.

[11:19] 이제 Browser tools MCP가 Chrome 브라우저에 설치되어 사용할 준비가 되었습니다.

[11:25] 아, 그리고 마지막으로 한 가지 더 해야 할 것이 있는데,

[11:26] 이 도구가 제대로 작동하도록 하기 위해

[11:28] 컴퓨터 어디에서나 이 명령어를 실행해야 합니다.

[11:30] 이것은 웹 브라우저와 통신하는데 필요한 모든 것을 설치할 것입니다.

[11:34] 이제 MacOS 명령어를 복사하겠습니다.

[11:35] 여기 아래에 편리하게 나와있는 MacOS 명령어를 사용할 건데,

[11:38] windows와 다른 운영체제용도 지원됩니다.

[11:39] 자, 이제 이것을 복사하고

[11:42] 복사했으니,

[11:43] Cursor의 상단 설정으로 이동하겠습니다.

[11:46] 터미널을 닫고 보기 좋게 한 다음, MCP로 가서 새로운 MCP 서버를 추가합니다.

[11:51] 이것을 browser tools라고 이름 짓겠습니다.

[11:54] 실행할 명령어는

[11:55] 방금 설치 안내에서 복사한 것을 사용하겠습니다.

[11:59] 잠시만 기다려주세요.

[12:00] 지금은 노란색이네요. 좋아요, 초록색으로 변했습니다!

[12:03] 이 도구가 할 수 있는 일을 보면 정말 많은데요,

[12:06] 콘솔 로그를 가져올 수 있고, 방금 보여드린 것처럼

[12:09] 네트워크 오류, 스크린샷 캡처, WIP 로그도 볼 수 있습니다.

[12:12] SEO 감사도 실행할 수 있고,

[12:13] 디버깅도 가능하고, 정말 많은 기능이 있죠.

[12:16] 속도 문제부터 SEO, 오류까지

[12:20] 앱의 모든 문제를 browser tools로 해결할 수 있습니다.

[12:23] 한번 시도해 보겠습니다.

[12:24] 대시보드에서 댓글 답변을 재생성할 때마다

[12:27] 콘솔 에러가 발생하고 있습니다.

[12:30] 확인하고 수정해 주시겠습니까?

[12:32] 좋습니다. 조사하고 수정하는 것을 도와드리겠습니다.

[12:34] MCP 도구를 사용하고 있네요.

[12:35] 콘솔 에러를 가져옵니다.

[12:36] 도구를 실행해서 어떻게 되는지 봅시다.

[12:39] 자, 보세요.

[12:40] 문제를 찾았습니다.

[12:41] 실제로 진행되고 있고, 코드의 일부를

[12:44] 변경했습니다.

[12:45] 앱이 작동하기 위해 필요한 변경사항을 찾아냈네요.

[12:48] 이 모든 것을 웹 브라우저를 열거나

[12:52] 직접 앱을 테스트할 필요 없이 했습니다.

[12:53] Cursor 같은 코딩 도구에서 browser tools MCP의 힘을 보실 수 있죠.

[12:58] 문제가 해결되었는지 확인해보겠습니다.

[13:00] 자, 여기

[13:00] 문제가 있던 Comment Genie 앱에서 browser tools MCP가 실시간으로 디버깅하고 있습니다.

[13:05] 여기 답변이 필요한 댓글들이 있고 콘솔은 비어있는데,

[13:09] 이제 이 댓글을 재생성하면 잘 작동하는지 확인해보겠습니다.

[13:12] 답변을 재생성하니 잘 됩니다.

[13:15] 보세요, 콘솔 에러가 전혀 없습니다. 한 번에 디버깅이 되었네요.

[13:19] browser tools MCP를 적극 추천드리며, 다른 것들도 테스트해보시길 바랍니다.

[13:24] git 저장소와의 상호작용이나 데이터베이스 확인 같은 것들 말이죠.

[13:28] 모든 MCP들의 링크는 아래에 있습니다.

[13:30] 자, 이제 이 영상의 큰 도전과제로 넘어가보겠습니다.

[13:32] 제가 직접 MCP 서버를 만들 수 있을까요?

[13:35] 얼마나 쉬울까요?

[13:36] 거의 편집하지 않고 제 작업 과정을 그대로 보여드리겠습니다.

[13:39] MCP Zapier라는 새 프로젝트를 시작했습니다.

[13:42] 제가 하고 싶은 것은 MCP 서버가 웹훅을 통해

[13:46] Zapier의 작업을 트리거할 수 있게 만드는 것입니다.

[13:49] 이게 성공하면 정말 멋질 텐데요, Zapier는 8천 개가 넘는 통합을 제공하기 때문에

[13:54] MCP를 Zapier에서 작동하는 거의 모든 것과 연동할 수 있습니다.

[13:58] GitHub에서 뭔가를 복제하는 것처럼 단일 작업에 국한되지 않고

[14:02] Zapier 내에서 여러 단계를 수행할 수 있어 다단계 프로세스도 가능합니다.

[14:07] 이런 방식을 사용하는 또 다른 좋은 이유는

[14:10] MCP 서버를 사용할 때 신뢰성이 불확실할 수 있기 때문입니다.

[14:13] 누가 만들었는지, 소유자가 누구인지, 자격 증명이 어떤지 모르지만

[14:17] Zapier를 사용하면 모든 자격 증명이 안전하게 보호됩니다.

[14:20] 게다가 인증과 같은 복잡한 작업도 처리할 수 있는데, 이건 정말 골치 아픈 부분이죠.

[14:25] 저는 3일 동안 고생하면서 이걸 해결하려 했는데

[14:29] 여기선 이미 다 해결해 놨더라고요.

[14:30] Gmail이나 캘린더 같은 앱을 연결할 수 있고

[14:33] 고급 인증이 필요한 거의 모든 것을 한두 번의 클릭으로 연동할 수 있습니다.

[14:38] 자, 시작해 보겠습니다. VS Code를 실행할게요.

[14:40] 기본적인 MCP 서버를 최대한 단순하게 만들어보겠습니다.

[14:45] Zapier 웹훅을 도구로 노출시켜서 호출할 수 있게 해야 합니다.

[14:49] MCP에서 Zapier로 단방향 통신이죠.

[14:52] 이 예제 코드를 Zapier용으로 수정해보겠습니다.

[14:55] 와, 정말 멋지네요.

[14:56] 보이시죠?

[14:57] 모든 것을 고려해서 시작하고 있습니다.

[14:59] 이 멋진 통합을 위한 디렉토리를 생성하고 있어요.

[15:03] 모든 패키지 파일을 생성 중이고

[15:05] 작동에 필요한 모든 것을 준비하고 있습니다.

[15:07] 좋습니다. 다 됐네요.

[15:08] README 파일을 만들었고, 필요한 파일들을 확인하고 있습니다.

[15:12] 보세요.

[15:13] 완성됐습니다.

[15:13] Zapier 웹훅 MCP 서버가 사용 준비가 됐네요.

[15:17] 이거 보세요.

[15:17] 정말 대단하죠?

[15:18] 자, 모두 수락하고 작동하는지 확인해보겠습니다.

[15:20] 여기 아래에 새 터미널 창을 열어보겠습니다.

[15:24] 그리고 지시된 명령어들을 하나씩 실행해보겠습니다.

[15:27] 자, 시작해보죠.

[15:29] 설치 명령어와 빌드 명령어를 실행하겠습니다.

[15:33] 에러 없이 잘 진행되길 바랍니다.

[15:35] 지금까지는 에러 없이 잘 진행되고 있네요.

[15:37] 아주 좋습니다.

[15:39] 서버를 실행하려면 웹훅 URL을 내보내고 이 node 명령어를 사용해야 합니다.

[15:45] 네, 꽤 간단해 보이네요.

[15:47] 먼저 Zapier에서 웹훅을 만들어보겠습니다.

[15:50] 자,

[15:50] Zapier에서 새로운 Zap을 만들어보겠습니다.

[15:53] 이 앱에서는 웹훅으로 시작할 건데

[15:56] 설정하기가 정말 쉽습니다.

[15:58] 트리거 이벤트를 선택해야 합니다.

[16:00] 이 경우에는 'catch hook'을 선택할 건데요

[16:02] MCP 서버가 보내는 모든 것을 받아야 하기 때문입니다.

[16:06] 이걸 클릭하고 완료되었네요.

[16:08] 계속 버튼을 두 번 누르면

[16:11] 곧 테스트할 수 있습니다.

[16:13] 이게 제가 테스트할 웹훅입니다.

[16:16] 다른 것을 하기 전에

[16:17] 여기에 통합할 Zapier 액션을 하나 선택해보겠습니다.

[16:21] 수많은 사용 가능한 액션 중에서 하나를 선택할 건데요

[16:25] Gmail 액션을 선택해보도록 하겠습니다.

[16:27] 제가 이미 Gmail 계정과 연동을 했는데요.

[16:30] 연동하는 게 정말 쉽습니다.

[16:31] 클릭하고 계정 인증만 하면 됩니다.

[16:34] 이메일 보내기를 선택해 보겠습니다.

[16:38] 이걸로 하죠.

[16:39] 좋아요. 발신자는 제가 되고요.

[16:40] 설정으로 가서 수신자를 '[email protected]'로 하겠습니다.

[16:48] 제목 필드는 비워두고,

[16:52] '나는 일하고 있어요'라고 쓰고

[16:56] 본문에는 '열심히 일하고 있습니다' 라고 쓰겠습니다.

[16:59] 스마일 이모티콘도 넣고요.

[17:00] 간단하죠. 하지만 앞서 말씀드렸듯이 Zapier의 가장 좋은 점은

[17:04] MCP 서버의 하나의 트리거로 여러 동작을 연결할 수 있다는 겁니다.

[17:09] 자, 이제 웹훅으로 돌아가서

[17:11] 웹훅을 복사해야 하니까요.

[17:13] 자, 여기로 돌아와서 복잡한 작업을 해볼게요.

[17:15] 모든 창을 닫고 MCP 설정으로 들어가보겠습니다.

[17:20] 한 번에 잘 되길 바라면서요.

[17:22] 웹훅에 커맨드를 입력해보겠습니다.

[17:26] 첫 시도에 잘 되길 정말 바라는데요. 아니...

[17:29] 이제 이해하시겠죠?

[17:31] 환경 변수를 설정했습니다.

[17:33] 방금 만든 Zap의 Zapier 웹훅 URL을 환경 변수로 설정했고요.

[17:37] 그리고 로컬 MCP 서버를 실행하는 노드 명령어를 실행했습니다.

[17:42] 웹에 배포되었다면 MCP 명령어가 되겠지만,

[17:45] 믿을 수 없네요.

[17:48] 한 번에 작동하고 초록불이 들어왔네요. 도구도 사용 가능합니다.

[17:52] 제공된 데이터로 Zapier 웹훅을 트리거합니다.

[17:55] 정말 대단하네요.

[17:56] 더 많은 오류가 발생할 줄 알았는데, 한 번에 잘 작동하네요.

[18:02] 코드 채팅에서 테스트해보겠습니다.

[18:04] Zapier 웹훅을 트리거해보죠.

[18:06] 실제로 잘 작동하는지 확인해보겠습니다.

[18:09] 도와주겠다고 하네요.

[18:11] MCP 도구를 호출하고 있습니다. 좋은 신호네요.

[18:13] 보이시나요?

[18:15] 웹훅이 성공적으로 트리거되었습니다.

[18:17] Zapier 웹훅 URL이 유효하다는 것이 확인되었네요. 새로고침하면... 성공입니다!

[18:21] Cursor에서 하나의 작업이 성공적으로 실행되고 트리거되었습니다.

[18:25] 제가 만든 임시 Zapier용 MCP 서버를 사용해서요.

[18:28] 여러분이 이것보다 더 개선할 수 있을 거예요.

[18:30] 아래 링크된 커뮤니티나 댓글에서 알려주세요.

[18:33] 더 나은 것을 만드는데 성공하셨다면요.

[18:36] 모든 게 잘 되었네요.

[18:37] 일하고 있다고 상사에게 메일도 보냈습니다.

[18:42] 자, 이렇게

[18:42] MCP와 Cursor 같은 노코드 도구로

[18:45] 무엇이 가능한지 간단히 소개해드렸습니다.

[18:49] 꽤 놀랍지 않나요?

[18:50] 이 영상을 후원해준 Zapier에 감사드립니다.

[18:54] 멋진 도구들을 보여주고 직접 Zapier 웹훅 통합을 만들 수 있게 해주셔서요.

[18:58] 잘 된 것 같은데, 커뮤니티에서 더 자세히 논의해보죠.

[19:02] 아래 링크를 확인해주세요.

[19:03] 함께 참여해서 최고의 Zapier 웹훅

[19:06] 트리거링 MCP 서버를 만들어봅시다.

[19:10] 여러분과 더 깊이 논의하고 싶네요.

[19:12] 그동안 YouTube가 추천하는 다음 영상을

[19:16] 시청해보세요.