00:00:00안녕하세요, Vercel의 Pauline입니다. 오늘 영상에서는
00:00:03여러분께 어떻게 사용하는지 보여드리려고 합니다
00:00:05v0의 Git 연동 기능을 활용해
00:00:08아이디어를 프로토타입에서 프로덕션 단계까지 올리는 방법을요.
00:00:11그래서 이번 영상에서는
00:00:12블로그를 하나 만들고,
00:00:14GitHub에 연결한 다음,
00:00:15브랜치를 사용해 안전하게 새로운 기능을 실험해보고
00:00:18웹에 라이브로 배포까지 해볼 것입니다.
00:00:21끝날 때쯤이면 전체 워크플로우를 이해하시게 될 거예요.
00:00:25그럼 시작해 봅시다.
00:00:27좋아요, 이제 v0에 들어왔습니다.
00:00:30간단한 블로그를 만드는 것부터 시작할게요.
00:00:33채팅창에 제가 원하는 것을 설명하겠습니다.
00:00:35여기서 우리가 할 일은
00:00:37현대적인 블로그 페이지를 만드는 것인데,
00:00:42헤더와 주요 포스트, 그리고 최신 포스트 그리드가 포함됩니다.
00:00:53전문가 팁으로, 여기서 모델을 변경할 수도 있습니다.
00:00:57여러 모델이 준비되어 있거든요.
00:00:59Mini, Pro, Max,
00:01:01그리고 Opus까지 있습니다.
00:01:03채팅하는 도중에 언제든지 변경할 수 있죠.
00:01:07멋지네요, 마음에 듭니다.
00:01:09v0가 저를 위해 깔끔한 블로그 레이아웃을 생성해 주었습니다.
00:01:13약간의 수정을 거쳐 좀 더 개인화해 보겠습니다.
00:01:17그럼 헤더를...
00:01:21오, 오타가 안 난다면요,
00:01:23헤더 배경을 파란색에서 보라색으로 변하는 그라데이션으로 바꿔주세요.
00:01:32완벽합니다. 이제 만족스러운 블로그가 완성됐네요.
00:01:36하지만 지금은 이 블로그가 v0 안에만 존재합니다.
00:01:40제 작업물을 좀 더 영구적인 곳에 저장할 필요가 있죠.
00:01:43궁극적으로는 이것을 라이브로 배포하고 싶고,
00:01:45그럴 때 바로 이 Git 연동 기능이 필요합니다.
00:01:48사이드바 쪽으로 가보시면
00:01:52GitHub 로고와 Git 연결 버튼을 볼 수 있습니다.
00:01:56이 프로젝트를 처음 연결하는 것이기 때문에,
00:01:59v0가 GitHub 계정 연결과 저장소 이름 설정을 요청합니다.
00:02:04이제 연결을 진행해 보겠습니다.
00:02:06범위는 제 계정으로 할게요.
00:02:08여러 계정이 연결되어 있지만,
00:02:10지금은 제 개인 Pauline 계정을 사용하겠습니다.
00:02:13저장소 이름도 마음에 드니,
00:02:15그대로 두고 바로
00:02:16저장소를 생성하겠습니다.
00:02:18보시는 것처럼 v0가
00:02:21저장소를 만들고 모든 코드를 GitHub로 푸시하고 있습니다.
00:02:24좋습니다. 이제 GitHub에서 실제로 어떤 일이 일어나는지 보죠.
00:02:29한번 확인해 볼까요.
00:02:31v0가 생성한 이 모든 코드를 보세요.
00:02:34필요한 모든 설정 파일과 함께 제대로 구조화되어 있습니다.
00:02:38컴포넌트들도 있고,
00:02:40app 디렉토리와
00:02:41모든 것이 정리되어 작업할 준비가 끝났습니다.
00:02:43그럼 이런 생각이 드실 수도 있습니다. "GitHub를 연결해서 얻는 이점이 뭐지?"
00:02:48첫째로, 코드가 안전하게 백업됩니다.
00:02:51만약 무언가 잘못되더라도,
00:02:53전체 히스토리를 가지고 있으니까요.
00:02:55둘째로, 기존 코드를 망가뜨릴 걱정 없이
00:02:57더 자유롭게 실험할 수 있습니다.
00:03:00잠시 후 브랜치 기능을 통해 직접 보여드릴게요.
00:03:02셋째로, 프로덕션으로 가는 경로가 생깁니다.
00:03:04이 블로그를 라이브로 배포할 수 있죠.
00:03:06좋아요, 새로운 기능을 추가하며 실습해 봅시다.
00:03:09만약 '저자 소개' 섹션을 추가하고 싶다고 해보죠.
00:03:14하지만 아직 정확히 어떤 모습일지 확신이 서지 않습니다.
00:03:17현재 버전을 망치고 싶지도 않고요.
00:03:19이럴 때 바로 브랜치가 필요합니다.
00:03:21브랜치는 프로젝트의 평행 버전과 같아서
00:03:24안전하게 실험을 진행할 수 있게 해줍니다.
00:03:27좋아요. 여기서 이 브랜치를 복제하겠습니다.
00:03:31브랜치 이름은 'author-bio'라고 지을게요.
00:03:36위쪽을 보시면,
00:03:38제가 지금 'author-bio' 브랜치에 있는 걸 볼 수 있습니다.
00:03:41메인 브랜치는 제가 남겨둔 그대로 전혀 손대지 않은 상태죠.
00:03:45이제 여기서 자유롭게 실험할 수 있습니다.
00:03:48저자 소개 섹션을 추가하고 싶으니까요.
00:03:50v0에게 저자 소개 섹션을 추가해달라고 요청하겠습니다.
00:03:56좋습니다, 아주 멋지네요.
00:03:59새로운 저자 소개 컴포넌트가 추가되었습니다.
00:04:02그럼 미리보기에서 새로고침을 한번 해보죠.
00:04:06어디에 추가되었는지 확인할 수 있을 겁니다.
00:04:10여기 있네요. 새로운 'About the Author' 섹션입니다.
00:04:13다시 한번 말씀드리자면,
00:04:15우리는 이 브랜치에서만 변경 사항을 만들었습니다.
00:04:18'author-bio' 브랜치 말이죠.
00:04:19그 말은 메인 브랜치에는
00:04:22어떤 변경 사항도 생기지 않았다는 뜻입니다.
00:04:24그래서 이 브랜치는 마음껏 실험해도 괜찮습니다.
00:04:27텍스트를 더 바꾸고 싶거나
00:04:29스타일을 수정하고 싶다면 여기서 자유롭게 하면 됩니다.
00:04:33실제로 보니,
00:04:35저자 소개 섹션이 좀 더 아담했으면 좋겠네요.
00:04:38보여드리는 김에 이 브랜치에 있는 동안 조정해 보겠습니다.
00:04:40보여드리기 위해서요.
00:04:41저자 소개 섹션을 좀 더 컴팩트하게 만들어주세요.
00:04:46좋습니다, 훌륭해요.
00:04:48v0가 저자 섹션을 더 조밀하게 만든 것을 볼 수 있습니다.
00:04:52전체적으로 패딩(여백)을 줄였다고 하네요.
00:04:56훨씬 보기 좋네요.
00:04:57아주 만족스럽습니다.
00:04:58이제 PR을 열어서 이 변경 사항들을 푸시할 수 있습니다.
00:05:03이 워크플로우가 어떻게 메인 브랜치를 보호하는지 보세요.
00:05:06실험용 브랜치에서는 원하는 만큼 반복해서 작업할 수 있지만,
00:05:10메인은 제가 완전히 만족할 때까지 안정적으로 유지됩니다.
00:05:13자, 이제 저자 소개 섹션이 마음에 듭니다.
00:05:16이것을 메인 브랜치에 병합(merge)할 시간입니다.
00:05:18풀 리퀘스트(Pull Request)를 생성하겠습니다.
00:05:20풀 리퀘스트, 즉 PR은 기본적으로
00:05:25'author-bio' 브랜치의 변경 사항을
00:05:28메인 브랜치로 가져와 달라고 요청하는 것입니다.
00:05:30변경 사항을 제안하는 공식적인 방법이죠.
00:05:32여기서 직접 PR을 열어보겠습니다.
00:05:35그리고 여기를 클릭해 PR 자체로 이동해 보죠.
00:05:44그러면 GitHub로 연결됩니다.
00:05:46보시는 것처럼,
00:05:47v0에서 작업한 두 개의 커밋이 와 있습니다.
00:05:51저자 소개 섹션 생성과 더 컴팩트하게 수정한 내역이죠.
00:05:56그리고 'files changed' 탭으로 가면,
00:05:58v0가 변경한 정확한 코드를 검토할 수 있습니다.
00:06:03팀 단위로 일할 때는,
00:06:04여기서 동료들이 여러분의 코드를 리뷰하고
00:06:07댓글을 남기게 됩니다.
00:06:08개인 프로젝트라면,
00:06:09모든 것이 괜찮은지 확인하는
00:06:11마지막 점검 단계가 됩니다.
00:06:13변경 사항들이 만족스러우니,
00:06:14이 풀 리퀘스트를 병합(merge)하겠습니다.
00:06:17이제 다시 v0로 돌아가 보죠.
00:06:20보시는 것처럼, 여기서 PR을 병합할 수 있습니다.
00:06:23병합해 보겠습니다.
00:06:29그리고 GitHub로 다시 가보면,
00:06:31병합이 완료된 것을 확인할 수 있습니다.
00:06:34이제 이 기능은 공식적으로 우리 메인 코드베이스의 일부가 되었습니다.
00:06:38자, 이제 모두 라이브 상태입니다.
00:06:39여기 설정으로 들어가서
00:06:42Vercel 프로젝트를 확인하고 Vercel에서 직접 볼 수 있습니다.
00:06:46여기 보시는 것처럼 배포가 성공적으로 이루어졌습니다.
00:06:51도메인을 클릭해 들어가 보면, 짜잔.
00:06:55제 블로그가 인터넷에 라이브로 떴습니다.
00:06:57그라데이션이 들어간 헤더와
00:07:00블로그 포스트들을 볼 수 있고요.
00:07:01아래로 스크롤하면 저자 소개 섹션도 있습니다.
00:07:06기본적으로 v0에서 만든 모든 것이
00:07:08Git을 통해 안전하게 병합되었고
00:07:10이제 배포되어 전 세계 누구나 접속할 수 있게 되었습니다.
00:07:13이것은 전문 개발팀들이
00:07:14매일같이 사용하는 것과 동일한 워크플로우입니다.
00:07:17v0에서 빌드하고, Git으로 코드를 관리하고,
00:07:20Vercel로 배포하는 것까지,
00:07:22완전한 프로덕션 워크플로우인 셈이죠.
00:07:25이 영상이 여러분께서 v0의 Git 연동 기능을
00:07:27더 자신 있게 사용하는 데 도움이 되길 바랍니다.
00:07:30이 워크플로우를 직접 시도해 보세요.
00:07:32작은 것부터 시작해서 브랜치를 만들고,
00:07:34실험하고 배포해 보세요.
00:07:36궁금한 점이 있으시면,
00:07:38community.vercel.com의 저희 커뮤니티 공간으로 오세요.
00:07:41시청해 주셔서 정말 감사합니다.