Todo 앱 배포하기 | Vercel 배포

Overview

지금까지 만든 Todo는 강의 저장소를 clone해서 작업한 프로젝트라, 아직 내 GitHub 저장소에는 올라가 있지 않습니다. 이 레슨에서 Todo를 본인 GitHub 저장소로 옮기고 Vercel에 연결하면, 내가 만든 Todo가 누구나 접속하는 .vercel.app 주소에서 열립니다.

학습 목표

• Todo의 origin을 강의 저장소에서 본인 GitHub 저장소로 바꿔 올립니다.
• Vercel에 저장소를 연결해 .vercel.app 주소에서 화면이 뜨는지 확인합니다.
• push 한 번이 배포로 이어지는 흐름을 설명할 수 있습니다.

시작하기 전 확인사항

• Vercel 계정: vercel.com에서 GitHub로 로그인합니다. (별도 토큰 불필요)
• GitHub CLI 인증: 사전 준비에서 마친 gh auth login 상태를 그대로 씁니다.

Step 1: Todo를 내 저장소로 옮기기

지금까지 각 레슨은 git checkout으로 강의 저장소의 시작점을 받아 진행했습니다. 그래서 이 프로젝트의 origin은 내 것이 아니라 강의 저장소를 가리킵니다. 반면 Vercel은 내가 소유한 GitHub 저장소를 기준으로 배포합니다. 먼저 Todo를 내 저장소로 옮깁니다.

Claude Code에 다음과 같이 요청합니다.

이 프로젝트는 강의 저장소를 clone한 거라 origin이 강의 원본을 가리키고 있어.
내 GitHub 계정에 todo-tutorial public 저장소를 새로 만들고, origin을 그 저장소로 바꿔줘.
커밋 안 된 변경이 있으면 먼저 커밋한 뒤, 지금 작업 상태를 그대로 main 브랜치에 올려줘.

Claude는 내 계정에 새 저장소를 만들고, origin을 그 저장소로 바꾼 뒤 현재 작업을 main으로 push합니다. 이 단계가 끝나면 내 GitHub 계정에 Todo 코드가 담긴 새 저장소가 생깁니다. github.com에서 저장소를 열어 파일이 다 올라왔는지 확인합니다. 이 저장소가 다음 단계에서 Vercel에 연결할 대상입니다.

저장소 이름은 원하는 대로 바꿔도 됩니다.

Step 2: Vercel에 저장소 연결하기

Vercel 대시보드에서 ① Add New... 드롭다운을 열고, 메뉴에서 Project를 클릭합니다.

① Search 박스에 저장소 이름을 입력해 방금 만든 저장소를 찾고, ② 옆의 Import 버튼을 클릭합니다.

다음 화면에서 Application Preset은 Next.js로 자동 감지됩니다. Todo는 외부 키 없이 브라우저에서 동작하므로 Environment Variables는 비워둔 채 ① Deploy 버튼을 클릭합니다.

Step 3: 배포 주소에서 Todo 확인하기

빌드가 끝나면 저장소 이름이 들어간 .vercel.app 주소가 생깁니다. 주소를 열어 로컬과 같은 Todo 화면이 뜨는지 확인합니다.

내 노트북에서만 실행되던 Todo가 인터넷에 올라갔습니다. 이제 이 주소를 누구에게든 공유할 수 있는 상태가 되었습니다.

핵심 포인트 정리

push 한 번이 배포: Vercel을 한 번 연결하면 이후 main에 push할 때마다 .vercel.app 주소가 자동으로 갱신됩니다.

FAQ

이어서 배울 내용

Todo를 내 저장소로 옮기고 배포까지 마쳤습니다. Part 2 정리에서 지금까지 Claude를 확장한 도구들을 한 번에 되짚어 봅니다.