00:00:00지난 두 달 동안 AI 커뮤니티는 MCP에 큰 문제가 있다는 사실을 이미 깨달았습니다.
00:00:04그리고 이 때문에 커뮤니티는 실제로 몇 가지 해결책을 내놓았습니다.
00:00:08하지만 모든 해결책에는 큰 공백이 있었습니다.
00:00:10얼마 전 저희는 Docker의 해결책에 대한 영상을 만들었는데요,
00:00:12지금까지는 그것이 MCP 문제에 대한 최선의 해결책이라고 생각했습니다.
00:00:16Docker는 에이전트가 MCP 도구를 직접 호출하는 자바스크립트 코드를 작성할 수 있게 해주는 '코드 모드'를 출시했습니다.
00:00:21이것은 MCP 도구가 컨텍스트 창에 도구와 설명을 노출함으로써
00:00:24많은 컨텍스트를 소모하던 문제를 해결했습니다.
00:00:27따라서 많은 MCP를 사용하면 컨텍스트 창이 불필요한 도구들로 가득 차게 되는데,
00:00:32대부분은 평소에 필요하지도 않은 것들입니다.
00:00:36하지만 Docker MCP 게이트웨이를 사용하면 Docker가 설정한 MCP에만 갇히게 되고
00:00:41로컬 및 원격 MCP 사용에 제한이 있었습니다.
00:00:43또한, 이러한 커스텀 도구들을 함수로 저장할 수도 없었습니다.
00:00:47이 모든 일은 Cloudflare가 이 문제를 파악하고, 이러한 도구들을
00:00:51컨텍스트 창에 두는 대신 실행 가능한 코드로 존재하게 하자는 해결책을 제안하면서 시작되었습니다.
00:00:56이 프로토콜의 원래 설계자인 Anthropic도 제품의 이러한 간극을 인정했고,
00:01:00이 정확한 문제를 강조하는 논문을 발표하며 뒤를 이었습니다.
00:01:04이후 사람들은 이 문제를 진지하게 받아들이고 해결책을 탐구하기 시작했습니다.
00:01:09하지만 모든 도구를 타입스크립트 파일로 변환하는 그들의 방식에도 한계가 있습니다.
00:01:13많은 MCP가 연결된 경우, 각각을 개별적으로 코드로 변환해야 하며
00:01:18그 과정에서 오류가 발생하지 않도록 많은 시간을 할애해야 합니다.
00:01:22하지만 이것이 공인된 문제가 된 이후로,
00:01:24사람들은 여전히 더 나은 해결책을 내놓으려 노력하고 있습니다.
00:01:26그러던 중 저희는 'MCP to CLI'라는 새로운 도구를 발견했습니다.
00:01:30MCP to CLI는 모든 MCP 서버를 배시(bash) 명령으로 실행할 수 있는 CLI 도구로 변환하여
00:01:36MCP가 가진 컨텍스트 비대화 문제를 해결합니다.
00:01:40현재 저희 팀은 주로 Cloud Code를 사용하는데, 여기에는 이 문제의 일부를 해결하려는
00:01:45CLI 플래그가 있습니다. 이 도구는 모든 도구를 컨텍스트 창에 미리 노출하지 않음으로써
00:01:50초기 MCP 컨텍스트 비대화 문제를 해결합니다. 하지만 Cloud Code가 필요할 때마다
00:01:55각 도구를 동적으로 로드할 수 있게 해주지만, 여전히 다른 문제가 남습니다. 아시다시피,
00:02:00MCP는 출력을 컨텍스트 창에 직접 반환합니다. 그리고 MCP 도구가
00:02:05대량의 출력을 반환하는 경우, 어쨌든 컨텍스트 창에 남게 되어
00:02:10불필요한 컨텍스트 비대화를 초래합니다. 동일한 문제를 겨냥한
00:02:15CLI Hub 같은 다른 오픈 소스 도구들에 대해서도 들어보셨겠지만, 그것들은 런타임이 아닌
00:02:20빌드 타임에 변환하기 때문에 비효율적입니다. 그렇다면 런타임 변환이란 정확히 무엇일까요?
00:02:25도구가 실제로 호출되는 순간에 배시 명령으로 변환되는 것을 의미합니다. 이것만 보면 괜찮아 보이지만,
00:02:29원본 MCP 자체가 업데이트되면 어떻게 될까요? 이 도구는 런타임에
00:02:34MCP 도구를 구축하기 때문에, 실제 MCP의 모든 변경 사항이 변환된 도구에 자동으로 반영됩니다.
00:02:39만약 빌드 타임에 도구를 만들었다면 이런 일은 불가능했을 것입니다. 그 경우,
00:02:43매번 도구를 직접 수동으로 가져와서 업데이트해야 했을 테니까요. 하지만 도구를 호출할 때마다
00:02:48매번 변환하면 반복적인 호출이 느려질 것이라고 생각할 수도 있습니다. 바로 그 지점에서
00:02:53이 도구에 내장된 캐싱 메커니즘이 등장합니다. 기본적으로 1시간의 수명을 가진
00:02:58캐시에 모든 MCP 도구를 저장합니다. 따라서 자주 사용되는 모든 MCP 도구는
00:03:03캐시로 들어가 1시간 동안 유지됩니다. 이를 통해 에이전트는 런타임의 유연성을 희생하지 않고도
00:03:08더 빠르게 도구를 가져올 수 있습니다. 이 도구는 모든 MCP 서버가 내부적으로 사용하는 것과 동일한
00:03:13MCP 파이썬 SDK를 기반으로 구축되었습니다. 따라서 모든 MCP 도구 호출을
00:03:19단순히 배시 명령으로 실행하고, 요청이 있을 때만 응답을 에이전트의
00:03:24컨텍스트 창에 주입합니다. 또한 동일한 CLI 인터페이스를 통해 OpenAPI 및 REST API도 처리하므로,
00:03:30MCP 서버가 없는 기존 API도 정확히 동일한 방식으로 사용할 수 있습니다.
00:03:35이 도구가 없으면 연결할 수 있는 MCP 유형에 제한이 생깁니다.
00:03:39다른 유사한 솔루션들은 대개 모든 유형의 MCP를 한곳에서 작업할 수 있는 유연성을 제공하지 않습니다.
00:03:44토큰 효율성에 대한 주장을 뒷받침하기 위해, 그들은 파이썬 토큰 카운팅 라이브러리인
00:03:49Tiktoken을 사용하여 자동화된 테스트 세트를 실행했습니다. 테스트 결과, 이 도구는 훨씬 저렴하고
00:03:54실행 속도도 훨씬 빨랐습니다. 그러니 저희 말만 믿으실 필요는 없습니다. 실제로
00:03:59수치로 증명되었으니까요. pip를 사용하여 시스템에 설치하거나
00:04:03설치 없이 실행할 수도 있습니다. 저희는 작업 환경을 깨끗하게 유지하기 위해 설치 없이 실행하는 방식을 택했습니다.
00:04:07또한 그들은 에이전트가 이 도구를 더 잘 활용할 수 있도록 돕는 '스킬'도 제공했습니다. 여기에는
00:04:13핵심 워크플로우가 담겨 있으며 에이전트가 알지 못하는 인증 및 캐싱과 같은
00:04:18다양한 작업에 대한 배시 명령 예시를 제공합니다. 하지만 더 진행하기 전에,
00:04:22스폰서인 Orchids에 대해 잠시 말씀드리겠습니다. 대부분의 AI 빌더는 단순한 목업은 잘 처리하지만,
00:04:27복잡한 로직이나 다중 파일 구조가 필요할 때는 한계가 있습니다. 바로 그때 Orchids가 필요합니다.
00:04:32사용자의 환경에서 직접 모든 스택의 앱을 빌드하고 배포할 수 있는 최초의 AI 에이전트입니다.
00:04:36기존 ChatGPT, Claude 또는 Gemini 계정, 심지어 GitHub Copilot을 사용하여
00:04:41원가로 모델을 실행할 수 있습니다. 어떤 스택의 앱이든 처리하도록 설계되었습니다. 웹에만 국한되지 않습니다.
00:04:47모바일 앱과 크롬 확장 프로그램부터 복잡한 AI 에이전트와
00:04:52슬랙 봇까지 모든 것을 빌드하고 배포할 수 있습니다. 이 빌드 결과물들을 보세요. 복잡한 하드웨어 레벨
00:04:57로직을 관리하는 완벽한 OpenClaw 설정, 대규모 라이브 데이터 피드를 실시간으로 처리하는
00:05:02기능적인 블룸버그 터미널, 그리고 기기의 카메라 피드를 직접 활용하는
00:05:07이 건물 식별기 같은 네이티브 모바일 앱까지 가능합니다. 고정 댓글의 링크를 클릭하여 빌드를 시작해 보세요.
00:05:12또한 'March 15' 코드를 사용하면 플랜의 15% 할인을 받을 수 있습니다. 여러분처럼 저희도 부자가 되고 싶습니다.
00:05:17그 방법 중 하나는 시장의 틈새를 찾는 것이죠. 그래서 '말들을 위한 틴더(Grinder)' 같은 기막힌 아이디어를 떠올렸습니다. 농담은 제쳐두고,
00:05:22대규모 제품을 빌드하려면 많은 MCP 도구가 필요합니다. 의존성이 많아서
00:05:27컨텍스트 창이 금방 꽉 차버리기 때문이죠. 저희는 MCP to CLI를 사용해 에이전트를 Supabase MCP에 연결했습니다.
00:05:34저희가 사용하는 백엔드 인프라였기 때문입니다. 이제 이전에 설치한 스킬 덕분에
00:05:38수동으로 아무것도 설정할 필요가 없습니다. 그 스킬이 알아서 모든 것을 처리하고
00:05:43MCP를 구성해 줍니다. 하지만 무작정 설치하기 전에,
00:05:47사용 중인 MCP의 액세스 토큰을 받아야 합니다. 그렇지 않으면
00:05:52저희가 그랬던 것처럼 오류가 발생할 것입니다. 저희는 토큰을 생성해서 Claude에게 추가해 달라고 했습니다.
00:05:57올바르게 구성되면 사용할 수 있는 도구들이 보일 것입니다. 이제 여러분은
00:06:01이 도구가 배시 명령으로 실행된다면 API 키나 액세스 토큰 같은 민감한 데이터가
00:06:06프로세스 목록에 노출되어 안전하지 않을 수 있다고 생각할 수 있습니다. 하지만 이 도구는 보호 계층을 추가했습니다.
00:06:11커맨드 라인 인자(arguments)에 민감한 데이터를 넣지 않습니다. 대신
00:06:15환경 변수를 통해 처리하거나, 액세스 토큰이 저장된 파일 경로를 참조하거나,
00:06:21런타임에 이를 주입하는 시크릿 매니저를 사용합니다. 따라서 보안상 안전합니다. Supabase 연결과
00:06:26마찬가지로, 버전 관리를 위한 GitHub MCP, 브라우저 테스트를 위한 Puppeteer MCP,
00:06:32그리고 최신 문서로 에이전트를 보강하기 위한 Context 7 MCP를 연결했습니다.
00:06:37모든 MCP가 연결된 후, Claude에게 모든 것을 확인해 달라고 요청했습니다.
00:06:42저희 사례의 경우 총 4개의 MCP와 78개의 도구가 연결되었음을 확인했습니다. 또한
00:06:47저희 콘텐츠가 마음에 드신다면 하이프(hype) 버튼을 눌러주세요. 더 많은 콘텐츠를 만들고
00:06:52더 많은 사람에게 도달하는 데 큰 도움이 됩니다. 이제 실제로 연결이 되었으니,
00:06:57앱을 점진적으로 구현할 시간입니다. 클라이언트 측 코드를 Supabase 백엔드에
00:07:02연결하는 것부터 시작했습니다. Claude가 MCP to CLI 명령을 실행하여 프로젝트를 생성할 때,
00:07:07도구 호출에 액세스 토큰을 직접 넣지 않는 것을 확인했습니다. 대신 프로젝트 레벨의
00:07:12.env.local 파일을 참조하여 토큰을 가져왔습니다. 프로젝트를 생성하고 모든 설정을 마친 뒤
00:07:17코드에 연결 로직을 추가했습니다. 그런데 세션 갱신 로직을 위해 미들웨어 파일을
00:07:22사용하고 있는 것을 발견했습니다. 해당 방식은 더 이상 사용되지 않는데(deprecated) 말이죠. 최신 버전의 Next.js는
00:07:27프록시를 사용하며, 이대로 앱을 실행하면 오류가 발생할 것이라는 걸 저희는 알고 있었습니다. 이것은
00:07:31도구를 연결하는 것만으로는 에이전트가 도구의 지시를 따르고 필요할 때 적절히
00:07:36활용하게 하기에 충분하지 않다는 점을 보여줍니다. 그래서 claude.md를 만들고 코드를 작성하기 전에
00:07:42Context 7 MCP를 사용하라고 지시했습니다. 그러면 다시는 이런 일이 발생하지 않겠죠. 그렇게 하면 구현 전에
00:07:47Context 7 MCP를 참조해야 한다는 것을 에이전트가 알게 됩니다. Supabase에 테이블 추가와 인증 설정을 마친 후,
00:07:52Claude에게 미들웨어 경고에 대해 지적하여 수정할 수 있도록 했습니다. 저희가 지시하자,
00:07:57Claude는 마침내 Context 7 MCP를 사용해 문서를 가져와 문제를
00:08:03제대로 해결했습니다. 하지만 이 도구를 더 살펴보면서, claude.md 파일을
00:08:07만드는 것보다 이런 문제를 처리하는 더 좋은 방법이 있다는 것을 알게 되었습니다. 스킬을 사용하는 것이 더 좋은데, 왜냐하면
00:08:11스킬에 대한 설명이 에이전트의 컨텍스트에 직접 로드되기 때문입니다. 따라서 우리가 claude.md에
00:08:16명령을 쏟아붓고 읽기를 바라는 것보다, 에이전트가 어떤 도구를 사용할 수 있고 언제 써야 하는지 이미 더 잘 알게 됩니다.
00:08:21그래서 연결된 모든 MCP에 대한 스킬을 생성해 달라고 요청했습니다. 그러자 Claude는
00:08:26각 MCP에 대한 스킬을 생성했습니다. 각 스킬에는 어떤 도구가 있는지, 어떻게 그리고 언제 사용하는지가 자세히 설명되어 있었습니다.
00:08:32그 문제를 해결하고 나니 다음 문제가 나타났습니다. 우리가 가진 것은 기능과는 거리가 멀었습니다.
00:08:36말들(사용자들)로부터 플랫폼에서 직접 채팅을 할 수 없어 답답하다는 피드백이 왔습니다.
00:08:41그래서 Claude에게 UI 위에 채팅 기능을 구현해 달라고 요청했습니다.
00:08:46직접 테스트해 보니 메시지가 로드되지 않고 로딩 화면만 떴습니다. 그래서 저희는
00:08:51Puppeteer MCP를 사용하여 메시지 흐름을 테스트하도록 했습니다. 에이전트가 직접 클릭하고
00:08:56스크롤하며 자신의 UI와 상호작용하게 하면 정적 코드 리뷰로는 절대 잡을 수 없는 것들을 잡아낼 수 있기 때문입니다.
00:09:01테스트를 위해 두 명의 사용자를 생성했습니다. 하지만 도구 호출마다 새로운 브라우저 인스턴스가
00:09:06생성되었기 때문에 도구 호출 간에 세션 데이터를 유지할 수 없었습니다. 사용한 도구의 수와
00:09:10헤드리스 브라우저에서 작업하는 데 걸린 시간을 보고 깨달은 게 있었습니다. 더 나은 옵션은 그냥
00:09:15MCP가 처리하도록 하는 것이었습니다. 그게 훨씬 빨랐고, 단순한 작업에 7분이나 낭비한 것보다
00:09:21시간이 훨씬 적게 걸렸습니다. 저희는 더 많은 기능과 함께 작동하고
00:09:25이런 엔드 투 엔드 테스트를 위해 세션 유지가 더 잘 되는 Claude 전용 브라우저 확장 프로그램을 선호합니다.
00:09:30또한 MCP는 지속적인 프로세스로 실행되므로 세션 전체에서 상태를 유지할 수 있습니다.
00:09:35이 도구는 JSON이나 원본 출력과 같은 출력 형식에 대한 제어 기능도 제공합니다. 또한
00:09:40LLM 소비를 위한 토큰 효율적인 코딩 형식인 TOON을 지원합니다. Context 7과 같은
00:09:46MCP를 사용할 때는 대개 컨텍스트 창에 거대한 출력 덩어리를 직접 반환합니다.
00:09:51이를 방지하기 위해 claude.md 파일에 Context 7 MCP를 사용할 때마다
00:09:57출력에 TOON 형식을 사용해야 한다는 내용을 추가했습니다. TOON은 들여쓰기와 CSV 스타일의 목록을 결합하여
00:10:02JSON이나 YAML에 비해 방대한 정보를 훨씬 작은 덩어리로 압축하는 효율적인 형식입니다.
00:10:07이렇게 하면 불필요한 토큰 낭비를 막을 수 있습니다. 하지만 가장 큰 성과는 MCP가
00:10:12에이전트에 의해 네이티브로 처리될 때는 불가능했던 기능에서 나왔습니다. Cursor가 제품 내에서
00:10:16컨텍스트 편집 워크플로우를 출시했던 것을 기억하실 겁니다. 그들은 MCP 결과를 파일로 취급하고
00:10:22에이전트가 데이터 추출을 위해 grep 같은 배시 스크립트의 패턴 매칭을 사용하게 했습니다. 지난 영상에서 다루었었죠.
00:10:27저희는 이 아이디어를 다른 코딩 에이전트에 구현하려고 했지만, MCP가 에이전트에 의해
00:10:32네이티브로 처리되었기 때문에 큰 성과를 거두지 못했습니다. 하지만 이제 이 CLI를 통해 가능해졌는데,
00:10:37MCP가 배시 명령 도구로 취급되기 때문입니다. 그래서 저희는 claude.md 파일에 어떤 MCP 도구라도
00:10:43큰 출력을 생성할 경우, 이를 컨텍스트 창에 로드하는 대신 지정된 경로의 파일로
00:10:49리다이렉션하라는 지침을 추가했습니다. 저희는 progress.json 파일을 통해
00:10:54이 프로젝트의 진행 상황을 추적하고 있었습니다. 지침을 추가한 후 Claude에게 목록에서 한 가지 기능을 구현해 달라고 했습니다.
00:10:59그러자 Claude는 도구 호출을 위해 Context 7 MCP를 사용했지만, 출력을 컨텍스트 창에
00:11:05쏟아붓는 대신 파일로 파이핑(piping)하고 grep을 사용하여 데이터를 추출하여 구현을 완료했습니다.
00:11:10이 도구를 사용하기 위한 모든 모범 사례가 담긴 claude.md 파일은 AI Labs Pro에서 확인하실 수 있습니다.
00:11:16모르는 분들을 위해 설명하자면, 이곳은 이번 영상과 이전의 모든 영상을 위해 프로젝트에 바로
00:11:20연결해서 쓸 수 있는 템플릿을 제공하는 저희가 최근 출시한 커뮤니티입니다. 저희 활동에서
00:11:25가치를 발견하고 채널을 지원하고 싶으시다면 이것이 가장 좋은 방법입니다. 링크는 설명란에 있습니다.
00:11:29이것으로 이번 영상을 마칩니다. 채널을 지원하고 이런 영상을 계속
00:11:33만드는 데 도움을 주고 싶으시다면 아래의 'Super Thanks' 버튼을 이용해 주세요.
00:11:38언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.