00:00:00수백만 명의 개발자가 10년 넘게 Vercel의 프런트엔드 클라우드에서 프로젝트를 구축해 왔습니다.
00:00:04개인 프로젝트부터 기업용 소프트웨어에 이르기까지, 우리 모두는 Vercel을 사용하여 모든 것을 배포해 왔죠.
00:00:10사용자나 팀의 불편함을 줄이기 위해 에이전트와 AI 기능을 빌드할 때,
00:00:15가장 피하고 싶은 것은 운영 환경에서 유지 관리가 복잡해지는 일입니다.
00:00:21Vercel의 자율 주행 인프라는 데브옵스(DevOps)를 배포만큼이나 쉽게 만들어 줍니다.
00:00:25코드를 생성하고 에이전트를 빌드하면, Vercel이 전 세계적인 규모의 성능에 맞게 자율적으로 최적화하고,
00:00:31컴퓨팅 자원을 할당하며, AI 워크플로를 오케스트레이션하고, 이상 징후까지 조사합니다.
00:00:38이 모든 과정에 어떠한 설정도 필요하지 않습니다.
00:00:40이제 스피드런을 통해 제가 무슨 말씀을 드리는지 직접 보여드리겠습니다.
00:00:43기존 웹 앱을 이전하는 과제에 도전해 보죠.
00:00:46이것은 로스터리와 카페를 운영하는 중견 커피 기업의 채용 플랫폼 데모 앱입니다.
00:00:53프런트엔드, 입사 지원서와 이력서를 저장하는 데이터베이스,
00:00:58그리고 빠른 지원 검토를 위해 자기소개서를 요약하는 백엔드 서비스로 구성된 간단한 앱입니다.
00:01:03현재 아주 오래된 호스팅 업체를 사용 중인데, 어디인지는 말씀드리지 않겠지만,
00:01:07확실히 현대화가 필요해 보이니 바로 시작해 보겠습니다.
00:01:10Vercel로 이전하면 기능 개발, 배포 및 협업 속도가 훨씬 빨라질 것입니다.
00:01:17이제 이 앱을 Vercel로 가져오겠습니다.
00:01:19기본적인 FastAPI 파이썬 서비스인 백엔드부터 시작해 보죠.
00:01:24먼저 'Add New'를 클릭합니다.
00:01:26이미 제 Git 계정을 연결해 두었기에 레포지토리들이 목록에 나타납니다.
00:01:31API 레포지토리에서 'Import'를 클릭합니다.
00:01:33빌드 및 출력 설정을 포함하여 가져오기 과정을 완전히 구성할 수 있지만,
00:01:38Vercel은 FastAPI와 다른 백엔드 프레임워크를 기본적으로 지원합니다.
00:01:44따라서 바로 'Deploy'를 클릭하기만 하면 작동합니다.
00:01:46불과 몇 초 만에 파이썬 백엔드 서비스가 Vercel에 배포되어 실행되었습니다.
00:01:52Vercel이 이 프로젝트를 위한 URL을 자동으로 생성했습니다.
00:01:55다음 앱의 환경 변수로 추가할 수 있도록 이 URL을 복사해 두겠습니다.
00:02:01새 프로젝트를 하나 더 추가하고, 다음 앱에서 'Import'를 클릭한 뒤,
00:02:05Supabase와 통신할 수 있도록 이 앱의 환경 변수들을 가져오겠습니다.
00:02:11좋습니다, 이제 앱이 Supabase와 통신할 수 있습니다. FastAPI 변수에는
00:02:15방금 복사한 URL을 추가하고 앱을 배포하겠습니다.
00:02:20Vercel이 프로젝트를 빌드하고 배포하는 중입니다.
00:02:23이 앱은 수백만 개의 웹사이트와 앱을 구동하는 것과 동일한 인프라에서 실행될 것입니다.
00:02:27Vercel의 126개 글로벌 거점은 콘텐츠를 사용자에게 가장 가까운 곳에 자동으로 배치하므로,
00:02:33언제나 매우 빠른 속도를 보장합니다.
00:02:37보시는 것처럼 앱 배포가 성공적으로 완료되었습니다.
00:02:40함께 확인해 보시죠.
00:02:42채용 공고를 확인할 수 있고, 대시보드에서는 파이썬 요약 기능이 포함된 백엔드를 볼 수 있습니다.
00:02:49일단 운영 환경에 배포되면 앱 전체를 모니터링할 수 있게 됩니다.
00:02:53지금은 실시간 데이터를 확인할 수 있는 다른 프로젝트로 넘어가 보겠습니다.
00:02:57웹 분석, 속도 인사이트, 로그, 쿼리 가능한 관측성 대시보드를 통해 전체 현황을 파악할 수 있습니다.
00:03:04예를 들어, 사람들이 에이전트 기술을 찾는 사이트인 skills.sh의 분석 데이터입니다.
00:03:11유입 경로를 포함한 상세한 트래픽 및 추천 정보를 확인할 수 있습니다.
00:03:15여기 'Speed Insights'를 클릭하면 핵심 웹 지표(Core Web Vitals)를 보여줍니다.
00:03:19이를 통해 속도 저하나 로드 관련 문제를 진단하고 해결할 수 있죠.
00:03:23'Observability'를 클릭하면 대시보드가 나타나며, 로그부터 함수,
00:03:29엣지 요청, 데이터 전송까지 앱의 모든 진단 항목을 탐색하고 쿼리할 수 있습니다.
00:03:34좋습니다, 이제 요약 기능을 채용 담당자에게 더 유용하게 만들어 보겠습니다.
00:03:38현재 FastAPI는 파이썬 라이브러리로 자기소개서만 요약하고 있습니다.
00:03:43하지만 자기소개서와 PDF 이력서를 모두 분석하는 간단한 에이전트를 빌드하여,
00:03:48직무 기술서와 비교하고 후보자에 대한 1차 평가를 내린 뒤,
00:03:52채용 담당자가 보낼 이메일까지 생성하게 할 수 있습니다.
00:03:56이미 로컬에 레포지토리를 클론해 두었으니, 디렉토리로 이동해 필요한 도구들을 설치하겠습니다.
00:04:01이제 Vercel CLI를 사용하여 로컬 프로젝트를 Vercel에 연결하겠습니다.
00:04:06CLI를 사용하면 명령줄에서 바로 Vercel 플랫폼을 쉽게 제어할 수 있습니다.
00:04:11'vercel link'로 시작하겠습니다.
00:04:14네, 이 로컬 프로젝트를 연결하겠습니다.
00:04:16Vercel 데모 조직의 'coffee shop jobs' 프로젝트가 될 것입니다.
00:04:21이미 찾았군요.
00:04:22그리고 환경 변수들을 가져오겠습니다.
00:04:24됐습니다.
00:04:25'vercel dev'를 통해 Vercel 배포 환경을 로컬에서 동일하게 구현하여 앱을 실행할 수도 있습니다.
00:04:31'vercel dev'를 실행해 보죠.
00:04:34서버를 시작하고 바로 테스트해 보겠습니다.
00:04:37성공이네요.
00:04:38정말 멋집니다.
00:04:40이제 에이전트 구축에 필요한 AI 도구들을 설치해 보겠습니다.
00:04:43Vercel은 기능과 에이전트를 빌드하는 데 필요한 모든 AI 도구를 제공합니다.
00:04:47먼저, 요약을 위해 실제 AI 모델을 통합해야 합니다.
00:04:51Vercel AI Gateway를 통해 수백 가지의 다양한 모델을 사용할 수 있으며,
00:04:55Vercel dev를 실행하면 OIDC 토큰을 통해 자동 접근 권한을 얻게 되는데, 아주 유용합니다.
00:05:00다음으로, 텍스트 요약 등과 같은 작업에 필요한 AI 프리미티브 세트를 제공하는 AI SDK를 설치합니다.
00:05:07'pnpm install ai'를 실행합니다.
00:05:12좋습니다.
00:05:13그다음으로, 에이전트가 수행하는 각 단계를 안정적으로 오케스트레이션할 Workflow Dev Kit을 설치하겠습니다.
00:05:21만약 앱이 코드를 생성하는 기능이 있다면, Vercel Sandbox를 사용하여 안전하게 실행할 수도 있습니다.
00:05:26하지만 이건 간단한 요약 에이전트이므로 샌드박스까지는 필요하지 않습니다.
00:05:31자, 마지막으로 프런트엔드는 Next.js입니다.
00:05:34프런트엔드를 깔끔하고 빠르게 유지하기 위해 'React best practices' 기술을 프로젝트에 추가하겠습니다.
00:05:40skills.sh를 사용해 보죠.
00:05:43여기로 가서 'React best practices'를 검색합니다.
00:05:47설치 명령어를 복사하겠습니다.
00:05:50됐습니다.
00:05:53Cursor Code와 몇 가지 다른 도구를 위해 설치를 확인해 봅시다.
00:05:56전역적으로 심볼릭 링크 버전을 선호하며, 설치가 완료되었습니다.
00:06:01이제 에이전트를 본격적으로 빌드해 보겠습니다.
00:06:02매우 간단하므로 Cursor Code에 프롬프트를 입력하기만 하면 됩니다.
00:06:06제가 시작할 때 사용한 프롬프트는 이렇습니다.
00:06:08Cursor Code에 에이전트를 빌드하고, 자기소개서와 PDF 이력서를 요약한 뒤,
00:06:12요약본을 합쳐 직무 기술서와 비교하고, 1차 추천 및 후속 이메일을 생성하라고 지시합니다.
00:06:20물론 Cursor와 함께 이 내용을 정교하게 다듬어 원샷(one-shot) 프롬프트로 만들었습니다.
00:06:25이제 이 프롬프트를 Cursor Code에 붙여넣고 바로 실행하겠습니다.
00:06:29비디오 데모의 마법을 빌려, 제가 Cursor 프롬프트 과정을 거쳤다고 가정하고
00:06:35그 결과물이 포함된 다른 디렉토리를 불러오겠습니다.
00:06:39자, 배포합시다.
00:06:41변경 사항을 커밋하고 작업 중인 브랜치를 푸시하겠습니다.
00:06:47이제 Vercel의 자율 주행 인프라가 AI 워크플로를 자동으로 인식하고
00:06:51해당 컴퓨팅 작업을 위한 인프라를 할당할 것입니다.
00:06:55여기서 활성 컴퓨팅 과금 방식이 매우 효과적입니다.
00:06:57모델 API의 응답을 기다리는 시간이 아니라, 실제 컴퓨팅이 일어나는 시간에 대해서만 비용을 지불하면 되기 때문입니다.
00:07:03이제 앱을 확인할 수 있습니다. 대시보드로 가서 새 기능과 지원서를 살펴봅시다.
00:07:10보시는 것처럼 이 지원서에 대한 거절 문구와 생성된 거절 이메일이 있네요.
00:07:17미리 보기 환경의 가장 좋은 점은 팀원 누구나 앱의 어느 부분에든 의견을 남길 수 있다는 것입니다.
00:07:24지금 바로 Eric에게 버튼을 추가해 달라고 요청해 보겠습니다.
00:07:31좋습니다, 이것은 Vercel Toolbar의 기능 중 하나일 뿐입니다.
00:07:34플래그 테스트, 접근성 감사, 추적(trace) 실행 등을 수행할 수 있습니다.
00:07:38미리 보기 환경은 운영 환경과 동일한 인프라에서 실행되므로,
00:07:42여기서 테스트한 결과는 실제 사용자가 보게 될 모습과 정확히 일치합니다.
00:07:46앱에 에이전트를 추가했지만, 다른 팀원들도 UI를 개선할 수 있게 하고 싶습니다.
00:07:52v0를 사용하면 웹 기반 개발 환경에서 다른 사람들도 프로젝트 작업을 쉽게 할 수 있으며,
00:07:57Git 워크플로를 통해 모든 것을 버전 관리하고 안전하게 유지할 수 있습니다.
00:08:01정말 멋진 기능이죠.
00:08:03GitHub 프로젝트를 가져오고 메인 브랜치를 기본 브랜치로 선택하면 v0가 프로젝트를 설정합니다.
00:08:13보시는 것처럼 환경 변수들도 함께 가져왔습니다.
00:08:19이제 1분도 채 안 되어 제 앱이 v0에서 실행되고 있습니다.
00:08:23기존 프로젝트이기 때문에 v0는 코드를 실행하기 위해 샌드박스를 구동합니다.
00:08:28이것은 Vercel에서 격리된 환경을 구축할 때 사용하는 것과 동일한 샌드박스 프리미티브입니다.
00:08:33Git 탭을 클릭하면 v0가 제가 작업할 새 브랜치를 자동으로 생성한 것을 볼 수 있습니다.
00:08:39채용 공고 페이지의 디자인을 약간 수정하고 싶네요.
00:08:42좀 과할 수도 있지만, 채용 공고 카드를 페이지 전체 너비로 만들어 보겠습니다.
00:08:50v0가 작업을 마쳤는데, 음, 제 선택이 아주 마음에 들지는 않지만 디자인 팀의 의견을 들어보죠.
00:08:57이 v0 채팅을 팀원들에게 보내서 계속 수정하게 하거나,
00:09:00PR을 열어 협업을 위한 미리 보기 환경을 공유할 수 있습니다.
00:09:06앱을 배포하고 전 세계적인 규모로 서비스가 시작되면, Vercel은 보안이 기본으로 유지되도록 보장합니다.
00:09:13앱을 실행하는 것과 동일한 자율 주행 인프라가 엣지에서 앱을 보호합니다.
00:09:18이것은 저희 Next.js 사이트의 방화벽 뷰입니다.
00:09:20트래픽이 많이 발생하는데, 그중 모든 트래픽이 선량한 것은 아닙니다.
00:09:24Vercel의 웹 애플리케이션 방화벽(WAF)은 악성 요청이 앱에 도달하기 전에 엣지에서 자동으로 검사하고 차단합니다.
00:09:33Bot ID는 실제 사용자와 자동화된 트래픽을 조용히 구분하여, 캡차(CAPTCHA) 같은 불편함 없이 악성 봇을 차단합니다.
00:09:40Vercel의 글로벌 엣지 네트워크는 대규모 공격을 자동으로 감지하고 완화하여 부하 상황에서도 앱의 응답성을 유지합니다.
00:09:49이전, AI 워크플로, 협업, 보안 등 방금 보신 모든 과정이 인프라 설정 없이 하나의 플랫폼에서 실행되었습니다.
00:09:59이것이 바로 '자율 주행'의 의미입니다.
00:10:01플랫폼이 방해하지 않으므로 여러분은 제품을 출시하는 데만 집중할 수 있습니다.
00:10:05현재 1,100만 개의 프로젝트가 진행 중이며 계속 늘어나고 있습니다.
00:10:08다음은 여러분의 차례입니다.