Ship 26 NYC - 워크샵 - v0와 Snowflake로 프로덕션 앱 배포하기

VVercel
Computing/SoftwareInternet Technology

Transcript

00:00:00안녕하세요 여러분, v0와 스노우플레이크 연동 워크샵에 오신 것을 환영합니다. 이번 세션은 뉴욕
00:00:12시 에디션입니다. 2주 전에 런던에서도 똑같이 진행했었죠. 이번 세션은 스노우플레이크
00:00:23엔터프라이즈 고객과 v0 엔터프라이즈 고객을 위한 것입니다. 따라서 이 기능을 사용하려면
00:00:31두 가지 연동이 모두 필요합니다. 먼저 저를 소개해 드리겠습니다. 제 이름은 돔이고, Vercel에
00:00:394년 반 전에 엔지니어로 합류했습니다. 현재는 최고 기술 지원 엔지니어(forward deployed engineer)로서 가장 큰
00:00:47Vercel 엔터프라이즈 고객들이 다양한 프레임워크, AI 워크로드, 에이전트 등을 도입하도록 돕고 있으며,
00:00:57전반적으로 플랫폼 채택을 지원하고 있습니다. 조던, 네.
00:01:05안녕하세요, 제 이름은 조던이고 스노우플레이크에서 왔습니다. 합류한 지는 2년 되었고, 스태프 소프트웨어 엔지니어로 이번 연동의 스노우플레이크 측 개발을 담당했습니다.
00:01:12좋습니다. 그럼 본론으로 들어가서, 슬라이드를 띄워볼까요? 아, 네. 기본적으로 이
00:01:23연동의 핵심은 Vercel의 v0 도구에서 앱을 빌드하는 것입니다. v0는 Vercel이 만든
00:01:30에이전틱 코딩 도구로, 세계 최고 수준의 개발자 경험을 제공하며 Next.js와도 아주 잘 맞습니다. 이 앱을 배포하게 되면
00:01:37스노우플레이크에 배포되며, 배포된 후에는 완전히 스노우플레이크 계정 내에서 실행됩니다.
00:01:41따라서 스노우플레이크 역할(role)과 함께 배포되며, 스노우플레이크가 제공하는 RBAC(역할 기반 접근 제어)
00:01:47나 싱글 사인온(SSO) 등을 그대로 활용하게 됩니다. 스노우플레이크에서 얻을 수 있는 모든 보안 기능을 누릴 수 있으며 완전히
00:01:53분리되어 계정 내에서 안전하게 실행됩니다. 즉, Vercel의 뛰어난 개발자 경험과
00:02:01스노우플레이크의 엔터프라이즈 데이터 및 컴플라이언스/RBAC를 모두 누릴 수 있다는 것이 핵심입니다.
00:02:10먼저 안내해 드릴 점은, 보통 워크샵은 직접 실습해 볼 수 있는
00:02:17하지만 아까 처음에 말씀드린 것처럼 양쪽 모두 엔터프라이즈 고객이어야 하므로 저희는
00:02:22몇 가지 데모를 먼저 보여드린 후, 스노우플레이크 샘플 데이터를 이용해 v0로 무엇을 만들 수 있는지 보여드리는
00:02:29대화형 세션을 진행하고, 마지막에 질의응답 시간을 갖도록 하겠습니다. 여기서는 Vercel 내부에서 이 연동을 어떻게 사용하는지 보여드리고자 합니다.
00:02:38실제로 세 가지 주요 활용 사례가 있습니다. 첫 번째 표준적인 활용법은 대화형 실시간 대시보드를 만드는 것으로, GTM(Go-To-Market) 팀에서
00:02:48파이프라인 현황이나 제품 사용량, 개발 속도(velocity)를 보여주기 위해 사용합니다.
00:02:58SQL을 몰라도 프롬프트만 입력하면 대시보드를 생성할 수 있죠.
00:03:07이것이 이 연동을 사용하는 가장 표준적이고 전형적인 방식입니다.
00:03:17또한 다른 팀에서는 제품 도입 지표나 맞춤형 앱 같은 커스텀 BI 용도로도 사용하고 있으며,
00:03:31제가 가장 좋아하는 활용법은 Vercel 내 저희 팀에서 우연히 발견한 것인데, 팀의 ARR(연간 반복 매출) 및 재무 데이터에 대한
00:03:39나만의 맞춤형 대시보드를 만들 수 있다는 점입니다.
00:03:50이를 SKU 수준이나 서비스 수준까지 드릴다운해서 볼 수 있죠. 솔직히 제 팀이 얼마나 많은 매출을
00:03:57창출하는지 잘 몰랐는데, 이 워크샵을 준비하면서 꽤 유용하다는 것을 발견했습니다.
00:04:03그렇습니다. 스노우플레이크 사용자분들이라면 Streamlit에 익숙하실 텐데요, Streamlit으로 많은 대시보드를 만들 수 있죠.
00:04:14이 방식의 장점 중 하나는 단순한 대시보드를 넘어설 수 있다는 점입니다. 대시보드도 훌륭하지만,
00:04:21자바스크립트이자 Next.js 기반이기 때문에 상상하는 거의 모든 것을 만들 수 있습니다. 사내 도구를 만들기에도 좋아서 데이터를 직접 기록할 수 있는 테이블을 만들고,
00:04:27보유한 다른 테이블들과 상호작용하도록 구성하여 데이터에 더 많은 가치를 더하거나, 에이전틱 앱까지 구현할 수 있습니다.
00:04:31즉, 데이터와 대화하면서 더 고도화된 앱을 만들 시간적 여유가 있다면 말이죠.
00:04:38저 같은 경우 사내에서 로그 정보를 조회하는 용도로 많이 사용하고 있습니다. 이 로그가 어디서 왔는지,
00:04:44사용자는 누구인지 파악하고 해당 사용자에 대해 더 알아보고 싶을 때, 조사를 진행하면서
00:04:50이리저리 데이터 세트를 쉽게 넘나들 수 있어서 이런 작업에 매우 적합합니다.
00:04:55이런 류의 작업에 정말 좋습니다.
00:05:01이것이 이 연동으로 달성할 수 있는 최종 목표(North Star)입니다.
00:05:09자세히 설명해 드리자면, 이 연동을 사용하기 위해서는 스노우플레이크 엔터프라이즈 환경의
00:05:16관리자가 설정에서 스노우플레이크 앱 런타임을 활성화해야 합니다.
00:05:23그다음 Vercel 연동을 활성화해야 하죠. 이것이 사용하기 위해 거쳐야 할 두 가지 단계입니다.
00:05:29Vercel 측에서는 관리자가 설정 및 연동 메뉴로 이동하여
00:05:37v0 팀에 스노우플레이크를 추가해야 합니다. 화면에서 볼 수 있듯이, v0의 계정 설정에서 연동을 추가하고
00:05:47계정 식별자(identifier)를 통해 스노우플레이크 계정을 추가한 뒤, 데이터 세트에 연결하게 됩니다.
00:05:58이것이 대략적인 모습입니다. 아마 Vercel의 스크린샷일 겁니다.
00:06:04설정은 이렇게 마치고, 이제 본격적으로...
00:06:10데모를 보여드리겠습니다. 프롬프트 작성부터 시작해서
00:06:16첫 번째 단계로 v0가 데이터를 이용해 대시보드를 구축하는 과정을 보여드리고, 두 번째 단계에서는
00:06:25이를 스노우플레이크에 배포할 것입니다. v0가 작동하는 동안 추가로 설명해 드릴 내용이 있지만,
00:06:31먼저 팁 하나를 말씀드리자면,
00:06:39Next.js 서버 사이드 렌더링 전략의 모범 사례에 따라
00:06:47이 앱은 서버에서 실행되며,
00:06:51실제로 컴플라이언스를 위해 스노우플레이크 데이터와 인접한 곳에서 실행됩니다. 이 부분은 나중에
00:06:55더 자세히 설명해 드리겠습니다. 자, 스노우플레이크 인프라에 배포하는 방법은 이렇게나 간단합니다.
00:07:05네, 맞습니다. v0가 앱을 빌드하고 나면, 스노우플레이크 데이터 바로 옆에 있는 스노우플레이크 연산(compute) 자원을 이용해
00:07:15배포됩니다. 따라서 엔터프라이즈 고객이시라면 이 QR 코드를 스캔하시거나,
00:07:24저희 영업 팀으로부터 맞춤형 데모를 받고 싶으신 경우 이 QR 코드를 스캔하시면 이 기능을 활성화하실 수 있습니다.
00:07:32자, 이제 실습 데모로 넘어가겠습니다.
00:07:47엔터프라이즈 환경이라 Okta로 다시 인증을 거쳐야 하네요. 이런 과정을 실제 환경에서도 꽤 자주
00:07:54하게 됩니다. 여기서 가장 중요한 키워드는 바로 '스노우플레이크(snowflake)'입니다.
00:08:05프롬프트에 스노우플레이크를 언급하기만 하면 되죠. 데모 진행을 빠르게 하기 위해
00:08:14Crunchbase 데이터 세트를 사용하라고 지정하겠습니다. 그리고 표준적인 데모를 위해 대시보드를 만들고자 합니다.
00:08:25음,
00:08:29연도별 IPO 현황을 보여주는, IPO에 대한 모든 인사이트가 담긴 대시보드를 만들어 달라고 v0에게 요청해 보겠습니다.
00:08:39작업을 시작해 볼까요?
00:08:48자, 이 정도면 충분할 겁니다.
00:08:53v0가 작업을 수행하는 동안, 먼저 스노우플레이크 데이터 세트를 확인하고 쿼리할 것입니다. 아마
00:09:03제게 권한을 요청하거나 몇 가지 추가 질문을 던질 겁니다.
00:09:09라이브 스노우플레이크 연결, 좋습니다.
00:09:18추가적인 과정이 더 있을 수 있습니다. v0가 스노우플레이크 데이터베이스에 연결할 것을 요청할 것이고,
00:09:31그 후에 제 프롬프트에 맞춰 빌드에 필요한 쿼리를 시작할 것입니다. 지금 바로 스노우플레이크에 연결하고 있는데,
00:09:53이것이 말 그대로 이 연동의 핵심입니다.
00:10:01그러면 v0는 웹 성능 및 Next.js 모범 사례인
00:10:09렌더링 및 캐싱 전략을 따르고, 저를 위해
00:10:15맞춤형 실시간 대시보드를 구축해 줄 것입니다. 완성되는 데는 대략 3분 정도 걸릴 겁니다.
00:10:24이 시간을 이용해 다른 이야기를 해보겠습니다.
00:10:29저희가 작년 11월에 블로그 게시물을 올렸는데요,
00:10:36몇몇 엔터프라이즈 기업들을 초대해 이 연동을 테스트해 보았습니다. 하지만 제가 집중해서 말씀드리고 싶은 부분은
00:10:45왜 이 연동이토록 멋진가 하는 점입니다.
00:10:51v0는 실제로 데이터에 연결되는 접근 제어 계층에 코드를 작성하고 있으며,
00:11:00v0를 사용해 Next.js 애플리케이션 전체를 코딩합니다. 하지만 배포할 때는
00:11:06스노우플레이크 인프라에 배포되며, 데이터와 아주 가까운 동일한 위치에 놓이게 됩니다.
00:11:14그 이유는 엔터프라이즈 요구 사항인 컴플라이언스, 보안, 그리고 속도 때문입니다.
00:11:22Vercel은 애플리케이션과 인증 계층을 관리하고, 스노우플레이크는 연산과 데이터를 처리하는 식이죠. 한 가지 더 보여드리고 싶은 점은
00:11:29이 앱을 만들고 나면
00:11:36본인만을 위해 사용하기도 하지만, 팀원들이나 조직 내 다른 사람들에게 공유할 수도 있다는 것입니다.
00:11:41이때 애플리케이션을 보려면 로그인하여 인증을 거쳐야 합니다.
00:11:49따라서 이 애플리케이션에서 보게 되는 데이터는 정확히 여러분이 볼 수 있는 권한과 권리가 있는 데이터입니다.
00:11:57따라서 이 대시보드 애플리케이션의 링크를 다른 사람에게 보낼 때,
00:12:02볼 권한이 있는 사람들만 해당 데이터를 볼 수 있게 됩니다.
00:12:11시간을 절약하기 위해 미리 이 애플리케이션을 배포해 두었는데요, 3분 43초가 걸렸습니다.
00:12:38데모라서 그런지 왜 이렇게 오래 걸리는지 모르겠네요.
00:12:44의존성 패키지를 다시 설치하는 중입니다.
00:12:49이것이 배포된 애플리케이션입니다. 동일한 프롬프트로 'IPO 시장 대시보드'를 생성했죠. 보시다시피 인터랙티브하며,
00:13:00작동합니다.
00:13:14마무리 단계입니다.
00:13:275만 개의 IPO, 총 조달 자본, 평균 최고 연도 등을 볼 수 있는 멋진 대시보드가 생성된 것을 확인할 수 있습니다. 이제 이를 수정할 수도 있고,
00:13:39퍼블리시한 후
00:13:42웹사이트에 방문하면 로그인을 해야 합니다. 바로 앞에서 말씀드렸던 권한 제어가 여기서 작동하는 것이죠.
00:13:50내용을 확인하려면 스노우플레이크에서 제가 어떤 권한을 가지고 있는지 인증해야 하며, 보시는 것처럼
00:13:57URL이 잘 보이실지 모르겠네요.
00:14:00snowflake compute.app에 배포되어 있습니다.
00:14:04이를 보는 다른 사람들은 각자의 권한에 따라 다른 화면을 보게 됩니다.
00:14:10맞습니다.
00:14:16자, 이것이 기본적인 해피 파스(happy path)였고, 이제 조던이 v0의
00:14:22더 뛰어나고 멋진 기능들을 보여드릴 것입니다.
00:14:27노트를 교체하겠습니다.
00:14:31제 노트북으로요.
00:14:37그동안 혹시 질문 있으신 분 있으신가요?
00:14:45잠시만요, 마이크를 기다려 주세요.
00:14:49예를 들어 dbt 같은 곳에 정의된 시맨틱 모델이 있다면, 그것을 여기에 연동해서
00:14:54생성되는 쿼리나 모델 디자인에 활용할 수 있는 테이블들을 연결할 수 있는
00:15:01방법이 있나요?
00:15:05시맨틱 모델을 사용해 쿼리, 즉 SQL 쿼리를 디자인한다는 말씀이시죠? 네, dbt를 사용해
00:15:11모델 자체를 관리하는 경우에요.
00:15:18아 죄송합니다. 질문을 다시 한번 말씀해 주시겠어요?
00:15:25스노우플레이크에서 메달리온 아키텍처 같은 다양한 레이어 구조를 사용할 때,
00:15:30dbt 스타일의 시맨틱 레이어가 있고 이를 관리하기 위해 dbt 클라우드 같은 걸 쓰고 있다면,
00:15:34그것을 여기에 연동할 방법이 있나요? 네, 프롬프트로 유도할 수 있습니다. LLM 기반이기 때문에
00:15:40방향을 잡을 수 있죠. v0 레이어가 있고, 스노우플레이크 쪽에 또 다른 레이어가 있는 식입니다.
00:15:46최적화하고 싶다면 말이죠.
00:15:55방법은 여러 가지가 있습니다. 프롬프트를 통해서나, 프로덕션 단계로 넘어갈 때의 평가(evals)를 통해서도 가능합니다.
00:16:02이건 바이브 코딩(vibe coded) 방식으로 프롬프트에서 아이디어까지 아주 빠르게 원하는 것을 얻어내는 방식입니다.
00:16:08질문하신 내용에 답변이 되었나요? 데이터 연동 기능이 따로 있는지 궁금했습니다.
00:16:13네, 네이티브 연동 기능도 있습니다.
00:16:23앱과 스노우플레이크 측, 그리고 Vercel 측에서 일어나는 모든 일을 관측성(observability)을 통해 확인할 수 있습니다.
00:16:27네, 그렇습니다.
00:16:33좋습니다. 이번 데모에서는 제가 사용할 데이터의 원본 모습을 보여드리겠습니다.
00:16:41이건 발전소 관련 데이터입니다. 이처럼 일반적인 쿼리를 실행하면
00:16:48경도, 위도, 그리고 각 발전소의 위치 등 많은 정보가 나오지만 한눈에 이해하기는 어렵습니다.
00:16:55그래서 시간을 아끼기 위해 이 앱을 미리 만들어 두었습니다. 앞서 본 것과 동일한 단계를 거쳤죠.
00:17:01계정을 선택합니다. 저의 경우 여러 개의 스노우플레이크 계정이 있어서, 규모가 큰 일부 고객의 경우
00:17:07계정이 많기 때문에 채팅마다 사용할 계정을 선택할 수 있습니다.
00:17:13여기서 조금 더 흥미롭게 만들어 보겠습니다. 현재 상태는
00:17:20요약 정보와 테이블만 있는 상태인데, 시각화를 위해 여기에 지구본(globe)을 추가해 달라고 해보겠습니다.
00:17:30시각화 요소를 추가하는 거죠.
00:17:42자바스크립트와 Next.js를 사용하고 있으므로, 이에 적합한 라이브러리를 찾아내어
00:17:50지구본을 렌더링하고, 기존 테이블을 파악한 뒤
00:17:55경도와 위도를 가져와서 훨씬 흥미로운 시각화를 보여줄 수 있을 것입니다.
00:18:02시작하기 전에 데이터셋에 대해 먼저 설명해 주실 수 있나요?
00:18:07네, 미국 전역의 발전소 데이터입니다. 이 데이터 소스는
00:18:15스노우플레이크 마켓플레이스에서 공유받거나 구매할 수 있는 데이터 세트이며,
00:18:20주기적으로 업데이트되므로 이를 바탕으로 탐색을 진행할 수 있습니다.
00:18:29이건 무료 데이터 세트인가요? 네, 무료 데이터 세트입니다. 따라서
00:18:37특정 무료 데이터 세트들을 이용해 볼 수 있으며, 유료 데이터 세트도 구매할 수 있습니다. 이런 데이터 세트를
00:18:41자신의 데이터와 결합하면 더 상세한 인사이트를 얻을 수 있습니다.
00:18:49또한 데모용으로도 매우 훌륭합니다.
00:18:55좋습니다.
00:18:59잘 작동하는 것 같네요.
00:19:04자, 임원진이나 고객들에게 기존의 전통적인 보고서나 대시보드를 보여줄 수도 있지만,
00:19:13이 연동과 v0를 활용하면 데이터 세트를 위한 인터랙티브하고 실시간인
00:19:23시각화 요소를 만들어 낼 수 있습니다.
00:19:29이런 식으로 말이죠.
00:19:34맞습니다, 이제 인터랙티브 요소가 생겼는데요, 이 무료 데이터셋이 있습니다
00:19:41청중 여러분의 프롬프트를 받아 시각화해 볼 수도 있고,
00:19:46질문이 있으시다면 곧바로 질의응답으로 넘어갈 수도 있습니다.
00:19:59혹시 질문 있으신 분 계신가요? 아니면 기능 테스트를 위해 실행해 볼 프롬프트를 보내주실 분 있으신가요?
00:20:09회귀 모델(regression model)을 실행하거나 파이프라인을 구축하는 등의 작업도 가능한가요, 아니면
00:20:14탐색적 시각화 위주의 바이브 코딩(vibe code) 수준인가요?
00:20:20이건 비기술자를 위한 순수한 바이브 코딩입니다. 제가 답변해 드릴게요.
00:20:28하지만 질문이 참 좋네요. 멋진 질문입니다.
00:20:35연동 기능이 있는지...
00:20:44좋습니다.
00:20:47보통 v0에는 깃허브(GitHub) 연동 기능이 있어서 일반적인 CI/CD 및 소프트웨어 개발 생명주기(SDLC)에 통합할 수 있습니다.
00:20:56여기서는 코드를 다운로드할 수 있습니다. 이건 프로토타입이며, 무대 위에서 조던과 저에게는
00:21:051분 1초가 길게 느껴졌지만 실제로는 1분 53초 만에 뚝딱 완성되었습니다.
00:21:11정말 순식간에 바이브 코딩으로 만들어졌고, 일반적인 보고서나 대시보드보다 훨씬 뛰어납니다.
00:21:19저는 이 코드를 다운로드해서 그 뒤에 모델 평가(evals) 로직을 붙일 것입니다.
00:21:33보시다시피 그저 v0 모델이 백엔드에 있을 뿐, AI 앱처럼 대화를 나눌 수 있는 것은 아닙니다.
00:21:39앞서 북극성(North Star) 슬라이드에서 보셨듯이, 전통적인 BI가 있고, 인터랙티브하고
00:21:46맞춤화된 두 번째 형태가 있으며, 세 번째 형태도 있었습니다. 시간 관계상 직접 시연해 드리지는 못했지만,
00:21:51v0에게 '내 데이터와 대화하는 채팅 기능을 추가해 줘'라고 요청하면
00:21:59v0가 완벽하게 구현해 낼 것입니다. 그 후에는 환각 현상(hallucination)을 줄이기 위해 평가 파이프라인을 구축할 수 있겠죠.
00:22:08알다시피 그런 경우에는 환각 현상을 원하지 않겠지만, 하지만 그건 고급 활용 사례입니다. 질문해 주셔서 감사합니다.
00:22:14감사합니다.
00:22:19이제 오늘 세션을 마무리할까요?
00:22:30배포할 때 포트(port)는 어떻게 작동하나요?
00:22:35아, 아주 좋은 질문입니다.
00:22:38네, 일단 배포되면 스노우플레이크 계정 내에 위치하게 됩니다.
00:22:41스노우플레이크를 써보신 분들은 아시겠지만, 계정 인증 방식에 따라 달라집니다.
00:22:48보시다시피 앱에 방문하면 인증을 요구하는데요,
00:22:54저의 경우 싱글 사인온(SSO)이 설정되어 있어서 스노우플레이크 계정으로 로그인하게 됩니다.
00:22:59따라서 스노우플레이크 사용자 이름과 비밀번호, 혹은 SSO를 통해 로그인하게 되며,
00:23:04나머지 처리는 모두 스노우플레이크 내부에서 이루어집니다. 일단 스노우플레이크로 들어가면
00:23:10더 이상 Vercel과의 연결은 존재하지 않습니다. 즉, Vercel에
00:23:13로그인하는 것이 아니라 완전히 사용자의 스노우플레이크 계정 안에서만 작동하게 됩니다.
00:23:19비개발자 비즈니스 사용자 팀의 경우, 사용자 온보딩을 어떻게 해야 하나요?
00:23:26스노우플레이크 계정이 있어야 하겠죠. 스노우플레이크에서도
00:23:32스노우플레이크 계정이 없는 사용자들에게도 이러한 앱을 노출할 수 있는 방법을 연구하고 있습니다.
00:23:39현재도 일부 지원되지만 앞으로 더 개선될 예정입니다. 스노우플레이크 기반 앱에는
00:23:42반드시 필요한 요구사항이니까요. 제 생각에는 로그인이 가능할 텐데,
00:23:50스노우플레이크 계정 내에서 다양한 역할을 가질 수 있으며, v0 설정에서 두
00:23:56애플리케이션을 연결할 때 앱에서 사용할 스노우플레이크 역할을 선택할 수 있습니다.
00:24:05따라서 최종 사용자가 자신이 볼 권한이 있는 데이터만 확실하게 볼 수 있도록 하는 것이 매우 중요합니다.
00:24:12이 문제가 깔끔하게 해결되며, 이를 염두에 두고 대시보드를 바이브 코딩할 수 있다는 점이 제게는 아주 멋지게 느껴졌습니다.
00:24:20보시다시피 역할들을 지정한 다음 해당 역할을 복사하거나, v0에게 이 애플리케이션용으로만
00:24:29해당 역할들을 사용해 달라고 요청할 수 있습니다. 질문해 주셔서 감사합니다.
00:24:36하나 더 여쭤보려고 했는데... 아 조심해요, 사진 찍히고 있어요.
00:24:48정말 잘 찍혔네요. 질문하려던 게 뭐였냐면,
00:25:00이런 컴포넌트를 생성한 다음 Vercel에 배포된 Next.js 앱에 가져다 넣고 싶다면
00:25:09즉, 스노우플레이크 데이터를 쿼리하는 컴포넌트를 앱에 포함하는 것이 이 설정으로 가능한가요, 아니면 잘 안되나요?
00:25:19네, 가능합니다. 자, 청중분들께 잠시 손을 들어달라고 부탁드려볼까요?
00:25:31v0를 써보신 분 손들어 주세요. 스노우플레이크를 쓰거나 스노우플레이크 고객이신 분은요?
00:25:41스노우플레이크 고객분이 더 많네요. 런던과는 다르군요. 질문에 답변드리자면,
00:25:48여기 이런 컴포넌트들이 있습니다. shadcn 기반의 발전소 탐색기인데, 지구본은 어디 갔죠?
00:25:59아마 여기 어딘가에 있거나, 앱 안에 있겠죠.
00:26:08API 파일들 중에 있을 겁니다. 페이지들 중 하나에 내장되어 있거나
00:26:13컴포넌트들 내부에 중첩되어 있을 거예요.
00:26:18지구본 코드가 다 바이브 코딩으로 작성된 거냐고요? 네, 그렇습니다. UI 컴포넌트가 167줄이네요.
00:26:27이 코드를 가져가서 수정하고 발전시킬 수 있습니다. 참고로 제로샷(zero-shot)으로 만든 것입니다.
00:26:34첫 번째 버전은 초기 프롬프트였고, 지구본은 두 번째 프롬프트로 추가된 것입니다. v0는 v1, v2 등으로 버전을 관리하죠.
00:26:44지구본은 다른 프롬프트로 만든 거라 버전 2가 된 거죠. v0 이름이 v1, v2 이런 식이니까요. 질문에 답변이 되었나요?
00:26:52네, 감사합니다.
00:26:58원하신다면 더 보여드릴 수도 있습니다. v0에는 직접적인 기능들이 있죠.
00:27:04아마 접근 권한이 있는 데이터베이스 전체를 보게 될 텐데,
00:27:08이건 테스트 계정이니 괜찮습니다. v0 안에서 데이터베이스를 직접 탐색할 수 있습니다.
00:27:15즉, 데이터베이스와 직접 대화할 수도 있다는 뜻입니다. 앱을 배포할 필요도 없고,
00:27:21대시보드를 보여줄 필요도 없이, 말 그대로 데이터와 직접 대화를 나눌 수 있습니다.
00:27:29이 계정에 테이블이 워낙 많아서 다시 연결해야 할 수도 있겠네요.
00:27:34아, 네. 그리고 v0에서 SQL 쿼리도 직접 실행할 수 있습니다. 앞으로
00:27:45더 많은 기능들이 추가되겠지만, 개인적으로는 이 기능을 통해
00:27:51멋진 인터랙티브 대시보드를 바이브 코딩으로 만들 수 있다는 점이 가장 매력적이라고 생각합니다.
00:27:58그렇죠.
00:28:01이상입니다. 이 기능을 테스트해 보고 싶으시다면 Vercel이나 스노우플레이크에 문의해 주세요.
00:28:10오늘 참석해 주셔서 감사합니다.

