Phase 99-3

Vercel 배포

만든 웹사이트를 GitHub에 올리고 Vercel을 통해 자동 배포하여 전 세계에 공개하는 방법과 도메인 설정을 배웁니다.

이 강의 학습 완료미완료

Execution Kit

실습 중 막히지 않기 위한 진행표

Phase 9

준비

강의 전 현재 폴더, 계정, 설치 상태를 확인합니다.

실행

배포는 내 컴퓨터에 있는 웹사이트를 인터넷에 공개하는 과정입니다.

검증

명령 결과, 파일 변화, 브라우저 화면 중 하나로 성공 여부를 확인합니다.

기록

잘 된 명령과 막힌 지점을 다음 실습을 위한 로그로 남깁니다.

막혔을 때 Claude Code에 붙여넣을 양식

나는 코딩 경험이 많지 않은 실무자입니다. "Vercel 배포" 강의를 따라 하고 있습니다.

현재 상태:
- 사용하는 컴퓨터:
- 방금 실행한 명령:
- 화면에 나온 결과 또는 오류:
- 내가 만들고 싶은 업무 결과물:

요청:
1. 지금 상황을 초보자 기준으로 진단해줘.
2. 다음에 실행할 명령을 한 줄씩 제시해줘.
3. 각 명령이 무엇을 하는지 쉬운 말로 설명해줘.
4. 성공 여부를 확인할 체크 포인트를 정리해줘.
5. 실패하면 다시 붙여넣을 오류 보고 양식을 만들어줘.

배포란 무엇인가요?

지금까지 만든 웹사이트는 내 컴퓨터에서만 볼 수 있습니다. 이것을 인터넷에 올려서 누구나 접속할 수 있게 만드는 과정을 '배포(deploy)'라고 합니다. 노무사 업무에 비유하면, Vercel은 인터넷이라는 건물에 우리 사무실 간판을 거는 것과 같습니다. 사무실(웹사이트)을 아무리 잘 꾸며놓아도, 간판이 없으면 의뢰인이 찾아올 수 없겠죠. Vercel이 그 간판을 달아줍니다. [기존 방식] 웹사이트 호스팅에 월 수만 원의 서버비가 들고, 서버 관리·보안 업데이트까지 신경 써야 했습니다. [AI 자동화] Vercel 무료 배포로 서버비 0원. git push 한 번이면 자동 업데이트됩니다. Vercel은 Next.js를 만든 회사에서 운영하는 배포 서비스로, GitHub에 코드를 올리면 자동으로 웹사이트가 배포됩니다. 무료 플랜으로도 충분히 사용할 수 있습니다.

GitHub Push에서 자동 배포까지

먼저 GitHub에 대해 간단히 알아보겠습니다. GitHub는 코드의 변경 이력을 관리하는 서비스입니다. 노무사 업무에 비유하면 취업규칙 개정 이력 관리와 같습니다. 어떤 조항을 누가 언제 바꿨는지, 이전 버전은 어땠는지 기록이 남는 것처럼, GitHub에는 코드의 모든 변경 기록이 남습니다. 배포 과정은 세 단계입니다. 첫째, GitHub에 내 프로젝트를 올립니다(push). 둘째, Vercel 사이트(vercel.com)에서 GitHub 계정을 연결합니다. 셋째, 배포할 프로젝트를 선택하면 자동으로 배포됩니다. 한 번 연결해 놓으면 이후에는 코드를 수정하고 GitHub에 push할 때마다 자동으로 새 버전이 배포됩니다. Claude Code에게 수정을 요청하고, 수정된 코드를 GitHub에 올리기만 하면 웹사이트가 자동으로 업데이트되는 것입니다. 마치 취업규칙을 개정한 뒤 노동부에 신고하면 새 버전이 적용되는 것과 비슷합니다.

# 1. GitHub에 코드 올리기
git add .
git commit -m "한동노무법인 웹사이트 초기 버전"
git push origin main

# 2. Vercel에서 프로젝트 연결
#    → vercel.com 접속
#    → Import Git Repository
#    → GitHub 저장소 선택
#    → Deploy 클릭

# 3. 배포 완료!
#    → https://handong-website.vercel.app
#    같은 주소가 자동 생성됩니다

나만의 도메인 설정

Vercel이 자동으로 만들어주는 주소(예: handong-website.vercel.app)를 사용해도 되지만, 전문적인 느낌을 위해 자체 도메인(예: handong-labor.co.kr)을 연결할 수 있습니다. 도메인 등록 업체(가비아, 카페24 등)에서 원하는 도메인을 구입한 뒤, Vercel 프로젝트 설정에서 도메인을 추가하고, 도메인 등록 업체에서 DNS 설정을 변경하면 됩니다. 이 과정이 어렵게 느껴지셔도 괜찮습니다. Claude Code에게 '내 도메인을 Vercel에 연결하는 방법을 단계별로 알려줘'라고 요청하면 상세히 안내받을 수 있습니다.

TIP: 처음에는 Vercel이 제공하는 무료 주소로 시작하고, 웹사이트가 완성된 후에 도메인을 구입하셔도 늦지 않습니다.

핵심 정리

✓배포는 내 컴퓨터에 있는 웹사이트를 인터넷에 공개하는 과정입니다.
✓GitHub에 코드를 push하면 Vercel이 자동으로 배포해 줍니다.
✓자체 도메인을 연결하면 전문적인 웹사이트 주소를 가질 수 있습니다.

이 강의가 어떠셨나요?

← 이전 강의 다음 강의 →