배포

축하합니다! 홈페이지가 거의 완성되었습니다. 이제 마지막 단계입니다. 지금까지 만든 것은 내 컴퓨터에서만 보입니다. 이것을 인터넷에 올려서 전 세계 누구나 볼 수 있게 만드는 것을 배포라고 합니다.

GitHub에 코드 올리기

먼저 코드를 GitHub에 올립니다. 환경 설정 편에서 GitHub 계정을 만들었던 것 기억나시죠?

터미널에서 아래 명령어를 한 줄씩 입력합니다:


git add .

"모든 파일을 준비해줘" — 변경된 파일들을 포장합니다


git commit -m "우리 가게 홈페이지 완성"

"이 상태를 저장해줘" — 현재 상태를 기록합니다


git push

"인터넷에 올려줘" — GitHub에 업로드합니다

처음 git push를 하면 GitHub 로그인을 요청할 수 있습니다. 화면의 안내에 따라 로그인하면 됩니다.

혹시 에러가 나면 당황하지 마세요. 에러 메시지를 복사해서 AI에게 보여주면 해결 방법을 알려줍니다.

Vercel은 우리가 만든 웹사이트를 인터넷에 올려주는 서비스입니다. 환경 설정 편에서 가입했던 것 기억나시죠?

배포가 끝나면 이런 주소가 생깁니다:


https://my-cafe-xxxxx.vercel.app

이 주소로 접속하면 전 세계 어디서든 여러분의 홈페이지를 볼 수 있습니다!

my-cafe-xxxxx.vercel.app 대신 bomnal-cafe.com 같은 나만의 주소를 쓰고 싶다면 도메인을 구매해야 합니다.

도메인 구매처	가격 (1년)	비고
가비아 (gabia.com)	약 15,000원~	한국에서 가장 많이 사용
호스팅케이알	약 12,000원~	가격이 저렴한 편

도메인을 구매한 후 Vercel 설정에서 연결할 수 있습니다:

도메인 연결이 어렵게 느껴지면 나중에 해도 됩니다. Vercel에서 제공하는 무료 주소로도 충분히 사용할 수 있습니다.

완성된 홈페이지를 카카오톡에서 공유하면 미리보기 카드가 나타납니다. 이것이 앞에서 설정한 메타 태그(og:image, title, description) 덕분입니다.

홈페이지 주소를 카카오톡 대화방에 붙여넣기 해보세요:

미리보기가 안 보이거나 이상하게 나오면 AI에게 물어보세요:

"카카오톡 공유 미리보기가 제대로 안 나와. og 메타 태그 확인해줘"

배포한 후에도 언제든 수정할 수 있습니다:


git add .
git commit -m "메뉴 가격 수정"
git push

Vercel이 자동으로 감지해서 1~2분 안에 새 버전을 배포합니다. 별도로 Vercel에 접속할 필요가 없습니다.

여러분의 첫 번째 웹사이트가 인터넷에 올라갔습니다!

지금까지 한 일을 정리하면:

이 모든 것을 AI와의 대화만으로 만들었습니다. 코드를 직접 쓰지 않았는데도 실제로 작동하는 웹사이트가 완성되었습니다. 이것이 바이브 코딩의 힘입니다.

다음 프로젝트에서는 여기에 예약 시스템을 추가합니다. 고객이 직접 날짜와 시간을 선택해서 예약하고, 여러분에게 알림이 오는 기능을 만들 것입니다.