Key Takeaway

v0와 Snowflake 연동은 Next.js 기반의 에이전틱 코딩과 엔터프라이즈 보안 레이어를 결합하여, 사용자가 프롬프트만으로 컴플라이언스를 충족하는 실시간 대시보드를 수 분 내에 구축하고 배포할 수 있게 한다.

Highlights

  • Vercel의 에이전틱 코딩 도구 v0와 Snowflake 엔터프라이즈 환경이 연동되어, 프롬프트 입력만으로 대시보드와 맞춤형 애플리케이션을 빌드할 수 있다.

  • 빌드된 애플리케이션은 Snowflake 데이터 인접 지역 및 연산 자원에서 실행되며, Snowflake의 RBAC와 싱글 사인온(SSO) 보안 정책을 그대로 상속받는다.

  • Crunchbase IPO 데이터셋과 미국 전역 발전소 데이터셋을 활용한 데모에서, v0는 각각 3분 43초와 1분 53초 만에 인터랙티브 대시보드와 지구본 시각화 컴포넌트를 완성했다.

  • Next.js와 자바스크립트 기반으로 구동되므로 단순한 BI 대시보드를 넘어 데이터 기록 테이블이나 에이전틱 앱 등 사내 도구로 확장할 수 있다.

  • v0 설정을 통해 애플리케이션에서 사용할 Snowflake 역할을 지정할 수 있어, 최종 사용자는 각자 권한이 있는 데이터만 조회할 수 있다.

