바이브 코딩의 영광을 위한 5가지 MCP 서버 (바로 연결만 하면 OK)

Sean Kochel 구독자 2,190명

요약

이 영상에서는 MCP(Model Context Protocol)가 AI 모델과 도구 간 원활한 통신을 어떻게 지원하는지 설명합니다. 특히 Context 7, Claude Taskmaster, Exa Search, Knowledge Graph Memory, Magic UI/21st Dev Magic MCP 등 다섯 가지 MCP 서버를 소개하며 각 도구의 기능과 활용 가치를 사례와 함께 전달합니다. 각 서버는 문서 직접 인덱싱, 세밀한 작업 분할, 프로그래밍적 정보 검색, 복잡한 관계 기억 관리, 디자인 컴포넌트 통합 등으로 개발 효율을 크게 향상시킵니다. 이를 통해 빠르고 정확하게 코드를 작성하고 복잡성을 관리하며, 전문 디자인까지 적용한 매끄러운 앱 구축이 가능함을 강조합니다.

주요 키워드

MCP Model Context Protocol Context 7 Claude Taskmaster Exa Search Knowledge Graph Memory Magic UI 21st Dev Magic MCP vibe 코딩 컨텍스트 관리

하이라이트

🔑 MCP는 AI 모델과 도구 사이에 공통 언어(프로토콜)를 제공하여 호환성을 보장합니다.
⚡️ Context 7는 문서 인덱싱과 최신 예제 코드를 실시간으로 로드해 개발 속도를 높입니다.
🌟 Claude Taskmaster는 요구사항 문서를 PRD로 변환하고 단계별 작업을 자동으로 생성합니다.
🚀 Exa Search는 재귀적 검색을 통해 검증된 통계와 솔루션을 정확하게 찾아냅니다.
📌 Knowledge Graph Memory는 프로젝트 전반의 관계를 기억하고 상황에 따라 동적으로 참조할 수 있습니다.
🎨 Magic UI와 21st Dev Magic MCP는 디자인 컴포넌트를 자동으로 통합해 전문적인 UI 구성을 돕습니다.
🔥 MCP 서버 조합으로 빠른 개발, 정확한 출력, 복잡도 관리, 심미적 디자인을 동시에 달성할 수 있습니다.

용어 설명

MCP(Model Context Protocol)

다양한 AI 모델과 도구가 공통 방식으로 소통하도록 정의된 표준 프로토콜입니다.

vibe 코딩

AI의 흐름을 타고 편하게 코드를 작성하는 작업 방식입니다.

컨텍스트 윈도우

AI가 한 번에 처리할 수 있는 텍스트 범위로, 입력된 정보의 양을 의미합니다.

환각(Hallucination)

AI가 실제로 존재하지 않는 정보를 만들어내는 오류 현상입니다.

제품 요구사항 문서(PRD)

프로젝트의 기능과 목표를 정의한 공식 문서로, 개발 지침 역할을 합니다.

지식 그래프 메모리

엔티티 간 관계를 저장·관리해 복잡한 정보 구조를 기억하는 시스템입니다.

UI 컴포넌트

앱 또는 웹 페이지를 구성하는 재사용 가능한 디자인 요소입니다.

바이브 코딩 도구 다섯 가지를 10분 안에 간단히 훑습니다. MCP의 개념과 영상 구조를 소개합니다.

[00:00] 시청자들의 피드백에 응답하여 본론으로 바로 들어가, 코딩 시 필수적인 상위 5개 MCP 서버를 소개할 예정임을 설명합니다.

[00:38] 이번 영상은 구현 세부사항 대신 high-level 개요를 다루며, 더 자세한 내용은 5월 초에 업로드될 긴 버전에서 다룰 예정입니다.

[01:03] MCP(Model Context Protocol)는 다양한 AI 모델과 도구들이 서로 원활하게 소통할 수 있게 해주는 표준화된 프로토콜임을 설명합니다.

[01:43] MCP는 앱스토어와 같은 생태계를 형성하며 급속도로 성장하고 있습니다.

[02:08] 첫 번째 도구인 Context 7을 소개하며, 현재 AI 도구들의 새로운 기술 관련 코드 작성의 한계점을 설명합니다.

문서를 자동 인덱싱해 최신 API 예제를 제공합니다. SQL 스크립트를 바로 생성해 개발 속도를 높입니다.

[03:07] Context 7이 등장하여 문서와 코드 예제를 필요할 때마다 불러올 수 있게 되었습니다. Supabase 사용자 테이블 생성 예시를 통해 도구의 기능을 설명합니다.

