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

어떤 정적 웹사이트 호스팅 플랫폼을 선택하느냐에 따라 연간 수십만 원을 절약하면서도 빠르고 안전하며 관리하기 쉬운 사이트를 운영할 수 있어요. 2026년 현재, 무료 플랜 옵션들은 상당히 성숙해졌고, 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로 관리되고 있다면 클릭 한 번으로 설정이 완료돼요. 그렇지 않은 경우, 도메인 등록 업체에서 CNAME 레코드가 *.pages.dev 주소를 가리키도록 추가해야 해요.

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

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

대부분의 가이드가 여기서 멈추고, 대부분의 사람들이 여기서 막혀요. 정적 웹사이트의 문의 폼은 데이터를 자체적으로 처리할 수 없어요. 요청을 수신할 서버가 없으니까요. 현실적인 선택지는 세 가지예요:

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

가장 빠르게 폼을 작동시키는 방법은 전용 폼 서비스예요. Sendform을 사용한 구체적인 예시를 살펴볼게요:

구체적인 예시: 5분 만에 문의 폼 완성하기

GitHub Pages에 배포된 포트폴리오 사이트가 있다고 가정해요. 방문자가 메시지를 보낼 수 있게 하고, 그 메시지가 내 받은 편지함으로 전달되길 원해요. 전체 HTML 코드는 다음과 같아요:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">이름</label>
  <input type="text" id="name" name="name" required>

  <label for="email">이메일</label>
  <input type="email" id="email" name="email" required>

  <label for="message">메시지</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">메시지 보내기</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에서 무료로 시작하기 →

자주 묻는 질문