본문 바로가기

  • 교재 소개

  • 5장 바이브 코딩을 위한 GitHub

  • 5.5 커스텀 도메인 연결 상세

커스텀 도메인 연결 상세

1. 도메인 구매하기

이 장에서는 나만의 도메인을 구매하고 GitHub Pages와 연결하는 방법을 다룹니다. 도메인 구매부터 DNS 설정, GitHub 연동까지 전 과정을 따라해 볼 수 있습니다. 이 절에서는 Code 탭을 쓰지 않습니다. 모두 웹 화면에서 클릭으로 진행합니다.

앞서 살펴본 cafe24에서 도메인을 구매하도록 하겠습니다. 물론 여러 글로벌 서비스를 선택할 수도 있지만, 가장 쉽고, 모르면 전화로 물어보고 해결할 수 있는 한국 업체를 선택했습니다. 가비아도 괜찮습니다.

vibecoding과 관련된 거의 모든 도메인은 매진이 되었기 때문에 vibejeju라는 도메인을 구매하도록 하겠습니다.

Cafe24에서 vibejeju를 검색한 결과 화면입니다.

선택한 다음 도메인 신청하기 버튼을 누릅니다. URL이 맞는지 꼭 확인하세요.

원하는 도메인을 선택하고 도메인 신청하기 버튼을 누르는 화면입니다.

여러 약관에 동의하는 창이 뜹니다. 개인정보 수집 동의를 하고 해당 정보를 모두 입력합니다. 생각보다 입력해야 할 사항이 많습니다.

약관 동의와 신청자 정보를 입력하는 화면입니다.

구매를 위해서는 인증번호 인증까지 해야 합니다.

모든 구매가 완료되었습니다. 참고로 여기 나와있는 것처럼 신청은 1년만 하였습니다. 여러분이 이 책을 보실 때에는 도메인이 사라졌을 수도 있습니다. 참고 바랍니다. 나의 서비스 관리로 이동을 클릭해주세요. 여기서 도메인 관리를 클릭하면 됩니다.

도메인 관리에서 DNS 관리를 클릭하면 됩니다. 꼭 cafe24가 아니더라도 DNS 관리 메뉴는 있습니다.

선택한 다음 DNS관리를 클릭해주세요.

아래 목록에서 A 레코드 관리, CNAME 관리 2개를 바꾸시면 됩니다. 이러한 관리 항목은 다른 서비스에서도 동일하게 나오는 항목입니다.

DNS 관리 화면에 A 레코드 관리와 CNAME 관리 항목이 보입니다.

앞서 설명한 것처럼 A 레코드는 도메인을 IP 주소와 연결하고, CNAME 레코드는 도메인을 다른 도메인과 연결하는 항목입니다. 우선 A 레코드 관리에 들어가서 A 레코드 추가를 누르고 185.199.108.153를 입력합니다. 이 IP 주소는 GitHub의 IP 주소입니다.

A 레코드 추가 창에 GitHub의 IP 주소를 입력하는 화면입니다.

확인 누르시면 됩니다.

입력한 A 레코드를 확인 버튼으로 저장하는 화면입니다.

등록이 완료된 것을 알 수 있습니다.

A 레코드 목록에 방금 추가한 GitHub IP 주소가 등록되어 있습니다.

자, 이제 별칭으로 들어가 보겠습니다. CNAME 추가가 있는데 이걸 클릭해주세요.

CNAME 관리 화면에서 CNAME 추가 버튼을 누르는 화면입니다.

CNAME은 별칭을 정하는 것인데요. 예를 들어 여기에다 여러 도메인을 설정할 수 있습니다. 제가 vibejeju.co.kr을 구매했으므로 아래와 같은 URL은 모두 무료로 등록할 수 있습니다.

  • a.vibejeju.co.kr → 실제로는 위니브 페이지
  • b.vibejeju.co.kr → 실제로는 위니버시티 페이지
  • c.vibejeju.co.kr → 실제로는 위니빌리지 페이지

여기서 위니브, 위니버시티, 위니빌리지는 다 다른 서비스입니다. 이렇게 CNAME을 통해 여러 서비스를 하나의 도메인 범주 안에 묶을 수 있어요. 예를 들면 아래와 같습니다.

아래 페이지는 위니브 페이지입니다.

아래 페이지는 바이브 코딩 부트캠프 페이지입니다.

위에 서비스는 사내서버로 구동되고 있고 아래 서비스는 GitHub Pages로 배포한 서비스입니다. 이렇게 하나의 URL을 구매하여 여러 개를 연결하는 것도 가능합니다.

자, 이제 GitHub에서 연동 설정으로 지정하고 있는 아래 설정을 하도록 하겠습니다. 여기에는 paullabkorea라고 되어 있지만, 여러분은 여러분아이디.github.io의 형태로 넣어주시면 됩니다.

CNAME 추가 창에 여러분아이디.github.io 형태의 값을 입력하는 화면입니다.

등록이 다 된 것을 확인했습니다.

CNAME 목록에 방금 추가한 별칭이 등록되어 있습니다.

이제 cafe24에서 더 할 일은 없습니다. GitHub으로 가보도록 하겠습니다. 저장소의 Settings > Pages 화면에서 Custom domain에 www.vibejeju.com이라는 도메인을 넣고 Save를 클릭하면 됩니다.

GitHub Pages 설정의 Custom domain 칸에 구매한 도메인을 입력하고 저장하는 화면입니다.

이렇게 연결이 된 다음 20분 ~ 30분 기다리면 Enforce HTTPS 옵션이 활성화되는데 이 옵션을 활성화하시길 권해드립니다. HTTPS는 주소창에 자물쇠가 붙는 안전한 연결 방식으로, 요즘 브라우저는 이 설정이 없으면 '안전하지 않음'이라는 경고를 띄웁니다.

DNS 설정이 확인되면 Enforce HTTPS 옵션을 켤 수 있게 됩니다.

이제 우리 서비스는 아래 URL에서 접속 가능합니다.

이전에 접속했던 URL도 접속해보겠습니다. 아래 도메인입니다. 접속해보면 바로 vibejeju.co.kr로 연결되는 것을 보실 수 있습니다.

연결이 끝났으면 확인할 것이 두 가지 있습니다. 새 도메인으로 들어갔을 때 페이지 안의 링크와 이미지가 모두 열리는지, 그리고 휴대폰에서도 같은 주소로 열리는지입니다. 30분이 지나도 '사이트에 연결할 수 없음'이 뜬다면 DNS가 아직 퍼지지 않은 것이니 조금 더 기다리고, 한 시간이 넘어도 그대로면 cafe24의 A 레코드 값에 오타가 없는지 다시 확인해 보세요.