[03:48] Context 7은 자체 문서 라이브러리에서 필요한 문서를 가져와 앱의 컨텍스트에 통합하고, SQL 스크립트를 자동 생성하여 요청한 작업을 수행합니다.

[04:19] 이 도구를 사용하면 문제 해결 시간이 크게 단축되고, 특히 AI 분야의 빠른 발전 속도에 맞춰 새로운 기술을 빠르게 습득하고 적용할 수 있습니다.

[04:53] 두 번째 도구인 Claude Taskmaster가 소개되며, 이는 바이브 코딩 시스템의 4단계에서 핵심적인 역할을 하는 도구입니다.

특정 요구사항을 PRD로 변환하고 세부 작업 리스트로 분할합니다. 자체 교정 기능으로 프로젝트 완수를 돕습니다.

[05:20] 복잡한 프로젝트에서 가장 어려운 부분은 광범위한 계획 수립인데, 기능과 요구사항을 명확히 파악한 후에도 AI가 실제로 구현할 수 있는 단계별 계획이 필요합니다.

[06:08] Claude Taskmaster는 기능 명세서를 PRD로 변환하고, 이를 바탕으로 프로젝트 실행을 위한 세부적인 작업들을 생성합니다.

[06:50] 시스템은 작업의 복잡도를 분석하고, 필요한 경우 더 세분화된 하위 작업으로 분해하여 효율적인 코딩이 가능하도록 합니다.

[07:14] 솔루션 구축 과정에서 자체적으로 작업 목록을 수정하고 업데이트하며, 다양한 기능을 통해 프로젝트 관리를 지원합니다.

[07:45] 구체적인 비전과 세밀한 지침을 제공함으로써, 실제로 작동하는 의미 있는 결과물을 만들어낼 수 있습니다.

[08:14] 이러한 도구들은 진정으로 개발하고 싶어하는 사람들이 실제로 멋진 제품을 만들 수 있도록 도와줍니다.

재귀적 검색으로 검증된 통계와 솔루션을 찾아냅니다. 정확도 높은 정보를 항시 업데이트해 신뢰성을 높입니다.

[08:39] Exa AI의 Exa Search는 워크플로우에 필요한 추가적인 맥락과 정보를 제공하는 프로그래매틱 검색 도구입니다.

[09:19] Exa AI가 Perplexity보다 더 나은 개발 경험과 결과, 더 많은 기능을 제공한다고 설명합니다.

[09:36] 화자가 SaaS 회사의 새로운 랜딩 페이지를 디자인하면서 AI가 생성한 가짜 통계 데이터에 대한 문제를 언급합니다.

[10:32] AI 코딩 프로세스에서 컨텍스트 관리의 중요성을 강조하며, Exaarch 도구가 더 정확한 결과를 제공한다고 설명합니다.

메모리 저장소에 엔티티 간 관계를 기록하고 참조합니다. 복잡한 데이터 구조를 쉽게 관리할 수 있습니다.

[11:26] Model Context Protocol의 지식 그래프 메모리 시스템을 소개하고, 컨텍스트 전환과 기억 유지의 필요성을 설명합니다.

[12:14] 작업 관리와 진행 상황 추적을 위한 실제 사용 사례를 설명합니다.

[12:33] 앱에서 발생하는 색상 팔레트 전환 문제를 설명하고, 이를 해결하기 위해 라이트 모드와 다크 모드 버전을 메모리에 저장하는 방법을 소개합니다.

[13:07] 메모리에 저장된 테마 정보가 어떻게 구성되고 관계가 형성되는지 설명하며, 백그라운드, 텍스트, 제목 등의 색상 정보가 어떻게 저장되는지 상세히 설명합니다.

[13:39] AI 개인 트레이너 프로젝트를 예시로 들어, 1-2년 단위의 피트니스 플랜에서 매크로 사이클, 세트, 반복 등 복잡한 관계를 가진 데이터 구조를 설명합니다.

[14:18] 기존 시스템의 한계점을 설명하고, 지식 그래프 메모리를 통해 복잡한 관계를 유지하고 관리하는 방법을 소개합니다.

[14:53] 이 시스템의 장점을 설명하며, 복잡한 프로젝트에서 정보를 효과적으로 기억하고 관리할 수 있음을 강조합니다.

전문 디자인 컴포넌트를 자동 통합해 UI를 구성합니다. 랜딩 페이지와 앱 인터페이스 빌드에 최적화된 도구입니다.

[15:20] Magic UI MCP와 21st Devs Magic MCP라는 두 가지 유사한 도구를 소개합니다.

