"제 컴퓨터에서는 잘 되는데, 친구한테 어떻게 보여주죠?" "주소창에 localhost라고 치니까 안 나온대요."

지금 여러분이 만든 서비스는 여러분의 노트북(Localhost) 안에 갇혀 있어요. 마치 집 안에서 혼자 부르는 노래와 같죠. 친구들이 내 노래를 들으려면, 앨범을 내서 전 세계에 배포해야겠죠?

우리는 오늘 Vercel이라는 무료 배포소를 통해, 여러분의 서비스를 전 세계 어디서든 접속할 수 있게 만들 거예요. 클릭 몇 번이면 됩니다. 진짜예요.

이 글을 읽고 나면

  • 내 컴퓨터에 있는 코드를 인터넷상에 올릴 수 있어요 (GitHub)
  • Vercel을 통해 나만의 .vercel.app 웹사이트 주소를 가질 수 있어요
  • 환경변수를 설정해서 배포된 사이트와 DB(Supabase)를 연결할 수 있어요

1. 배포의 3단계 흐름

복잡해 보이지만 딱 3단계만 기억하면 돼요.

배포 3단계 흐름

우리가 할 일은 GitHub에 코드를 올리고, Vercel 버튼을 누르고, 비밀번호(환경변수)를 알려주는 것뿐입니다.

2. 실전: 따라 하기만 하면 배포 끝

1단계: GitHub에 코드 올리기

아직 코드가 내 컴퓨터에만 있다면, GitHub라는 도서관에 꽂아야 해요. (터미널에 입력하세요)

git add .
git commit -m "배포 준비 완료"
git push

이제 내 코드가 GitHub에 올라갔어요.


2단계: Vercel에서 가져오기

  1. Vercel.com에 접속해서 (GitHub 아이디로) 가입하세요.
  2. Add New... → Project 클릭
  3. 왼쪽 목록에서 방금 올린 프로젝트(smart-todo 등)가 보일 거예요. Import 버튼을 누르세요.

3단계: 환경변수 설정 (★ 여기가 제일 중요!)

Import를 누르면 설정 화면이 나옵니다. 여기서 바로 Deploy를 누르면? 100% 에러 납니다.

왜냐하면 Vercel은 우리집 금고 비밀번호(Supabase URL, API Key)를 모르거든요. 우리가 .env.local 파일에 숨겨놨잖아요? 그걸 Vercel에게도 알려줘야 해요.

  1. Environment Variables 메뉴를 클릭해서 펼치세요.
  2. .env.local 파일에 있는 내용을 하나씩 복사해서 붙여넣으세요.
Key Value
NEXT_PUBLIC_SUPABASE_URL (여러분의 Supabase URL)
NEXT_PUBLIC_SUPABASE_ANON_KEY (여러분의 Supabase Anon Key)

다 넣었으면 Deploy 버튼을 누르세요! 🚀

3. 에러가 났나요? 당황하지 마세요

배포를 처음 하면 Build Failed(빌드 실패)가 뜰 확률이 높아요. 주로 TypeScript 오류 때문인데요. AI가 있으니 걱정 마세요.

🤖 AI에게 해결 요청하기

상황: Vercel 로그에 빨간 글씨로 에러가 잔뜩 떴다.

🧑🏻‍💻 나 (사용자)

"Vercel 배포 중에 에러가 났어. 로그를 복사해줄게. 원인이랑 해결 방법 알려줘.

(로그 붙여넣기: Type error: Property 'id' does not exist on type 'Todo'...)"

🤖 AI

아, types/todo.ts 파일이랑 실제 코드에서 쓰는 타입이 달라서 생긴 문제네요. TodoList.tsx 파일의 23번째 줄을 이렇게 고치세요...

AI가 시키는 대로 코드를 고치고, 다시:

  1. git add .
  2. git commit -m "타입 에러 수정"
  3. git push

하면 Vercel이 자동으로 감지하고 다시 배포를 시작해요. (이게 진짜 편한 점이에요!)

