Transcript
00:00:00[빈 오디오]
00:00:30[빈 오디오]
00:01:00.
00:01:20안녕하세요, 여러분. 이번 주
00:01:22Vercel 커뮤니티 세션에 오신 것을 환영합니다. 저는 Vercel 커뮤니티 플랫폼 팀의 Anshuman입니다. 커뮤니티 공간에서 저를 보신 분들도 계실 겁니다. X에서 시청하시는 분들은 community.vercel.com에 접속하셔서 라이브 채팅으로 소통하고 질문을 남겨주세요. 이번 세션에 처음 참여하시는 분들 중 채팅창을 찾기 어려우시다면, 걱정하지 마시고 로그인 버튼을 사용하여 Vercel 계정으로 로그인해 주세요.
00:01:52그러면 저희와 대화하실 수 있습니다. 세션 마지막에 질의응답 시간을 가질 예정이니, 질문을 미리 준비해 채팅창에 올려주시면 마지막에 논의하도록 하겠습니다. 채팅창 이용 시 서로 존중하고 행동 강령을 준수하여 모두에게 안전한 공간을 만들어 주시길 바랍니다. 오늘은 Vercel의 콘텐츠 엔지니어인 Benning과 함께 Chat SDK로 폼 봇을 만드는 방법을 알아볼 예정입니다.
00:02:22안녕하세요, 여러분.
00:02:23안녕하세요, Benning.
00:02:24네, 환영합니다.
00:02:25안녕하세요.
00:02:26채팅에 함께하게 되어 정말 기쁩니다.
00:02:30초대해 주셔서 정말 감사합니다. 동료분이 언급하셨듯, 저는 Vercel의 콘텐츠 엔지니어이자 저희의 새로운 오픈 소스 솔루션인 Chat SDK의 리드 엔지니어 중 한 명입니다. 이 SDK를 사용하면 단일 코드 베이스에서 챗봇을 빌드하여 Slack, Teams, DSP 등 여러 플랫폼에 배포할 수 있습니다.
00:02:49공식 및 커뮤니티 어댑터를 통해 십여 개의 다른 플랫폼도 지원합니다.
00:02:59오늘은 오픈 소스 폼 봇 템플릿을 보여드릴 예정입니다. 이 템플릿은 Upstash, Redis, Resend, 그리고 Chat SDK를 기반으로 작동합니다. 폼 제출 내용을 Slack으로 전달하고, 거기서 내용을 수정하거나 스팸으로 표시하거나 팀 내 담당자에게 전달하여 Slack 안에서 직접 폼 제출을 관리할 수 있게 해줍니다.
00:03:28오, 멋지네요.
00:03:32네, 바로 시작해 보죠.
00:03:34알겠습니다.
00:03:42이게 저희 템플릿입니다. 채팅에 링크를 공유해 드릴 테니 라이브 스트리밍을 보면서 함께 따라 하셔도 되고, 지금 바로 Vercel에 클론해서 설정하셔도 됩니다.
00:03:58문제가 생기면 저를 포함한 커뮤니티 팀이 도와드릴 수 있습니다. 버그가 발생하거나 봇 설정에 도움이 필요하시면 Chat SDK 저장소에 GitHub 이슈를 남겨주셔도 됩니다.
00:04:22Vercel의 모든 오픈 소스 템플릿에는 '원클릭 배포(one-click deploy)' 버튼이 있습니다. 버튼을 한 번만 클릭하면 UI가 나타나며, GitHub 조직과 프로젝트를 생성할 Vercel 팀을 선택하라는 메시지가 뜹니다.
00:04:50여기에 임의의 이름을 입력해 보겠습니다.
00:04:56생성 버튼을 클릭하면 백그라운드에서 템플릿 상세 정보가 불러와집니다.
00:05:06다음 단계에서 Chat SDK 봇을 위한 환경 변수를 설정하게 됩니다.
00:05:17지식 베이스(knowledge base)에도 이 템플릿과 연동되는 가이드가 준비되어 있습니다.
00:05:27라이브 스트리밍 중이나 이후에 가이드를 참고하여 직접 폼 봇을 빌드할 수 있습니다. 템플릿에는 Slack 앱 매니페스트(Slack app manifest)라는 것도 포함되어 있습니다.
00:05:47Slack 앱을 만들 때 'from a manifest'를 선택하고 워크스페이스를 지정하면, 여기에 매니페스트를 붙여넣어 수동으로 설정할 필요 없이 전체 Slack 앱 설정을 바로 생성할 수 있습니다.
00:06:13여기서는 당연한 이유로 라이브 스트리밍 중에 직접 필드를 채우지는 않겠습니다.
00:06:27프로젝트는 이미 Resend 및 Vercel 마켓플레이스 제공업체 중 하나인 Upstash Redis와 통합되어 있습니다. 이를 통해 API 키나 기타 구성을 수동으로 관리할 필요 없이 Redis 스토리지를 설정할 수 있습니다.
00:06:53결제 또한 Vercel을 통해 통합 관리되므로 Upstash와 Vercel에 각각 비용을 지불할 필요가 없습니다.
00:07:05[vercel.com/marketplace에서](https://www.google.com/search?q=https://vercel.com/marketplace%EC%97%90%EC%84%9C) 더 많은 정보를 확인하실 수 있습니다. 다른 제공업체나 일반 Redis 제공업체도 이용 가능합니다. 만약 Redis가 필요하다면 이 템플릿을 수정하여 마켓플레이스 파트너인 Supabase 데이터베이스를 백엔드로 사용할 수도 있습니다.
00:07:34템플릿 내용으로 들어가 보면, 여기 데모용 Slack 워크스페이스를 설정해 두었으니 테스트 제출을 하나 보내보겠습니다.
00:08:04제출이 완료되면 이렇게 보입니다. 모든 폼 데이터가 팀에서 읽기 쉽게 구성되어 있습니다.
00:08:21이메일이나 웹사이트 링크 등 적용 가능한 링크는 바로 클릭할 수 있습니다. 만약 리드가 오타를 냈거나 팀원이 내부 폼을 잘못 작성했거나, 폼 본문에 간단한 메모를 추가하고 싶다면 '편집 및 전달(edit and forward)' 버튼을 클릭하세요.
00:08:49그러면 모달창이 열리고 데이터를 수정할 수 있습니다. Jane Smith의 이름을 Jane Jones로 바꾸거나, Benny Triangle로 변경한 후 전달을 클릭하면 됩니다.
00:09:09Slack 어댑터를 사용하는 Chat SDK가 카드를 업데이트해 줍니다. 이제 제출 내용이 Ben에 의해 BennyFSL.com으로 전달된 것을 볼 수 있습니다.
00:09:23폼 제출 내용 자체는 이렇게 보입니다. 이메일은 Resend의 내장 HTML 처리를 사용해 스타일링되었고, React로 이메일을 디자인할 수도 있습니다.
00:09:40Resend는 React Email이라는 오픈 소스 라이브러리를 유지 관리합니다. Claude, Codeium, v0 또는 선호하는 AI 에이전트로 아름다운 이메일을 React로 디자인하면, Resend가 이를 파싱하여 적절한 이메일 서비스 공급자를 위한 HTML로 변환합니다.
00:10:04그다음 몇 줄의 코드로 Resend Chat SDK 어댑터에 바로 연결하면 됩니다.
00:10:16이제 질문을 받아보겠습니다.
00:10:22Chat SDK가 얼마나 강력한지 잘 보여주네요. 원하는 어댑터를 자유롭게 사용할 수 있군요. 어댑터 얘기가 나와서 말인데, Slack 대신 Telegram이나 Discord 같은 다른 플랫폼을 사용할 수도 있나요?
00:10:40네, 가능합니다. 저희 Chat SDK 팀이 직접 유지 관리하는 공식 어댑터들이 있습니다. 저와 CTO인 Malta 등이 함께 관리하고 있죠.
00:10:54Slack, Microsoft Teams, Google Chat, Discord, GitHub, Linear, Telegram, WhatsApp 등을 사용할 수 있고, 내일 출시되는 새로운 웹 어댑터를 사용하면 웹사이트나 내부 팀용 채팅 UI도 구현할 수 있습니다.
00:11:19따라서 하나의 코드 베이스로 웹사이트의 라이브 채팅, Slack 등 모든 곳에서 봇을 실행할 수 있는 방식입니다.
00:11:37저희가 유지 관리하지 않고, 해당 서비스 업체에서 직접 관리하는 '업체 공식 어댑터'들도 있습니다.
00:11:48Resend는 자체 어댑터를 제공하므로, Vercel 크론 잡을 사용하여 자동으로 이메일에 응답하는 봇을 만들 수도 있습니다.
00:11:59Photon과 Deeper는 iMessage용 어댑터를 각각 관리하고 있습니다. iMessage에서 봇에게 GitHub 풀 리퀘스트를 생성해달라고 요청할 수 있게 되는 것이죠.
00:12:14Cursor 에이전트 SDK와 통합하여 iMessage 앱 안에서 바로 Cursor 에이전트를 사용할 수도 있습니다.
00:12:23Cursor 에이전트 SDK와 Chat SDK를 사용해 간단한 iMessage를 보내 코딩을 할 수 있습니다.
00:12:30최근 추가된 Zurnio라는 업체 공식 어댑터는 Instagram, Facebook, Telegram, Reddit 등을 단일 API 엔드포인트로 연결해 주는 통합 소셜 미디어 API입니다.
00:12:51이걸로 Reddit 봇도 운영할 수 있습니다. 운영 중인 서브레딧이 있다면 AI와 SDK를 이용해 관리할 수 있죠.
00:13:06마지막으로 플랫폼이 아니라 개별 개발자들이 만든 '커뮤니티 어댑터'도 있습니다.
00:13:22SunBlue 어댑터의 경우 SunBlue 팀이 아니라 개별 개발자가 관리합니다. 직접 어댑터를 기여하고 싶으시다면, 아주 상세한 문서가 준비되어 있습니다.
00:13:42직접 빌드하거나 Chat SDK 패키지에 포함된 문서를 활용해 에이전트가 직접 어댑터 설정을 안내하도록 할 수 있습니다. 회사 플랫폼을 위한 것이든,
00:14:04X나 Twitch 같은 여러 플랫폼용 어댑터를 만들어 디렉토리에 올리고 싶든 모두 가능합니다.
00:14:18좋네요. 잘 이해했습니다. Chat SDK는 설치 시 에이전트가 스킬을 바로 인식해서 깊은 세부 사항을 다 몰라도 금방 익힐 수 있다는 점이 정말 좋습니다.
00:14:35사용하며 배울 수도 있지만 에이전트가 있으면 훨씬 빠르죠. 랜딩 페이지에 있듯이 '사람을 위한 SDK'와 '에이전트를 위한 SDK'를 모두 제공하니 빠르게 시작할 수 있습니다.
00:14:46채팅창에서 질문이 하나 들어왔는데요. 메시지가 전송되는 Slack 채널이 미리 설정되어 있는데, 사용자가 메시지 전송 위치를 동적으로 선택하게 설정할 수 있나요?
00:15:00가능합니다. 이 템플릿의 한 가지 활용 사례로, 영업 팀이 동적 워크플로우를 구축한 경우가 있습니다. 새 영업 문의가 들어오면 에이전트가 내용을 분석하고, 각각 다른 영업 팀이 담당하는 5개의 Slack 채널 중 하나로 자동 라우팅되도록 했습니다.
00:15:27엔터프라이즈 리드, 비영리 리드, 스타트업 리드 등으로 나누는 것이죠. 두세 줄의 코드만으로 폼 제출 내용이나 AI 에이전트의 판단에 따라 채널이 바뀌도록 템플릿을 쉽게 조정할 수 있습니다.
00:15:52네, 알겠습니다. 채널 리스트를 코드 측에서 관리하면 가능하겠네요.
00:16:02네, Slack 앱이 가진 권한에 따라 다릅니다. 직접 Slack 앱을 만드니 설정 가능하고, 코드 로직으로 메시지를 어디로 보낼지 결정할 수 있습니다.
00:16:14정말 핵심을 잘 짚어주셨습니다. 다른 질문은, 이 템플릿에서 Slack 대신 Telegram을 쓰고 싶다면 코드를 얼마나 바꿔야 하나요? 노력이 얼마나 필요한가요?
00:16:29코드 한 줄만 바꾸면 됩니다. 랜딩 페이지 예시를 보시면 WhatsApp이나 GitHub을 사용하지 않으려는 경우, 단 한 줄의 코드만 변경하면 됩니다.
00:16:48나중에 마음이 바뀌어 Google Chat, WhatsApp, GitHub, Microsoft Teams를 추가하고 싶을 때도 한 줄만 추가하면 되죠. 물론 GitHub 앱 설정이나 자격 증명 관리 같은 백엔드 설정은 필요합니다.
00:17:10하지만 그 외에 코드 자체는 동일합니다. 어댑터만 가져오면(import) 끝입니다.
00:17:21코드를 더 수정해야 하는 경우는 플랫폼 특화 기능을 구현할 때뿐입니다. 예를 들어, GitHub 봇이 현재 리포지토리 내용이나 PR, 이슈를 가져와야 할 때 말이죠.
00:17:41Linear 티켓 정보를 가져와야 하는 경우도 마찬가지입니다. 그 외에는 플랫폼 추가/제거는 코드 한 줄 변경으로 해결됩니다.
00:17:58Chat SDK의 장점이 정말 잘 드러나네요. 아까 영업 팀의 사례에서 에이전트가 있다고 언급하셨잖아요.
00:18:12워크플로우와 'Human-in-the-loop(사람이 개입하는)' 에이전트 흐름에 대해 이야기해 볼 수 있을까요? 사용자가 어떻게 구현할 수 있는지 궁금합니다.
00:18:28네, 저희가 이번 주와 향후 몇 주에 걸쳐 출시할 예정인 내용입니다. Chat SDK와 Vercel 워크플로우의 호환성을 강화하고 있습니다. Vercel 워크플로우는 TypeScript 함수를 제한 없이 실행할 수 있게 해주는 내구성 있는(durable) 솔루션입니다.
00:18:56Chat 봇을 Vercel 워크플로우에 연결하면 'Human-in-the-loop' 승인 기능을 사용할 수 있습니다. 새 리드가 들어왔을 때 Slack 카드에서 승인 버튼을 클릭하면 온보딩 이메일이 발송되는 방식이죠.
00:19:19또는 거절을 클릭하면 다른 이메일이 발송되도록 할 수 있습니다. Vercel 워크플로우에 연결되어 있어 내구성이 유지되므로, 서버리스 함수 충돌이나 타임아웃을 걱정할 필요가 없습니다.
00:19:43승인 후 30분 대기하다가 이메일을 보내는 식의 타임아웃 기능도 구현 가능합니다.
00:19:58정말 강력하네요. Chat SDK의 다른 활용 사례들도 궁금합니다. 본인이 직접 경험했거나 X 등 소셜 미디어에서 본 흥미로운 사례가 있을까요?
00:20:19CMS 솔루션인 Sanity가 최근 Chat SDK를 사용하여 콘텐츠 에이전트를 재구성했습니다. 고객들이 Sanity 콘텐츠 에이전트를 자신의 Slack에 추가하고, 챗봇 내에 내장된 에이전트를 사용하여 CMS 전체를 관리할 수 있게 만든 것이죠.
00:20:48Sanity 팀은 이를 단 몇 백 줄의 코드로 구현했습니다. 원래라면 수십 개의 파일과 몇 달의 엔지니어링, 수천 줄의 코드가 필요했을 프로젝트죠.
00:21:03이제 모든 Sanity 고객이 Slack에서 에이전트에게 프롬프트만 입력해 CMS를 관리합니다. 오픈 소스 메인터너들이 GitHub 이슈를 처리(triage)하는 데도 많이 사용합니다.
00:21:22특히 1인 메인터너들에게는 매일 쌓이는 GitHub 이슈와 PR을 관리하는 것이 큰 고충입니다.
00:21:36저희도 종종 겪는 어려움이죠. 오픈 소스 메인터너들이 Chat SDK, AI SDK, AI Gateway를 활용해 Vercel 생태계 위에서 이슈를 자동으로 처리하거나 PR을 여는 사례가 아주 좋습니다.
00:22:04소규모 비즈니스를 운영하며 환불 요청이나 반품 처리, 고객 진위 여부 확인 등을 에이전트가 선행 처리하고 메인터너는 중재자 역할만 하는 것도 실생활에 아주 유용한 사례겠네요.
00:22:26커뮤니티 활동에서도 마찬가지입니다. 플랫폼에서 허슬하거나 스팸을 보내는 사용자보다 실제 도움을 필요로 하는 고객을 우선시하도록 moderation(중재)용으로 사용할 수 있습니다.
00:22:44Chat SDK를 활용하면 워크플로우를 단순화하면서 팀이나 커뮤니티를 더 잘 지원할 수 있죠. 아주 좋은 활용법입니다.
00:22:57Slack UI 예시를 봤는데요. 그런 UI는 어떻게 빌드하나요? 플랫폼마다 커스터마이징이 가능한가요?
00:23:12가능합니다. Chat SDK는 코드 양을 줄이기 위해 카드, 버튼, UI 요소를 전송할 때 자동으로 해당 플랫폼의 네이티브 형식으로 변환해 줍니다.
00:23:33Slack에서 버튼을 보내면 네이티브 Slack 버튼으로 렌더링됩니다. Teams나 Google Chat도 마찬가지입니다.
00:23:44만약 버튼 같은 UI 요소를 지원하지 않는 플랫폼(예: Linear)이라면, 버튼을 마크다운으로 변환해 줍니다.
00:23:59다른 플랫폼들도 마찬가지입니다. 플랫폼마다 별도의 로직을 짤 필요가 없죠. 변환 과정을 직접 신경 쓸 필요가 없습니다.
00:24:15저희가 다 처리해 드립니다. 직접 작성하거나 에이전트가 작성한 아주 적은 양의 코드로 수십 개의 플랫폼에서 작동하는 강력한 에이전트를 만들 수 있도록 더욱 기능을 강화하고 있습니다.
00:24:34이미 Vercel 플러그인과 Chat SDK 스킬을 사용해 단 하나의 프롬프트만으로 다중 플랫폼 봇을 만드는 분들도 계십니다.
00:24:51흥미롭네요. Chat SDK는 TypeScript 라이브러리인데, 다른 TypeScript 프로젝트 간에 포팅할 수 있나요?
00:25:06오늘 보여주신 템플릿은 Hono 기반인데, Next.js나 Nuxt 등에서도 사용할 수 있나요?
00:25:15네, 가능합니다. Chat SDK 웹사이트에는 다양한 에이전트 빌드 가이드가 있습니다.
00:25:25Slack 에이전트를 만들어 버튼 클릭으로 GitHub 프로젝트를 배포하는 가이드도 있는데, 이는 Next.js로 구동됩니다.
00:25:40방금 보여드린 폼 봇은 Hono 기반이고, Discord 지원 봇은 Nuxt를 사용합니다.
00:25:50이런 가이드와 관련 템플릿을 참고해서 빌드하시면 됩니다.
00:26:00프레임워크 제한은 없습니다. Next.js, Hono, Nuxt 등 무엇이든 사용할 수 있습니다.
00:26:12만약 지원되지 않는 프레임워크가 있다면 GitHub 이슈나 풀 리퀘스트를 남겨주세요. 버그를 고치거나 프레임워크 지원을 추가하도록 하겠습니다.
00:26:41멋지네요. 워크플로우와 함께 사용하면 시간 제한 없이 원하는 모든 것을 구현할 수 있겠군요.
00:26:53오늘 준비된 질문은 여기까지입니다. 궁금한 점이 생기면 언제든 community.vercel.com 포럼에 들러서 질문하시고 여러분이 빌드한 프로젝트도 자랑해 주세요.
00:27:08함께해 주셔서 감사합니다, Benny. 오늘 정말 훌륭한 템플릿과 데모였습니다.
00:27:18참여해 주신 모든 분 감사합니다. 질문이 있다면 GitHub 리포지토리나 Vercel 커뮤니티 웹사이트에 남겨주세요. Chat SDK 기여도 언제나 환영합니다. 몇 달 만에 벌써 60명 가까운 분들이 기여해 주셨습니다.
00:27:41작은 기여란 없습니다. 추가하고 싶은 기능이나 버그가 있다면 언제든 알려주세요. 적극적으로 검토하겠습니다.
00:28:01구현하고 싶은 유스케이스가 있다면 커뮤니티에 알려주세요. 같이 만들어 봅시다. Benny, 함께해서 좋았습니다.
00:28:12함께해 주신 커뮤니티 여러분 감사합니다. 새로운 것을 배우는 유익한 시간이었길 바랍니다. 다음 세션에 참여하시려면 [community.vercel.com/live를](https://www.google.com/search?q=https://community.vercel.com/live%EB%A5%BC) 확인해 주세요.
00:28:27오프라인 밋업은 [community.vercel.com/meetups에서](https://www.google.com/search?q=https://community.vercel.com/meetups%EC%97%90%EC%84%9C) 확인 가능합니다. Vercel Ship 티켓도 오픈되었으니 전 세계에서 열리는 이벤트를 확인해 보세요.
00:28:42[vercel.com/ship에서](https://www.google.com/search?q=https://vercel.com/ship%EC%97%90%EC%84%9C) 티켓을 예매할 수 있습니다. 오늘 방송은 여기까지입니다. 커뮤니티에서 만나요.
00:28:57커뮤니티에서 만나요.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video