[15:33] Magic UI와 21st Dev's Magic MCP는 비슷한 기능을 하지만 각각의 특성이 있으며, 전문적인 디자인이 권위와 신뢰를 주는 중요한 요소임을 설명합니다.

[16:05] Magic UI를 사용한 랜딩 페이지 디자인 경험을 공유하고, 21st Dev가 제공하는 실제 앱 UI 컴포넌트의 장점을 설명합니다.

[16:50] MCP 서버를 활용한 실제 구현 예시로 깜빡이는 그리드 배경을 추가하는 과정을 시연합니다.

[17:50] 현재 디자인 도구의 한계점을 지적하고, UI 컴포넌트 통합에 초점을 맞춘 새로운 접근방식의 필요성을 강조합니다.

MCP 서버를 조합해 개발 워크플로우를 최적화하는 당부를 전합니다. 더 깊은 튜토리얼은 무료 스쿨 그룹에서 확인할 수 있습니다.

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

[00:00] 댓글에서 영상이 너무 길다고 불평하시는 분들을 위해

[00:02] 제가 본론으로 들어가는 게 너무 오래 걸린다고 하시는 분들을 위해

[00:06] 오늘은 바로 본론으로 들어가겠습니다.

[00:08] 코딩할 때 반드시 사용해야 할

[00:11] 상위 5개 MCP 서버를 소개해드리겠습니다.

[00:15] 각각의 서버에 대해

[00:17] 무엇인지, 어떻게 접근하는지

[00:19] 그리고 왜 가치있는지 설명해드리겠습니다.

[00:23] 이 영상은 10분 안에

[00:25] 끝내보도록 하겠습니다.

[00:27] 성공하면 제 첫 10분짜리 영상이 될 것 같네요.

[00:30] 만약 이 영상이 실패한다면

[00:33] 이 컨셉으로 좀 더 긴 버전을

[00:35] 만들 수도 있겠죠. 이번 주 초반 영상처럼

[00:38] 너무 세부적인 내용은

[00:40] 피하고 high-level로

[00:42] 설명드리려고 합니다.

[00:44] 구현 방법이나 다운로드 방법은

[00:45] 다루지 않을 거예요.

[00:47] 가치와 작동 방식, 사용법에 대해

[00:49] 설명드리겠습니다. 그리고

[00:51] 1-2시간 분량의 상세한 버전을

[00:55] 제 무료 스쿨 그룹에

[00:56] 올릴 예정이니 거기서

[00:58] 더 자세히 배우실 수 있습니다.

[01:00] 5월 초에 업로드될 예정입니다.

[01:03] 먼저 MCP가 무엇인지 간단히 설명드리겠습니다.

[01:06] MCP는 Model Context Protocol의 약자입니다.

[01:10] 간단히 설명드리자면

[01:12] MCP는 기본적으로

[01:14] 서로 다른 AI 모델과 도구들이

[01:18] 원활하게 소통할 수 있게 해주는

[01:21] 표준화된 프로토콜입니다.

[01:24] 예를 들어, 여러분이 맥을 쓰고

[01:27] 친구가 윈도우를 사용한다고 가정해보세요.

[01:30] 만약 이 기기들로

[01:32] 서로 소통할 수 없다면 어떨까요?

[01:34] 실제로 인터넷 초창기에는

[01:36] 그랬습니다. 그리고 지금의 AI도

[01:39] 초기에는 그런 상황이었죠.

[01:41] 하지만 MCP가 등장하면서

[01:43] 이러한 장벽을 허물었습니다.

[01:46] 도구들이 서로 소통할 수 있는 공통된 방식을 만든 거죠.

[01:50] 그래서 MCP는 다양한 도구들의

[01:53] 생태계를 형성하고 있고

[01:55] 이제 급속도로 성장하고 있습니다.

[01:58] 사실상 앱스토어와 비슷하죠.

[02:00] 이제 그 '앱들'을

[02:03] 살펴보도록 하겠습니다.

[02:06] 앱들을 한번 볼까요?

[02:08] 첫 번째 MCP는

[02:11] Upstach의 Context 7입니다.

[02:15] Cursor나 Windsurf 같은 AI 도구들의

[02:18] 가장 큰 문제점 중 하나는

[02:20] 새로운 기술에 대한 코드 작성이 취약하다는 점입니다.

[02:24] 예를 들어, Supabase가

[02:25] 새로운 API를 출시했다고 하면

[02:28] 이에 대한 코드 솔루션을 제대로 작성하지 못합니다.

[02:31] 자주 보이는 문제로는

[02:33] 질문을 했을 때

[02:35] 실제로 존재하지 않는 API와 함수를 만들어내거나

