공식 웹사이트 무료 호스팅: Cloudflare Pages와 Cafe24 도메인 연동 가이드

---

공식 웹사이트 무료 호스팅: Cloudflare Pages와 Cafe24 도메인 연동 가이드

1. 서론

Cloudflare Pages는 정적 웹사이트를 쉽고 무료로 배포할 수 있는 플랫폼이다. 본 글은 Cafe24에서 유료로 구입한 도메인 네임을 Cloudflare Pages에 연동하여, 추가적인 호스팅 비용 없이 웹사이트를 운영하는 방법에 대해 단계별로 안내하는 것을 목적으로 한다.

---

1-1. 개요 및 준비 사항

Cloudflare Pages와 Cafe24 도메인을 연동하기 위해 필요한 주요 준비 사항 및 과정은 다음과 같다.

• Cloudflare 계정 및 Pages 프로젝트 배포 완료
  • Cloudflare에 가입한 후 Pages 프로젝트를 생성하고 정적 사이트 프레임워크(예: Next.js, React, Hexo, Hugo 등)를 사용하여 최초 배포를 완료해야 한다.
• Cafe24에서 도메인 구입 및 관리 권한 보유
  • Cafe24 홈페이지에서 원하는 도메인을 구매하고 관리자 권한을 확보해야 한다.
• 도메인 연동 전 사전 점검 사항
  • Cloudflare Pages 프로젝트의 정상 작동 여부 및 Cafe24 도메인 관리자 페이지 접근 가능 여부를 확인해야 한다.

1-1-1. 용어 정리

• Cloudflare Pages: HTML, CSS, JavaScript 등 정적 파일 호스팅에 최적화된 클라우드 서비스이며, CI/CD를 지원한다.
• Cafe24: 도메인 구입, 웹호스팅, 쇼핑몰 솔루션 등 인터넷 비즈니스 인프라를 제공하는 국내 업체이다.

---

2. Cloudflare Pages에 프로젝트 배포

2-1. 프로젝트 생성 및 빌드

Cloudflare Pages 프로젝트는 일반적으로 GitHub나 GitLab과 같은 Git 저장소와 연동하여 생성된다.

• GitHub 저장소 연동 및 Pages 프로젝트 생성
  • Cloudflare Pages 대시보드에서 'Create a Project'를 선택해야 한다.
  • GitHub 또는 GitLab 저장소를 연결하고 프레임워크 선택, 빌드 명령어, 출력 디렉토리 등의 빌드 설정을 구성해야 한다.
• 빌드 및 배포 성공 여부 확인
  • 빌드 완료 후, Cloudflare에서 제공하는 임시 URL을 확인해야 한다. 예시는 https://your-project.pages.dev와 같은 형식이다.

2-1-1. 테스트 접속 및 기본 URL 확인

• 제공된 *.pages.dev 형태의 기본 URL로 웹사이트에 접속하여, 콘텐츠가 정상적으로 표시되는지 테스트해야 한다. 이 주소는 커스텀 도메인 연결 전까지 유효한 접근 경로이다.

---

3. Cafe24 도메인과 Cloudflare Pages 연동

유료로 구입한 Cafe24 도메인으로 Cloudflare Pages 웹사이트에 접속할 수 있도록 DNS 설정을 변경하는 과정이다.

3-1. 도메인 연결 준비

• Cloudflare Pages의 도메인 연결 메뉴 진입
  • Pages 프로젝트 대시보드에서 "Custom Domains" 탭을 선택하고 "Add custom domain" 버튼을 눌러야 한다.
  • 연결하고자 하는 도메인 네임(예: yoursite.com)을 입력하고 다음 단계로 진행해야 한다. (나의 경우 yoursite.com와 www.yoursite.com 2개의 도메인을 추가 및 활성했다.)
• Cafe24 관리 콘솔 접속
  • Cafe24 홈페이지에 로그인 후, 도메인 관리 메뉴로 접속해야 한다.

3-1-1. 도메인 연결 절차 개요

Cafe24 도메인을 Cloudflare Pages에 연결하는 주요 방식은 네임서버를 변경하는 권장 방식(3-2절)과 DNS 레코드를 직접 수정하는 대안 방식(3-3절)이 있다.

3-2. 네임서버(NS) 변경 (권장 방식)

네임서버를 Cloudflare로 변경하면, 해당 도메인의 모든 DNS 레코드 관리를 Cloudflare에서 수행하게 되므로, Pages 연동 및 향후 관리에 가장 효율적인 방식이다.

• Cloudflare 네임서버 정보 확인
  • Cloudflare 도메인 연결 과정에서 할당된 1차, 2차 네임서버 주소를 메모해야 한다.
  • 예시는 kristin.ns.cloudflare.com, marty.ns.cloudflare.com과 같은 형식이다.
• Cafe24 관리자 페이지에서 네임서버 변경 메뉴로 이동
  • 로그인 후 '나의 서비스관리'에서 '도메인 관리'를 거쳐 '네임서버 변경' 메뉴로 이동해야 한다.
• 1, 2차 네임서버에 Cloudflare 정보 입력 및 저장
  • 기존 Cafe24 네임서버를 삭제하고 Cloudflare에서 확인한 네임서버 주소로 덮어쓰기하여 저장해야 한다.
