▲ 커뮤니티 세션: PostHog + v0로 더 빠르게 배포하고 검증하기

VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00[무음]
00:00:30[무음]
00:01:00[무음]
00:01:29>> 여러분, 안녕하세요.
00:01:32이번 주 Vercel 커뮤니티 세션에 오신 것을 환영합니다.
00:01:36여러분을 모시게 되어 정말 기쁩니다.
00:01:41라이브 세션을 진행하는 건 정말 즐거운 일이에요. 사실 한동안
00:01:44기회가 없었거든요.
00:01:46자, 다들 반가워요.
00:01:47[웃음] 커뮤니티 세션에 처음 참여하시는 분들을 위해 소개하자면,
00:01:53저는 Vercel 커뮤니티 팀의 폴린 나바스(Pauline Navas)입니다.
00:01:57저희 자체 커뮤니티 플랫폼인
00:02:03[www.vercel.com](https://www.vercel.com)이나 X, 링크드인 등에서 질문에 답변하고
00:02:08소통하며 여러분이 Vercel에서 무엇을 만들고 계신지
00:02:12파악하는 제 모습을 보셨을 수도 있겠네요.
00:02:13이 시간은 언제나 커뮤니티와 고객,
00:02:18그리고 사용자분들과 실시간으로 소통하는 기회입니다.
00:02:22좋아요, 벌써 많은 분이 와주셨네요.
00:02:25채팅창에 아담 님이 남겨주신 저녁 인사도 보이네요.
00:02:29안녕하세요, 반갑습니다.
00:02:31채팅창에 메시지를 남겨 어디서 시청 중인지 알려주세요.
00:02:36X나 유튜브, 링크드인으로 보고 계신 분들 중
00:02:39실시간 채팅에 참여하고 싶다면 [community.vercel.com/live로](https://www.google.com/search?q=https://community.vercel.com/live%EB%A1%9C) 접속해 보세요.
00:02:46상단에 있는 세션을 클릭해서 채팅창에 의견을 남겨주시면 됩니다.
00:02:53오늘 세션은 특히 기대되는데요. Vercel
00:02:58마켓플레이스 통합 세션이 있을 때마다 정말 즐겁습니다.
00:03:03Vercel 기반의 통합 기능을 활용해 무엇을 구현할 수 있는지 직접 볼 수 있기 때문이죠.
00:03:07오늘은 PostHog와 함께합니다.
00:03:11아직 PostHog를 모르시는 분들을 위해 짧게 설명해 드리자면,
00:03:16오픈 소스 제품 분석 플랫폼입니다.
00:03:19피처 플래그, A/B 테스트, 이벤트 추적 등
00:03:25사람들이 제품을 사용할 때 실제로 어떤 일이 일어나는지 이해하는 데
00:03:29필요한 모든 도구를 갖추고 있다고 생각하시면 됩니다.
00:03:31오늘 세션이 더욱 흥미로운 이유는 PostHog가 이제
00:03:36v0와 직접 통합되기 때문입니다.
00:03:38즉, 빌더를 떠나지 않고도 아이디어를 곧바로
00:03:43실시간 실험으로 옮길 수 있다는 뜻이죠.
00:03:45더 이상 제품을 배포한 뒤에야 분석 방법을 고민할 필요가 없습니다.
00:03:50빌딩 과정의 일부로 피처 플래그를 설정하고, 테스트를 실행하며,
00:03:55커스텀 이벤트를 정확하게 추적할 수 있습니다.
00:03:58자, 제 서론은 이쯤 할게요. 많은 분이 채팅에 참여해주고 계시네요.
00:04:06좋습니다.
00:04:06어디서 보고 계신지 계속 알려주세요.
00:04:09좋아요.
00:04:10그럼 지체 없이 PostHog의 게스트, 브루커 님을 모셔보겠습니다.
00:04:16안녕하세요, 브루커 님.
00:04:17- 안녕하세요.
00:04:17함께하게 되어 기쁩니다.
00:04:19네, 폴린 님이 말씀하신 대로 제 이름은 브루커입니다.
00:04:21성장 팀의 제품 엔지니어로 일하고 있죠.
00:04:25시작하기에 앞서 PostHog가 제공하는 기능과
00:04:30왜 v0에서 PostHog 같은 도구를 사용해야 하는지 설명해 드릴게요.
00:04:34그리고 Vercel과 v0 환경에서의 몇 가지 활용 사례를 살펴보겠습니다.
00:04:41라이브 데모도 진행할 예정이고요.
00:04:42실제로 활용 사례 몇 가지를 직접 구현해 볼 겁니다.
00:04:46특히 다루고 싶은 두 가지가 있는데요, 그전에 먼저
00:04:49v0와 Vercel 사용자 입장에서 PostHog가 왜 흥미로운 도구인지
00:04:54이야기해 보겠습니다.
00:04:56여러분은 v0를 사용해 멋진 앱을 만들고 배포했습니다.
00:05:02그런데 앱이 잘 작동하는지는 어떻게 확인할 수 있을까요?
00:05:06사람들이 앱을 어떻게 쓰는지, 어떤 점을 좋아하고
00:05:11싫어하는지 어떻게 이해할 수 있을까요?
00:05:12문제가 생겼을 때는 또 어떻게 파악해야 할까요?
00:05:15보통 앱을 배포하면 미리보기 모드에서는
00:05:19아주 잘 작동합니다.
00:05:20직접 테스트도 해보셨겠지만, 실제 운영 환경에서는
00:05:26예상치 못한 문제들이 발생하곤 합니다.
00:05:29그럴 때 예외(exception)가 발생할 수 있는데, 개발자에게는
00:05:33그 상황을 가시적으로 파악하는 것이 매우 중요합니다.
00:05:39특히 그 가시성과 컨텍스트를 v0 에이전트로 가져오면,
00:05:45에이전트가 운영 환경의 상황을 모두 이해하고 문제를 해결해 줍니다.
00:05:50개발자가 여기저기 뛰어다니며 정보를 모을 필요가 없죠.
00:05:55로깅 시스템이나 에러 시스템을 뒤지거나,
00:05:59크롬 개발자 도구에서 직접 재현하며 복사해서 붙여넣을 필요도 없습니다.
00:06:02물론 제가 그런 적이 있다는 건 아니고요.
00:06:04- 우리 모두 한 번쯤은 해본 일이죠.
00:06:07- 맞아요.
00:06:09그래서 보여드리고 싶은 첫 번째 사례는 에러 핸들링입니다.
00:06:13그리고 다른 하나는 피처 플래그와 A/B 테스트입니다.
00:06:17개인적으로 저는 이 개발 방식을 정말 좋아합니다.
00:06:23팀과 함께 협업하다 보면
00:06:26추가하고 싶은 기능에 대해 논의하게 됩니다.
00:06:29그런데 그 기능을 어떻게 구현할지에 대해
00:06:33팀원과 의견이 다를 수 있죠.
00:06:34저는 이 방식이 좋다고 하고,
00:06:36상대방은 저 방식이 좋다고 할 때 말이에요.
00:06:39그럴 때 해결하는 가장 좋은 방법은 둘 다 구현한 뒤
00:06:42실제 환경에서 테스트하여 어떤 것이 더 나은 결과를 내는지 보는 겁니다.
00:06:46이 과정도 함께 살펴볼 거예요.
00:06:48그럼 이제 제 화면을 공유하겠습니다.
00:06:51처음부터 끝까지 전체 프로세스를 보여드릴게요.
00:06:55이 계정에는 일부 설정이 미리 되어 있긴 합니다.
00:06:58그래서 아직 PostHog가 설치되지 않은 계정으로 전환해서 보여드리죠.
00:07:06제 화면이 보이면 알려주세요.
00:07:09- 화면 잘 보입니다, 브루커 님.
00:07:11시작하시죠.
00:07:11- 좋습니다.
00:07:12네.
00:07:12이제 Vercel 화면입니다.
00:07:14통합(Integrations) 메뉴로 가서 PostHog를 검색할 거예요.
00:07:18왜 안 나오나 했더니... 아, 마켓플레이스 둘러보기를 눌러야 하네요.
00:07:21마켓플레이스로 들어가서
00:07:22PostHog를 검색하고 선택한 뒤 '설치(Install)'를 누릅니다.
00:07:29그러면 새 계정을 만들지, 기존 계정에 연결할지 묻습니다.
00:07:32이미 PostHog 계정이 있다면 연결하시면 됩니다.
00:07:35여기서 설치를 진행하면 어떤 일이 일어나냐면...
00:07:39잠시만요, 클릭하면서 말을 동시에 하기가 어렵네요.
00:07:46왜 청구 주소를 입력하라고 나오지?
00:07:48알겠습니다.
00:07:49양식을 작성하시고
00:07:52계속하기를 누르세요.
00:07:53그러면 실제로 여러분의... 어떤 결과가 나오는지 보여드릴게요.
00:07:59환경 변수가 동기화되어서 설정으로 가보면...
00:08:06아, 개요(Overview)로 가야겠네요.
00:08:09어, 이미 설치한 줄 알았는데 아니었네요.
00:08:14빨리 해보겠습니다.
00:08:15프로젝트에 설치해보죠.
00:08:17설치할 프로젝트를 선택합니다.
00:08:20계속하기를 누르고요.
00:08:22좋습니다.
00:08:23프로젝트를 선택했고...
00:08:25어디 보자.
00:08:30죄송합니다, 여기 하나 있는 줄 알았는데.
00:08:32아, 알겠다.
00:08:33로그인된 계정이 달랐네요.
00:08:35이 계정인 것 같아요.
00:08:37- 사실 이런 게 제일 재밌죠. 단계를 밟으며 디버깅하는 과정 말이에요.
00:08:41보기 좋네요.
00:08:42- 네.
00:08:44네, 여기에 연결되어 있네요.
00:08:47이 통합 기능의 정말 멋진 점을 보여드리고 싶었는데, 바로
00:08:51환경 변수를 직접 관리할 필요가 없다는 것입니다.
00:08:55해보신 분들은 아시겠지만, 환경 변수 관리는 정말 귀찮은 일이죠.
00:08:59특히 보안상 중요한 키를 교체해야 할 때는 더 그렇고요.
00:09:03하지만 Vercel의 PostHog 통합 기능을 쓰면 이 모든 걸 알아서 처리해 줍니다.
00:09:08방금 보여드린 것처럼 설치 과정을
00:09:12클릭만으로 완료하면 되죠.
00:09:13결제 부분도 저희는 무료 티어가 아주 넉넉합니다.
00:09:17제품이 궤도에 오르기 전까지는 비용 걱정 없이
00:09:21사용하실 수 있을 거예요.
00:09:24어쨌든, 이렇게 환경 변수가 동기화됩니다.
00:09:28핵심 요소는 PostHog 호스트 정보인데... 혹시 모르니
00:09:33값은 가리고 보여드릴게요. 호스트는 그냥 URL입니다.
00:09:39가령 us.i.posthog.com 같은 식이죠.
00:09:43중요한 건 이 PostHog 키(key)입니다. 이 키를 통해
00:09:48PostHog가 여러분의 프로젝트를 식별합니다.
00:09:50애플리케이션이 실제 환경에서 실행되면서 에러나 사용량,
00:09:58피처 플래그 정보 등을 PostHog로 전송할 때,
00:10:02이 키가 해당 제품과 PostHog 프로젝트를 연결해 주는 역할을 합니다.
00:10:07이런 설정이 자동으로 된다는 건 정말 유용하죠.
00:10:12혹시 Vercel 쪽 설정에 대해 질문 있으신가요?
00:10:16상당히 간단하죠.
00:10:17제가 대충 설명한 부분도 있고 실수도 좀 해서 죄송하네요.
00:10:21기본적으로는 설치하고, 사용할 Vercel 프로젝트에
00:10:25연결만 하면 바로 시작할 수 있습니다.
00:10:28여기에 시작 가이드도 준비되어 있고요.
00:10:32설정된 피처 플래그가 있다면 여기서 바로 볼 수도 있습니다.
00:10:35지금은 없지만, 곧 생길 겁니다.
00:10:40- 네, 아주 좋네요.
00:10:41아직 질문이 없는 걸 보니 과정이 매우 매끄러운 것 같습니다.
00:10:47채팅창에 이 통합 기능을 써보신 분이 있는지 물어봤는데,
00:10:51경험이 있으시다면 알려주시고 진행 중에 언제든 질문해 주세요.
00:10:54- 네, 중간에 편하게 말씀해 주세요.
00:10:58그럼 이제 데모를 시작하겠습니다.
00:10:59실행 중인 앱이 하나 있는데요.
00:11:01'Hog Hop'이라는 작은 게임을 만들었습니다.
00:11:02여기에 작은 PostHog 캐릭터가 있네요.
00:11:04버그(벌레)들이 돌아다니고 있고, 저는 데이터 포인트를 수집해야 합니다.
00:11:06주인공 '맥스'가 뛰어다니며 데이터 포인트를 모으고 있죠.
00:11:12그런데 버그가 하나 있어요.
00:11:15특정 데이터 포인트를 먹으면 화면이 멈춰버립니다.
00:11:16지금 아무것도 할 수가 없네요.
00:11:21실제 배포 환경에서 이런 일을 겪었고, 원인을 찾아야 합니다.
00:11:23아까 말씀드렸듯이 개발자 도구를 열거나
00:11:28Vercel 로그를 뒤져서 에러를 찾을 수도 있겠지만,
00:11:32그럴 필요가 없다는 걸 보여드릴게요.
00:11:41v0에서는 에러에 대한 모든 컨텍스트를 수집하고
00:11:44그 자리에서 바로 수정할 수 있습니다.
00:11:50먼저 MCP를 추가하는 법부터 보여드릴게요.
00:11:51v0 채팅창 왼쪽 아래를 보면
00:11:54작은 플러스(+) 버튼이 있고 MCP 항목이 보입니다.
00:12:01거기서 'Add MCP'를 클릭하세요.
00:12:04PostHog는 프리셋 MCP로 설정되어 있습니다.
00:12:06저는 이미 연결해 두었으니 끊지는 않을게요.
00:12:10그냥 플러스 버튼을 누르고 PostHog 계정으로
00:12:13로그인만 하면 됩니다.
00:12:18아까 한 가지 안 보여드린 게 있는데, PostHog와
00:12:19Vercel 통합을 마치면 'Open in PostHog' 버튼이 생깁니다.
00:12:25이걸 누르면 별도의 인증 정보 관리 없이 바로
00:12:30PostHog에 로그인할 수 있습니다.
00:12:36로그인된 상태에서 v0의 MCP를 연결하려고 하면,
00:12:42인증 확인을 위해 PostHog 탭이 열리며
00:12:48MCP 인증이 완료됩니다.
00:12:50생각해보니 MCP가 뭔지 정의를 안 했네요. 죄송합니다.
00:12:52MCP(Model Context Protocol)는 쉽게 말해 에이전트가 정보를 수집하거나
00:12:58v0 에이전트에게 특정 계정과 연결된 기능을
00:13:03호출할 수 있는 능력을 부여하는 방식입니다.
00:13:07이번 사례의 경우, v0에게 "필요하다면 PostHog에서
00:13:14정보를 묻거나 관리해줘"라고 권한을 주는 것이죠.
00:13:19PostHog MCP는 기능이 매우 강력해서 아주 많은 일을 할 수 있습니다.
00:13:24실제로 보여드릴게요... PostHog 문서에 모델 컨텍스트 프로토콜(MCP) 섹션이 있습니다.
00:13:29여기서 할 수 있는 모든 작업을 확인할 수 있죠.
00:13:33항목이 너무 많다고 해서 당황하지 마세요.
00:13:35이 모든 내용이 에이전트에 이미 로드되어 있거든요.
00:13:36그래서 실제로 "PostHog MCP로 무엇을 할 수 있어?"라고 물어보면,
00:13:42에이전트가 다 알려줄 겁니다.
00:13:43그리고 여기 이 토글 스위치가 켜져 있는지 확인만 하면 됩니다.
00:13:50네, 그래서 여기서 보여드리고 싶었던 건 다시 말씀드리지만,
00:13:55세 번째 데이터 포인트를 수집하려고 할 때 버그가 발생한다는 점입니다.
00:14:00그냥 멈춰버려요.
00:14:01이제 이 상황을 에이전트에게 설명해 보겠습니다.
00:14:04에이전트가 PostHog MCP로 할 수 있는 일들을 알려주었으니,
00:14:08그 내용을 바탕으로 에이전트에게 설명할게요.
00:14:10"max로 데이터 포인트를 수집할 때 가끔 멈추는 현상이 있어.
00:14:23PostHog MCP 에러 로그를 사용해서 버그를 찾아 고쳐줄 수 있어?"라고 말이죠.
00:14:35에이전트가 작업하는 동안 PostHog 대시보드를 좀 보여드릴게요.
00:14:39PostHog에서는 앱(Apps)으로 가서 에러 트래킹(Error Tracking)을 확인할 수 있습니다.
00:14:47말씀드렸듯이 PostHog는 정말 많은 기능을 제공합니다.
00:14:50여기서 살펴볼 수 있는 기능이 아주 많죠.
00:14:55지금은 여러분께 구체적으로 무엇을 할 수 있는지 감을 드리기 위해 몇 가지에만 집중하고 있습니다.
00:15:01기술적인 지식이 있어서 에러의 실제 원인을 파악하고 싶다면,
00:15:04이 항목을 열어서 확인할 수 있습니다. 예를 들어,
00:15:11에러를 클릭해서 스택 트레이스(Stack Trace)를 볼 수도 있고,
00:15:14이 에러가 얼마나 자주 발생하는지도 알 수 있습니다.
00:15:17또 무엇을 볼 수 있을까요?
00:15:20유사한 이슈들도 볼 수 있네요.
00:15:21자, 에이전트가 아직 작업 중인지 확인해 볼까요?
00:15:25오, 수정이 완료됐네요.
00:15:26좋습니다. 다음에 에이전트를 기다려야 할 때 다른 걸 더 보여드릴게요.
00:15:30수정되었다고 나오네요.
00:15:32배포를 하거나 프리뷰에서 테스트할 수 있는지 보겠습니다.
00:15:37그냥 바로 테스트해 보죠.
00:15:39알겠습니다.
00:15:39움직이면서 아이템을 수집해 볼게요.
00:15:41오, 작동하네요!
00:15:42아주 좋습니다. 이렇게 간단해요.
00:15:46버그가 있었고,
00:15:48어떤 현상이 일어나는지 에이전트에게 말해줬을 뿐인데 말이죠.
00:15:51재현 방법에 대한 정보가 별로 없더라도,
00:15:55그냥 에러를 찾아보라고만 말해도 됩니다.
00:15:59가령 "PostHog MCP에 우리가 고쳐야 할 다른 에러가 또 있어?"라고 물을 수 있죠.
00:16:09너무 옛날 것까지 나오지 않게 "오늘 발생한 것 중에서"라고 덧붙일게요.
00:16:12또 하나 보여드리고 싶은 건 세션 리플레이(Session Replay)라는 아주 멋진 기능입니다.
00:16:21사용자가 무엇을 하는지 실제로 볼 수 있는데... 오, 여기서는 잘 안 보이는 것 같네요.
00:16:27어라, 흥미롭군요.
00:16:28좋아요, 이건 넘어가고 나중에 따로 살펴볼게요.
00:16:33보통은 사람들이 무엇을 하고 있는지 실제로 볼 수 있습니다.
00:16:36아마 이 게임에 사용된 기술 때문에,
00:16:42녹화가 제대로 안 되는 것 같네요.
00:16:44하지만 다른 종류의 앱에서는 확실히 잘 작동합니다.
00:16:50다른 앱에서 이런 기능이 안 되는 건 본 적이 없거든요.
00:16:51사람들이 앱을 어떻게 사용하는지, 어떤 문제에 직면하는지 확인할 수 있습니다.
00:16:58실제 영상을 보는 것만으로도 상황을 파악하는 데 큰 도움이 되죠.
00:17:04활동 내역이나 이벤트, 로그 같은 것만 보려고 애쓰는 것보다
00:17:08훨씬 더 많은 정보를 줍니다.
00:17:13자, 몇 가지 다른 에러가 더 있네요.
00:17:16여기서 강조하고 싶은 점이 있습니다.
00:17:18개발자라고 해서 실제 사용 환경에서 발생하는 모든 문제를 다 알 수는 없다는 거죠.
00:17:25사용자가 직접 보고하지 않을 수도 있고,
00:17:26스스로는 발견하지 못할 수도 있으니까요.
00:17:28그래서 모든 에러를 한눈에 파악할 수 있는 가시성을 확보하는 게 매우 중요합니다.
00:17:34이 경우에는 우리가 겪고 있는 다른 에러가 몇 개 더 있었는데,
00:17:40오, 둘 다 고쳐진 것 같네요.
00:17:43좋습니다. 여기까지 질문 있으신가요?
00:17:47그럼 이제 피처 플래그(Feature Flags)로 넘어가 보겠습니다.
00:17:51>> 현재 채팅창에 질문은 없지만, 의견이 올라와 있네요.
00:17:54어떤 분이 '많은 도구가 한곳에 모여 있고, 무료 티어가 굉장히 넉넉하며,
00:18:01플랫폼의 개발자 경험(DX)이 훌륭하다'고 하셨는데, 정말 듣기 좋네요.
00:18:05제가 궁금한 건데, 다음 섹션에서 다뤄주시겠지만,
00:18:11에러 확인 외에 v0 사용자들이 간과할 만한
00:18:19PostHog MCP의 가치 있는 기능에는 또 무엇이 있을까요?
00:18:23>> 네, 제 생각에 피처 플래그와 실험(Experiments) 기능이 가장 유익한 것 중 하나입니다.
00:18:30사용해야 하는데도 아직 사용하지 않는 팀이나 애플리케이션이 정말 많거든요.
00:18:38그걸 바로 보여드릴게요.
00:18:40>> 네, 좋습니다.
00:18:41아주 자연스럽게 연결되네요.
00:18:42>> 네, 그럼 추가해 보죠. 이 게임의 경우,
00:18:46지금은 벌레들을 처치할 방법이 없습니다.
00:18:48특히 이 녀석은 작은 플랫폼 위를 왔다 갔다 하는데,
00:18:52그 지점의 데이터를 수집하기가 너무 힘들어요.
00:18:55사용자들도 마찬가지고요.
00:18:57그래서 추가 기능을 만들고 싶습니다.
00:19:01고슴도치가 눈에서 레이저를 쏘는 기능을 만들어 보죠.
00:19:16하지만 이걸 다른 기능과 비교해서 테스트해 보고 싶어요.
00:19:22레이저 말고 또 뭐가 있을까요?
00:19:24고전적인 마리오 스타일 같은 걸 해도 되겠네요.
00:19:27우선 레이저를 한 가지 변수(Variant)로 하는
00:19:43멀티 배리언트 피처 플래그를 만들고, 다른 하나는 벌레를 밟아서 죽이는 기능으로 설정해 보겠습니다.
00:19:52그러면... 여기서 보여드리고 싶은 게 몇 가지 있는데요.
00:19:59MCP는 매우 강력합니다.
00:20:02대시보드에서 하는 거의 모든 작업을 MCP로 처리할 수 있죠.
00:20:07물론 대시보드에서도 할 수 있습니다.
00:20:10앱 메뉴로 가볼게요.
00:20:17그리고 피처 플래그를 클릭합니다.
00:20:21MCP로 할 수 있는 대부분은 여기 채팅창에서도 가능합니다.
00:20:25여기서 새 탭을 하나 열어볼게요.
00:20:29아, 탭에서는 채팅할 방법이 없네요.
00:20:33이런.
00:20:34놓쳤군요.
00:20:37자, 다시 새 채팅을 엽니다.
00:20:39비슷한 프롬프트를 입력할 수 있어요.
00:20:43유일한 차이점은 이 채팅은 당연히 v0 코드를 직접 업데이트할 수는 없다는 겁니다.
00:20:48제가 수락을 해야 하죠.
00:20:52하지만 피처 플래그를 관리하는 용도로는 여전히 쓸 수 있습니다.
00:20:55아니면 여기서 바로 피처 플래그를 생성할 수도 있고... 지금 생성 중일 겁니다.
00:21:01여기 나오네요.
00:21:02자, 실험(Experiment) 생성입니다.
00:21:03UI를 통해서 만들 수도 있었겠지만,
00:21:04제가 v0 에이전트와 MCP를 사용하는 법을 보여드리는 이유는,
00:21:07v0 같은 에이전트 안에서 더 많은 일을 처리할 수 있을수록 유리하기 때문입니다.
00:21:16새로운 UI를 익히느라 시간을 낭비하고 싶지 않거든요.
00:21:20대시보드가 정말 멋지고 인터페이스도 마음에 들지만,
00:21:24v0 안에서 바로 개발하는 데 시간을 더 쓰고 싶습니다.
00:21:31좋습니다.
00:21:35자, 실험 설정이 끝났습니다.
00:21:36몇 가지 지표(metrics)도 설정했고요.
00:21:39실험에서 가장 핵심적인 것은 바로
00:21:40테스트하려는 가설이 무엇인가 하는 점입니다.
00:21:47v0가 알아서 우리를 위해 가설을 세워주었네요.
00:21:49참 편리하죠.
00:21:53내용을 읽어보고 수정하고 싶을 수도 있겠네요.
00:21:55어떤 기능이 게임 완료율을 더 높이는지 테스트한다고 되어 있네요.
00:21:58좋습니다.
00:22:02제 목표가 게임 완료율일 수도 있겠지만,
00:22:03어쩌면 그냥 게임 플레이 시간일 수도 있죠.
00:22:05일단 게임 완료율이 타당해 보이네요.
00:22:09그래서 그걸 1차 지표(primary metric)로 설정했습니다.
00:22:13그러니까 먼저 가설을 세워야 합니다.
00:22:16"무엇을 테스트할 것인가?"
00:22:18여기서는 '밟기'가 더 매력적인지, '레이저'가 더 매력적인지 테스트하는 거죠.
00:22:19그다음 1차 지표를 설정합니다.
00:22:26그리고 2차 지표(secondary metrics)라는 개념도 있는데, 이것도 매우 중요하다고 생각합니다.
00:22:291차 지표는 달성하고자 하는 주 목표입니다.
00:22:33하지만 새로운 기능을 추가하거나 변경할 때는
00:22:38부수적인 효과가 따르기 마련이죠.
00:22:43예를 들어, 세션당 벌레를 더 많이 죽이거나 덜 죽이게 될 수도 있습니다.
00:22:44게임 완료율은 높아졌는데 벌레는 덜 죽일 수도 있죠.
00:22:49그럴 가능성은 낮겠지만요.
00:22:52아니면 세션당 사망 횟수를 살펴볼 수도 있겠고요.
00:22:53따라서 실험을 설정할 때는 항상 "내 목표가 무엇인가?"를 생각해야 합니다.
00:22:57그리고 주 목표는 아니더라도,
00:23:02결정을 내릴 때 참고해야 할 영향 요소들이 무엇인지 파악해야 하죠.
00:23:03브루커, 질문이 하나 있는데요.
00:23:09만약 처음에 실수로 잘못된 목표 지표를 설정했다면,
00:23:14v0의 데이터를 잃지 않고 PostHog에서 실험 지표를 수정하기가 얼마나 쉽나요?
00:23:17>> 네, MCP나 채팅을 이용해도 되고 여기 UI에서 직접 해도 됩니다.
00:23:23지표 옆에 보면 작은 연필 모양 아이콘이 있어요.
00:23:30그걸 클릭하면 됩니다.
00:23:36그다음, 예를 들어 '게임 완료'에서 '앱 체류 시간' 같은 것으로 바꾸고 싶다면,
00:23:39여기서 이벤트를 찾아서 클릭하면 됩니다. 아니면,
00:23:41사용자들이 더 많이 이탈하는지 확인하고 싶을 수도 있겠죠.
00:23:46그럼 '페이지 이탈(page leave)'로 바꿀 수 있습니다.
00:23:47이 경우 목표는 이탈률을 낮추는(decrease) 것이 되겠죠.
00:23:53사람들이 페이지를 덜 떠나기를 원하니까요.
00:23:58그렇게 쉽습니다.
00:24:00말씀드렸듯이 MCP를 사용할 수도 있는데, 개인적으로는 그게 훨씬 편하더라고요.
00:24:03>> 좋네요, 두 가지 방법 모두 확인하니 좋습니다.
00:24:08>> 네.
00:24:10>> 그렇군요.
00:24:16>> 네.
00:24:19그러면 다시 계산이 될 겁니다.
00:24:20가끔 제가 겪는 일인데, 실험을 진행하다가
00:24:21결과를 보고 나서야 또 다른 질문이 생길 때가 있습니다.
00:24:22방금 말씀하신 것처럼 추적 지표를 업데이트하고 싶어지는 거죠.
00:24:23가끔은 아직 이벤트가 없거나 추적할 방법이 마련되지 않았을 때가 있는데,
00:24:27그럴 때도 MCP가 정말 유용합니다.
00:24:32"이벤트를 추가해줘"라고 말하면 되거든요.
00:24:33좋은 예가 뭐가 있을까요... 음, '점프'라고 해보죠.
00:24:36"고슴도치가 점프할 때마다 이벤트를 추가해줘"라고 할 수 있습니다.
00:24:43그런 경우에는 추적하려는 대상에 따라 다르겠지만,
00:24:46대부분의 경우,
00:24:48앱에 해당 코드를 추가한 시점부터 이벤트가 수집되기 시작할 겁니다.
00:24:53그러면 실험 기간을 특정 시점부터 시작하도록 변경할 수도 있겠죠.
00:25:02대상을 지정할 수도 있고요... 아, 죄송합니다.
00:25:08말씀하세요.
00:25:10실험 도중에 내용을 변경하면,
00:25:15테스트를 아예 재시작하는 게 좋나요, 아니면 기존 실험에서 데이터를 계속 수집해도 안전한가요?
00:25:21>> 네, 좋은 질문입니다.
00:25:22자신이 하고 있는 일에 영향을 줄 수 있는 변화들을
00:25:24충분히 인지하고 있다면,
00:25:25기존 실험을 그대로 진행해도 문제없다고 봅니다.
00:25:31하지만 동시에 다른 여러 변화가 일어나서
00:25:38실험 결과에 영향을 줄 수 있는 상황도 있을 수 있습니다.
00:25:40그래서 현재 실행 중인 모든 테스트를 잘 파악하고,
00:25:42서로 어떤 영향을 주는지 알고 있어야 합니다.
00:25:48일반적으로 이번 사례처럼 '밟기'와 '레이저'를 함께 테스트하는
00:25:49멀티 배리언트 실험의 경우에는... 레이저가 대조군(control)으로 설정된 것 같네요.
00:25:55하지만 '무기 없음' 상태를 대조군으로 삼고 싶을 수도 있겠죠.
00:25:59서로 다른 실험들이 충돌하는 문제를 방지하기 위해
00:26:02관련된 것들을 하나의 실험으로 묶는 것이 도움이 될 수 있습니다.
00:26:06이해가 되시나요?
00:26:09>> 네, 이해됩니다.
00:26:15>> 그렇군요.
00:26:20자, 어디까지 됐나 볼까요. 아, 큐(queue)에 추가를 안 했었네요.
00:26:30좋아요, 다 됐습니다.
00:26:35이제 레이저 눈이 생겼어요.
00:26:38앱을 실행하면 어떻게 되는지 보죠.
00:26:39네, 좋네요.
00:26:41레이저는 나가는데 적들이 죽질 않네요.
00:26:42별로군요.
00:26:45자, 됐습니다.
00:26:47레이저 아이즈가 생겼네요.
00:26:48이제 앱을 실행하면 어떻게 되는지 보죠.
00:26:51좋아요.
00:26:52레이저는 나오는데 적들이 죽지 않네요.
00:26:57아쉽네요.
00:26:58뭐, 여러분도 이런 상황을 겪으실 수 있습니다.
00:27:02제가 v0에 프롬프트를 제대로 입력하지 않았거든요.
00:27:05그러니 v0 탓을 하지는 않겠습니다.
00:27:07그저 눈에서 레이저를 쏘라고만 했지
00:27:10레이저로 벌레를 죽이라고는 안 했으니까요.
00:27:12특정 사용자를 타겟팅할 수도 있습니다.
00:27:16예를 들어, '나'라는 사용자에게만 '밟기' 기능을 적용하라고 할 수 있죠.
00:27:23그러면 에이전트가 내 계정을 찾을 수 있는지 확인해 보겠습니다.
00:27:26에이전트와 MCP의 한계를 시험하는 셈이지만, MCP는
00:27:31사용자를 찾아내는 기능이 있습니다.
00:27:35그리고 해당 사용자에게 실험 변수를 설정해 주죠.
00:27:41서로 다른 코호트(집단)에 다른 변수를 적용할 수도 있습니다.
00:27:46호주에 있는 모든 사람에게만 레이저 아이즈를 주고 싶다면
00:27:51그렇게 할 수 있다는 거죠.
00:27:53시간이 거의 다 된 것 같은데 맞나요?
00:27:56얼마나 지났는지 잊어버렸네요.
00:27:57네, 맞습니다.
00:27:58방금 확인해 봤거든요.
00:27:59그렇군요.
00:28:00알겠습니다.
00:28:02시연은 계속 띄워 놓을게요.
00:28:03제가 다루지 않은 내용 중에 궁금하신 점이나
00:28:08흥미로운 질문이 더 있을까요?
00:28:09네, 들어온 질문 중에 실험 기능이 처음인 v0 사용자들이
00:28:15소위 “나쁜” 혹은 오해를 불러일으키는 실험을 설계하지 않도록
00:28:21따라 할 만한 체크리스트 같은 게 있냐는 질문이 있네요.
00:28:27네, 그건... 확실히는 모르겠지만
00:28:31가이드 문서가 있는 걸로 압니다.
00:28:32여기서 라이브로 직접 찾지는 않겠지만
00:28:34나중에 가이드를 따로 공유해 드릴게요.
00:28:38그렇게 할 수 있습니다.
00:28:39이 채팅의 리소스 섹션에 해당 내용을 추가해 놓겠습니다.
00:28:43네, 당연히 그래야죠.
00:28:44그럼요.
00:28:45그리고 AI를 통해서도 확인해 보시라고 권장하고 싶어요.
00:28:50채팅이나 UI를 살펴보면 도움이 되는 내용이 많거든요.
00:28:55아까 말씀드린 '가설' 같은 건 v0에서는 보지 못하셨을 겁니다.
00:28:58그러니 UI를 직접 열어서 활용할 수 있는 다른 기능이 뭐가 있는지
00:29:02한번 살펴보는 게 도움이 될 거예요.
00:29:05아니면 v0에게 직접 물어볼 수도 있겠죠.
00:29:10“여기서 내가 놓치고 있는 게 뭐야?”
00:29:11“이걸로 또 뭘 할 수 있어?” 처럼요.
00:29:13이런 부분에서 v0를 최대한 활용해 보시길 권장하며,
00:29:18PostHog 내에 있는 PostHog AI와 채팅하는 것도 좋은 방법입니다.
00:29:23와, 그런 게 있는 줄도 몰랐네요.
00:29:26정말 멋지군요.
00:29:27매번 통합 세션 때마다 여쭤보는 질문입니다만,
00:29:35장기적으로 준비 중인 게 있으신가요?
00:29:36공유해 주실 만한 게 있을까요?
00:29:38네, 저희는 소프트웨어 및 제품 개발의 미래가 더 자율화될 것이라고 봅니다.
00:29:45이미 그런 변화가 일어나고 있다고 생각하고요.
00:29:47하지만 아직 갈 길이 멀긴 합니다.
00:29:53제가 보여드린 오류 해결 기능 같은 것들이
00:29:59머지않아 애플리케이션의 표준이 될 거라고 봅니다.
00:30:04애플리케이션이 실행되는 동안 백그라운드에서 무언가가
00:30:09사용자가 시키지 않아도 알아서 오류를 수정하고 보고서를 보내주는 식이죠.
00:30:15결국 미래에는 AI에게 오류를 확인해달라고 명령할 필요도 없고,
00:30:20한밤중에 오류 알람 때문에
00:30:24잠에서 깰 일도 없을 겁니다.
00:30:26앞으로는 PostHog나 Vercel 같은 시스템들이,
00:30:35혹은 이들이 서로 협력하여
00:30:38정보를 수집하게 될 거예요. 오류는 그중 하나일 뿐입니다.
00:30:43아까 보여드린 세션 리플레이, 제품 분석, 실험 기능도 있죠.
00:30:49일일이 수동으로 지표를 생성할 필요가 있을까요?
00:30:53흥미로웠던 건, 이번 시연에서 v0가 이미
00:30:57꽤 흥미로운 지표들을 골라냈다는 점입니다.
00:31:00미래에는 에이전트가 이런 것들을 모니터링하고
00:31:05제가 일일이 구체적으로 지시하지 않아도 코드를 업데이트할 겁니다.
00:31:14물론 저는 전략적인 가이드를 제공하겠죠.
00:31:19내 게임이 어떤 경험을 주어야 하는지,
00:31:20목표로 하는 지표가 무엇인지 같은 것들 말이죠.
00:31:22하지만 실무적인 하위 수준의 작업들은
00:31:26대부분 자율 시스템이 처리하게 될 것입니다.
00:31:28네, 개발의 자율화죠.
00:31:30그렇죠.
00:31:31네, 그 비전이 정말 마음에 듭니다. Vercel과 v0가
00:31:37추구하는 방향과도 정확히 일치하거든요.
00:31:40배포에서부터 시작해서
00:31:43PostHog를 통한 관찰, 그리고 자동 수정 및 반복까지의 루프를 완성하는 거죠.
00:31:49정말 대단하네요.
00:31:50시간이 다 되었으니 마무리하기 전에 마지막 질문 하나 드릴게요.
00:31:56PostHog 커뮤니티에 참여하려면 어떻게 해야 하나요?
00:32:00시작할 때 PostHog가 오픈 소스라고 말씀드렸는데,
00:32:03기여(Contribution)도 받으시나요?
00:32:05제가 제대로 알고 있는 건지 모르겠네요.
00:32:06방금 생각난 거라.
00:32:07그럼요.
00:32:08네, 100% 맞습니다.
00:32:09당연하죠.
00:32:10전 세계에서 들어오는 PR(Pull Request)들을 저희가 검토하고 있습니다.
00:32:16또한 질문을 남길 수 있는 PostHog 포럼도 있고
00:32:21라이브 이벤트도 운영 중입니다.
00:32:22URL을 바로 알려드리지 못해 아쉽지만, 나중에 전달해 드릴게요.
00:32:26네, 좋습니다.
00:32:27네, 라이브 이벤트가 있으니
00:32:29그냥 가입하시면 됩니다.
00:32:30앱을 직접 사용해 보시고
00:32:31어떤지 의견을 들려주세요.
00:32:32X나 링크드인 등 편하신 플랫폼을 통해
00:32:37언제든 말씀해 주세요. 저희는 소셜 미디어에서도 활발히 소통하니까요.
00:32:40훌륭합니다.
00:32:41브루커 님, 오늘 정말 감사합니다.
00:32:43정말 유익한 시간이었어요.
00:32:44시청해 주신 여러분, 추가 질문이 있다면
00:32:49채팅창에 남겨주세요. PostHog 팀이 답변해 드릴 수 있도록 전달하겠습니다.
00:32:54다시 한번 감사드려요, 브루커 님.
00:32:56함께해 주셔서 영광이었습니다.
00:32:58감사합니다.
00:32:59네.
00:33:00초대해 주셔서 감사합니다.
00:33:02좋습니다.
00:33:03오늘 라이브 세션에 참여해 주신 모든 분께 감사드립니다.
00:33:08아시는 분도 있겠지만, 저희는 거의 매주
00:33:14커뮤니티 라이브 세션을 개최하고 있습니다.
00:33:21[community.vercel.com/events에](https://www.google.com/search?q=https://community.vercel.com/events%EC%97%90) 접속하시면
00:33:24모든 온·오프라인 행사 일정을 확인하실 수 있습니다.
00:33:31다음 커뮤니티 세션에서 보고 싶은 통합 기능이 있다면 알려주세요.
00:33:33꼭 준비해 보도록 하겠습니다.
00:33:34놀랍네요. 오늘 함께해주신
00:33:39모든 분께 감사드리며, 다음 라이브 세션에서 뵙겠습니다.

Key Takeaway

PostHog와 v0의 통합은 개발자가 빌드 도구를 떠나지 않고도 실시간 분석, 에러 수정, A/B 테스트를 수행하여 제품 배포와 검증 속도를 획기적으로 높여줍니다.

Highlights

Vercel 마켓플레이스를 통한 PostHog 통합으로 환경 변수 자동 동기화 및 간편한 설치 가능

v0와 PostHog MCP(Model Context Protocol) 연동을 통한 실시간 에러 추적 및 자동 코드 수정

피처 플래그와 멀티 배리언트 실험 기능을 활용한 데이터 기반의 제품 의사결정 프로세스

사용자 행동을 직접 확인할 수 있는 세션 리플레이 기능과 가시성 확보의 중요성

AI 에이전트가 스스로 오류를 감지하고 수정하는 자율형 소프트웨어 개발의 미래 비전

Timeline

도입 및 Vercel 커뮤니티 세션 소개

Vercel 커뮤니티 팀의 폴린 나바스가 세션의 시작을 알리며 커뮤니티 플랫폼과 다양한 채널을 통해 소통하는 시간을 갖습니다. 이번 세션의 핵심 주제는 Vercel 마켓플레이스 통합 기능 중 하나인 PostHog를 소개하는 것입니다. PostHog는 오픈 소스 기반의 제품 분석 플랫폼으로, 피처 플래그와 A/B 테스트 등 제품 개선에 필수적인 도구들을 제공합니다. 특히 v0와의 직접적인 통합을 통해 빌드 과정에서 아이디어를 즉시 실험으로 옮길 수 있다는 점을 강조합니다. 본격적인 시연에 앞서 실시간으로 참여 중인 시청자들과 인사를 나누며 기대감을 조성합니다.

PostHog의 가치와 주요 활용 사례

PostHog의 제품 엔지니어 브루커가 합류하여 v0와 PostHog를 함께 사용해야 하는 구체적인 이유를 설명합니다. 개발자가 앱을 배포한 후 실제 운영 환경에서 발생하는 예상치 못한 문제들을 어떻게 가시적으로 파악할 수 있는지 논의합니다. 특히 에러 핸들링과 피처 플래그를 통한 A/B 테스트라는 두 가지 핵심 활용 사례를 제시합니다. 팀원 간의 의견 충돌이 있을 때 데이터를 바탕으로 최선의 결정을 내리는 방식의 효율성을 강조합니다. 브루커는 개발자가 로그를 일일이 뒤지는 번거로움 없이 v0 에이전트가 컨텍스트를 이해하도록 만드는 과정이 중요하다고 설명합니다.

Vercel 마켓플레이스를 통한 PostHog 설치 및 설정

Vercel 대시보드에서 PostHog를 검색하고 프로젝트에 설치하는 실시간 라이브 데모가 진행됩니다. 설치 과정에서 환경 변수가 자동으로 동기화되어 개발자가 복잡한 키 관리를 직접 할 필요가 없다는 점이 가장 큰 장점으로 꼽힙니다. PostHog 호스트 정보와 고유 키를 통해 프로젝트가 식별되며, 실제 애플리케이션의 데이터가 PostHog 프로젝트로 연결되는 구조를 보여줍니다. 브루커는 데모 중 발생한 작은 실수들을 해결하며 실제 개발 환경에서 겪을 수 있는 디버깅 과정의 현실감을 더합니다. 또한 PostHog의 넉넉한 무료 티어 정책을 언급하며 초기 프로젝트에서도 비용 부담 없이 시작할 수 있음을 알립니다.

v0와 MCP를 활용한 실시간 에러 트래킹 및 수정

구현된 'Hog Hop' 게임에서 특정 아이템을 먹으면 화면이 멈추는 버그를 PostHog와 v0를 이용해 해결하는 과정을 시연합니다. v0 채팅창에서 MCP(Model Context Protocol)를 추가하여 에이전트에게 PostHog 데이터에 접근할 수 있는 권한을 부여합니다. 사용자는 별도의 코드 분석 없이 v0에게 에러 로그를 확인하고 수정해달라고 요청하며, AI는 즉시 원인을 파악해 코드를 업데이트합니다. 이 과정에서 세션 리플레이 기능을 통해 사용자의 실제 이용 화면을 녹화본으로 확인할 수 있는 PostHog의 강력한 기능도 함께 소개됩니다. 개발자가 미처 인지하지 못한 잠재적 에러들을 한눈에 파악할 수 있는 가시성의 중요성을 다시 한번 상기시킵니다.

피처 플래그와 실험 기능을 이용한 기능 테스트

게임 내에 고슴도치가 레이저를 쏘는 기능과 벌레를 밟아 죽이는 기능을 추가하여 어떤 것이 더 효과적인지 테스트하는 실험을 설정합니다. v0 에이전트를 통해 가설을 수립하고, 게임 완료율이나 체류 시간과 같은 지표(Metric)를 1차 및 2차 목표로 설정하는 법을 배웁니다. 실험 도중에 지표를 수정하거나 새로운 이벤트를 추가하는 과정이 v0 내에서 얼마나 유연하게 이루어지는지 보여줍니다. 특정 국가의 사용자나 개별 계정을 타겟팅하여 서로 다른 변수를 적용하는 코호트 설정 기능의 강력함도 언급됩니다. 시청자 질문을 통해 잘못된 실험 설계를 방지하기 위한 가이드와 AI를 활용한 검증 방법 등에 대해 답변하는 시간을 갖습니다.

소프트웨어 개발의 미래와 마무리

브루커는 미래의 소프트웨어 개발이 AI 에이전트와 시스템의 협력을 통해 더욱 자율화될 것이라는 비전을 공유합니다. 개발자가 일일이 명령하지 않아도 백그라운드에서 오류를 수정하고 보고서를 생성하는 자율형 루프가 표준이 될 것이라고 예측합니다. PostHog는 오픈 소스로서 전 세계의 기여를 환영하며 포럼과 라이브 이벤트를 통해 커뮤니티와 활발히 소통하고 있음을 알립니다. 폴린은 Vercel과 PostHog의 비전이 일치함을 확인하며 매주 진행되는 커뮤니티 세션에 대한 참여를 독려합니다. 마지막으로 다음 세션에서 다루고 싶은 통합 기능에 대한 의견을 받으며 유익했던 라이브 방송을 마무리합니다.

Community Posts

View all posts