[02:38] 아니면 오래된 패키지나

[02:41] 버전을 기반으로 답변을 하는데

[02:44] 이는 더 이상 적용되지 않아

[02:46] 작동하지 않습니다.

[02:48] 게다가 이 문제는

[02:49] 내장된 방식 때문에 더 복잡해졌는데

[02:52] Cursor나 Windsurf 같은 도구에서

[02:55] 문서를 사용하는 내장 방식이

[02:57] 솔직히 매우 좋지 않습니다.

[02:59] 인덱싱도 제대로 되지 않고

[03:01] 문서 스크래핑도 잘 못하고

[03:03] 맥락을 제대로

[03:05] 파악하지도 못합니다.

[03:07] 문서에서 필요한 내용을 제대로 활용하지 못하는데,

[03:09] 이런 상황에서 Context 7이라는 도구가 등장했습니다.

[03:12] Context 7을 사용하면

[03:14] 문서와 코드 예제를 필요할 때마다

[03:17] 불러올 수 있죠. 예를 들어

[03:20] 여기 앱이 있다고 가정하고

[03:21] Context 7을 사용해서 Supabase로 사용자 테이블을 만들어달라고 할 수 있습니다.

[03:26] Context 7은 자체 문서 라이브러리에서

[03:30] Supabase 문서를 가져와서

[03:32] 문서를 앱의 컨텍스트로 가져옵니다.

[03:35] 그리고 나서 이 컨텍스트를 사용해

[03:38] 요청한 작업을 수행하는데,

[03:41] 앱의 컨텍스트로 가져와서

[03:43] 요청한 작업을 수행하게 되죠.

[03:46] 이 경우에는 Supabase로

[03:48] 기본 사용자 테이블을 만드는 작업입니다.

[03:51] 이제 보시면 진행되고 있네요.

[03:54] 지금 실행 중인데,

[03:55] 요청한 모든 작업을 수행할

[03:58] SQL 스크립트를 생성하고 있습니다.

[04:00] 자, 완료됐네요. 정말 멋지죠.

[04:02] 실제로 웹사이트에서

[04:04] 가져오는데,

[04:05] context7.com에 가보시면

[04:08] 사용 가능한 라이브러리들을 볼 수 있고

[04:10] 다른 문서도 추가할 수 있습니다.

[04:14] 정말 멋진 도구라서

[04:16] 첫 번째로 소개했고

[04:17] 매우 가치 있습니다.

[04:19] 결과적으로 문제 해결 시간이 훨씬 단축되죠.

[04:23] 즉, 올바른 해결책을 더 빨리 찾을 수 있어서

[04:26] 머리를 쥐어뜯는 순간이

[04:28] 많이 줄어듭니다. 특히 서드파티 도구를 사용할 때

[04:31] 잘 작동하지 않아

[04:33] 좌절하는 순간들 말이죠.

[04:35] AI 분야의 빠른 발전 속도와

[04:38] 놀라운 새로운 도구들이

[04:39] 자주 나오는 상황에서

[04:42] 이런 종류의 도구는 반드시 필요합니다.

[04:44] 새로운 기술을 빠르게 습득하고

[04:46] 앱에서 실용적으로 사용할 수 있게 해주는

[04:48] Context 7은 정확히 그런 도구입니다.

[04:51] 정말 멋지죠.

[04:53] 자, 이제 두 번째 MCP는

[04:56] Claude Taskmaster입니다. 올해 제가 가장 좋아하는

[04:59] 새로운 도구죠. 제 다른 영상들을

[05:01] 보셨다면 아시겠지만

[05:03] 이제 이것은 핵심 요소가 됐습니다.

[05:05] 바이브 코딩 시스템의 4단계인데

[05:07] 참고로 곧

[05:09] 제 스쿨 그룹에 자세한 튜토리얼을 올릴 예정입니다.

[05:12] 다시 말씀드리자면,

[05:14] 이제 이 프로세스의 마지막 단계에서

[05:16] 사용하는 핵심 도구입니다.

[05:19] 이게 중요한 이유는

[05:20] 실제로 복잡한 작업을 바이브 코딩할 때

[05:24] 가장 어려운 부분이

[05:27] 광범위한 계획을 세우는 데

[05:30] 많은 시간이 필요하다는 점입니다.

[05:32] 그 프로세스의 첫 단계는

[05:34] 광범위한 계획을 세우는 건데,

[05:36] 정확히 무엇을 만들지,

[05:39] 기술은 무엇을 쓸지,

[05:41] 요구사항과 주요 기능이 무엇인지

