MCP 앱이 인터넷을 바꾸고 있습니다. 직접 만들어 보는 법! (Skybridge)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00AI로 인해 업계 전반에 거대한 패러다임 전환이 일어나고 있습니다.
00:00:04요즘은 일상적인 검색이나 조사를 위해 챗봇을 사용하는 사용자들이 점점 늘고 있으며,
00:00:10이것이 바로 MCP 앱 개념이 큰 인기를 끌고 있는 이유입니다.
00:00:14JSON 파일이나 마크다운 문서를 덜렁 출력하는 대신,
00:00:18더 많은 앱과 서비스가 챗봇 내부에서 상호작용하고 유용한 위젯을 제공하는 방식으로 전환하고 있습니다.
00:00:24그리고 최근 Alpik이라는 회사에서 SkyBridge라는 멋진 신규 프레임워크를 출시했습니다.
00:00:29다양한 사용 사례에 맞춰 자신만의 맞춤형 MCP 앱을 매우 쉽게 만들 수 있게 해 주죠.
00:00:35따라서 오늘 영상에서는 SkyBridge를 살펴보고, 어떻게 작동하는지 직접 테스트해 보겠습니다.
00:00:41정말 흥미로울 테니 바로 시작해 보겠습니다.
00:00:47SkyBridge가 왜 그렇게 중요한지 제대로 이해하려면 이 새로운 앱들의 작동 원리를 알아야 합니다.
00:00:53기존의 웹 앱을 만들 때는 오직 한 명의 사용자, 즉 인간만을 위해 빌드합니다.
00:00:58하지만 MCP 앱을 만들 때는 인간과 AI 어시스턴트라는 두 명의 사용자를 동시에 겨냥하게 됩니다.
00:01:05두 사용자 모두 정확히 똑같은 인터페이스를 공유하기 때문입니다.
00:01:08사용자가 버튼을 클릭하고, 입력을 타이핑하고, 슬라이더를 움직이면 LLM이 그 상태를 즉시 인식합니다.
00:01:15반대로 LLM이 백그라운드에서 데이터를 업데이트할 수도 있으며,
00:01:18눈앞에서 실시간으로 UI가 변경됩니다.
00:01:21SkyBridge는 복잡한 내부 연결, 프로토콜 브리징, 상태 동기화, 보안 규칙 등을 모두 처리해 주는
00:01:26오픈소스 TypeScript 프레임워크입니다.
00:01:30따라서 여러분은 표준 React 코드를 작성하는 데만 집중할 수 있습니다.
00:01:34자, 이전에 ChatGPT나 Claude용 MCP 앱을 만들어 보신 적이 있다면
00:01:39로컬 테스트 과정이 엄청난 골칫거리였다는 것을 아실 겁니다.
00:01:43사소한 CSS 오타 하나를 고치기 위해서도 퍼블릭 터널을 수동으로 설정하고,
00:01:47설정을 복사해 붙여넣고, 채팅 세션을 재시작해야만 했죠.
00:01:52하지만 SkyBridge 1.0의 가장 멋진 점은 개발자 도구(DevTools) 제어판을 완전히 재설계했다는 것입니다.
00:01:59이제 로컬 개발 서버를 실행하면 브라우저에 에뮬레이터 대시보드가 실행됩니다.
00:02:04그리고 이 대시보드 안에는 유용한 세 가지 도구가 있습니다.
00:02:08첫 번째는 Alpik 플레이그라운드입니다.
00:02:11실시간 핫 모듈 교체(HMR)를 사용하여 도구를 테스트하고 React 위젯을 수정할 수 있는 로컬 샌드박스죠.
00:02:17아직 실제 LLM을 건드리지 않고도 변경 사항을 즉시 확인할 수 있습니다.
00:02:21두 번째는 통합 터널입니다.
00:02:24말 그대로 단 한 번의 클릭으로 안전한 퍼블릭 URL을 통해 로컬 서버를 외부에 공개할 수 있습니다.
00:02:30따라서 더 이상 외부 터널링 도구로 번거롭게 애쓸 필요가 없습니다.
00:02:33이 URL을 ChatGPT의 개발자 설정에 붙여넣기만 하면 바로 라이브로 작동합니다.
00:02:37세 번째는 비콘 감사(Beacon Audit) 도구입니다.
00:02:40앱을 공개 스토어에 제출할 계획이라면 이는 정말 구세주 같은 기능입니다.
00:02:44앱의 메타데이터, 도구, 보안 정책을 스캔하여 흔히 발생하는 반려 사유들을 잡아내 주니까요.
00:02:49검토를 위해 앱을 제출하기 전에 미리 확인할 수 있습니다.
00:02:52가장 멋진 점은 MCP 앱을 한 번도 만들어 본 적이 없더라도
00:02:56선호하는 AI 에이전트에 SkyBridge 스킬을 간편하게 설치하여 즉시 시작할 수 있다는 것입니다.
00:03:02자, 이제 직접 작은 MCP 앱을 하나 만들어 보고 어떻게 작동하는지 살펴보겠습니다.
00:03:07이번 데모를 위해 카메라 렌즈를 쇼핑할 수 있는 작은 이커머스 웹사이트를 미리 만들어 두었습니다.
00:03:11장바구니와 체크아웃 기능이 포함된 완전히 구축된 React 기반 스토어죠.
00:03:14여기에 MCP 앱을 추가해 보려고 합니다.
00:03:19잠재 고객이 ChatGPT나 Claude 같은 챗봇을 사용하여 카메라 렌즈 추천을 검색할 때
00:03:22우리 MCP 앱을 즉시 호출하여 최종 사용자에게 상품 목록을 보여줄 수 있도록 말이죠.
00:03:30이전에도 말씀드렸듯이 가장 쉽게 시작하는 방법은 SkyBridge 스킬을 설치하는 것입니다.
00:03:36전역으로 설치하거나 특정 저장소(repo)에만 설치할 수 있습니다.
00:03:42이번 데모에서는 저장소 안에 설치해 보겠습니다.
00:03:46이제 보시다시피 SkyBridge 스킬이 포함된 .agents 디렉토리가 생성되었습니다.
00:03:51이제 제가 해야 할 일은 Claude에게 제 이커머스 샵을 위한 MCP 앱을 만들어 달라고 요청하는 것뿐입니다.
00:03:57앱을 빌드하기 전에 Claude는 앱의 목적에 대한 몇 가지 추가 질문을 먼저 던져서
00:04:04어떤 종류의 기능을 포함해야 하는지 더 잘 이해하려고 할 것입니다.
00:04:09이번 데모에서는 사용자가 찾고 있는 조건에 따라 렌즈를 목록으로 보여주는 앱을 만들고자 합니다.
00:04:13그런 다음 렌즈를 선택해 나란히 비교하고 장바구니에 담은 뒤
00:04:18고객을 위한 빠른 체크아웃 솔루션을 제공할 수 있습니다.
00:04:24이것이 제가 해야 할 전부입니다.
00:04:28이제 Claude가 알아서 작업을 수행하도록 두면 됩니다.
00:04:29몇 분 정도 지나면 Claude가 MCP 앱을 생성한 것을 볼 수 있습니다.
00:04:32가장 멋진 점은 이제 SkyBridge가 제공하는 개발자 대시보드를 열어
00:04:37직접 테스트해 볼 수 있다는 것입니다.
00:04:41대시보드를 열어 어떻게 생겼는지 확인해 보겠습니다.
00:04:44여기 렌즈 검색 도구와 주문 접수 도구가 있습니다.
00:04:47먼저 렌즈 검색을 위해 찾고 있는 렌즈의 최대 가격을 입력하겠습니다.
00:04:53그리고 렌즈는 다섯 개 정도로 제한해 보죠.
00:05:00보시다시피 2,000달러 미만의 14개 결과가 검색되었습니다.
00:05:03데스크톱에서 앱이 어떻게 보이는지 확인해 보죠.
00:05:04모바일 보기로 미리 볼 수도 있습니다.
00:05:09좋아 보입니다.
00:05:12다크 모드와 라이트 모드도 지원합니다.
00:05:14여기 도구 출력 결과와 상태(state)가 표시됩니다.
00:05:15렌즈 몇 개를 선택하면 어떤 일이 일어나는지 지켜보세요.
00:05:18보시다시피 상태가 실시간으로 업데이트되는데, 정말 멋진 기능입니다.
00:05:23이제 렌즈 세 개를 골라보겠습니다.
00:05:26비교하기 버튼을 누르면 비교 화면으로 이동합니다.
00:05:31여기서 세 개의 렌즈를 모든 파라미터와 함께 나란히 비교할 수 있습니다.
00:05:34이 선택이 마음에 든다면 체크아웃으로 진행할 수도 있습니다.
00:05:40그러면 체크아웃 단계로 넘어가서 성함, 이메일, 배송 주소를 입력하고 주문을 완료할 수 있습니다.
00:05:45보시다시피 이 대시보드는 모든 것이 예상대로 작동하는지 위젯을 테스트하는 데 정말 유용합니다.
00:05:49이제 Claude로 이동하여 설정(settings)에 들어가면 커넥터(connectors)라는 섹션이 있습니다.
00:05:59여기서 사용자 지정(customize)을 클릭해야 합니다.
00:06:08이 과정에는 터널 URL이 필요합니다.
00:06:16따라서 터널이 활성화되어 있는지 꼭 확인하세요.
00:06:19그런 다음 이 URL을 복사하기만 하면 됩니다.
00:06:21커넥터 섹션에서 사용자 지정 커넥터를 추가하면 됩니다.
00:06:24이름을 입력하고요.
00:06:26해당 터널 URL을 붙여넣습니다.
00:06:31그리고 추가(add)를 클릭하세요.
00:06:33저는 여기에 이미 추가해 두었습니다.
00:06:38마지막으로 해야 할 일은 연결(connect)을 클릭하는 것입니다.
00:06:39이러한 도구를 자동으로 실행할지, 아니면 사용자 승인을 거칠지 권한을 설정할 수도 있습니다.
00:06:41그런 다음 새 채팅을 시작하면 됩니다.
00:06:45새 채팅에서 인물 사진 촬영용으로 2,000달러 미만의 가장 좋은 렌즈 몇 가지를 추천해 달라고 요청할 수 있습니다.
00:06:53이제 2,000달러 미만의 훌륭한 인물 사진용 렌즈를 찾기 위해 렌즈 숍 카탈로그를 검색하겠다고 표시되는 것을 볼 수 있습니다.
00:06:57이것 좀 보세요.
00:07:05우리의 MCP 앱이 열렸습니다.
00:07:12정말 멋지지 않나요?
00:07:14여기서도 똑같은 작업을 수행할 수 있습니다.
00:07:16렌즈 중 일부를 선택하고요.
00:07:18비교 섹션으로 이동합니다.
00:07:20이렇게 작은 비교표가 나타납니다.
00:07:24한 가지 눈에 띄는 점은 이전 도구 상태에서 비롯된 여백이 약간 있다는 것입니다.
00:07:27이 부분은 아마 CSS로 수정할 수 있을 것입니다.
00:07:32하지만 전반적으로 아주 훌륭해 보입니다.
00:07:40체크아웃하는 옵션도 사용할 수 있습니다.
00:07:43주문을 진행할 수 있는 체크아웃 섹션으로 이동하게 되죠.
00:07:46정말 대단하지 않나요?
00:07:49마지막으로 가장 중요한 점은, 퍼블릭 앱 스토어에 앱을 게시할 준비가 되었는지 확인하기 위해
00:07:54개발자 대시보드를 통해 앱 감사를 실행하고 문제가 있는지 점검할 수 있다는 것입니다.
00:07:57기본적으로 이게 전부입니다.
00:08:02단 몇 분 만에 SkyBridge를 사용하여 프로덕션 수준의 MCP 앱을 빌드할 수 있었습니다.
00:08:10이론상으로는 AI 앱 스토어에 제출할 수 있는 수준이죠.
00:08:11SkyBridge를 통해 얼마나 쉽게 시작할 수 있는지 잘 보여드렸기를 바랍니다.
00:08:16솔직히 현대 웹의 미래처럼 느껴집니다.
00:08:20앞으로 챗봇 안에서 이러한 상호작용형 MCP 위젯 앱을 점점 더 많이 보게 될 것입니다.
00:08:25개발자 입장에서 이런 종류의 앱을 훨씬 더 쉽게 만들 수 있도록 돕는 SkyBridge 같은 프레임워크가 존재한다는 것은 반가운 일입니다.
00:08:28자, 여기까지입니다.
00:08:34이것이 바로 요약된 SkyBridge입니다.
00:08:42SkyBridge에 대해 어떻게 생각하시나요?
00:08:44써 보셨나요?
00:08:46사용하실 건가요?
00:08:47아래 댓글 섹션에 남겨주세요.
00:08:48이러한 기술 분석 콘텐츠가 마음에 드신다면 영상 아래의 좋아요 버튼을 눌러 알려주세요.
00:08:49그리고 채널 구독도 잊지 마세요.
00:08:52BetterStack의 Andrus였으며, 다음 영상에서 뵙겠습니다.
00:08:58여러분
00:09:01BetterStack의 Andrus였으며, 다음 영상에서 뵙겠습니다.
00:09:16시청해주셔서 감사합니다.