Timeline

v0와 Snowflake 연동 아키텍처 및 주요 활용 사례

  • v0는 Vercel이 개발한 Next.js 기반의 에이전틱 코딩 도구이다.
  • 배포된 앱은 Snowflake 계정 내에서 실행되며 역할 기반 접근 제어와 싱글 사인온 보안 기능을 지원한다.
  • 주요 활용 사례로 GTM 팀의 실시간 대시보드, 커스텀 BI 앱, ARR 및 재무 데이터 분석용 맞춤형 도구가 있다.

Vercel의 엔지니어 돔과 Snowflake의 조던이 Vercel 엔터프라이즈 고객과 Snowflake 엔터프라이즈 고객을 위한 양방향 연동 기능을 소개한다. 이 연동을 사용하려면 관리자 설정에서 Snowflake 앱 런타임을 활성화하고 Vercel 계정에서 연동을 추가해야 한다. Streamlit을 넘어 자바스크립트와 Next.js 기반의 상호작용 가능한 사내 도구와 로그 조회 시스템을 구축할 수 있는 것이 특징이다.

IPO 대시보드 빌드 및 배포 데모

  • Okta 인증을 거친 후 Crunchbase 데이터셋을 지정하여 IPO 시장 대시보드를 요청한다.
  • v0는 스노우플레이크 데이터베이스에 연결하여 웹 성능 모범 사례와 렌더링 전략에 맞춘 대시보드를 구축한다.
  • 빌드 완료된 애플리케이션은 snowflake compute.app에 배포되며 사용자별 권한 제어가 적용된다.