[05:43] 명확하게 파악해야 합니다.

[05:45] 이걸 다 했다면,

[05:47] 이제 남은 건

[05:49] 상세한 기능 목록과

[05:51] 요구사항 목록이지만,

[05:53] 아직 AI에게 효과적으로 전달할 수 있는

[05:57] 단계별 계획은 없는 상태입니다.

[06:00] 모든 단계를 실제로 구현할 수 있는

[06:02] 계획이 필요한데, 여기서 Claude Taskmaster가 등장합니다.

[06:06] 이 도구는 기존의 기능

[06:08] 기능 명세서를 자체적인 PRD 버전으로 변환하고

[06:11] 그런 다음

[06:14] 전체 프로젝트를 실행하는 데 도움이 되는

[06:18] 세부적인 단계별 작업을 생성합니다.

[06:21] 프로젝트에 초기화한 후에는

[06:23] 이렇게 말할 수 있죠. "이 기능들을 바탕으로

[06:26] PRD를

[06:27] 만들어줘"

[06:34] 시스템은 실제로 작업할 수 있는

[06:37] 형식으로 이를 처리하고

[06:39] 그 작업이 완료되면

[06:42] 프로젝트 완료를 위한

[06:44] 개별 작업으로 모두 변환합니다

[06:47] 그리고 이러한 작업들을

[06:50] 복잡도 수준별로 정렬합니다

[06:53] 이 작업이 완료되면

[06:55] 질문에 효과적으로 답변하거나

[06:57] 작업을 해결하기 위한

[07:00] 충분한 맥락이 있는지 판단합니다

[07:02] 맥락이 부족하다면, 작업을 확장하고

[07:04] 더 세분화된 작업으로 분해합니다

[07:07] 이를 통해 한 번에 코딩이 가능해집니다

[07:09] 제가 정말 좋아하는 점은

[07:12] 솔루션을 구축하면서

[07:14] 자체적으로 수정하고 작업 목록을 업데이트하여

[07:17] 방금 구축한 내용을 반영한다는 것입니다

[07:20] 또한 다른 멋진 기능들도 많이 있는데

[07:23] 특정 기능의 복잡도를 분석하고

[07:24] 세부적인 하위 작업으로 분해하거나

[07:27] 작업을 확장하고 제거할 수 있습니다

[07:29] 정말 많은 멋진 기능들이

[07:32] 있다는 거죠

[07:33] 이를 통해 할 수 있는 게 정말 많습니다

[07:36] 따라서 "클로드야, 렙릿이야,

[07:38] 내가 꿈꾸는 멋진 앱을 만들어줘"라고 하고

[07:40] 결과물에 실망하는 대신

[07:43] 우리는 구체적인 비전을 바탕으로

[07:45] 매우 세밀한 지침을 제공하는

[07:47] 방식으로 나아갈 수 있습니다

[07:50] 커서와 같은 시스템에

[07:52] 이러한 구체적인 비전을 제시하면

[07:56] 실제로 의미 있고 작동하는 방식으로

[07:58] 앱을 만들어낼 수 있습니다

[08:00] 저는 앞으로의 발전이 정말 기대됩니다

[08:03] 왜냐하면 이런 도구들이야말로

[08:05] 진정으로 개발하고 싶어하는 사람들

[08:08] 이런 도구들로 멋진 회사를 만들거나

[08:11] 자신만의 것을 만들고 싶어하는

[08:14] 마음 깊은 곳에서부터

[08:15] 무언가를 개발하고

[08:17] 멋진 회사를 만들고 싶어하는

[08:19] 사람들을 도울 수 있기 때문입니다

[08:21] 이런 도구들이 그들이

[08:22] 실제로 멋지고 잘 작동하는

[08:25] 것들을 만들 수 있게 해줄 겁니다

[08:27] 제가 소개하는 5가지 도구 중에서

[08:30] 이것이 아마도

[08:31] 대부분의 사람들이 시작해보면 좋을

[08:32] 가장 추천하고 싶은 도구입니다

[08:36] 세 번째로 소개할 도구는

[08:39] Exa AI의 Exa Search입니다

[08:43] 때로는 워크플로우에 추가적인

[08:45] 맥락이 필요할 때가 있습니다

[08:49] 예를 들어 랜딩 페이지를 만들면서

[08:50] 실제 통계를 통합하고 싶을 때나

[08:52] 사용 중인 기술 스택에서

[08:55] 반복적인 문제나 버그가 발생할 때

[08:58] 어딘가에 문서화되어 있을

[09:00] 더 나은 해결책을 찾아야 할 수도 있죠

[09:02] 어떤 경우든

