Claude Code Vercel 배포

완성한 Feedme를 Vercel에 연결하고 누구나 접속할 수 있는 주소로 배포합니다

Overview

로컬에서만 동작하는 Feedme는 다른 사람이 접속할 수 없고, 실제 배포 환경에서도 같은 흐름이 동작하는지 확인되지 않았습니다.

이번 Lesson에서는 Feedme를 공개 주소에 배포하고, 로컬에서 검증한 사용자 흐름이 배포 환경에서도 동작하는지 확인합니다.

학습 목표

Feedme 저장소를 Vercel에 연결해 .vercel.app 주소로 배포합니다.

Step 1: 완성한 Feedme를 GitHub에 올리기

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

지금까지 변경 사항을 커밋하고 main 브랜치에 push해줘.

github.com에서 feedme-clone 저장소를 열고 지금까지 만든 코드가 올라왔는지 확인합니다.

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

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

Vercel 대시보드의 Add New Project 버튼

① Search 박스에 feedme-clone을 입력해 저장소를 찾고, ② 옆의 Import 버튼을 클릭합니다.

Vercel에서 저장소를 검색해 Import하는 화면

다음 화면에서 Application Preset은 Next.js로 자동 감지됩니다. Environment Variables는 비워둔 채 ① Deploy 버튼을 클릭합니다.

Vercel New Project 화면에서 Deploy 버튼 위치

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

빌드가 끝나면 저장소 이름이 들어간 .vercel.app 주소가 생깁니다. 주소를 열어 로컬에서 만든 Feedme 화면이 나타나는지 확인합니다. 웹페이지 URL 하나를 변환한 뒤 결과를 복사하거나 내려받아, 로컬에서 확인한 사용자 흐름이 배포 환경에서도 동작하는지 확인합니다.

배포된 Feedme의 URL 입력 화면

배포 주소에서 변환과 내보내기까지 되면 배포가 끝났습니다. 이제 이 주소를 다른 사람에게 공유할 수 있습니다.

핵심 포인트 정리

배포 환경에서 다시 검증하기: 공개 주소가 생긴 것만으로 완료가 아니라, 실제 사용자 흐름이 배포 환경에서도 동작해야 합니다.
공유 가능한 결과로 끝내기: 배포 URL에서 완료 기준을 통과해야 다른 사람이 사용할 결과로 공유할 수 있습니다.

이어서 배울 내용

Feedme를 하나의 작업으로 완성하고 배포했습니다. 다음 배포 뒤 프로젝트 이어가기에서는 구현 중 남긴 문제와 완료된 Spec을 구분해 다음 작업이 이어받을 상태로 정리합니다.

Feedme 배포하기 | Vercel 배포