2026년에 GitHub Pages, Cloudflare Pages로 정적 웹사이트를 무료로 호스팅하는 방법 (문의 양식 포함)

올바른 정적 웹사이트 호스팅 플랫폼을 선택하면 연간 수십만 원을 절약하면서도 빠르고 안전하며 유지 관리가 쉬운 사이트를 운영할 수 있어요. 무료 티어 옵션은 이미 충분히 성숙해졌고, GitHub Pages나 Cloudflare Pages 같은 플랫폼은 완전히 무료로 프로덕션 수준의 인프라를 제공해요. 그런데 대부분의 튜토리얼이 그냥 넘어가는 문제가 하나 있어요. 서버가 없는 정적 사이트에서 문의 폼을 어떻게 처리하느냐는 거예요. 이 가이드에서는 플랫폼 선택부터 실제로 작동하는 문의 폼 연동까지, 구체적인 예시와 함께 꼭 알아야 할 실제 제약 사항을 포함해 전체 설정 과정을 안내해 드릴게요.

무료 정적 호스팅에 주목해야 하는 이유

정적 웹사이트는 미리 빌드된 HTML, CSS, JavaScript 파일을 브라우저에 직접 제공해요. PHP도 없고, Node.js 런타임도 없으며, 페이지를 불러올 때마다 데이터베이스 쿼리가 발생하지도 않아요. 바로 이 단순함 덕분에 무료 정적 페이지 호스팅이 이렇게 안정적인 거예요. 충돌하거나 패치하거나 스케일링할 대상 자체가 없으니까요.

소규모 비즈니스 사이트, 포트폴리오, SaaS 랜딩 페이지, 문서 사이트에 정적 호스팅이 딱 맞는 이유는 다음과 같아요:

• 속도: CDN 엣지 노드에서 파일을 제공하기 때문에 전 세계 어디서든 100ms 이내로 로딩되는 경우가 많아요.
• 보안: 서버 사이드 런타임이 없으니 공격 표면이 훨씬 줄어들어요.
• 비용: GitHub Pages와 Cloudflare Pages 모두 공개 및 다수의 비공개 프로젝트에 무료로 사용할 수 있어요.
• 편의성: 저장소에 코드를 푸시하면 사이트가 자동으로 배포돼요.

한 가지 실질적인 제약은 동적 기능이에요. 사용자 인증, 장바구니, 폼 처리처럼 서버 사이드 로직이 필요한 기능은 외부 서비스를 활용해야 해요. 설정 단계를 진행하면서 이 점을 꼭 기억해 두세요.

플랫폼 비교: GitHub Pages vs Cloudflare Pages

결론: 글로벌 사용자를 대상으로 하고 최대한 빠른 로딩 속도가 중요하다면 Cloudflare Pages가 유리해요. 팀이 이미 GitHub 생태계에 익숙하고 설정을 최대한 간단하게 유지하고 싶다면 GitHub Pages로도 충분해요.

GitHub Pages 배포 단계별 가이드

이 예시는 간단한 HTML/CSS 사이트가 이미 준비되어 있다고 가정해요. Hugo나 Jekyll 같은 정적 사이트 생성기를 사용하더라도 과정은 거의 동일해요.

