Ship 26 NYC - 워크숍 - Vercel에 Slack 에이전트 빌드 및 배포하기

VVercel
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00환영합니다. 참석해 주셔서 감사합니다. 제 이름은 조슈아이고, 슬랙(Slack)에서 플랫폼 및
00:00:09개발자 경험을 담당하는 제품 팀에서 일하고 있습니다. 오늘 우리는 Vercel에 배포되는
00:00:14슬랙 에이전트 빌딩에 관한 대화형 워크숍을 진행할 예정입니다. 가능한 한 대화형으로
00:00:19진행하고자 하니, 여러분 모두 저를 따라올 수 있기를 바랍니다. 설명에 필요한 몇 가지
00:00:25배경 슬라이드가 있습니다만, 그전에 함께 실습해 보실 분들은 제게 한 가지 초기 설정 작업을 부탁드립니다.
00:00:33그런 다음 제 슬라이드로 넘어가겠습니다. 여기에 있는 안내에 따라 코드스페이스(CodeSpace)를 설정해 주세요.
00:00:39[github.com/jmilus/shipworkshop으로](https://www.google.com/search?q=https%3A%2F%2Fgithub.com%2Fjmilus%2Fshipworkshop%EC%9C%BC%EB%A1%9C) 접속하시면 됩니다.
00:00:47모든 것이 코드스페이스를 사용하도록 설정되어 있어서 직접 따라 하며
00:00:51필요한 모든 환경 변수 등을 갖출 수 있습니다. 해당 URL로 이동한 다음 이 코드 버튼을 클릭하고
00:00:59메인 브랜치에서 새 코드스페이스를 실행하면 아마 몇 분 정도 걸릴 것입니다.
00:01:07그래서 백그라운드에서 미리 시작해 두려는 이유입니다.
00:01:12잠시 동안 그대로 두고, 개발자 샌드박스 항목은
00:01:16따로 살펴보겠습니다. 그러니 지금은 코드스페이스만 신경 쓰시면 됩니다.
00:01:22좋습니다. 배경을 좀 설명하자면, 우리가 왜 여기에 모였을까요? 요즘 모든 사람들의
00:01:30가장 큰 관심사 중 하나는 모두가 에이전트를 만들고 있다는 점입니다. 하루 종일 에이전트 인프라에 대한
00:01:34이야기를 듣고 계실 겁니다. 여러분의 업무와 회사에서도 모든 사람들이 에이전트를
00:01:40구축하고 구매하고 있다는 것을 잘 알고 계실 것입니다. 하지만 사람들이 현재 제대로 답하지 못하고 있는
00:01:44큰 질문 중 하나는 이 모든 에이전트들이 도대체 어디에 살게 되며 어떻게
00:01:49유용하게 쓰일 것인가 하는 점입니다. 슬랙에서의 우리의 대답은 슬랙이 이 모든 에이전트들의
00:01:55고향이 될 것이라는 것입니다. 하지만 우리가 취하는 접근 방식은 폐쇄적인 정원(Walled Garden)이 되려거나
00:02:00새로운 에이전트 프레임워크를 만들거나 무언가를 강요하려는 것이 아닙니다. 우리는 단순히 모든 에이전트 플랫폼과
00:02:04에이전트 프레임워크 사이의 연결 고리(Connective Tissue)가 되고자 합니다. 따라서 여러분이 에이전트를 어디서 구축하든,
00:02:10어디서 가져오든, 이상적으로는 Vercel에 배포되겠지만,
00:02:16에이전트들이 슬랙에 손쉽게 나타나야 합니다. 그것이 오늘 우리가 이야기할 내용입니다.
00:02:21그렇다면 왜 그럴까요? 왜 에이전트는 슬랙에 있어야 할까요? 에이전트는 올바른 맥락과
00:02:25대화, 맥락, 의사결정의 바로 옆에서 함께할 수 있는 올바른 능력을 갖추고 있을 때 가장 강력합니다.
00:02:32그리고 이 모든 일은 오늘날 이미 슬랙에서 유기적으로 일어나고 있습니다. 따라서 슬랙은 이미 에이전트가
00:02:38사용자와 상호작용하고 사용자가 에이전트와 상호작용하기에 훌륭한 인터페이스입니다. 그리고 우리는 이를 더욱 강화하기 위해
00:02:43많은 새로운 프리미티브를 구축해 왔습니다. 이것은 에이전트를 구축하는 데 사용할 수 있는 일부 슬랙 개발자 도구의
00:02:50간단한 개요입니다. 오늘은 에이전트를 구축하는 가장 기초적이고
00:02:55근본적인 경로를 취할 것입니다. 다른 많은 옵션들도 존재합니다. 하지만 그렇게 하는 과정에서
00:03:00슬랙 CLI를 사용할 것입니다. 또한 슬랙 앱 프레임워크인 Bolt 프레임워크,
00:03:06SDK 및 개발자 샌드박스를 사용합니다. 오늘 이 모든 것을 보여드리겠습니다. 이 모든 다양한
00:03:11주제와 도구들을 다룰 것입니다. 언제든지 이러한 사항에 대해 더 깊이 파고들고 싶다면 slack.dev가 훌륭한 리소스입니다.
00:03:17좋습니다. 오늘 실제로 무엇을 하게 될까요? 이번에는 아무것도 없는 상태에서 시작해
00:03:23Vercel에 배포되고 개발자 샌드박스에서 작동하는 슬랙 에이전트를 완성하기까지 30분짜리 경험이 될 것입니다.
00:03:29여건이 허락한다면 아마 30분도 채 걸리지 않을 것입니다. 모두 꽤 쉽습니다.
00:03:35와이파이 상태에 따라 일부 작업은 시간이 조금 걸릴 수도 있습니다. 하지만 기본적으로 우리가 할 일은
00:03:40이미 설정해 두었을 코드스페이스에 포함된 슬랙 CLI를 설정하는 것입니다. 그리고
00:03:44에이전트 템플릿 중 하나를 사용하여 슬랙 앱을 스캐폴딩할 것입니다. 그런 다음 그것을 실행하고
00:03:49슬랙에서 테스트하여 반복 수정(Iterate)을 거친 후 최종적으로 배포할 것입니다.
00:03:55앞서 말씀드린 대로 이것은 전체적인 지형을 잘 파악할 수 있도록 돕는 기초적이고 근본적인 경로임을 강조하고 싶습니다.
00:04:00하지만 슬랙용 에이전트를 구축하는 다른 방법들도 많이 있습니다. Vercel에서는
00:04:05정말 훌륭한 도구들을 많이 만들었습니다. 슬랙 에이전트 스킬, 다양한 템플릿,
00:04:12Vercel Connect 등이 있습니다. 그리고 슬랙에서도 다양한 개발자 스킬과 플러그인을 제공하므로
00:04:19이 작업이 끝난 후에 다른 다양한 방법들을 시도해 보고 싶다면 이 목록이 좋은 출발점이 될 것입니다.
00:04:25좋습니다. 바로 시작해 보겠습니다. 참여하고 싶으신 분들을 위해 URL을 한 번 더 띄워드립니다.
00:04:32코드스페이스를 생성하러 접속하시면 됩니다. 코드스페이스가 잘 시작되고 있기를 바랍니다.
00:04:38첫 번째로 해야 할 일은 이 코드스페이스에 연결할 슬랙 개발자 샌드박스를
00:04:45생성하는 것입니다. [api.slack.com/developerprogram에](https://www.google.com/search?q=https%3A%2F%2Fapi.slack.com%2Fdeveloperprogram%EC%97%90) 접속하여
00:04:50가입하시면 됩니다. 슬랙 개발자 샌드박스는 누구나 무료로 개발자 프로그램에 가입할 수 있습니다.
00:04:58그리고 이 샌드박스가 하는 일은 엔터프라이즈 플러스(Enterprise Plus) 플랜이 적용된 모든 기능이 갖추어진 슬랙 환경을
00:05:05제공하는 것입니다. 모든 기능을 사용할 수 있으며, 에이전트가 슬랙에서 어떻게 작동할지
00:05:11구축하고, 테스트하고, 이해할 수 있는 안전한 공간입니다. 이 간단한 개발자 프로그램
00:05:15가입 양식을 작성하시면 설정을 완료할 수 있는 이메일을 받게 될 것입니다.
00:05:22제 쪽에서는 조금 느릴 수 있습니다. 하지만 이메일을 받으면 활성화(Activate) 버튼을 클릭하기만 하면
00:05:52슬랙 개발자 프로그램을 사용할 준비가 완료됩니다. 여러분이 이메일을 받을 때까지 잠시 기다린 후,
00:06:07활성화 버튼을 클릭하시면 슬랙 개발자 프로그램 설정이 완료됩니다. 그럼
00:06:14참가자분들께 이메일이 도착할 때까지 잠시 기다렸다가 다음 단계를
00:06:21이메일을 받고 샌드박스를 실행하기 위한 수락(Accept) 버튼을 클릭하면
00:06:38새로운 샌드박스를 프로비저닝할 수 있는 권한이 생깁니다. 이때 이벤트 코드를 사용할 수 있는 옵션이 있습니다.
00:06:43오늘의 이벤트 코드는 ship-nyc입니다. 원하시는 경우 이를 사용할 수 있습니다.
00:06:51그다음 샌드박스 이름과 도메인을 생성하기만 하면 됩니다. 원하는 이름으로 지정할 수 있습니다. 단, 고유해야 하므로
00:07:00더 고유하게 만들기 위해 몇 가지 오류가 발생할 수도 있습니다. 여기에 ship-nyc를 입력한 다음,
00:07:05샌드박스에 미리 로드된 데이터를 조금이라도 채우기 위해 기본 템플릿 설정을 클릭하면 됩니다.
00:07:21그 단계를 완료하면 슬랙 개발자 샌드박스가 완전히 실행될 것입니다.
00:07:28시간 관계상 저는 이미 여기에 세팅해 둔 샌드박스가 있습니다.
00:07:33보시다시피 이미 몇 가지 채널과 앱이 로드되어 있습니다.
00:07:38이것으로 2단계가 완료됩니다. 여러 설정 플로우를 거쳐야 하기 때문에 아마 가장 시간이 오래 걸리는 단계일 것입니다.
00:07:44하지만 일단 설정되고 나면, 이것 역시 일회성 작업입니다. 원할 때마다 언제든지 해당 샌드박스를 재사용할 수 있기를 바랍니다.
00:07:49세팅이 완료되면 코드스페이스로 돌아가서 이미 미리 로드되어 있는 슬랙 CLI와
00:07:55상호작용을 시작하게 됩니다. 가장 먼저 할 일은 slack login을 실행하는 것입니다.
00:08:08slack login은 슬랙 CLI를 여러분의 워크스페이스에 인증해 줍니다. 멋진 슬래시
00:08:15명령어가 나타날 것입니다. 그것을 복사해서 개발자 샌드박스의 아무 곳에나 붙여넣으면 됩니다.
00:08:22약관에 동의하기만 하면 여기로 가져올 챌린지 코드를 받게 됩니다.
00:08:30그러면 인증이 완료됩니다. 이제 이 코드스페이스의 슬랙 CLI가
00:08:35개발자 샌드박스와 인증되었습니다. 우리가 작업하고 앱을 생성하고자 하는 곳이 거기라는 것을 인식하게 됩니다.
00:08:40좋습니다. 다음은 에이전트를 생성하는 차례입니다. 슬랙 CLI에는 여러 가지
00:08:47템플릿이 미리 로드되어 있습니다. 따라서 slack create agent 명령어를 사용하여 시작할 것입니다.
00:08:54앞서 말씀드린 대로 템플릿이 준비되어 있습니다. 스타터 에이전트와
00:09:01지원(support) 에이전트가 있습니다. 오늘은 실제로 지원 에이전트를 만들어 보겠습니다. 지원 에이전트를 선택하고
00:09:06단순함을 위해 오늘은 JavaScript를 사용하겠습니다. 물론 다른 다양한 앱 프레임워크에 대한 지원도
00:09:13제공하고 있습니다. 그리고 오늘은
00:09:19OpenAI 에이전트 SDK를 사용할 것입니다. 우리의 모든 템플릿은
00:09:22어떤 LLM이든, 원하는 어떤 에이전트 프레임워크든 사용할 수 있도록 만들어졌습니다. 기본적으로
00:09:28Claude Agent SDK와 OpenAI Agents SDK를 사용하는 몇 가지 샘플이 준비되어 있습니다. 하지만
00:09:34Vercel AI 게이트웨이나 사용하고 싶은 다른 다양한 프레임워크로 손쉽게 교체할 수도 있습니다.
00:09:40다만 이러한 템플릿 중 하나를 사용하여 빠르게 시작하기 위한 목적으로, 오늘은
00:09:44OpenAI를 사용할 것입니다. 그리고 앱 이름과 에이전트 이름을 지정하라는 메시지가 표시되며
00:09:50원하는 경우 추천해 주는 이름을 쓸 수도 있고 원하는 이름을 직접 지을 수도 있습니다.
00:10:00그러면 슬랙 CLI가 해당 템플릿을 다운로드하고 필요한 종속성(dependencies)을 설치합니다.
00:10:16완벽합니다. 평소보다 조금 더 오래 걸렸지만, 아마 컨퍼런스 와이파이 때문인 것 같습니다.
00:10:44좋습니다. slack create agent를 실행했고, 로컬에 프로젝트가 생성되었습니다. 여러 가지
00:10:49종속성이 설치되었으며, 다음 단계로 생성된 에이전트 디렉토리로
00:10:54이동(cd)하라고 안내해 줍니다. 따라서 에이전트에 지정한 이름의 폴더로 들어가겠습니다.
00:11:03그런 다음 slack run을 실행하면 됩니다. slack run은 앱을 로컬에서 실행하고
00:11:11개발자 샌드박스에 연결해 주는 명령어입니다. 우리는 이미 개발자 샌드박스 인증을 마쳤으므로,
00:11:16slack run은 해당 앱을 샌드박스로 가져오도록 안내해 줍니다. 따라서 권한을
00:11:24부여하고 원하는 워크스페이스에 대한 접근 권한을 주기만 하면 됩니다. 이제 여기를 보면
00:11:30해당 에이전트가 로컬에서 실행 중인 것을 볼 수 있습니다. 이미 디버그 로그와 정보들이
00:11:38들어오고 있으므로 제대로 작동하고 있음을 알 수 있습니다. 개발자 샌드박스로 이동해보면
00:11:43이 에이전트가 나타나는 것을 확인할 수 있습니다. 앱(Apps)으로 가보면 versell demo local이 보입니다. 로컬에서 실행 중인 버전이기 때문에 local이라는
00:11:55접미사가 붙어 있습니다. 클릭해서 열어볼 수 있습니다. 이 모든 것이 기본 제공(out of the box)됩니다.
00:12:02참고로 우리는 아직 코드를 한 줄도 작성하지 않았습니다. 이 경험은 사용자가 즉시 작동하는 무언가를
00:12:07빠르게 접하고 실행할 수 있도록 돕기 위한 것입니다. 그후에 반복 수정하며 빌드하고
00:12:12개발을 진행하면 됩니다. 다시 말씀드리지만, 기본적으로 이것은 IT 지원 에이전트를 위한 템플릿입니다.
00:12:19이제 채팅 경험 영역으로 이동해 보겠습니다. 이 모든 것이 에이전트가 슬랙에서 훌륭한 경험을
00:12:25누릴 수 있도록 우리가 구축해 온 새로운 기능들과 같습니다.
00:12:30우리가 구축한 기능 중 하나는 사용자가 처음 에이전트를 접할 때 단순히 텅 빈
00:12:35상태(blank state)와 마주하지 않도록 하는 추천 프롬프트입니다.
00:12:38“이 기능은 무엇을 할 수 있는가?” 에이전트가
00:12:41“안녕하세요, 이렇게 도와드릴 수 있습니다. 이런 일을 할 수 있습니다”라고 소통할 수 있도록 만들고 싶었습니다.
00:12:45여기서는 몇 가지 옵션이 미리 로드되어 있습니다. 그래서 이렇게 말할 수 있습니다. “안녕하세요,
00:12:49비밀번호를 재설정해야 합니다.”
00:12:53그러면 OpenAI Agents SDK를 사용하여 요청을 처리하기 시작할 것입니다.
00:13:00이것이 슬랙에서 작동 중인 실행 중인 에이전트입니다. 아직 코드를 한 줄도 작성하지 않았습니다. 원한다면
00:13:06채널에 추가하여 사용할 수도 있습니다. 채널에서 봇을 멘션(@)하면
00:13:13해당 채널에 앱을 추가하라는 메시지가 뜹니다. 슬랙 에이전트의 큰 장점 중 하나는
00:13:21다른 플랫폼과 비교했을 때 매우 독특한 진정한 멀티플레이어 경험이 될 수 있다는 점입니다.
00:13:25채널에 있을 때 에이전트를 멘션하여 바로 상호작용할 수 있습니다. 대화(DM)에만
00:13:31격리되어 있을 필요가 없습니다. 다른 사람들도 함께 참여할 수 있습니다. 다른 사람들도 에이전트와 상호작용할 수 있습니다.
00:13:35이것은 슬랙 플랫폼의 힘에서 비롯되는 매우 강력한 기능이라고 생각합니다.
00:13:40좋습니다. 이것이 로컬에서 실행 중인 우리의 에이전트입니다. 아직 코드를 쓰지 않았습니다. 이제 에이전트를 커스터마이징해 봅시다. 로컬 실행 경험의
00:13:48아름다운 점은 실시간 핫 리로드(hot reload) 기능을 지원한다는 것입니다. 따라서 앱에 가하는 모든 변경 사항이
00:13:58자동으로 반영되어 슬랙에 표시됩니다. 리스너(listeners)로 이동하여
00:14:05assistant thread started 파일로 들어가면, 아까 보여드렸던 추천 프롬프트들이 있습니다.
00:14:15그중 하나를 변경해서 반복 수정 및 핫 리로드 경험이 어떻게 작동하는지 살펴보겠습니다.
00:14:22네트워크 문제(network issues)를 하드웨어 요청(hardware requests)으로 변경해 보겠습니다.
00:14:28이렇게 바꿔보겠습니다. 완벽합니다. 하단에 보시는 바와 같이
00:14:35터미널에서 변경 사항을 감지하고 샌드박스로 변경 사항을 푸시합니다. 그리고
00:14:50여기로 돌아와서 에이전트와의 새 채팅을 열어보면, 네트워크 요청 대신 하드웨어 요청(hardware request)이 표시됩니다.
00:15:00이것이 바로 변경 사항을 즉시 반영해 주는 반복 수정(iteration) 경험의 예시입니다.
00:15:13테스트하고, 확인하고, 더 수정하면서 에이전트를 구축할 때 매우 빠른 피드백 루프를 가질 수 있습니다.
00:15:19이 모든 것이 샌드박스의 안전한 공간 안에서 이루어집니다. 반복 수정을 가지고 놀아본 후에
00:15:25시험해 볼 수 있는 또 다른 예시로는
00:15:32시스템 프롬프트가 있습니다. 원하시는 유익한 사용 사례에 조금 더 맞도록
00:15:39시스템 프롬프트를 들어가서 수정하고 싶다면 매우 쉽게 할 수 있습니다. 그리고 그것은 매우 빠르고 즉각적으로 반영됩니다.
00:15:44하지만 반복 수정 작업을 마치고 결과에 만족한다고 가정해 봅시다.
00:15:51이제 실제로 배포를 하고 싶습니다. slack run, 즉 로컬 실행 경험은 이
00:15:58터미널이나 사용하는 터미널이 열려 있는 동안에만 작동합니다. 따라서 이것이 상시 실행되는 에이전트가 되기를 원한다면,
00:16:04프로덕션 환경으로 내보내야 하므로 어딘가에 배포해야 합니다. 우리는 실제로
00:16:11이것을 Vercel에 배포할 것입니다. 이를 위해 먼저 로컬 실행 경험을 중단합니다.
00:16:16그런 다음 약간의 설정 작업이 필요합니다. 시간 관계상 그리고 이 워크숍을 위해,
00:16:24이러한 작업 중 상당 부분을 이 배시 스크립트에 묶어 두었습니다. 하지만 어떤 작업을 하는지
00:16:29이해할 수 있도록 안내해 드리겠습니다. 스크립트를 가져와서 실행하세요. 실제로 하는 일은
00:16:37Vercel이 예상하는 방식으로 작동하도록 슬랙 쪽에서 몇 가지 설정을 전환하는 것입니다.
00:16:44그다음 슬랙 측과 Vercel 측 사이의 모든 다양한 설정 변수들을 구성합니다.
00:16:50Vercel 쪽에 프로젝트를 생성하고 모든 것을 준비시킬 것입니다. 따라서 실제로 배포를 원할 때 꽤 쉽게 진행할 수 있습니다.
00:16:56완벽합니다. 스크립트가 실행되었습니다. Vercel 내에 프로젝트가 구성되었습니다. 따라 하고 계신 분들이라면
00:17:02워크숍을 위해 공유 계정을 사용하고 있다는 점을 알 수 있습니다. 하지만
00:17:08자신의 계정을 사용하고 싶다면 자신의 Vercel에 로그인하여 그렇게 하는 방법이 아래에 안내되어 있습니다.
00:17:15하지만 시간 관계상 그리고 무언가를 실행 상태로 내보내기 위해 지금은 공유 환경을 사용하고 있습니다. 설정 스크립트를 실행한 후,
00:17:22slack deploy를 실행하라는 메시지가 표시됩니다. slack deploy는 슬랙 CLI
00:17:27명령어로, 다양한 배포 훅(deploy hooks)과 스크립트를 통해 완전히 커스터마이징할 수 있습니다. Vercel 내에서 실행하고
00:17:32필요한 모든 작업을 수행하도록 스크립트가 설정되어 있습니다. slack
00:17:36deploy를 실행해 보겠습니다. 새 앱을 생성하라는 메시지가 뜹니다. 로컬 버전과
00:17:43프로덕션 버전은 슬랙 측에서 실제로 별도의 앱이기 때문입니다. 앱을 생성하고
00:17:51아까 부여했던 것과 동일한 권한을 부여합니다. 그러면 배포 스크립트가 실행되고
00:17:56모든 것을 설정하며 환경 변수가 제대로 가져와졌는지 확인해 줍니다.
00:18:03모든 것이 잘 작동했는지 확인 중이며 성공한 것으로 보입니다. 개발자 샌드박스로
00:18:08돌아가 보면, 이제 끝에 로컬 접미사가 없는
00:18:18Vercel 데모 앱을 볼 수 있습니다. 그것을 열 수 있습니다. 이것은 모두 실시간으로 작동하고 배포되었으며
00:18:26작동하여 응답할 수 있는 올바른 변수들을 갖추고 있습니다. 이것으로 우리는 절대적으로 아무것도 없는 상태에서
00:18:4715분 만에 Vercel에 배포된 슬랙 내의 작동하는 에이전트를 완성했습니다. 이것이 바로
00:18:58이러한 아주 빠른 기초적인 방식으로 시작하고 실행하는 범위입니다. 앞서 말씀드린 대로
00:19:06이 작업을 워크숍 맥락 밖에서 수행한다면 수행해야 할 설정이 조금 더 많습니다.
00:19:16다시 한번 이 스크립트로 들어가서 백그라운드에서 무슨 일이 일어나고 있는지 확인할 수 있습니다. 하지만
00:19:24이것이 처음부터 끝까지 작동하는 모든 것입니다. Vercel 계정을 교체할 수도 있습니다.
00:19:30그리고 기초 개념을 이해했으니 다시 한번 이쪽으로 돌아와서 다른 모든 방법들을 공유하고자 합니다.
00:19:34오늘날 대부분의 사람들은 실제로 코딩 에이전트를 사용하여 슬랙 앱을 빌드하고 배포하고 있습니다.
00:19:39따라서 Vercel 슬랙 에이전트 스킬뿐만 아니라
00:19:47슬랙 자체의 개발자 스킬 및 플러그인을 꼭 확인해 보시기를 권장합니다.
00:19:52이 도구들은 서로 아주 잘 연동되어 양쪽 모두에서 모든 것이 쉽게 실행되도록 만들어 줍니다.
00:20:06그런 다음 Vercel 슬랙 에이전트 템플릿, 새로운 Eve 슬랙 에이전트 템플릿,
00:20:11그리고 모든 에이전트를 슬랙에서 작동하고 실행 상태로 만드는 훌륭한 방법인 Vercel Connect 등 다양한 템플릿을 꼭 확인해 보세요.
00:20:15제 말은, 그것으로 끝입니다. 이것은 매우 기초적이고 빠르게 제로에서 에이전트까지 도달하여 모든 것이 어떻게 작동하는지 정확히 볼 수 있도록 의도된 것입니다.
00:20:24그리고 여러분의 과제는 이외의 다른 모든 옵션들과 더 고급 옵션들을 탐색해 보는 것입니다.
00:20:29질문, 생각, 우려 사항이 있으신가요?
00:20:35ship-nyc입니다.
00:20:42네.
00:20:48안녕하세요. Vercel도 이야기하는 것처럼 Eve가 슬랙 채널과 많은 커스텀 연동 기능을 가지고 있는 것 같습니다.
00:20:56그래서 슬랙 네이티브 SDK를 사용하여 슬랙 에이전트를 구축하는 것과 Eve를 통해 구축하는 것의 장단점이 무엇이라고 생각하시는지 궁금합니다.
00:21:07네. 아주 좋은 질문이라고 생각합니다. 둘 다 탐색해 볼 가치가 있습니다.
00:21:15만약 여러분이 이미 다른 용도로 Eve를 사용하고 있다면, 그것이 아마 좋은 옵션일 것입니다.
00:21:22솔직히 이 방에 계신 대부분의 분들에게, 이미 Vercel 생태계에 깊이 자리 잡고 있고 이 모든 도구들을 사용하고 있다면
00:21:26Vercel 기반 빌드들이 아마 적절한 시작점일 것이라고 권장합니다.
00:21:30이 옵션은 슬랙과 슬랙의 프리미티브에서 시작하는 관점에 더 가깝습니다. 하지만 Vercel이 만드는 많은 템플릿들이
00:21:35내부적으로 우리의 SDK와 프레임워크를 사용한다는 것을 알고 있습니다. 따라서 동일한 모범 사례와
00:21:40경험들을 많이 얻으실 수 있을 것입니다. 따라서 제 권장 사항은 이미 가장 익숙한 것으로 시작하고
00:21:47그 방식으로 진행한 뒤, 단계를 높여 다른 것들을 파악해야 할 때 다른 옵션들을 탐색해보라는 것입니다.
00:22:03네, 저도 비슷한 질문이 있었습니다. 슬랙 에이전트를 시작하고 싶습니다. 네이티브 슬랙 에이전트가
00:22:08챗 SDK를 사용하는 Eve 에이전트는 할 수 없는, 아시는 바에 따른 차별점이 있나요?
00:22:15음, 제 지식으로는 없습니다. 제 생각에 Eve 템플릿은
00:22:22필요에 따라 변형하여 사용할 수 있을 것입니다. 모든 단일 모범 사례가 기본적으로 포함되어 있는지는
00:22:29잘 모르겠습니다. 아직 그만큼 많이 다뤄보지 않았습니다. 하지만 가능할 것입니다.
00:22:36처음에는 정확히 똑같아 보이지 않을 수도 있지만, 동일한 기본 슬랙 API와 슬랙 프레임워크를 활용할 수 있어야 합니다.
00:22:42슬랙 측면에서 제가 보여드린 모든 것은 어차피 완전히 오픈 소스입니다.
00:22:48이것들은 전부 우리 자신의 오픈 소스 템플릿입니다. 따라서 우리의 템플릿을 쓰든 그들의 템플릿을 쓰든 상관없이
00:22:53모든 API와 기반이 되는 플랫폼 프리미티브에 대해 동일한 접근 권한을 갖게 됩니다.
00:22:57슬랙 앱을 실행하는 단계까지 도달했는데 슬랙에서 봇이 보이지 않습니다.
00:23:025단계 이후에 제가 놓친 단계가 혹시 있을까요?
00:23:07좋은 질문입니다. 5단계에서 slack run을 실행해서 터미널에서는 실행 중인데
00:23:12슬랙에 나타나지 않는군요. 흥미롭네요. 인증 및 설치 과정을 진행할 때
00:23:18설치 과정에서 무언가 문제가 생겼을 수 있습니다. 때로는 나타나는 데
00:23:27몇 분 정도 걸리기도 합니다. 그러니 몇 분 뒤에 새로고침을 해보는 것도 방법입니다. 아까 일반 와이파이를 쓸 때
00:23:36테스트해 보니 정말 느리더군요. 저는 유선 연결을 사용하고 있어서 좀 더 빠릅니다.
00:23:45그러니 그런 이유 때문일 수 있습니다. 하지만 터미널에 오류가 없고
00:23:52정상적으로 실행 중이라고 나온다면 거기에 있어야 합니다. 단지 새로고침을 하거나 확인해 보는 문제일 수 있습니다.
00:23:57나중에 따로 확인해 드릴 수도 있습니다.
00:24:05질문이 하나 더 있습니다. 정확히 두 가지 질문입니다. slack deploy 명령어는
00:24:10정확히 무엇을 하는 것인가요? Vercel에 뭔가 배포하고 계신 걸 보았는데요.
00:24:15업데이트를 하고 싶다면 그 과정을 다시 해야 하나요? Vercel에 배포한 다음 슬랙까지 말입니다. 보통은
00:24:19명령어 하나로 모든 것이 배포되기를 원하니까요.
00:24:24네. slack deploy는 이 방식을 활용합니다. 완전히 커스터마이징이 가능합니다. 이 훅은
00:24:39파일을 가리키도록 설정할 수 있습니다. 그래서 이 파일을 가리키고 있습니다. 어디에 있죠?
00:24:46아, 죄송합니다. 이것이 하는 일은 환경 변수를 가져오고,
00:24:52슬랙 고유의 기능들을 가져와서 연결한 뒤 Vercel에 배포하는 것입니다.
00:24:57이것은 다시 말씀드리지만 배포하려는 위치의 세부 사항에 맞게
00:25:06수정하고 싶을 수 있는 부분입니다. 하지만 이것이 하는 일은 기본적으로 모든 환경 변수를 가져오고,
00:25:16앱 고유의 기능들을 가져와서 Vercel에 연결하는 것입니다. 따라서 이 배포 스크립트는
00:25:27원하는 대로 만들 수 있습니다. 이것은 단지 매우 빠르고 간소화된 버전일 뿐입니다. 많은 배포
00:25:33스크립트들은 이것이 하는 것보다 훨씬 더 고도화되어 있습니다. 하지만 이것은 작동을 시켜서 결과물을 내보내는 간단한 버전입니다.
00:25:37네. 좋습니다. 모두 수고 많으셨습니다. 슬랙 부스는 이 유리벽
00:25:43바로 저쪽에 있습니다. 다른 질문이 있거나 저희와 이야기하고 싶으시면 밖으로 찾아오세요. 참석해 주셔서
00:25:50정말 감사합니다. 적어도 조금이나마 따라오실 수 있었기를 바랍니다. 이
00:25:57저장소(repo)는 계속 유지해 둘 테니 참고하시기 바랍니다.
00:26:07네. 좋습니다. 모두 수고 많으셨습니다. 슬랙 부스는 이 유리벽
00:26:12바로 저쪽에 있습니다. 다른 질문이 있거나 저희와 이야기하고 싶으시면 밖으로 찾아오세요. 참석해 주셔서
00:26:16정말 감사합니다. 적어도 조금이나마 따라오실 수 있었기를 바랍니다. 이
00:26:20저장소는 계속 유지해 둘 테니 참고하시기 바랍니다.

핵심 요약

슬랙 CLI와 Vercel을 연동하면 코드 수정 없이 템플릿 기반의 에이전트를 스캐폴딩하고 15분 만에 프로덕션 환경에 배포할 수 있다.

하이라이트

  • 슬랙 개발자 샌드박스는 누구나 무료로 가입할 수 있으며 엔터프라이즈 플러스 플랜의 모든 기능을 제공한다.

  • 슬랙 CLI 환경에서 slack create agent 명령어를 실행하면 지원 에이전트 템플릿과 OpenAI 에이전트 SDK를 기반으로 프로젝트가 생성된다.

  • 로컬에서 slack run 명령어를 실행하면 실시간 핫 리로드 기능이 작동하여 코드 변경 사항이 슬랙 샌드박스에 즉시 반영된다.

  • 배포 스크립트를 실행한 후 slack deploy 명령어를 입력하면 로컬 에이전트가 Vercel 프로덕션 환경으로 배포된다.

타임라인

워크숍 소개 및 코드스페이스 설정

  • 슬랙은 모든 에이전트 플랫폼을 연결하는 허브 역할을 목표로 한다.
  • 참가자는 [github.com/jmilus/shipworkshop](https://www.google.com/search?q=https%3A%2F%2Fgithub.com%2Fjmilus%2Fshipworkshop) 주소에서 코드스페이스를 설정하여 실습 환경을 구축한다.

슬랙은 개발자들이 다양한 프레임워크로 에이전트를 구축할 수 있도록 지원하며, 사용자가 집중된 슬랙 환경이 에이전트의 가장 이상적인 구동 공간임을 설명한다. 원활한 실습을 위해 코드스페이스를 미리 백그라운드에서 실행하는 초기 설정 과정을 안내한다.

슬랙 개발자 샌드박스 생성 및 인증

  • [api.slack.com/developerprogram에서](https://www.google.com/search?q=https%3A%2F%2Fapi.slack.com%2Fdeveloperprogram%EC%97%90%EC%84%9C) 개발자 프로그램에 가입하여 모든 기능을 갖춘 샌드박스를 생성할 수 있다.
  • 이벤트 코드 ship-nyc를 사용하여 샌드박스를 프로비저닝하고 사전 로드된 데이터를 활용한다.
  • 코드스페이스에서 slack login 명령어를 실행하고 챌린지 코드를 입력하여 슬랙 CLI를 워크스페이스에 인증한다.

에이전트가 작동할 안전하고 완벽한 테스트 환경을 만들기 위해 슬랙 개발자 샌드박스를 설정한다. 이메일 활성화 버튼을 누르고 고유 도메인과 템플릿 설정을 완료한 뒤, CLI 인증 과정을 거쳐 개발 환경과 워크스페이스를 연결한다.

에이전트 생성 및 로컬 실행

  • slack create agent 명령어를 통해 JavaScript와 OpenAI 에이전트 SDK를 사용하는 지원 에이전트 템플릿을 생성한다.
  • slack run 명령어로 앱을 로컬에서 실행하고 개발자 샌드박스와 연동한다.
  • 코드를 수정하지 않은 상태에서도 슬랙 앱을 통해 추천 프롬프트 기반의 기본 채팅 경험을 바로 테스트할 수 있다.

슬랙 CLI의 미리 로드된 템플릿을 활용해 에이전트 프로젝트를 빠르게 스캐폴딩한다. 종속성 설치 후 로컬 실행 명령어를 통해 별도의 코드 작성 없이도 슬랙 샌드박스 내에서 즉시 에이전트와 상호작용할 수 있음을 보여준다.

실시간 핫 리로드와 커스터마이징

  • 로컬 실행 환경은 실시간 핫 리로드 기능을 지원하여 코드 변경 사항을 즉시 반영한다.
  • 리스너 파일의 추천 프롬프트 문구를 수정하면 터미널이 이를 감지하고 샌드박스로 푸시한다.

에이전트를 커스터마이징하는 과정에서 빠른 피드백 루프를 활용하는 방법을 다룬다. 소스 코드의 텍스트를 변경할 때 샌드박스 채팅 UI에 즉각적으로 반영되는 결과를 확인하며 반복 수정 작업을 수행한다.

Vercel 배포 및 프로덕션 환경 전환

  • 설정 스크립트를 실행하여 슬랙과 Vercel 간의 환경 변수 및 설정을 구성한다.
  • slack deploy 명령어를 실행하면 앱이 Vercel 프로덕션 환경에 배포된다.
  • 배포 완료 후 로컬 접미사가 제거된 Vercel 데모 앱이 슬랙 샌드박스에 나타난다.

로컬 테스트를 마친 에이전트를 상시 실행되는 프로덕션 환경으로 전환하기 위해 배포 스크립트와 slack deploy 명령어를 차례대로 실행한다. 설정 변수가 올바르게 연동되어 15분 만에 Vercel 상에서 완전히 작동하는 슬랙 에이전트를 완성한다.

커뮤니티 글

모든 글 보기