• 네임서버 전파 대기
  • 네임서버 정보가 전 세계 인터넷에 반영되는 전파(Propagation) 기간이 필요하다. 이 기간은 보통 몇 시간이 소요되나, 최대 24시간에서 48시간까지 걸릴 수 있다.

3-2-1. 네임서버 변경 시 주의사항

• 네임서버 주소 입력 시 오탈자 여부를 반드시 검증해야 한다.
• 변경 전에 기존 Cafe24 네임서버 주소 및 DNS 설정 내용을 백업하는 것이 바람직하다.
• 전파 기간 동안 웹사이트 접속이 일시적으로 불안정하거나 중단될 수 있다.

3-3. DNS 레코드 직접 추가 (대안)

Cafe24의 네임서버를 유지해야 하는 특별한 상황(예: 메일 서버 등 다른 서비스와의 종속성)에서는 DNS 레코드를 직접 추가하여 도메인을 연결할 수 있다.

• Cafe24에서 DNS 레코드 직접 수정 선택
  • Cafe24 DNS 관리 메뉴로 이동하여 A 레코드와 CNAME 레코드 추가 옵션을 선택해야 한다.
• Cloudflare Pages에서 제시된 정보 정확하게 입력
  • Cloudflare Pages Custom Domains 설정 화면에서 제시되는 값들을 확인하여 Cafe24에 등록해야 한다.
  • 예시로, www 서브 도메인은 프로젝트에서 제공하는 .pages.dev 주소로 연결하는 CNAME 레코드를 추가하고, 루트 도메인(@)은 Cloudflare가 요청하는 특정 A 레코드 또는 CNAME 값으로 연결해야 한다.

---

4. 연결 및 활성화 확인

4-1. 최종 점검

• Cloudflare 대시보드에서 도메인 연결 상태 확인
  • Cloudflare Pages 프로젝트의 "Custom Domains" 탭을 확인해야 한다.
  • 상태(Status)가 'Active'로 변경되면 정상적으로 연결이 완료된 것이다.
• HTTPS(SSL) 자동 적용 및 무료 인증서 발급 확인
  • Cloudflare는 도메인 연결과 동시에 무료 SSL 인증서를 자동으로 발급하고 HTTPS 접속을 활성화한다.
• 실제 도메인으로 접속 테스트
  • 웹 브라우저에서 직접 구매한 도메인(예: https://yoursite.com)에 접속하여 웹사이트의 정상 작동 여부를 확인해야 한다.

4-1-1. 문제 발생 시 점검 방법

• 네임서버 전파 상태 확인: 변경 후 48시간이 경과했는지 확인해야 한다.
• 입력 정보 재점검: 네임서버 주소(3-2절) 또는 DNS 레코드 값(3-3절)에 오탈자가 없는지 다시 확인해야 한다.
• Cloudflare/Cafe24 설정값 확인: 양쪽 플랫폼의 설정이 Cloudflare의 안내와 일치하는지 교차 점검해야 한다.

---

5. 비용 및 관리

5-1. 비용 구조 및 핵심 비교

Cloudflare Pages와 Cafe24 연동 시 발생하는 비용 구조에 대한 분석은 다음과 같다.

5-1-1. Cloudflare Pages Free Plan의 주요 특징

• 도메인 연결: 단일 프로젝트당 최대 100개의 커스텀 도메인 무료 연결이 가능하다.
• 정적 사이트 호스팅: 정적 파일(HTML, CSS, JS 등) 호스팅 및 전송이 무료로 제공되며, 무제한 사이트, 요청, 대역폭을 지원한다.
• SSL/HTTPS: 도메인 연결 후 무료 SSL/TLS 인증서가 자동 발급되어 HTTPS 접속이 무료이다.
• CI/CD 빌드: 월 500회의 빌드가 허용되며, 이는 대부분의 개인 프로젝트 운영에 충분한 횟수이다.

5-1-2. Cafe24 관련 비용

• 도메인 구매 및 갱신: 도메인 등록 업체인 Cafe24에 도메인 등록 및 연간 갱신 비용이 계속해서 발생한다. 이 비용은 도메인 종류와 정책에 따라 상이하며, Cloudflare 연동 여부와는 무관하게 도메인 소유를 위해 필수적으로 지불해야 하는 비용이다.

---

6. 복구 및 매뉴얼 롤백

6-1. Cafe24로 네임서버 복귀 절차

향후 다른 호스팅 환경으로 이전하거나 Cafe24 호스팅을 사용하고자 할 경우, 언제든지 네임서버를 Cafe24의 기본 설정으로 되돌릴 수 있다.

• Cafe24 관리 콘솔에서 네임서버 복귀
  • Cafe24에 로그인하여 '나의 서비스관리'에서 '도메인 관리'를 거쳐 '네임서버 변경' 메뉴로 이동해야 한다.
  • Cloudflare 네임서버를 삭제하고 Cafe24의 기본 네임서버 주소(또는 사용하고자 하는 호스팅 업체의 네임서버)로 다시 입력해야 한다.
• DNS 레코드 재설정 필요
  • 네임서버 복귀 후에는 Cafe24 관리자 페이지에서 웹호스팅, 메일 등 서비스 목적에 맞는 DNS 레코드를 수동으로 재설정해야 한다.

---