데모 과정에서 프롬프트에 스노우플레이크와 Crunchbase 데이터셋을 명시하여 연도별 IPO 현황을 보여주는 인터랙티브 대시보드를 생성한다. 의존성 패키지 설치와 빌드 과정을 거쳐 3분 43초 만에 5만 개의 IPO 데이터와 총 조달 자본을 시각화하는 화면이 완성된다. 웹사이트 방문 시 Snowflake 인증을 거치므로 접근 권한이 있는 사용자만 데이터를 열람할 수 있다.

발전소 데이터 탐색 및 지구본 시각화 추가 데모

  • dbt 클라우드와 같은 시맨틱 레이어를 프롬프트로 유도하여 쿼리 디자인에 활용할 수 있다.
  • 미국 전역 발전소 무료 데이터셋을 바탕으로 테이블 형태의 요약 정보에 지구본 시각화 컴포넌트를 추가한다.
  • v0로 생성된 코드는 다운로드하여 모델 평가 로직이나 추가적인 백엔드 파이프라인과 결합할 수 있다.

청중과의 질의응답을 통해 dbt 시맨틱 모델 연동 방법과 비기술자를 위한 바이브 코딩의 범위를 다룬다. 발전소 위치 정보를 담은 마켓플레이스 데이터셋을 불러온 뒤, 두 번째 프롬프트로 지구본 시각화 요소를 추가하여 1분 53초 만에 인터랙티브 UI를 확장한다. 단순한 대시보드 제작을 넘어 코드를 다운로드해 환각 현상을 줄이기 위한 평가 파이프라인을 구축하는 고급 활용법도 설명한다.

배포 보안, 사용자 인증 및 Q&A

  • 배포된 앱은 Vercel과의 연결 없이 순수하게 사용자 스노우플레이크 계정 내부에서 SSO와 인증을 처리한다.
  • v0 설정 단계에서 지정한 스노우플레이크 역할을 통해 최종 사용자의 데이터 접근 권한을 제어한다.
  • 컴포넌트 코드는 shadcn 기반으로 생성되며 v1, v2 등 버전 관리를 통해 수정할 수 있다.

포트 동작 방식과 사용자 온보딩에 대한 질문에 이어, 스노우플레이크 계정 내부에서 싱글 사인온으로 인증이 이루어지는 구조를 상세히 설명한다. 최종 사용자가 자신의 역할에 맞는 데이터만 볼 수 있도록 v0 설정에서 역할을 매핑하는 방식이 강조된다. 마지막으로 v0 내부에서 데이터베이스를 직접 탐색하고 SQL 쿼리를 실행하는 추가 기능들을 소개하며 세션을 마친다.

Community Posts

View all posts