빌딩 인 퍼블릭: 10일차 - 첫 프로덕션 배포

로컬에서는 완벽한데…

9일차에 노트북에서 웹사이트가 완벽하게 돌아가는 걸로 끝났습니다. 스토리 둘러보고, 선택지 고르고, 성격 결과까지 다 봤어요. 로컬 개발 서버에 연결하면 휴대폰에서도 잘 보였고요.

근데 저밖에 못 봤습니다. 아직 제 컴퓨터에서만 돌아가고 있었거든요.

진짜 도메인에 배포해야 했습니다: whatifclassics.com

GitHub 저장소부터

먼저 버전 관리가 필요했어요. GitHub 저장소를 만들었습니다:

cd whatif-classics
git init
git add .
git commit -m "Initial commit: Astro website with Jekyll & Hyde story"

GitHub에 whatif-classics 저장소 만들고 푸시했어요:

git remote add origin https://github.com/[username]/whatif-classics.git
git push -u origin main

코드가 GitHub에 올라갔습니다. 빌딩 인 퍼블릭 철학에 따라 퍼블릭 레포로 만들었어요.

배포는 Vercel로 결정

호스팅 선택지가 몇 개 있었습니다:

• GitHub Pages (무료지만 제한적)
• Netlify (정적 사이트에 괜찮음)
• Vercel (모던 프레임워크에 최적화)

Vercel을 골랐어요:

• 무료 티어가 넉넉함
• GitHub 연동하면 자동 배포
• Astro 네이티브 지원
• 커스텀 도메인 설정 쉬움

GitHub 계정으로 Vercel 가입했습니다.

저장소 연결

Vercel 대시보드에서 “New Project” 클릭하고 whatif-classics 저장소를 선택했어요.

Vercel이 자동으로 Astro 프로젝트라는 걸 인식하더라고요. 빌드 설정도 미리 채워져 있었습니다:

• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install

아무것도 안 건드리고 그냥 “Deploy” 클릭했습니다.

첫 배포 시도

Vercel이 프로젝트 빌드를 시작했어요. 빌드 로그 스크롤되는 거 지켜봤습니다:

Installing dependencies...
Building Astro site...

그리고 터졌습니다.

에러 메시지: Error: Failed to load story data

또 파일 경로 문제였어요. 로컬에선 스토리 JSON이 public/stories/에 있었는데, Vercel 빌드 프로세스는 다른 위치를 기대하고 있었던 거죠.

Astro 페이지에서 스토리 데이터 로드하는 방식을 손봐야 했습니다. 로컬이든 프로덕션이든 다 먹히는 절대 경로로 바꿨어요.

// 이전 (로컬에서만 작동)
const storyData = await fetch('./jekyll-and-hyde.json')

// 수정 (어디서든 작동)
const storyData = await fetch('/stories/jekyll-and-hyde/jekyll-and-hyde.json')

GitHub에 푸시했더니 Vercel이 자동으로 감지하고 새 빌드 시작하더라고요.

두 번째 배포: 성공

이번엔 빌드 성공.

Vercel이 임시 URL 줬습니다: whatif-classics.vercel.app

열었어요. 홈페이지 로드됨. 지킬 박사와 하이드 클릭. 스토리 시작. 선택지 몇 개 골랐습니다. 엔딩 도달.

됐습니다. 웹사이트가 인터넷에 떴어요.

커스텀 도메인 연결

근데 사람들한테 vercel.app로 오라고 할 순 없잖아요. 5일차에 이미 whatifclassics.com 사놨습니다.

Vercel 프로젝트 설정에서 커스텀 도메인 추가했어요:

• whatifclassics.com
• www.whatifclassics.com

Vercel이 DNS 레코드 알려줬습니다. Cloudflare(도메인 산 곳)에 추가하라고:

A record: @ → 76.76.21.21
CNAME: www → cname.vercel-dns.com

Cloudflare DNS 관리에서 레코드 추가했습니다.

진짜 테스트

휴대폰 꺼내서 WiFi 끄고, 모바일 데이터로 입력했어요: whatifclassics.com

사이트가 떴습니다. 빠르게. 이미지 뜨고. 모바일 데이터로 지킬 박사와 하이드 스토리 끝까지 플레이했어요.

다 작동했습니다.

저 말고 다른 사람이 What If Classics에 처음 접속할 수 있게 된 순간이었어요. 이제 URL만 있으면 누구든 인터랙티브 스토리 플레이 가능합니다.

현실이 된 순간

지금까지는 전부 이론이었어요. JSON 파일, Python 스크립트, 로컬 개발 서버.

근데 인터넷으로, 진짜 도메인에서, 휴대폰에 whatifclassics.com 떠 있는 거 보니까—그때 실감났습니다.

이제 진짜 웹사이트네요. 프로토타입 아니고. 개발 환경 아니고. 인터넷에 존재하는 실제 제품.

다음 단계

웹사이트는 돌아가는데 아직 할 게 많습니다:

• 디자인 여전히 날것 (스타일링 전무)
• 스토리팩 하나뿐 (지킬 박사와 하이드만)
• 한국어 버전 아직 배포 안 함
• 소셜 공유 기능 없음

하지만 인프라는 다 갖춰졌어요. 코드는 GitHub에, 호스팅은 Vercel에, 커스텀 도메인 연결됨. GitHub에 푸시하면 자동으로 배포됩니다.

이제 디자인 작업하고 스토리 늘리는 데 집중할 수 있겠네요.

다음 편에서 계속…