[09:04] 프로그래매틱 검색 도구는

[09:06] 필수적입니다. 많은 사람들이

[09:10] Perplexity를 좋아하는데, 그걸 쓰지 말라는 건

[09:13] 아니지만, 제 경험상 Exa AI가

[09:16] 더 나은 것 같습니다

[09:19] 실제로 Exa AI는 훨씬 더 나은 개발 경험을

[09:22] 제공합니다. 더 나은 결과와

[09:24] 더 많은 기능을 사용할 수 있죠

[09:28] 대부분의 이런 도구들처럼

[09:30] 사용법이 매우 간단합니다

[09:34] 저는 최근에

[09:36] 제 SaaS 회사 중 하나의

[09:38] 새로운 랜딩 페이지를 디자인하고 있었는데

[09:42] 디자인과 일부 기능들이

[09:44] 마음에 들었지만

[09:46] 여기에 AI가 임의로 만들어낸

[09:48] 통계들은 마음에 들지 않았습니다

[09:50] 이걸 업데이트하려면 어떻게 해야 할까요?

[09:52] 여기에 들어와서

[09:55] 이 섹션을 컨텍스트로 추가할 수 있습니다

[09:57] 아, 죄송합니다. 10분을 초과했네요

[10:02] 10분 안에 끝내려고 했는데 더 걸렸습니다

[10:04] 죄송합니다

[10:08] 제가 무엇을 하는지 모르고 있었네요

[10:10] 15분 안에 끝내보도록 하겠습니다

[10:12] 커서를 여기에 두고

[10:15] Exa AI를 사용해서 이 주장들에 대한 실제 검증 가능한

[10:21] 통계를 찾아달라고 요청하고

[10:26] 새로운 실제 통계를

[10:28] 받을 수 있습니다

[10:32] AI 코딩 프로세스나

[10:35] 다른 어떤 프로세스든

[10:37] 결국 중요한 것은 컨텍스트를 다루는 것입니다

[10:41] 시스템에 전달하는 컨텍스트를

[10:44] 강력하게 제어해야 합니다

[10:46] 컨텍스트가 너무 복잡하거나

[10:49] 너무 부족하면

[10:51] 결과물이 항상 빗나가게 됩니다

[10:54] Exaarch는 우리가 더 정기적으로

[10:57] 더 정확하고 정밀하게

[11:00] 목표를 달성할 수 있게 해주는 도구입니다

[11:02] 여기서 보시다시피 재귀적으로

[11:05] 검색하고 결과를 수집하고

[11:07] 검색하고 결과를 수집하는 과정을

[11:08] 반복하면서

[11:10] 제가 요청한 쿼리에 대한

[11:13] 답을 효과적으로 찾아내고 있습니다

[11:16] 보시다시피 지금

[11:18] 여러 가지 다른

[11:20] 통계들을 가져와서

[11:22] 이러한 주장들을 뒷받침하고 있고

[11:24] 이제 이것들을 앱에 통합하라고 지시할 수 있습니다

[11:26] 리스트의 네 번째는

[11:28] Model Context Protocol 또는 Anthropic의

[11:31] 지식 그래프 메모리입니다

[11:34] 종종 우리는 컨텍스트 윈도우를

[11:37] 전환해야 하는 상황에 직면합니다

[11:39] 새로운 컨텍스트를 위해

[11:41] 하나의 채팅에서 다른 채팅으로 이동하거나

[11:44] 또는 우리가 만든

[11:46] 가치 있는 것을

[11:48] 완전히 다른 프로젝트에서

[11:50] 기억하고 싶을 때가 있죠

[11:52] 이것은 특정한

[11:55] 디버깅 방법일 수도 있고

[11:57] 앱이 복잡해질 때

[12:00] 서로 다른 데이터 간의

[12:02] 관계를 저장하는 방법일 수도 있습니다

[12:04] 또는 과거에 일어난

[12:07] 다른 일들을 기반으로 프롬프트를

[12:10] 동적으로 업데이트하고 싶을 수도 있죠

[12:12] 어쩌면 우리만의

[12:14] Claw Taskmaster 버전을 만들어서

[12:16] 작업 목록을 붙여넣고

[12:19] 진행 상황을

[12:20] 추적하고 싶을 수도 있고

[12:22] 진행 과정을 기록하고 싶을 수도 있습니다

[12:24] 이런 도구가 해결해주는

[12:25] 문제들이 정말 많지만

[12:28] 아주 기본적인 예시를 통해

[12:31] 시스템에 메모리를 부여하는 방법을 보여드리겠습니다

