00:00:00안녕하세요, 이번 주 퍼셀 커뮤니티 라이브 스트림에 오신 것을 환영합니다.
00:00:22저는 에이미 이간입니다.
00:00:23저는 퍼셀 커뮤니티 팀에서 일하고 있습니다.
00:00:27참고로 이 방송은 X와 유튜브로 스트리밍되고 있습니다.
00:00:30하지만 채팅에 참여하고 싶으시다면 커뮤니티에 로그인하신 후 이벤트에서 '참여'를 클릭해주세요..
00:00:35그러면 오른쪽에 채팅창이 나타날 겁니다. 질문이 있으시면 저희가 놓치지 않고 확인하겠습니다.
00:00:42세션 내내 자유롭게 질문해주세요. 질문은 마지막에 한꺼번에 답변해 드리겠습니다.
00:00:47그리고 다시 한번 말씀드리지만, 채팅에 참여하고 계시다면 서로 존중하고 저희 행동 강령을 지켜주세요.
00:00:54그럼 이제 저희 게스트를 무대로 모시겠습니다.
00:00:58지난달에는 제 동료 제이콥이 허브스팟 팀과 함께 허브스팟 개발자 프로그램에 나만의 백엔드를 가져오는 것에 대해 이야기했습니다.
00:01:05그리고 이번 달에는 허브스팟 팀이 저희와 함께 퍼셀을 어떻게 사용하는지에 대해 이야기할 예정입니다.
00:01:09브룩 님, 환영합니다.
00:01:12에이미, 정말 감사합니다.
00:01:13안녕하세요, 여러분.
00:01:14제 이름은 브룩 본드입니다. 퍼셀 커뮤니티에 함께하게 되어 기쁩니다.
00:01:20미리 채팅으로 답변해주실 몇 가지 질문이 있습니다. 혹시 허브스팟을 사용해본 적이 있으신가요?
00:01:28저희가 누군지 아시나요?
00:01:30저희와 함께 개발해본 적이 있으신가요?
00:01:31만약 있으시다면, 무엇을 만드셨나요?
00:01:34채팅으로 모든 의견을 알려주시면 감사하겠습니다.
00:01:38정말 좋겠지만, 저희에게는 30분밖에 없습니다.
00:01:42그래서 준비된 모든 좋은 콘텐츠를 다 다루고 싶습니다.
00:01:45그래서 오늘은 허브스팟이 무엇인지 간단히 살펴보겠습니다.
00:01:49허브스팟 DevRel 팀으로서 저희는 누구인가요?
00:01:51허브스팟과 퍼셀을 어떻게 함께 사용할 수 있을까요?
00:01:54그리고 저희 허브스팟 DevRel 팀이 허브스팟에서 진행하는 다양한 프로젝트에서 퍼셀을 어떻게 사용해왔는지에 대한 몇 가지 예시를 보여드리겠습니다.
00:02:02마지막으로 Q&A 시간을 조금 남겨두겠습니다.
00:02:04에이미가 말했듯이, 질문이 있으시면 채팅에 남겨주세요. 마지막에 기꺼이 답변해 드리겠습니다.
00:02:12오늘은 제 동료 두 분, 데니스 에드슨과 크리스 라일리가 함께할 예정입니다.
00:02:18저희는 이곳에 함께하게 되어 매우 기쁩니다.
00:02:19먼저, 허브스팟이 무엇인지부터 설명해 드리겠습니다.
00:02:25허브스팟은 기업을 위한 스마트 CRM입니다.
00:02:29저희는 마케팅,
00:02:31영업,
00:02:31서비스 소프트웨어 제품군을 보유하고 있으며,
00:02:34통합 기능을 구축하기 위한 통합 개발자 플랫폼을 제공합니다.
00:02:39그리고 DevRel 팀은 개발자들이 개발자 플랫폼을 사용하는 방법을 이해하도록 돕는 데 노력을 집중하고 있습니다.
00:02:47화면에 보이는 이 사진은 CRM 연락처 기록 페이지입니다.
00:02:53허브스팟 개발자 플랫폼을 사용하면 여러분들이 만드는 모든 작업은 허브스팟 프로젝트 내에 보관됩니다.
00:03:00허브스팟 개발자 플랫폼에서는 내부 정적 애플리케이션 또는 외부 OAuth 애플리케이션을 모두 구축할 수 있습니다.
00:03:09외부 애플리케이션을 구축하면 저희 허브스팟 마켓플레이스에 등록할 수 있으며,
00:03:15허브스팟 계정을 가진 누구나 마켓플레이스에서 여러분의 앱을 다운로드할 수 있습니다.
00:03:21예를 들어,
00:03:21여러분이 퍼셀이고 사람들이 자신의 허브스팟 계정 내에서 퍼셀 지표를 볼 수 있는 통합 기능을 구축하고 싶다고 가정해 봅시다.
00:03:29그것을 구축하고,
00:03:30OAuth 플로우를 생성하고,
00:03:32사람들이 자신의 계정으로 다운로드하게 하면 허브스팟 내에서 퍼셀 관련 정보를 바로 볼 수 있으며 그 반대도 가능합니다.
00:03:40지금 제가 보여드리는 스크린샷은 개발 개요 페이지입니다.
00:03:46그래서 저희는 개발자들이 계정에 로그인했을 때 진행 중인 모든 프로젝트를 볼 수 있도록 전용 개발 개요 페이지를 제공합니다.
00:03:54또한 모니터링 도구도 있어서 사람들이 API 사용량과 기타 유용한 정보를 확인할 수 있습니다.
00:04:01그래서 모든 것을 한곳에서 관리할 수 있어 아주 쉽게 접근할 수 있습니다.
00:04:05허브스팟 프로젝트와 관련 없는 다른 모든 것들의 번잡함에 대해 걱정할 필요가 없습니다.
00:04:11이제 저희 팀을 간단히 소개하겠습니다.
00:04:15저희는 개발자와 관리자로 구성된 다학제적 그룹으로,
00:04:19개발자들이 허브스팟 생태계에서 성장할 수 있도록 돕고,
00:04:23솔루션을 구축하고,
00:04:24최고의 사례를 배우도록 돕고,
00:04:27사용할 수 있는 통합 기능을 만들어 개발자 커뮤니티를 지원합니다.
00:04:32저희는 이와 같은 라이브 이벤트와 자체 채널을 운영하고,
00:04:37컨퍼런스에 참석하여 발표하며,
00:04:39새로운 기능을 구축하고 출시할 때 외부 개발자들의 피드백이 반영되도록 합니다.
00:04:45그래서 저희는 개발 엔지니어링 팀과 매우 긴밀하게 협력하며,
00:04:49커뮤니티의 피드백을 전달하여 제품을 개선하는 데 도움을 줍니다.
00:04:53이것은 제가 만든 작은 그래프인데, 좀 더 자세히 보여드리기 위한 것입니다.
00:04:57저희는 학습 자료와 리소스를 제공합니다.
00:05:00여기에는 개발자 문서,
00:05:02블로그,
00:05:02유튜브,
00:05:03그리고 유튜브,
00:05:04깃허브 등 다양한 곳에 있는 튜토리얼이 포함됩니다..
00:05:08커뮤니티 및 연결 측면에서는 누구나 가입할 수 있는 개발자 슬랙이 있습니다.
00:05:13또한 포럼도 있어서 사람들이 커뮤니티 포럼에서 질문을 할 수 있습니다.
00:05:18그리고 연중 오프라인 행사도 진행합니다.
00:05:22또한 몇 가지 구축 및 개발 도구도 있습니다.
00:05:25저희는 앱 품질 평가를 진행하는데, 이것은 저희 생태계 품질 팀입니다.
00:05:29이 팀은 저희 마켓플레이스에 올라오는 모든 애플리케이션을 검토하여 저희 기준에 부합하는지 확인합니다.
00:05:37그리고 샘플 앱도 제공합니다.
00:05:39마지막으로, 이것은 새로운 것이지만 저희는 Dev MCP를 보유하고 있습니다.
00:05:42저희는 그것을 구축한 엔지니어들과 매우 긴밀하게 협력하여 개발자들을 위한 정말 훌륭한 MCP 제품을 어떻게 만들 수 있을지 이해하도록 도왔습니다.
00:05:51마지막으로, 앱 홍보 및 성장입니다.
00:05:53저희는 사례 연구 섹션을 운영하는데,
00:05:56여기서 훌륭한 개발자 프로그램을 선정하여 그들이 허브스팟을 어떻게 사용하는지 강조합니다.
00:06:02또한 마켓플레이스 인증도 있습니다.
00:06:04그래서 저희 마켓플레이스에 앱을 게시하면 마켓플레이스 인증을 받을 수 있습니다.
00:06:09이는 작은 파란색 체크 표시나 심볼을 받게 되어 품질이 보장되었음을 사람들에게 알릴 수 있다는 의미입니다..
00:06:16마지막으로, 저희는 GTM(Go-To-Market) 조정을 돕습니다.
00:06:19그래서 연중 대규모 출시가 있을 때,
00:06:22저희는 마케팅 자료를 돕고 개발자 대상에게 가장 적합한 방식으로 소통할 수 있도록 합니다.
00:06:30저희가 누구이고 무엇을 하는지 이야기했으니, 이제 허브스팟과 퍼셀을 어떻게 함께 사용하는지 이야기해 봅시다.
00:06:37에이미가 말했듯이, 지난달에는 나만의 백엔드를 가져오는 것에 대한 웨비나를 개최했습니다.
00:06:43그래서 여기서 제가 이야기할 주요 사용 사례 중 하나는 퍼셀을 백엔드 서비스로 사용하는 것입니다.
00:06:50이 경우,
00:06:50저희 프런트엔드인 허브스팟 앱이 있는데,
00:06:53이 앱에는 리액트로 구축된 UI 컴포넌트가 포함되어 있습니다.
00:06:57이것을 페이지에 넣어 허브스팟 계정 내에서 프런트엔드를 렌더링할 수 있습니다..
00:07:03그리고 여러분의 코드를 담을 퍼셀 백엔드가 있습니다.
00:07:06그래서 여러분은 코드 내에서 hubspot.fetch를 사용하여 여러분들이 생성한 API를 통해 백엔드를 호출할 것입니다.
00:07:14그러면 백엔드는 데이터를 반환하고 조작한 다음 프런트엔드에 응답을 렌더링할 것입니다.
00:07:20그것이 어떻게 작동하는지 보여드리기 위해 제가 만든 예시를 간단히 살펴보겠습니다.
00:07:26이것은 LLMS.txt 파일 생성기입니다..
00:07:30세 번 빨리 말해보세요.
00:07:32이 LLMS.txt 파일 생성기는 허브스팟 앱으로,
00:07:37웹페이지 또는 사이트맵 URL을 받아 페이지의 데이터를 파싱하여 해당 파일을 생성합니다.
00:07:45LLMS.txt 파일은 AI 검색 크롤러를 위한 파일로, 불필요한 HTML을 제거할 수 있도록 합니다.
00:07:55이것은 정보를 마크다운 파일 형식으로 렌더링하여 크롤러가 매우 빠르게 읽을 수 있도록 합니다.
00:08:02이것은 HubSpot fetch를 사용하여 퍼셀 API 엔드포인트를 호출하고,
00:08:06HubSpot 파일 API를 사용하여 해당 파일을 허브스팟 계정에 업로드합니다.
00:08:11여기서 보여드리는 스크린샷은 제 코드인데, 실제로 퍼셀 API를 호출하는 부분입니다.
00:08:18여기서 저는 그것을 try-catch로 감싸고 엔드포인트를 함께 보냈습니다.
00:08:25이제 이에 대해 이야기했으니, 어떻게 작동하는지 살펴보겠습니다.
00:08:28여러분들이 볼 수 있도록 프런트엔드로 들어가겠습니다.
00:08:31이것은 저희 허브스팟 계정 내부에 있는 것이고, 여기 DevRel Labs 생성기가 있습니다.
00:08:38이것은 앱 설정 페이지라고 불리는데,
00:08:41제가 이 페이지에 렌더링하도록 선택한 이유는 웹사이트 관리자들이 주로 하는 작업이기 때문입니다.
00:08:51그래서 허브스팟 계정 내의 모든 사람이 접근할 수 있도록 하고 싶지 않았습니다.
00:08:55적절한 사람만 접근할 수 있도록 하고 싶었습니다.
00:08:59사람들이 이것을 생성하여 AI 검색 크롤러에 문제를 일으키지 않도록 말이죠..
00:09:04여기서 유형을 선택할 수 있습니다. 전체 사이트맵을 넣거나 단일 URL을 넣을 수 있습니다.
00:09:10당연히 웹사이트가 매우 크다면 사이트맵은 시간이 좀 걸릴 것입니다.
00:09:15그래서 단일 URL이 훨씬 빠를 것입니다.
00:09:17그럼 이제 URL을 입력할 수 있습니다.
00:09:20저희 developers.hubspot.com을 입력하겠습니다.
00:09:24그러면 생성될 텐데...
00:09:26아, 오류가 발생했네요..
00:09:28네.
00:09:29음, 이런 일이 생기네요.
00:09:30이것은 라이브입니다.
00:09:31어디 봅시다.
00:09:32제 퍼셀 설정으로 들어가서 오류 메시지가 있는지 확인해 보겠습니다... 빌드 로그는 아니고요.
00:09:39여기 제 백엔드에서 정보를 볼 수 있습니다.
00:09:43런타임 로그를 보고 오류를 찾을 수 있는지 확인해 봅시다.
00:09:46음, 작동하지 않네요.
00:09:49하지만 완벽한 상황이었다면 제가 만든 퍼셀 서버리스 함수를 사용하여 llms.txt 파일이 생성되어 허브스팟 계정에 업로드되었을 것입니다..
00:10:04이제 제 다른 팀원들에게 넘겨서,
00:10:07단순히 퍼셀을 허브스팟의 백엔드로 가져오는 것뿐만 아니라 저희가 하는 다른 일들에도 허브스팟을 어떻게 사용하는지 이야기해 달라고 할 것입니다.
00:10:18크리스에게 넘기겠습니다.
00:10:20감사합니다.
00:10:22데모가 100% 완벽하게 작동하지 않을 때 제가 좋아하는 한 가지는,
00:10:29시청하는 모든 개발자들과 저희 커뮤니티 등에 대한 공감대를 형성할 수 있다는 점입니다.
00:10:37브룩의 컴퓨터에서 슬라이드로 빨리 돌아갈 수 있을까요?
00:10:43완벽합니다.
00:10:44감사합니다.
00:10:45물론 저희는 여러분 모두가 창의력과 아이디어를 발휘하여 저희 API를 사용한 통합을 통해 허브스팟 고객에게 제공하기를 바랍니다.
00:10:57하지만 DevRel 내부에서 퍼셀을 어떻게 사용하여 실험하고,
00:11:02매우 빠른 테스트를 실행하고,
00:11:05매우 빠른 프로토타입을 구축하여 팀으로서 가진 아이디어를 테스트하고 조직의 다른 부서에 전달할 수 있을까요?
00:11:15저희는 DevRel Labs라는 것을 운영하고 있습니다.
00:11:20DevRel Labs는 개발자 관계 전반에 걸쳐 적용되는 일련의 규칙이자 프로세스이며,
00:11:27실험을 위한 표준적인 방법을 제공하고,
00:11:31이러한 실험을 수행하고,
00:11:33때로는 유효성을 검증하거나 무효화하며,
00:11:36그리고 다음 단계로 발전시킵니다..
00:11:39어쩌면 제품으로 통합되거나, 나중에 더 세련된 솔루션으로 발전할 수도 있습니다.
00:11:46그래서 지금부터 제가 주도해온 두 가지 실험에 대해 이야기하고,
00:11:52그 다음에는 데니스가 작업해온 것에 대해 이야기하도록 넘기겠습니다.
00:11:58하지만 이 모든 실험에는 명확한 프로세스와 명확한 목표가 있습니다.
00:12:03그중 하나는 저희도 많은 조직처럼 외부 개발자를 위한 슬랙 커뮤니티를 운영하고 있다는 것입니다.
00:12:10이곳은 허브스팟 위에 솔루션을 구축하는 사람들이 와서 교류하고 배우며 서로 도울 수 있는 공간입니다.
00:12:21왜냐하면 진정으로 최고의 커뮤니티는 동료 간의 교류가 있는 커뮤니티이기 때문입니다.
00:12:27그래서 저희는 이 커뮤니티 회원들에게 솔루션과 리소스를 더 빨리 제공하기 위해 무엇을 할 수 있을까 생각했습니다.
00:12:38그리고 분명 여러분도 여러 슬랙 봇과 상호작용해 보셨겠지만,
00:12:42명백한 해결책 중 하나는 슬랙 봇을 만드는 것이었습니다.
00:12:45하지만 슬랙 봇에 대해 생각했을 때, 저희는 대화를 지배하는 것을 원치 않았습니다.
00:12:51저희는 교류를 위해 그곳에 두기를 원했습니다.
00:12:53그래서 너무 방해되지 않아야 했습니다.
00:12:57그리고 외부 커뮤니티에 실시간으로 빠른 리소스를 제공하기 위해 그곳에 두기를 원했습니다.
00:13:05그래서 저희는 그것을 퍼셀 위에 구축했습니다.
00:13:08그것은 저희가 매우 빠르게 프로토타입을 만들고,
00:13:12그 품질을 평가한 다음,
00:13:14그 다음에는 이것으로 무엇을 할지 결정할 수 있게 해주기 때문입니다.
00:13:21그리고 지금은 실험 및 검증 단계에 있습니다.
00:13:25그래서 DevRel의 나머지 커뮤니티 팀과 협력하여 다음 단계로 어디로 갈지 결정할 것입니다.
00:13:31그래서 제 화면에서 봇을 빠르게 보여드리고 싶었습니다.
00:13:36여기 보이는 저희 홈 화면은 정말 마음에 듭니다.
00:13:40그래프와 차트, 숫자는 항상 정말 재미있으니까요..
00:13:45하지만 봇의 채택에 대한 일부 데이터를 제공하는 간단한 화면이 있습니다.
00:13:51하지만 봇과 상호작용하는 방법은 두 가지가 있습니다.
00:13:53다이렉트 메시지를 통해 할 수도 있고, 봇이 지원 관련 질문에 자동으로 응답하는 채널도 있습니다.
00:14:01그래서 아주 간단하게 질문을 제출해 보겠습니다. 허브스팟 Dev MCP를 어떻게 시작하나요?
00:14:08제가 백엔드에서 실제로 보여드릴 수 있는 것이 다소 제한적이기 때문에 보여드리고 싶었던 것은 퍼셀에서 이것으로부터 얻는 실시간 로깅입니다.
00:14:19이것은 제가 방금 제출한 실시간 채팅일 것입니다.
00:14:33그리고 빠르게 처리되었으니 좋은 소식입니다.
00:14:35빠르게 '생각 중' 메시지로 바뀝니다.
00:14:39응답을 얻기 위해 OpenAI로 이동합니다.
00:14:43DevRel 팀이 선별한 추가 리소스가 있는지 확인하는 도구를 통해 다시 돌아옵니다.
00:14:49이것은 이 사용자가 더 나아가는 데 도움이 될 수 있습니다..
00:14:53유튜브일 수도 있고, 문서일 수도 있고, 온갖 종류의 리소스일 수도 있습니다.
00:14:58그리고 나서 응답을 제공할 것입니다.
00:15:00그래서 이것이 응답일 것이라고 추측하는데, 맞네요.
00:15:06이제 다시 돌아가서 모든 것이 200임을 확인하면 됩니다.
00:15:10그럼 최상의 시나리오죠, 그렇죠?
00:15:13그리고 그렇게 되었습니다.
00:15:14그래서 응답을 제공했을 뿐만 아니라 참고할 기사도 제공했습니다.
00:15:21Dev Slack에 가입하라고 했는데, 저는 이미 여기 있습니다.
00:15:24하지만 제가 여기서 제시한 질문과 관련될 만한 튜토리얼과 다른 정보도 제공했습니다.
00:15:35그리고 올바른 응답을 주었습니다.
00:15:37즉, 개발 환경을 설정하고, CLI를 설치하고, MCP 서버를 설치하면 준비 완료라는 것입니다..
00:15:43심지어 시작하는 방법에 대한 아이디어도 제공했습니다.
00:15:47그래서 보시다시피, 그것은 저희가 테스트를 구축하는 매우 간단한 방법이었고, 여기서 로그는 매우 중요합니다.
00:15:56맞춤형 슬랙 봇을 사용하여 솔루션을 테스트하는 것입니다.
00:16:00DevRel에서 저희의 주요 책임은 솔루션을 구축하는 것이 아닙니다.
00:16:05저희 모두 개발자이지만, 매일 구축하는 것은 아닙니다..
00:16:09그래서 저희가 구축하는 모든 것은 저희의 방해를 받지 않고 매우 원활해야 합니다.
00:16:15이것은 제가 다소 놀랐던 어떤 것을 위한 발판을 마련해 주었습니다.
00:16:18슬라이드로 돌아가면, 이것이 또 다른 실험으로 어떻게 이어졌는지 이야기해 드리겠습니다.
00:16:27죄송합니다, 그 전에 브룩, 그 슬라이드로 돌아가 주시겠어요?
00:16:35먼저, 퍼셀에서 저를 정말 흥분시켰던 것들은 무엇인지 말씀드리고 싶습니다.
00:16:39첫째, 제가 보여드렸듯이 읽기 쉬운 로그입니다. 라이브로 설정해 두었었죠.
00:16:43그래서 로그가 실시간으로 스트리밍되는 것을 보셨을 겁니다.
00:16:46시작 속도입니다. 저희는 서버리스 환경을 다루고 있습니다.
00:16:49시작 속도가 놀랍도록 빨랐습니다.
00:16:52그것은 슬랙에 중요합니다.
00:16:53슬랙 통합 또는 다른 서버리스 타사 도구와 통합해 본 적이 있다면 빠른 시작을 원할 것입니다.
00:17:02그리고 퍼셀의 모든 티어에는 빠른 시작 기능이 있습니다.
00:17:06저는 커밋하거나 풀 리퀘스트를 하기 전에 배포할 수 있는 CLI를 좋아합니다.
00:17:12혹시라도 이상한 코드를 넣었을 경우 배포 전에 문제를 더 빨리 잡을 수 있도록 말이죠.
00:17:18그리고 물론 다양한 환경에 배포하는 것도 좋습니다..
00:17:22그리고 저희가 마켓플레이스를 가지고 있듯이,
00:17:24그들은 Redis 및 Postgres를 위한 Neon 및 Upstash와 같은 서비스에 연결되어 있습니다.
00:17:30이는 백엔드 데이터베이스를 매우 빠르게 가동하고 실행할 수 있게 해줍니다..
00:17:35그리고 그것은 중요했습니다.
00:17:37백엔드 데이터베이스에 대해 말하자면, 그것이 다음 단계로 이어졌습니다.
00:17:41그래서 이제 저희 Dev Slack에는 이러한 모든 상호작용이 있습니다.
00:17:48그리고 그것은 정말 풍부한 정보원이 됩니다.
00:17:52당연히 저희는 이것을 직관적으로 알 수 있었습니다.
00:17:54하지만 제가 놀랐던 것 중 하나는 이 데이터에 대한 또 다른 프런트엔드 인터페이스를 만들 수 있다는 것을 깨달은 것입니다.
00:18:03그래서 브룩이 이전에 말했던 것처럼 피드백 프로세스를 교육하고 정보를 제공하는 데 사용할 수 있도록 말이죠.
00:18:11정보를 어떻게 받고, 그 정보를 제품으로 다시 가져와 개발자 경험을 개선하는지에 대해 말입니다..
00:18:18그래서 저희는 슬랙 봇을 구축하는 것에서 이제 새로운 프로젝트에서 갑자기 V0로 전환하여,
00:18:27그 데이터를 가져와 사람들이 무엇에 대해 질문하는지 노출하는 매우 간단한 비밀번호 보호 프런트엔드를 만들었습니다.
00:18:37저희가 제공하는 리소스의 유형은 무엇인가요?
00:18:40그래서 웹훅에 대한 많은 대화가 오가고, 인증에 대한 많은 대화가 오갑니다.
00:18:46이것은 저희가 수행하는 실험의 영향을 보여줄 수 있게 해주었습니다.
00:18:52이 슬랙 봇을 어딘가로 가져가야 하기 때문에 정말 멋진 일입니다..
00:18:57저희는 그냥 만들고 내버려두고 싶지 않았습니다.
00:18:59다음 단계로 나아가야 합니다.
00:19:01리더십 팀원들과 회의를 해보셨다면 가장 좋은 방법은 그래프를 보여주거나 어떤 종류의 프레젠테이션을 하는 것입니다.
00:19:10그리고 이것은 DevRel 내의 커뮤니티 팀과 함께 결정을 내리는 데 도움이 될 것입니다.
00:19:17무엇을 할 것인가??
00:19:18계속 유지할 것인가?
00:19:19발전시킬 것인가?
00:19:21만약 발전시킨다면, 봇의 백엔드 인프라가 변경될 것입니다.
00:19:28하지만 퍼셀처럼 사용하기 매우 쉬운 플랫폼에서 구축하고,
00:19:34시각화 자료를 만들고,
00:19:36이제 다음 단계를 결정하는 것보다 더 좋은 시작 방법은 없었습니다.
00:19:43이제 데니스가 구축한 것을 살펴보겠습니다.
00:19:46제가 구축한 것보다 훨씬 더 발전했고 감히 더 좋다고 말할 수 있지만,
00:19:51DevRel Labs 내의 또 다른 실험이기도 합니다..
00:19:55데니스, 이제 당신 차례입니다.
00:19:57고마워, 크리스.
00:19:59그리고 더 좋다고 말해줘서 고마워.
00:20:01세상에, 모두가 듣고 있기를 바랍니다.
00:20:04허브스팟에서 일하기 전에는 저는 에이전시에서 일했습니다.
00:20:08크리스가 저희가 하는 DevRel Labs에 대해 이야기했을 때,
00:20:13저는 에이전시에서 겪었던 아주 구체적인 문제가 있었습니다.
00:20:17그것은 이 세 가지 중 하나를 구축하는 것이었습니다..
00:20:21무언가를 구축하고 완료한 다음 유지보수 모드에 들어가는 경우였습니다.
00:20:24가끔씩 지켜보기만 하는 거죠.
00:20:25허브스팟 생태계에서 일어나는 일을 놓쳐서 나중에 고장 나곤 했습니다.
00:20:31아니면 수많은 프로젝트를 물려받았는데, 그것들이 무엇을 하는지 전혀 몰랐습니다.
00:20:37그래서 결국 그중 하나가 어떤 종류의 치명적인 변경 사항에 부딪혀 스스로 고장 나고,
00:20:41저는 어디서,
00:20:42왜,
00:20:42어떻게 고장 났는지 알아내야 했습니다.
00:20:44그리고 마지막으로,
00:20:45이것이 아마도 가장 큰 문제였는데,
00:20:47주의해야 할 것이 너무 많아서 제가 무엇을 하는지 종종 놓치곤 했습니다.
00:20:52변경 로그에 전혀 주의를 기울이지 않아서 무언가가 고장 나는 거죠.
00:20:56그리고 어떻게 되는지 아세요?
00:20:57그 시점에는 고객들이 여러분에게 소리치고 있을 겁니다.
00:20:59그래서 제가 결정한 것은 다음 슬라이드에 있는 허브스팟 개발자 변경 로그 모니터링 도구를 구축하는 것이었습니다.
00:21:07코드명은 '스프로키 변경 먼지'입니다..
00:21:10이 도구는 허브스팟 변경 로그를 적극적으로 모니터링하며,
00:21:14AI를 사용하여 해당 변경 로그 항목을 살펴보고 어떤 유형의 변경인지 결정합니다.
00:21:19치명적인 변경인가요?
00:21:21개선 사항인가요?
00:21:22CMS에 영향을 미치나요?
00:21:23CRM에 영향을 미치나요?
00:21:24둘 다 영향을 미치나요?
00:21:26그리고 깃허브 호스팅 리포지토리를 사용하여 해당 변경 로그를 여러분의 리포지토리와 비교하여 확인할 수 있게 해줍니다.
00:21:34기본적으로 변경 로그를 대신 확인해 줄 비서를 두는 것과 같습니다..
00:21:39그럼 어떻게 만들었을까요?
00:21:40여기서 사용한 툴킷은 퍼셀로 구축된 리액트 프레임워크입니다.
00:21:44당연히 Next.js입니다.
00:21:46아시다시피 땅콩버터와 젤리처럼 잘 어울리죠.
00:21:49데이터베이스는 Superbase를 사용했고,
00:21:51그리고 해당 리포지토리에 연결할 수 있는 깃허브 앱을 구축해야 했습니다..
00:21:56그리고 퍼셀의 서버리스 함수와 OpenAI를 통해 사용자가 조치할 수 있는 정말 좋은 품질의 데이터를 가져올 수 있었습니다.
00:22:06왜 퍼셀을 선택했을까요?
00:22:07솔직히, 설정하기가 정말 엄청나게 쉽습니다.
00:22:11프런트엔드에 대해 크게 걱정할 필요가 없었습니다.
00:22:1330분도 안 되어 앱을 쉽게 가동할 수 있었습니다.
00:22:18서버리스 함수 덕분에 해당 서버를 실행하는 비용을 정말 많이 절감할 수 있었습니다.
00:22:23필요할 때만 작동합니다.
00:22:25이 배치 큐를 OpenAI로 보내 작업을 수행하게 하고, 그것을 다시 가져와 빠르게 처리합니다.
00:22:31그렇게 해서 엄청난 돈을 절약했습니다.
00:22:32그리고 제가 혼자 테스트하다가도 이 앱을 사용하는 수천 명의 사람들에게 확장할 수 있다는 사실,
00:22:38퍼셀은 항상 그 자리에 있고,
00:22:40저와 함께 확장됩니다.
00:22:42전체 과정이 훌륭했습니다.
00:22:44다음 슬라이드로 넘어가면, 이것은 제가 Next.js로 구축한 프런트엔드입니다.
00:22:50저희의 모든 변경 로그 항목을 가져오는 것을 볼 수 있습니다.
00:22:53여기서 해당 변경 로그가 무엇인지에 대한 설명을 볼 수 있습니다.
00:22:57지금 바로 아신다면, 연결된 특정 깃허브 리포지토리에 이슈를 생성할 수 있습니다.
00:23:03다음 슬라이드로 넘어가면, 깃허브에 연결해야 합니다..
00:23:07이것은 원하는 만큼 많은 리포지토리를 연결할 수 있게 해줍니다.
00:23:11첫 스캔에서는 허브스팟과 관련이 있다고 생각하는지 확인하기 위해 프로그래밍 방식의 스캔을 수행할 것입니다.
00:23:18기억하세요, 여러분은 50개와 같은 수많은 리포지토리를 물려받았을 수도 있습니다.
00:23:22그것들이 무엇을 하는지 전혀 모를 수도 있습니다.
00:23:23여기에 넣으면 됩니다.
00:23:24초기 스캔을 수행할 것입니다.
00:23:26그것은 허브스팟 관련일 수 있다고 판단할 수 있는 모든 것, 파일 패턴을 찾을 것입니다.
00:23:32그 시점에서 다음 슬라이드로 가서 허브스팟 버튼을 클릭할 수 있습니다.
00:23:37이는 그것을 배치로 OpenAI에 보낼 것이라는 의미입니다..
00:23:42그것은 모니터링할 것입니다.
00:23:43여러분의 리포지토리와 허브스팟에 관련 있다고 생각하는 중요한 세부 정보만 보내기 위해 RAG 시스템을 사용합니다..
00:23:49시간이 좀 걸릴 것이고, 완료되면 돌아와서 가능한 모든 일치 항목을 보여줄 것입니다.
00:23:56알림 이메일을 받게 될 것입니다. 슬랙 알림도 작업 중입니다. 이것을 확인해 보는 게 좋을 것이라고 말이죠.
00:24:03그러면 '좋아,
00:24:04이건 합법적이야,
00:24:05이 문제에 대해 이슈를 만들고 작업에 착수할게'라고 말하거나,
00:24:08이것과 정말 관련이 없기 때문에 무시할 수 있는 옵션이 있습니다.
00:24:12일단 무시하면,
00:24:13저희는 '이 특정 리포지토리에 대해 모니터링하고 싶은 것이 아닐 수도 있겠구나'라고 깨달을 만큼 충분히 똑똑합니다.
00:24:20그래서 사용량 그래프를 업데이트할 것입니다..
00:24:23그 후에는 각 리포지토리를 지속적으로 모니터링할 것입니다.
00:24:27그래서 리포지토리에 변경 사항을 만들면 저희가 그것을 주시하고 있습니다..
00:24:32주요 변경 사항을 만들면,
00:24:34저희는 여러분이 추가한 이 새로운 변경 사항에 대해 모든 변경 로그를 다시 스캔할 것입니다.
00:24:39문제가 될 수 있다는 것을 몰랐던 일을 하지 않았는지 확인하기 위해서입니다..
00:24:43또한 저희가 계속 진행할 수 있게 해주는데... 제가 무슨 말을 하려 했는지 잊었네요.
00:24:50새로운 변경 로그가 들어올 때마다 확인할 수 있게 해줍니다.
00:24:54연결된 모든 리포지토리를 확인하여 해당 변경 로그가 여러분에게 특정한 것인지 볼 수 있게 해줍니다..
00:25:01이것은 여러분이 변경 로그를 직접 확인하고 이것이 자신과 관련 있는지 없는지 알아내기 위해 눈에 의존할 필요가 없게 해줍니다.
00:25:08변경 로그가 여러분의 받은 편지함으로 오게 하고, 필요에 따라 조치할 수 있게 해줍니다.
00:25:14자, 이제 Q&A 시간인 것 같습니다.
00:25:17필요하다면 Q&A 시간을 가질 수 있도록 가능한 한 빨리 서둘러 진행했습니다.
00:25:22데니스, 잘했어요.
00:25:23네, 데니스, 훌륭해요.
00:25:25아주 빠르게 진행되었네요.
00:25:26정말 빨랐어요.
00:25:27좋습니다, 이제 몇 분 남았습니다.
00:25:31시작할 질문이 있습니다.
00:25:34오늘 라이브 데모가 항상 완벽하게 진행되지는 않는다는 것을 보셨을 겁니다.
00:25:39그리고 퍼셀이 사람들에게 일을 쉽게 만들어주지만, 항상 더 잘할 수 있는 것이 있습니다.
00:25:45완벽한 사람은 없죠.
00:25:46그래서 엔지니어링 팀과 공유하고 싶은 기능 요청 사항이 있으신가요?
00:25:51다르게 보고 싶은 것이나 완전히 빠진 것이 있나요?
00:25:55아직 빠진 것에 대해서는 모르겠습니다.
00:26:00하지만 솔직히, 최근에 출시한 몇 가지 기능이 있습니다.
00:26:03서버리스 함수의 작업 시간을 연장하는 기능이라고 생각합니다..
00:26:07방금 출시한 기능의 이름은 기억나지 않지만 매우 관심이 있습니다.
00:26:12OpenAI와 작업할 때 결과를 기다리는 것이 서버리스 함수의 길이를 초과할 수 있기 때문입니다..
00:26:19이름이 있었는데 죄송합니다, 제가 잊어버렸네요.
00:26:21하지만 방금 소개하신 AI SDK와 함께 그것을 사용하기 시작하게 되어 정말 기쁩니다.
00:26:28이것들은 기능 요청이 아니라, 여러분들이 내놓는 기능을 제가 즐기고 있는 것입니다.
00:26:34저도 하나 있습니다.
00:26:35저는 사실 배포용 API 이름을 잊어버렸는데,
00:26:40제가 구축한 프런트엔드 애플리케이션에서 '배포가 성공했나?' 하고 확인하는 것이 좀 번거로웠기 때문입니다.
00:26:53그래서 배포 상태를 얻을 수 있는 API가 있습니다.
00:26:56그래서 그렇게 할 필요가 없습니다.
00:26:58저는 그것이 읽힐 때까지 기다릴 수 있습니다.
00:27:00왜냐하면 문제가 생기기 전까지는 인터페이스를 보고 싶지 않기 때문입니다..
00:27:05그리고 배포 실패가 발생하면, 그것은 제가 겪는 가장 좌절스러운 문제입니다.
00:27:09하지만 그 외에 여러 프로젝트를 가지고 있고,
00:27:13일부 인터페이스는 경험 측면에서 항상 개선할 여지가 있다고 생각하지만,
00:27:19제가 특별히 눈에 띄는 한 가지는 없었습니다.
00:27:23네, 저에게 있을 수 있는 한 가지 함정이 있는데, 퍼셀의 문제는 아닐 수도 있습니다.
00:27:28그래서 기능 요청이라면 좋고.
00:27:30만약 제 문제라면, 뭐, 제 잘못이죠.
00:27:33저는 제 모든 것을 가지고 로컬에서 엄청나게 많은 테스트를 했는데, 함수들이 로컬에서는 죽지 않습니다.
00:27:38적어도 저에게는 그랬습니다.
00:27:40그래서 모든 것이 버터처럼 부드럽게 보였습니다. 정말 놀라웠죠.
00:27:43모든 것이 잘 되고 있습니다.
00:27:44제 컴퓨터에서는 작동했습니다.
00:27:45네.
00:27:46제 컴퓨터에서는 작동했습니다.
00:27:47정확합니다.
00:27:48전형적인 경우죠.
00:27:49그래서 퍼셀을 사용하고 함수가 결국 죽는다면, 다시 말하지만, 이것은 제 문제일 수도 있습니다.
00:27:57제 함수에 기본적으로 제한을 두어 일정 시간 동안만 실행되도록 해야 할 수도 있습니다..
00:28:04하지만 퍼셀이 기본적으로 그런 기능을 제공한다면 정말 놀라울 것 같습니다.
00:28:08더 긴 런타임과 같은 거죠.
00:28:10네.
00:28:11아니요, 아니요.
00:28:12음, 제 말은, 프로덕션에서와 같은 런타임 말입니다.
00:28:17로컬에서요.
00:28:18네.
00:28:19알겠습니다.
00:28:20네.
00:28:21저도 그런 경험이 있습니다.
00:28:22알아두면 좋겠네요.
00:28:23다른 의견 있으신가요?
00:28:24좋습니다.
00:28:25알아요.
00:28:26저는 평생 그런 일을 겪어왔고, 옆에서 상기시켜주는 것이 기억하는 데 도움이 됩니다.
00:28:32특별한 요청 사항은 없습니다.
00:28:34하지만 허브스팟이 처음이지만 보신 내용이 마음에 들고 저희를 사용해보고 싶으시다면 말씀드리고 싶은 것이 있습니다..
00:28:43언제든지 저희 개발자 슬랙에 가입할 수 있습니다.
00:28:45저희가 이야기했던 것처럼, 저희 개발자 문서를 확인해 볼 수도 있습니다.
00:28:51직접 몇 가지를 시도해 볼 수 있도록 말이죠..
00:28:55정말 그렇습니다.
00:28:56좋습니다.
00:28:57어디 봅시다.
00:28:58제가 묻고 싶은 질문이 하나 더 있습니다. 많은 내용을 다루셨다는 것을 압니다.
00:29:05그래서 핵심적인 내용,
00:29:06모범 사례 또는 중요한 팁이 있다면,
00:29:09이것을 보고 사람들이 기억했으면 하는 것이 있으신가요?
00:29:14저는 하나 있는데, 제가 따르지 않았고 아직도 따르지 않고 있어서 제 자신에게 화가 납니다.
00:29:21정말 화가 나요..
00:29:23환경을 사용하고 일찍 설정하세요.
00:29:27나중에 소급 적용하려고 하지 마세요. 정말 고통스럽습니다.
00:29:32그래서 초기에 환경을 갖는 것이 중요합니다. 인터페이스에서 환경 변수를 환경에 연결하는 것이 매우 쉽습니다.
00:29:43환경을 설정하고 일찍 사용하세요.
00:29:48기다리지 마세요. 나중에 하면 정말, 정말 고통스럽습니다.
00:29:51그리고 저희 모두는 기능을 구축하고 가능한 한 빨리 작동하는 것을 보고 싶어 한다는 것을 압니다.
00:29:57그래서 테스트 환경을 갖는 것이 다소 번거로울 수 있지만, 네, 그것이 제가 추천하는 것입니다.
00:30:03저도 동의합니다.
00:30:04저는 오류가 발생했고 개발 환경에서 커서에게 왜 오류가 발생하는지, 왜 작동하지 않는지 물어보고 있었습니다.
00:30:13그것은 제가 개발 환경 내에서 제 환경 변수,
00:30:17제 환경 비밀 키를 사용하는 것을 켜지 않았기 때문이었습니다..
00:30:22그래서 키를 찾을 수 없었던 거죠.
00:30:24그래서 좀 어리석었습니다.
00:30:26네, 워크플로우에서 AI를 어떻게 사용하고 있는지에 대한 질문이 보이네요.
00:30:30특히 저는 저희 개발자 MCP를 사용하는 것을 좋아합니다.
00:30:35정말 좋은 제품이라고 생각하고,
00:30:36허브스팟 개발자들을 위해 이 개발자 MCP를 어떻게 더 좋게 만들 수 있을지에 대한 피드백을 항상 받으려고 노력하고 있습니다.
00:30:43하지만 제가 커서에게 '무엇을 하고 싶다'고 물어보면, 저는 그것을 좋아합니다.
00:30:48그것은 저희 문서를 실시간으로 검색할 것입니다.
00:30:51그래서 항상 최신 정보를 얻을 수 있습니다.
00:30:55MCP에 질문을 하고 문서 검색을 실행할 때 정보가 오래되지 않을 것입니다.
00:31:04제 의견을 덧붙이자면, 저는 AI를 회의적으로 사용합니다.
00:31:07그것이 저에게 보내는 모든 것을 의심합니다. 왜냐하면 종종, 아시다시피, 아직 완벽하지 않기 때문입니다.
00:31:12그냥 쉽게 받아들이지 마세요.
00:31:14캔디 같아요.
00:31:15아시다시피, 그냥 수락하고 계속 진행할 수 있습니다.
00:31:19벌써 17개의 커밋을 했습니다.
00:31:21그리고 아시다시피, 세 번째 커밋이 실제로 모든 것을 망가뜨릴 것입니다.
00:31:26그래서 AI를 사용할 때는 회의적인 방식으로 사용하세요.
00:31:31매우 비판적으로요.
00:31:33새로운 작업을 할 때는 항상, 항상, 항상 새 브랜치를 만드세요.
00:31:38그러면 필요할 경우 그냥 없앨 수 있습니다.
00:31:40퍼셀과 그 미리보기 환경을 활용하여 그렇게 하고, 네, 너무 많이 의존하지 마세요.
00:31:50모두 좋은 조언입니다.
00:31:51시간이 다 된 것을 압니다.
00:31:53그리고 여러분 모두 매우 바쁘시고 아마도 이 직후에 가야 할 곳이 있으실 겁니다..
00:31:58시간 내주셔서 정말 감사합니다.
00:32:00이제 가셔서 일상으로 돌아가실 수 있도록 해드리겠습니다.
00:32:03감사합니다.
00:32:04감사합니다.
00:32:05퍼셀과 와주신 모든 분들께 감사합니다.
00:32:09좋습니다.
00:32:11간단히 다시 알려드립니다.
00:32:12다음 주에도 또 다른 세션이 있습니다.
00:32:14퍼셀에서의 파이썬에 대해 이야기할 예정입니다.
00:32:18그리고 community.vercel.com/events에서 이벤트 캘린더를 항상 확인하여 다음에 무엇이 올지 볼 수 있습니다.
00:32:24모두 감사합니다.
00:32:25좋은 한 주 되세요.