6-8. 배포와 운영
세상에 공개하기
예약 시스템이 완성되었습니다! 이제 인터넷에 배포해서 실제로 사용해봅시다.
고객에게 예약 링크를 보내고, 진짜 예약을 받을 수 있게 됩니다.
Vercel에 배포하기
Part 4에서 첫 번째 프로젝트를 배포한 경험이 있으니, 이번에는 더 쉽습니다.
| 단계 | 할 일 |
|---|---|
| 1 | GitHub에 코드를 올립니다 (push) |
| 2 | Vercel 대시보드에서 새 프로젝트를 연결합니다 |
| 3 | 환경 변수를 설정합니다 (이번에는 이것이 중요!) |
| 4 | 배포 완료 → 주소 받기 |
환경 변수 설정 (중요!)
이번 프로젝트는 Supabase, 이메일, 텔레그램을 사용하므로 환경 변수 설정이 필수입니다.
Vercel 대시보드에서 Settings → Environment Variables 로 이동합니다.
| 변수 이름 | 값 | 설명 |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL |
Supabase URL | 데이터베이스 주소 |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase 키 | 데이터베이스 접근 키 |
RESEND_API_KEY |
Resend API 키 | 이메일 발송용 (사용 시) |
TELEGRAM_BOT_TOKEN |
텔레그램 봇 토큰 | 텔레그램 알림용 (사용 시) |
TELEGRAM_CHAT_ID |
채팅방 ID | 텔레그램 알림용 (사용 시) |
.env.local파일의 내용을 그대로 Vercel에 옮겨 넣으면 됩니다.
.env.local파일 자체는 GitHub에 올라가지 않습니다. 그래서 Vercel에 따로 설정하는 것입니다.
실제 예약 테스트
배포가 완료되면 실제로 테스트해봅시다:
- Vercel이 제공한 주소로 접속합니다 (예:
https://my-reservation.vercel.app) - 예약 폼에 본인 정보로 테스트 예약을 합니다
- 확인 화면이 나타나는지 확인합니다
- Supabase 대시보드에서 데이터가 저장되었는지 확인합니다
- 이메일/텔레그램 알림이 왔는지 확인합니다
- 관리자 페이지(
/admin)에서 예약이 보이는지 확인합니다 - 예약 확인/취소 버튼이 작동하는지 확인합니다
모든 단계가 성공하면, 진짜 운영할 수 있는 예약 시스템이 완성된 것입니다!
예약 링크 공유하기
이제 고객에게 예약 페이지 링크를 공유할 수 있습니다:
| 공유 방법 | 예시 |
|---|---|
| 카카오톡으로 전송 | "예약은 이 링크에서 해주세요: https://..." |
| 인스타그램 프로필 | 프로필 링크에 예약 주소 추가 |
| 네이버 블로그 | 블로그 글에 예약 링크 포함 |
| 명함/전단지 | QR코드로 변환해서 인쇄 |
| 매장 안내문 | 테이블 위에 QR코드 배치 |
QR코드 무료 생성: qr-code-generator.com 에서 링크를 붙여넣으면 됩니다.
실제 운영 팁
예약 시스템을 운영할 때 도움이 되는 팁들입니다:
| 팁 | 설명 |
|---|---|
| 매일 아침 확인 | 출근하면 관리자 페이지에서 오늘 예약을 확인하세요 |
| 빠른 응답 | 새 예약이 들어오면 가능한 빨리 확인 처리를 하세요 |
| 전화 확인 | 중요한 예약은 전화로 한 번 더 확인하면 좋습니다 |
| 노쇼 관리 | 예약 후 안 오는 고객은 메모해두세요 |
| 정기 백업 | Supabase가 자동 백업하지만, 가끔 엑셀로 내보내기도 해두세요 |
다음에 추가할 수 있는 기능들
기본 시스템이 잘 돌아가면, 하나씩 기능을 추가해볼 수 있습니다:
| 기능 | 설명 | 난이도 |
|---|---|---|
| 나만의 도메인 | reservation.내가게.com |
쉬움 |
| 방문자 통계 | 얼마나 많은 사람이 접속했는지 | 쉬움 |
| 관리자 비밀번호 | 관리자 페이지에 로그인 기능 | 보통 |
| 예약 리마인더 | 방문 전날 알림 보내기 | 보통 |
| 시간대별 제한 | 같은 시간에 예약 수 제한 | 보통 |
| 후기 시스템 | 방문 후 후기 작성 기능 | 보통 |
이 기능들은 모두 AI에게 요청해서 만들 수 있습니다.
한 번에 다 만들려고 하지 말고, 필요할 때 하나씩 추가하세요.
여기까지 오신 것을 축하합니다!
Part 5와 Part 6을 통해 여러분은:
- 데이터베이스의 개념을 이해했습니다
- Supabase로 테이블을 만들고 데이터를 관리했습니다
- 웹사이트와 데이터베이스를 연결했습니다
- 예약 폼을 만들고 데이터를 저장했습니다
- 관리자 페이지로 예약을 관리했습니다
- 이메일과 텔레그램 알림을 설정했습니다
- 실제로 배포하고 운영할 수 있게 되었습니다
코드를 한 줄도 직접 쓰지 않아도, AI와 함께 실제로 작동하는 예약 시스템을 만들었습니다.
이것이 바로 바이브 코딩의 힘입니다.
이 절의 요약
- Vercel에 배포할 때 환경 변수(Supabase 키, API 키 등)를 반드시 설정해야 합니다
- 배포 후 전체 과정을 처음부터 끝까지 테스트합니다
- QR코드를 만들어 고객에게 예약 링크를 공유할 수 있습니다
- 매일 확인, 빠른 응답이 좋은 운영의 기본입니다
- 기능은 필요할 때 하나씩 AI에게 요청해서 추가하세요