Transcript
00:00:00단 몇 분 만에 제가 직접 만든 이벤트 랜딩 페이지입니다.
00:00:05AI 기반의 가상 피팅 경험도 포함되어 있죠.
00:00:09상사가 제게 이 프로젝트를 맡겼고, V0 덕분에 아이디어를 실제 소프트웨어로 구현할 수 있었습니다.
00:00:14이번 영상에서는 V0가 무엇인지, 어떻게 단계별로 프로젝트를 만드는지 보여드리겠습니다.
00:00:19그렇다면 V0란 무엇일까요?
00:00:21AI 덕분에 코드를 생성하는 것이 정말 쉬워졌습니다.
00:00:23V0는 그 기술을 활용하여 누구나 쉽게 실제 앱과
00:00:28웹사이트를 빌드하고 개발자들과 협업할 수 있는 형태로 제공합니다.
00:00:30V0는 아이디어 단계부터 배포까지 최대한 빠르게 진행할 수 있도록 설계되었습니다.
00:00:36V0의 작동 방식은 이렇습니다.
00:00:37원하는 앱, 에이전트, 또는 웹사이트를 설명하면 V0가 실시간 미리보기 화면에서
00:00:42코드를 생성해 줍니다.
00:00:43V0와 대화하며 프로젝트를 수정하고 변경할 수 있으며, 바꿀 내용을 말하면
00:00:48그대로 반영해 줍니다.
00:00:49V0는 Vercel과 Next.js를 사용하여 실제 소프트웨어를 생성하지만, 단순한 웹사이트 빌더가 아닙니다.
00:00:56실제 앱을 제작하고 AI 및 데이터베이스에 연결할 수 있으며, 개발자가
00:01:00직접 활용하고 배포할 수 있는 코드를 만들어 줍니다.
00:01:02이것이 가능한 이유는 V0가 Under Armour, Stripe, Notion 같은 브랜드들이 사용하는
00:01:08Next.js 코딩 프레임워크의 개발사, Vercel에서 만들었기 때문입니다.
00:01:11따라서 V0가 Next.js 앱을 빌드하고 배포할 때, 여러분은 세계 최고의 기업들과
00:01:15동일한 코드와 안전한 인프라를 사용하는 것입니다.
00:01:19그럼 V0가 작동하는 모습과 시작하는 것이 얼마나 쉬운지 몇 가지 프로젝트를 통해 보여드리겠습니다.
00:01:24저는 마케팅 팀에 근무하고 있고, 이번 주에 처리해야 할 큰 프로젝트가 두 개 있습니다.
00:01:27첫째로, 새로 출시할 신제품의 이벤트 페이지를 만들어야 합니다.
00:01:31둘째로는 우리 웹사이트의 랜딩 페이지를 업데이트해야 하죠.
00:01:34먼저 이벤트 페이지부터 시작하겠습니다.
00:01:36이 이벤트는 "Son of Ali"라는 새로운 시계를 출시하는
00:01:40제품 출시 파티를 위한 것입니다.
00:01:41랜딩 페이지를 멋지고 흥미롭게 꾸며서 기대감을 높이고, 방문자들의 등록을 유도할 수 있도록
00:01:45매력적인 가상 피팅 경험을 제공하고 싶습니다.
00:01:48이제 V0에게 그렇게 만들어 달라고 요청해 보겠습니다.
00:01:53프롬프트 작성을 모두 마쳤습니다.
00:01:54지시 사항을 제출하면 V0가 빌드를 시작합니다.
00:01:59V0가 빌드하는 동안, 왜 이 툴이 강력한지 보여드리겠습니다.
00:02:02설정(Settings)을 클릭한 뒤 연동(Integrations)으로 들어가면 V0에서
00:02:07사용할 수 있는 모든 연동 기능을 확인할 수 있습니다.
00:02:09우선 V0에는 이미 AI 기능이 내장되어 있습니다.
00:02:12AI SDK를 사용하여 AI 기능을 구축하고, AI 게이트웨이를 통해 앱이
00:02:17수백 개의 AI 모델에 자동으로 접근할 수 있게 해줍니다.
00:02:20또한 데이터베이스를 구축하거나 연결하여 앱의 백엔드를 지원할 수 있고,
00:02:25Stripe를 통해 결제를 연동할 수도 있습니다.
00:02:27이러한 연동 기능들을 통해 완벽한 풀스택 AI 지원 앱을 만들 수 있습니다.
00:02:32좋습니다, 그럼 아까 만든 이벤트 페이지를 확인해 볼까요?
00:02:34V0가 첫 번째 버전 빌드를 완료했으니 한번 테스트해 보겠습니다.
00:02:38제 사진을 업로드해 보겠습니다. 그러면 요청했던 대로
00:02:44가상 시계 피팅 기능과 함께 4개의 생성 이미지가 나타날 것입니다.
00:02:49멋지네요, V0가 제 지시 사항을 실제로 반영하여 코드를 업데이트했습니다.
00:02:55에디터를 보면 V0가 Next.js 코드를 실시간으로 업데이트하고 있는 것을 볼 수 있습니다.
00:03:00또한 에디터 덕분에 개발자들이 코드를 검토하고 수정하기가 매우 편리합니다.
00:03:04좋습니다, V0가 변경 작업을 모두 마쳤고 아주 훌륭하게 완성되었습니다.
00:03:09페이지를 게시하기 전에 피드백을 받기 위해 팀원들과 공유하고 싶습니다.
00:03:12공유(Share)를 클릭하고 링크를 복사하여 채팅창과 미리보기를 팀원들에게 보낼 수 있습니다.
00:03:18팀원들이 이 미리보기로 보게 되는 화면은 제가 페이지를 공개했을 때 사용자들이 보는 화면과 정확히 일치하므로,
00:03:22실제 배포 시 무언가 달라질까 봐 걱정할 필요가 전혀 없습니다.
00:03:26팀 검토가 끝나면 맞춤형 URL을 지정하고 게시할 준비가 된 것입니다.
00:03:31게다가 이 과정은 제가 만든 V0 작업물을 위해 Vercel에 실제로
00:03:36프로젝트를 생성해 주었습니다.
00:03:37Vercel에서 검사(Inspect on Vercel)를 클릭하면 해당 프로젝트를 직접 확인할 수 있습니다.
00:03:42해당 프로젝트 내에서 모든 분석 데이터, 오류 로그, 그리고 배포의 전체 이력을 볼 수 있습니다.
00:03:48좋습니다, 이 앱을 프로덕션 환경에 배포했습니다.
00:03:51이제 실제 라이브 사이트에 접속할 수 있으며, 사용자들이 보게 될 이 링크를
00:03:56공유하여 누구나 접속할 수 있도록 공개할 수 있습니다.
00:03:59V0의 정말 멋진 점은 커스텀 도메인을 추가할 수도 있다는 것입니다.
00:04:03.vercel.app 하위 도메인을 맞춤 설정하거나, 도메인을 새로 구매하거나, 이미
00:04:09소유하고 있는 도메인을 추가할 수 있습니다.
00:04:10일회성 이벤트 페이지이므로 기본 도메인을 맞춤 설정한 뒤
00:04:14다시 게시하도록 하겠습니다.
00:04:15좋습니다.
00:04:16이제 도메인이 업데이트되었으며, 새로 수정하고 추가한 도메인으로
00:04:21동일한 페이지에 접속할 수 있습니다.
00:04:23끝났습니다.
00:04:24V0가 이제 Vercel 인프라에 제 앱을 배포했고, 누구나 접속할 수 있도록 공개되었습니다.
00:04:30이제 다음 프로젝트인 마케팅 사이트에 이미 게시되어 있는
00:04:34랜딩 페이지를 업데이트하는 작업으로 넘어가 보겠습니다.
00:04:36저희 개발 팀은 GitHub을 통해 사이트를 관리하고 코드 버전을 제어하므로, 저 역시
00:04:41그들의 워크플로우에 맞춰서 업데이트를 진행해야 합니다.
00:04:44다행히도 V0를 사용하면 그 작업을 아주 쉽게 처리할 수 있습니다.
00:04:48새로운 V0 창을 열고 'GitHub에서 가져오기(import from GitHub)'를 클릭하겠습니다.
00:04:52접근하려는 GitHub 리포지토리의 URL을 이미 복사해 두었기 때문에,
00:04:56상단 바에 붙여넣고 가져오기(import)를 클릭하겠습니다.
00:05:01그렇게 하면 V0가 즉시 리포지토리를 불러옵니다.
00:05:05이제 V0가 리포지토리를 가져왔으니 변경 사항을 적용할 준비가 되었습니다.
00:05:08제가 하고 싶은 작업은 이 마케팅 페이지 상단에 배너를 추가하여 사람들이
00:05:12방금 만든 이벤트 랜딩 페이지로 이동해 Son of Ali 출시
00:05:17이벤트에 등록할 수 있도록 유도하는 것입니다.
00:05:18V0에게 그렇게 작업해 달라고 요청해 보겠습니다.
00:05:21V0가 변경 사항을 적용하는 동안 'Git' 탭을 클릭해 보겠습니다.
00:05:27V0가 저를 위해 자동으로 브랜치를 생성해 준 것을 볼 수 있습니다. 덕분에
00:05:31개발자들이 제가 변경한 사항을 검토하고 테스트한 뒤 메인 사이트에
00:05:35병합(merge)하기가 아주 수월해집니다.
00:05:36좋습니다, V0가 작업을 완료했으니 이제 팀원들이 검토할 수 있도록
00:05:42풀 리퀘스트(PR)를 생성할 차례입니다.
00:05:44'PR 열기(open PR)'를 클릭한 다음 '풀 리퀘스트 생성(open pull request)'을 누르겠습니다.
00:05:49이제 'PR 보기(view PR)'를 클릭하면 GitHub에 제 풀 리퀘스트가 생성된 것을 볼 수 있습니다.
00:05:54그리고 우리 사이트는 Vercel을 사용하기 때문에 미리보기 빌드가 자동으로 생성되었습니다.
00:05:59따라서 개발자들이 코드를 검토할 수 있을 뿐만 아니라, 나머지 팀원들도 업데이트된
00:06:03모습을 확인하고 댓글을 통해 피드백을 주고받을 수 있습니다.
00:06:06끝났습니다.
00:06:07엔지니어링 팀에 티켓을 발행하지 않고도 저 혼자 마케팅 사이트를 성공적으로 변경했으며,
00:06:11팀원들은 기존 프로세스 안에서 이 변경 사항을 편하게 검토할 수 있습니다.
00:06:15우리는 마케팅, 제품, 창업자, 또는 엔지니어 본인들까지, 개발자와 협업하는 모든 팀을 위해
00:06:19V0를 만들었습니다.
00:06:22V0를 사용하면 누구나 아이디어를 실제 소프트웨어로 구현하고 기존의 앱이나
00:06:27웹사이트에서 협업할 수 있습니다.
00:06:28지금 v0.app을 방문하여 첫 번째 프로젝트를 배포해 보세요.