1. GitHub 저장소를 만드세요. github.com/new에서 공개 저장소를 생성해요. 루트 도메인에서 서비스하려면 your-username.github.io로 이름을 지정하고, 서브디렉터리 경로를 원하면 다른 이름을 사용해도 돼요.
2. 사이트 파일을 푸시하세요. 로컬 프로젝트 폴더에서 다음 명령어를 실행해요:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. GitHub Pages를 활성화하세요. 저장소에서 설정 > Pages로 이동해요. "소스" 항목에서 main 브랜치와 /root 폴더를 선택하세요 (빌드 결과물이 해당 위치에 있다면 /docs를 선택해요). 저장을 클릭해요.
4. 배포가 완료될 때까지 기다리세요. GitHub가 1-3분 내에 빌드 및 배포를 완료해요. Pages 설정 패널에서 라이브 URL(예: https://your-username.github.io)을 확인할 수 있어요.
5. 커스텀 도메인을 연결하세요 (선택 사항). 저장소 루트에 CNAME 파일을 추가하고 도메인 이름(예: www.yoursite.com)을 입력해요. 그런 다음 DNS 제공업체에서 CNAME 레코드가 your-username.github.io를 가리키도록 설정하면 돼요. GitHub가 몇 분 내에 SSL 인증서를 자동으로 발급해 줘요.

Cloudflare Pages 배포 단계별 가이드

1. Cloudflare에 가입하거나 로그인하세요. pages.cloudflare.com에 접속해 GitHub 또는 GitLab 계정을 연결해요.
2. 새 프로젝트를 만드세요. "프로젝트 만들기"를 클릭한 후 "Git에 연결"을 선택해요. 목록에서 저장소를 선택하면 돼요.
3. 빌드 설정을 구성하세요. 순수 HTML 사이트라면 빌드 명령어를 비워 두고 출력 디렉터리를 / 또는 index.html이 있는 경로로 설정해요. Hugo를 사용한다면 빌드 명령어를 hugo로 설정하고 출력을 public으로 지정해요. Jekyll은 jekyll build를 사용하고 출력을 _site으로 설정해요.
4. 배포하세요. "저장 및 배포"를 클릭해요. Cloudflare가 저장소를 클론하고 빌드를 실행한 뒤 글로벌 엣지 네트워크에 배포해요. 즉시 *.pages.dev 서브도메인이 할당돼요.
5. 커스텀 도메인을 추가하세요. 프로젝트 대시보드에서 "커스텀 도메인"으로 이동해 도메인을 입력해요. 도메인이 이미 Cloudflare DNS로 관리되고 있다면 클릭 한 번으로 설정이 완료돼요. 그렇지 않다면 도메인 등록 업체에서 *.pages.dev 주소를 가리키는 CNAME 레코드를 추가해야 해요.

이후 메인 브랜치에 git push할 때마다 자동으로 재배포가 트리거돼요. Cloudflare는 풀 리퀘스트에 대한 미리보기 배포도 생성해 주기 때문에 변경 사항을 라이브 반영 전에 검토하기 편해요.

정적 사이트에 문의 폼 추가하기

대부분의 가이드가 여기서 끝나는데, 실제로 많은 분들이 이 부분에서 막히게 돼요. 정적 웹사이트의 문의 폼은 자체적으로 데이터를 처리할 수 없어요. 요청을 받을 서버가 없기 때문이에요. 현실적인 선택지는 세 가지예요:

• 폼 백엔드 서비스 활용 (권장): 폼의 action 속성을 서드파티 엔드포인트로 지정하면, 해당 서비스가 제출 데이터를 수신하고 검증한 뒤 이메일로 전달해 줘요.
• 서버리스 함수 활용: Cloudflare Workers나 AWS Lambda 같은 소규모 함수를 작성해 폼을 처리해요. 작동은 하지만 코드 작성과 지속적인 유지 관리가 필요해요.
• JavaScript fetch() 활용: 브라우저의 fetch API를 사용해 폼 데이터를 백엔드 엔드포인트로 전송해요. 기술적인 세부 내용은 JavaScript fetch()로 HTML 폼 데이터 전송하는 방법 가이드를 참고하세요.

가장 빠르게 폼을 작동시키는 방법은 전용 폼 서비스를 사용하는 거예요. Sendform을 활용한 구체적인 예시를 소개할게요:

실전 예시: 5분 만에 문의 폼 완성하기

사이트에 코드를 추가하기 전에 Sendform 계정을 만들고 폼 엔드포인트를 생성해야 해요. 약 2분이면 충분해요:

1. Sendform.net에 가입하세요. 신용카드 없이 무료 계정을 만들 수 있어요. 가입 후 기본 프로젝트가 바로 준비돼요.
2. 폼을 생성하세요. 대시보드에서 "새 폼"을 클릭해요. 이름을 입력하고 프로젝트를 선택한 뒤 제출 내용을 받을 이메일 주소를 입력해요. Sendform이 엔드포인트를 활성화하기 전에 해당 주소를 인증해요.
3. 엔드포인트 URL을 복사하세요. 폼이 생성되면 https://sendform.net/!your-form-id 형식의 고유 엔드포인트 URL이 표시돼요. 이걸 복사해서 HTML에 붙여 넣으면 돼요.

엔드포인트가 준비되면 정적 사이트에 다음 HTML을 추가하세요:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

your-form-id 부분을 Sendform 대시보드에 표시된 ID로 교체하면 돼요. 이후 모든 제출 내용은 설정 시 인증한 이메일 주소로 전달돼요. 백엔드 코드도, 서버도, 월별 인프라 비용도 없어요. 제출 후 리디렉션 페이지나 확인 이메일 같은 고급 UX 패턴은 정적 웹사이트 폼 모범 사례 가이드를 참고하세요.

웹사이트 빌더와 함께 정적 사이트를 운영하고 있다면 웹사이트 빌더에 Sendform 연동하는 방법 아티클에서 통합 과정을 자세히 다루고 있어요.

자주 하는 실수와 해결 방법

수천 명의 사용자가 무료 정적 웹 호스팅을 설정하는 과정을 도우면서 가장 많은 불편을 초래하는 실수들을 정리했어요:

1. 404 페이지를 만들지 않는 것

GitHub Pages와 Cloudflare Pages 모두 존재하지 않는 경로에 접근하면 기본 오류 페이지를 보여줘요. 루트 디렉터리에 커스텀 404.html 파일을 만들어 두세요. 사용자가 사이트를 이탈하지 않도록 경험을 보호할 수 있어요.

2. 공개 저장소에 민감한 정보를 커밋하는 것

API 키, 폼 엔드포인트 시크릿, 이메일 주소는 절대 공개 GitHub 저장소에 올리면 안 돼요. Cloudflare Pages의 환경 변수를 활용하거나, .gitignore에 등록된 비공개 설정 파일을 참조하는 방식을 사용하세요.

3. 백엔드 계획 없이 폼을 만드는 것

가장 흔한 실수예요. 멋진 문의 폼을 만들어 GitHub Pages에 배포했는데, 런칭 당일에 폼이 아무 반응 없이 실패한다는 걸 알게 되는 경우가 많아요. <input> 태그를 하나라도 작성하기 전에 폼 백엔드를 어떻게 처리할지 결정해 두세요. Sendform 같은 도구를 사용하면 코드 없이 이메일로 바로 전달되는 문의 폼을 설정할 수 있어서 백엔드 문제를 완전히 없앨 수 있어요.

4. 빌드 캐시 문제를 무시하는 것

푸시 후에도 사이트가 업데이트되지 않는다면 CDN 캐시가 오래된 파일을 제공하고 있을 수 있어요. Cloudflare Pages는 배포 시 캐시를 자동으로 초기화해요. GitHub Pages는 변경 사항 반영이 느린 편이라 최대 10분 정도 기다리거나, 테스트 중에는 에셋 URL에 쿼리 스트링을 추가해 보세요.

5. 상대 경로를 잘못 사용하는 것

GitHub Pages 사이트가 username.github.io/project-name/ (서브디렉터리)에 있다면 모든 에셋 경로에 해당 프리픽스가 반영되어야 해요. /styles.css로 연결하면 깨져요. 상대 경로(./styles.css)를 사용하거나 정적 사이트 생성기의 baseURL 설정을 서브디렉터리에 맞게 구성하세요.

6. 폼 워크플로 자동화를 건너뛰는 것

폼으로 제출 데이터를 수집하기 시작했다면 단순히 이메일을 받는 것 이상을 할 수 있어요. Sendform은 웹훅과 연동 기능을 지원해서 제출 데이터를 Slack, CRM, 스프레드시트로 자동 라우팅할 수 있어요. 웹훅과 API로 폼 워크플로 자동화하는 방법 가이드에서 백엔드 코드 없이 설정하는 방법을 확인해 보세요.

마무리

무료 정적 웹사이트 호스팅은 그 어느 때보다 강력해졌어요. GitHub Pages는 GitHub 생태계에 익숙한 팀에게 잘 맞고, Cloudflare Pages는 더 나은 글로벌 성능과 넉넉한 무료 티어를 제공해요. 진짜 도전 과제는 호스팅 자체가 아니라 동적 기능, 특히 문의 폼이에요. 두 플랫폼 중 어느 것을 선택하든 전용 폼 서비스와 함께 사용하면 인프라 비용 없이 완전히 기능하는 전문적인 웹사이트를 운영할 수 있어요. 위의 플랫폼 가이드 중 하나를 따라 사이트를 먼저 라이브로 올리고, 그다음 Sendform으로 문의 폼을 연동해 첫날부터 안정적으로 제출 데이터를 받아보세요.

정적 사이트에 문의 폼을 몇 분 만에 추가하세요

Sendform을 사용하면 GitHub Pages나 Cloudflare Pages에 호스팅된 정적 사이트에서 폼 제출 데이터를 손쉽게 수집할 수 있어요. 백엔드 코드도, 서버 설정도, 복잡한 과정도 없어요. 폼의 action 속성에 엔드포인트를 붙여 넣기만 하면 끝이에요.

Sendform.net에서 무료로 시작하기 →

자주 묻는 질문