[12:33] 여기 이 앱의 예시를 보겠습니다.

[12:35] 반복적으로 발생하던 문제가

[12:36] 있었는데, 바로 컬러 팔레트가 이상하게 전환되는 것이었죠.

[12:39] 새로운 기능을 추가할 때마다

[12:41] 색상이 변경되곤 했습니다.

[12:43] 그래서 우리는 이렇게 할 수 있습니다.

[12:45] 라이트 모드와 다크 모드 버전의

[12:47] 앱을 가져와서 메모리에 저장하는 거죠.

[12:53] 메모리에 저장하면

[12:57] 시스템이 하는 일은

[12:59] 메모리 저장소에

[13:01] 새로운 엔티티들을 생성하여

[13:03] 그 정보를 저장하는 것입니다.

[13:07] 이제 라이트 모드 테마에서

[13:09] 실제로 어떤 것이 생성되었는지

[13:11] 살펴보면, 시스템이

[13:13] 이러한 관찰들을 생성합니다.

[13:15] "흰색 배경을 사용할 때마다

[13:17] 이 변수를 사용하고,

[13:19] 텍스트 색상은 이것을 사용하며,

[13:22] 제목은 이것을 사용한다"는 식으로요.

[13:23] 이렇게 기본적으로

[13:26] 색상 테마들을 기억하게 됩니다.

[13:29] 그리고 나서

[13:30] 이들 사이의 관계를 만듭니다.

[13:32] 방금 생성된 다양한 엔티티들이

[13:36] 서로 어떻게 연결되어 있는지

[13:37] 볼 수 있죠.

[13:39] 또 다른 좋은 예시를 들어보겠습니다.

[13:41] AI 개인 트레이너를

[13:44] 만드는 프로젝트가 있는데요,

[13:46] 1-2년에 걸친 피트니스 플랜을

[13:48] 만드는 과정에서

[13:51] 데이터베이스 내에

[13:53] 다양한 관계들이 존재합니다.

[13:55] 매크로 사이클이 있고,

[13:58] 장기적인 목표가 있으며,

[14:01] 이것들이 점점 더 작은 사이클로

[14:04] 나뉘게 됩니다. 각 사이클 내에는

[14:06] 세트 구성이 있고,

[14:09] 반복 구성이 있으며,

[14:10] 해야 할 운동이 있고,

[14:12] 이 모든 정보들이

[14:14] 매우 빠르게 복잡해집니다.

[14:18] 그러다 발견한 것은 시스템이

[14:21] 이 모든 엔티티들 간의

[14:24] 관계를 제대로 기억하지

[14:26] 못한다는 것이었죠.

[14:27] 그래서 새 프로그램을 만들 때

[14:30] 기존 관계를 유지하지 못했습니다.

[14:33] 따라서 지식 그래프 메모리 같은

[14:36] 도구를 사용하면 그 관계를

[14:40] 정의할 수 있고,

[14:41] 관련된 요청을 할 때

[14:44] 메모리를 참조하도록 해서

[14:46] 모든 것이 서로 어떻게

[14:48] 연관되어야 하는지 정확한 구조를

[14:51] 알 수 있게 됩니다.

[14:53] 이게 좋은 이유는

[14:54] 코딩 세션을 오가다가

[14:56] 며칠이 지나거나, 심지어 몇 시간이

[14:59] 지났을 때도,

[15:00] 복잡한 작업을 하고 있었다면

[15:02] 문제를 해결할 때의 중요한 정보를

[15:05] 나중을 위해 기억해둘 수 있다는

[15:07] 점입니다.

[15:09] 여러분의 실제 프로젝트에

[15:11] 가장 적합한 방법을 알게 될 거예요.

[15:13] 이런 시스템으로

[15:15] 복잡성을 관리하는 건 식은 죽 먹기죠.

[15:18] 누가 싫어하겠어요?

[15:20] 마지막으로 두 가지를 한 번에 소개하겠습니다.

[15:24] Magic UI MCP와 21st Devs Magic MCP입니다.

[15:30] 매우 비슷하게 들리고

[15:31] 매우 유사한 일을 한다는 점에서 혼란스러운데

[15:33] 비슷한 일을 하지만,

[15:35] 둘 다 'magical'이라는 단어를 쓰고 싶었나 봅니다.

[15:38] 이 채널에서 자주 이야기했듯이,

[15:41] 전문적인 디자인은 실제로 권위를 부여합니다.

[15:45] 이는 고객들에게 보내는 잠재의식적 신호로,

[15:48] 여러분이 해당 분야의 전문가이며

[15:51] 신뢰할 수 있다는 것을 보여줍니다.