4. 마지막 관문: Supabase 허용 주소 추가

드디어 배포가 성공해서 https://smart-todo.vercel.app 같은 멋진 주소가 생겼어요! 접속해서 로그인을 눌러보세요.

어라? 로그인이 안 되거나 에러 페이지가 뜰 거예요. Supabase 입장에서는 "어? 처음 보는 사이트(.vercel.app)에서 로그인을 요청하네? 수상한데?" 하고 막는 거죠.

🧑🏻‍💻 나 (사용자)

"배포 주소가 나왔어. https://smart-todo.vercel.app 이야. Supabase에서 이 주소를 허용하게 설정하려면 어디로 가야 해?"

🤖 AI

Supabase 대시보드에서 Authentication → URL Configuration으로 가세요. Site URL이나 Redirect URLs에 방금 받은 Vercel 주소를 추가하고 저장하세요.


🎯 최종 확인 (휴먼터치)

이제 진짜 끝났습니다. 핸드폰을 꺼내세요. 친구한테 카톡으로 링크를 보내고, 접속해보세요.

  1. 핸드폰으로 접속: 잘 뜨나요?
  2. 로그인: 구글 로그인이 되나요?
  3. 글 쓰기: "핸드폰으로 작성함"이라고 써보세요.
  4. 컴퓨터 확인: 컴퓨터에서도 그 글이 보이나요?

이게 된다면, 여러분은 이제 Full-Stack 개발자입니다. 축하합니다! 🎉

오늘의 핵심 정리

✅ 배포 흐름: 내 컴퓨터 → GitHub → Vercel → 전 세계 ✅ 환경변수: .env에 있는 비밀번호는 Vercel에도 똑같이 등록해야 한다. ✅ 재배포: 코드를 수정하고 git push만 하면 Vercel이 알아서 다시 배포한다. ✅ URL 허용: 배포된 주소를 Supabase(백엔드)에도 알려줘야 로그인이 된다.

셀프체크

□ Vercel 배포 시 Build Failed가 뜨면 어떻게 해야 하나요? □ 배포된 사이트에서 로그인이 안 될 때, 가장 먼저 확인해야 할 설정은? □ 내 컴퓨터에서 코드를 수정했는데 배포된 사이트가 안 바뀝니다. 무엇을 빠뜨렸을까요?

정답 보기
  1. 에러 로그를 복사해서 AI에게 물어보고, 코드를 수정해서 다시 Push 한다.
  2. Supabase의 URL Configuration (Site URL) 설정.
  3. Git Push (GitHub에 올려야 Vercel이 가져갑니다).

다음 글 예고

고생 많으셨습니다! 👏 지금까지 기획 → 설계 → 구현 → 배포까지, 하나의 웹 서비스를 만드는 전 과정을 경험하셨어요. 이제 "시키면 만드는" 단계는 마스터하신 겁니다.

다음 PART 6부터는 차원이 달라집니다. 여러분이 직접 아이디어를 내고, 내 일상을 편하게 만드는 **'자동화(Automation)'**의 세계로 들어갑니다.

"내가 자는 동안 AI가 뉴스를 요약해서 카톡으로 보내준다면?" 이런 상상을 현실로 만드는 법, **[25편: 자동화 아이디어 발굴]**에서 시작합니다.

이 시리즈 로드맵

PART 5: 첫 프로젝트 - 웹 서비스 (완료!) 🏆
[ 21편 ] 기획과 아키텍처 ✅
[ 22편 ] 프론트엔드 구조 ✅
[ 23편 ] 백엔드 연결 ✅
[ 24편 ] 배포하기 (Clear!)

   ↓

PART 6: 두 번째 프로젝트 - 자동화 🤖
[ 25편 ] 자동화 아이디어 (다음 편)
   ↓
[ 26편 ] 기술 스택 선정
   ...

여러분의 첫 배포 주소를 댓글로 남겨주세요! 서로 방문해서 응원해줍시다!