[15:52] 따라서 디자인에 특화된 MCP 서버를 가지는 것은

[15:56] 큰 장점이 될 것입니다.

[15:59] 저는 개인적으로 Magic UI를 많이 사용하는데,

[16:02] 특히 랜딩 페이지 디자인에

[16:05] Magic UI를 정말 좋아합니다.

[16:07] 제가 앞서 보여드렸던 이 랜딩 페이지는

[16:09] 사실상 전체가

[16:11] 아직 완성하지 않아서

[16:13] 푸터가 그대로 있지만

[16:15] Magic UI로 만들어졌습니다.

[16:16] 이전 영상들을 보셨다면

[16:19] 아마 보셨을 거예요.

[16:21] 21st Dev는 이와 비슷한데,

[16:24] 제가 보기에는 실제 앱 UI를 위한

[16:26] 컴포넌트들이 더 많습니다.

[16:29] 프리미엄 스토어와 크리에이터,

[16:31] 템플릿과 컬렉션을 통해

[16:33] 정말 멋진 패키지나

[16:35] 특정 기능을 위한 스타터 키트를 찾을 수 있습니다.

[16:38] 예를 들어, 여기 들어가서

[16:42] Cult UI를 보시면

[16:44] 정말 많은 독특한 컴포넌트들이 있습니다.

[16:47] 솔직히 말해서

[16:49] 접근할 수 있는 멋진 것들이 많죠.

[16:50] 이걸 어떻게 활용할 수 있을까요?

[16:53] 참고로 이 두 도구 모두

[16:55] MCP 서버를 가지고 있습니다.

[16:57] 예를 들어 Magic UI의

[16:58] 깜빡이는 그리드가 마음에 들었다고 합시다.

[17:02] 제 앱에 이것을 추가하고 싶다면,

[17:05] 예를 들어 여기 아래에

[17:06] 이 섹션에

[17:08] 깜빡이는 그리드를 넣고 싶다면,

[17:11] 이 파일에 들어와서

[17:12] 컨텍스트로 전달하고,

[17:15] Magic UI를 사용해서 이 섹션에

[17:21] 깜빡이는 그리드 배경을 추가하라고 하면 됩니다.

[17:25] 자, 보이시죠?

[17:28] 물론 약간의 조정이 필요하지만,

[17:30] MCP 서버를 사용해서

[17:32] 이렇게 쉽게 구현할 수 있다는 게 정말 멋집니다.

[17:36] 문서를 읽고

[17:37] 어떻게 해야 할지 바로 알 수 있죠.

[17:40] 이제 여기서

[17:42] 투명도를 조정하고

[17:44] 배경을 더 미묘하게 만들어볼 거예요.

[17:47] 이런 디자인 중심의 MCP들의 방향성이

[17:50] 정말 마음에 드는데요,

[17:52] 지금은 Figma처럼

[17:54] 이미 디자이너이거나

[17:56] 디자이너가 있어서

[17:58] Figma에서 작업한 것을

[17:59] 도구로 가져오려는 경우에만

[18:01] 도움이 되는데,

[18:03] 그렇지 않다면

[18:05] Figma를 MCP로 사용하는 것이

[18:07] 큰 도움이 되지 않습니다.

[18:09] 그래서 UI 컴포넌트와 라이브러리,

[18:11] 그리고 앱에 통합하는 방법에

[18:13] 초점을 맞춘

[18:15] 이런 회사들이 정말 좋습니다.

[18:18] 제 생각에는 모바일 앱 디자인에 특화된

[18:21] MCP가 있으면 정말 좋을 것 같은데,

[18:24] 아직 본 적이 없네요.

[18:26] 혹시 아시는 게 있다면

[18:28] 댓글로 알려주세요.

[18:29] 확인해보고 싶습니다.

[18:31] 이것으로 영상을 마치겠습니다.

[18:32] MCP는 바이브 코딩에서 큰 강점이 됩니다.

[18:39] 여러분에게 잘 맞는 서버를 찾아서

[18:41] 적극적으로 활용하시기 바랍니다.

[18:43] 이런 서버들과 실제 워크플로우에 대해

[18:46] 더 자세히 알아보고 싶으시다면,

[18:49] 5월에 제 스쿨 그룹에서

[18:50] 실용적인 워크플로우에 대한

[18:52] 긴 튜토리얼을 제공할 예정입니다.

[18:55] 무료로 제공되니 확인해보세요.

[18:57] 이것으로 영상을 마치겠습니다.

[19:01] 다음 영상에서 만나요.

[19:03] 감사합니다.

[19:06] [음악]