클라우드플레어(Cloudflare) 완전 입문 - 많이 쓰는 기능 정리부터 내 홈페이지 무료로 올리기까지 (초보 따라하기)

2026-10-15 07:05 · IT기술 · 조회 24

클라우드플레어(Cloudflare) 완전 입문 - 많이 쓰는 기능 정리부터 내 홈페이지 무료로 올리기까지 (초보 따라하기)

웹 개발을 처음 배우면 꼭 한 번 막히는 순간이 있다. "내 컴퓨터에서는 잘 열리는데, 이걸 친구한테 주소로 보여주려면 어떻게 하지?" 예전에는 호스팅 업체에 돈을 내고 FTP로 파일을 올려야 했다. 지금은 클라우드플레어(Cloudflare) 계정 하나만 있으면 무료로, 5분 안에, https 주소까지 받을 수 있다.

이 글은 두 부분으로 나눴다.

클라우드플레어가 뭔지, 사람들이 주로 어떤 기능을 쓰는지 (개념 정리)
내가 만든 HTML 홈페이지를 무료로 올려서 주소로 접속하기 (따라하기)

코딩을 거의 몰라도 따라할 수 있게 화면에서 누를 버튼 순서대로 적었다. 개념이 지루하면 바로 "따라하기 1"로 내려가도 된다.

1. 클라우드플레어란?

클라우드플레어는 내 웹사이트와 방문자 사이에 서서, 사이트를 더 빠르고 안전하게 만들어 주는 회사다. 전 세계 수백 개 도시에 서버(데이터센터)를 두고 있고, 인터넷 웹사이트의 상당수가 클라우드플레어를 거쳐 서비스된다.

비유하면 이렇다. 내 웹사이트가 가게라면, 클라우드플레어는 가게 앞에 서 있는 경비원 겸 안내 데스크 겸 전국 체인 창고다.

경비원: 수상한 손님(해킹 시도, 디도스 공격)을 문 앞에서 막는다.
안내 데스크: "그 가게 어디 있어요?"라는 질문(DNS)에 빠르게 답한다.
체인 창고: 자주 팔리는 물건(이미지, CSS 같은 파일)을 손님 가까운 창고에 미리 쌓아 둬서 빨리 건넨다(CDN, 캐시).

가장 큰 장점은 개인과 소규모 사이트가 쓰는 기능 대부분이 무료 요금제(Free)에 들어 있다는 점이다. 카드 등록 없이 이메일만으로 가입할 수 있다.

2. 사람들이 가장 많이 쓰는 기능 TOP 8

메뉴가 워낙 많아서 처음 들어가면 길을 잃는다. 실제로 많이 쓰는 건 아래 정도다. 이것만 알아도 충분하다.

① DNS - 도메인 주소록

example.com 같은 이름을 실제 서버 주소(IP)로 바꿔 주는 전화번호부다. 클라우드플레어 DNS는 무료이면서 빠르고, 변경 사항이 몇 초~몇 분 만에 반영된다. 도메인을 가비아·후이즈 같은 곳에서 샀더라도 "네임서버"만 클라우드플레어로 바꾸면 여기서 관리할 수 있다. 사람들이 클라우드플레어를 처음 쓰는 이유 1위가 이것이다.

② 프록시(주황색 구름) - 내 서버 IP 숨기기

DNS 레코드 옆의 주황색 구름 아이콘을 켜면, 방문자는 내 서버가 아니라 클라우드플레어에 먼저 접속한다. 내 진짜 서버 IP가 바깥에 드러나지 않고, 아래의 보안·캐시 기능이 이때부터 작동한다. 회색 구름이면 "주소록 역할만" 하는 상태다.

③ 무료 SSL(https)

주소창의 자물쇠 아이콘. 프록시를 켜면 인증서를 따로 사거나 설치하지 않아도 https가 적용된다. 요즘 브라우저는 http 사이트에 "주의 요함"을 띄우기 때문에 사실상 필수다.

④ CDN·캐시 - 사이트 속도 올리기

이미지, CSS, JS 같은 파일을 전 세계 클라우드플레어 서버에 복사해 두고 방문자와 가장 가까운 곳에서 내려준다. 서버가 한국에 있어도 미국 방문자가 빠르게 볼 수 있고, 내 서버의 부담과 트래픽 비용도 줄어든다.

⑤ 보안 - 디도스 방어, 방화벽(WAF), 봇 차단

대량 접속 공격(디도스)은 무료 요금제에서도 자동으로 막아 준다. "특정 나라 차단", "로그인 페이지에 접속 횟수 제한" 같은 규칙도 클릭 몇 번으로 만든다. 사이트가 공격받을 때 잠깐 켜는 "Under Attack 모드"도 있다.

⑥ Pages - 정적 홈페이지 무료 호스팅 ⭐

오늘의 주인공이다. HTML·CSS·JS로 만든 사이트(또는 React, Vue, Astro 등으로 빌드한 결과물)를 올리면 내프로젝트.pages.dev 주소로 바로 공개된다. 서버를 따로 빌릴 필요가 없다.

⑦ Workers - 서버 없이 코드 실행

간단한 백엔드 코드(API, 리다이렉트, 폼 처리 등)를 클라우드플레어 서버에서 실행해 주는 기능이다. 무료로 하루 10만 요청까지 쓸 수 있어서 개인 프로젝트에 넉넉하다. 처음에는 몰라도 된다.

⑧ Tunnel - 집 컴퓨터를 포트포워딩 없이 공개

집에 있는 PC나 라즈베리파이에서 돌리는 서비스를 공유기 설정(포트포워딩) 없이, 집 IP도 노출하지 않고 인터넷에 공개하는 기능이다. 홈서버를 운영하는 사람들이 많이 쓴다.

이외에도 파일 저장소 R2, 로봇 확인 위젯 Turnstile(구글 reCAPTCHA 대체), 사내 시스템 접근 제어 Zero Trust 등이 있지만, 입문 단계에서는 위 8가지면 충분하다.

3. 준비물

이메일 주소 1개 (클라우드플레어 가입용)
올릴 홈페이지 파일 (없으면 아래 예제를 그대로 쓰면 된다)
(선택) GitHub 계정 - 수정할 때마다 자동으로 다시 올리고 싶다면
(선택) 내 도메인 - 없어도 pages.dev 무료 주소가 나온다

돈은 한 푼도 들지 않는다. 카드 등록도 필요 없다.

4. 연습용 홈페이지 만들기 (이미 있으면 건너뛰기)

바탕화면에 my-site라는 폴더를 하나 만들고, 메모장(또는 VS Code)으로 아래 두 파일을 만든다. 저장할 때 인코딩은 UTF-8로 해야 한글이 깨지지 않는다.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나의 첫 홈페이지</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>안녕하세요, 홍길동입니다 👋</h1>
    <p>클라우드플레어로 무료로 올린 첫 홈페이지예요.</p>
  </header>
  <main>
    <h2>소개</h2>
    <p>웹 개발을 공부하고 있습니다.</p>
    <a href="mailto:me@example.com">연락하기</a>
  </main>
</body>
</html>

style.css

body {
  font-family: sans-serif;
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
  line-height: 1.7;
  color: #1e293b;
}
header { border-bottom: 2px solid #f97316; padding-bottom: 12px; }
a { color: #f97316; font-weight: bold; }

폴더 구조는 이렇게 된다.

my-site/
├── index.html   ← 반드시 이 이름, 반드시 맨 위에
├── style.css
└── images/
    └── photo.jpg

index.html을 더블클릭해서 브라우저에서 잘 보이면 준비 끝이다.

가장 중요한 규칙 하나: 첫 화면 파일 이름은 반드시 index.html이어야 한다. Index.html, main.html, 홈.html이면 접속했을 때 404가 뜬다. 인터넷 서버는 대소문자를 구분하므로 Photo.JPG와 photo.jpg도 다른 파일이다.

5. 클라우드플레어 가입하기

dash.cloudflare.com/sign-up 에 들어간다.
이메일과 비밀번호를 입력하고 Sign up을 누른다. (구글·애플 계정으로도 가능)
받은 편지함에서 인증 메일의 링크를 누른다. 인증을 안 하면 배포가 막히는 경우가 있으니 꼭 해 둔다.
"도메인을 추가하라"는 화면이 나와도 지금은 무시하고 넘어가도 된다. Pages는 도메인 없이 쓸 수 있다.

화면이 영어라 부담되면 오른쪽 위 계정 메뉴의 언어 설정에서 한국어를 고를 수 있다. 다만 메뉴 번역이 수시로 바뀌니 이 글에서는 영어 메뉴 이름을 같이 적는다.

6. 따라하기 1 - 드래그 앤 드롭으로 올리기 (가장 쉬움, 3분)

코딩 도구 없이 폴더를 끌어다 놓기만 하면 끝나는 방법이다. 처음이라면 이걸로 시작하자.

대시보드 왼쪽 메뉴에서 Workers & Pages(컴퓨팅 > Workers 및 Pages)를 누른다.
오른쪽 위 Create application(애플리케이션 생성) 버튼을 누른다.
Workers 만들기 화면이 먼저 나오는데, 당황하지 말고 Pages 탭을 고르거나 화면 아래쪽의 "Looking to deploy Pages? Get started" 링크를 누른다.
Drag and drop your files(또는 Upload assets)의 Get started를 누른다.
Project name에 영어 소문자로 이름을 넣는다. 예: gildong-home. 이 이름이 그대로 주소가 된다 → gildong-home.pages.dev
Create project를 누른 뒤, 업로드 칸에 my-site 폴더 통째로(또는 zip 파일) 끌어다 놓는다.
파일 목록이 올라오면 Deploy site를 누른다.
잠시 후 Success!와 함께 주소가 나온다. 눌러 보면 내 홈페이지가 열린다. 🎉

이 주소는 https가 이미 적용되어 있고, 휴대폰이든 해외든 어디서나 열린다. 카톡으로 친구에게 보내 보자. 처음 1~2분은 "사이트를 찾을 수 없음"이 뜰 수 있는데, 전 세계 서버로 퍼지는 중이라 조금 기다리면 된다.

zip으로 올릴 때 주의: zip을 열었을 때 index.html이 바로 보여야 한다. 폴더를 한 겹 더 감싸서 압축하면 사이트가 404가 된다.

잘못된 예 (zip 안에 폴더가 한 겹 더 있음)
site.zip
└── my-site/
    └── index.html

올바른 예 (zip을 열자마자 index.html)
site.zip
├── index.html
└── style.css

수정한 내용을 다시 올리려면

Workers & Pages → 내 프로젝트 → Create deployment(새 배포 만들기) → 수정한 폴더를 다시 끌어다 놓고 Deploy. 이전 버전은 Deployments 목록에 남아 있어서, 실수했을 때 예전 버전으로 되돌리기(Rollback)도 버튼 하나로 된다.

단점은 고칠 때마다 손으로 다시 올려야 한다는 것. 자주 수정한다면 다음 방법이 편하다.

7. 따라하기 2 - GitHub 연결로 자동 배포 (추천, 한 번 설정하면 끝)

이 방법은 GitHub에 코드를 올리면(push) 클라우드플레어가 알아서 사이트를 다시 배포해 준다. 개발자들이 실제로 가장 많이 쓰는 방식이다.

⚠️ 드래그 앤 드롭으로 만든 프로젝트는 나중에 GitHub 연결로 바꿀 수 없다. GitHub 방식을 쓰려면 새 프로젝트를 만들어야 한다. (이름이 겹치면 앞의 연습용 프로젝트는 Settings 맨 아래에서 지우면 된다.)

7-1. GitHub에 코드 올리기

github.com에 가입·로그인 후 오른쪽 위 + → New repository를 누른다.
Repository name에 my-site를 넣고 Create repository. (Public/Private 둘 다 된다)
명령어가 어렵다면: 새 저장소 화면의 "uploading an existing file" 링크를 눌러 파일을 끌어다 놓고 Commit changes를 누르면 된다.
Git을 쓸 줄 안다면 터미널에서:

cd my-site
git init
git add .
git commit -m "첫 홈페이지"
git branch -M main
git remote add origin https://github.com/내아이디/my-site.git
git push -u origin main

7-2. 클라우드플레어와 연결하기

Workers & Pages → Create application → Pages → Import an existing Git repository(Connect to Git)를 누른다.
GitHub를 고르고, GitHub 창이 뜨면 클라우드플레어 앱 설치를 허용한다. 이때 "Only select repositories"로 my-site만 고르는 것을 권한다. 내 모든 저장소에 권한을 줄 필요는 없다.
목록에서 my-site를 고르고 Begin setup.
설정 화면에서:
- Project name: 주소가 될 이름 (예: gildong-home)
- Production branch: main
- Framework preset: 순수 HTML이면 None
- Build command: 순수 HTML이면 비워 둔다
- Build output directory: index.html이 저장소 맨 위에 있으면 / (비워 둬도 됨)
Save and Deploy를 누르면 빌드 로그가 흐르고, 1분쯤 뒤 gildong-home.pages.dev가 생긴다.

7-3. 이제부터 수정은 이렇게

파일을 고친 뒤 GitHub에 올리기만 하면 된다. GitHub 웹에서 연필 아이콘으로 직접 고쳐도 되고, 터미널이라면:

git add .
git commit -m "소개 문구 수정"
git push

클라우드플레어가 변경을 감지해서 1분 안에 새 버전으로 바꿔 준다. 대시보드의 Deployments 탭에서 진행 상황을 볼 수 있다.

보너스: 미리보기 주소

main이 아닌 다른 브랜치(예: test)에 올리면, 실제 사이트는 그대로 두고 test.gildong-home.pages.dev 같은 미리보기 주소가 따로 생긴다. 디자인을 바꿀 때 남에게 먼저 보여주고 확인받기 좋다.

React, Vue, Astro 같은 프레임워크라면?

Framework preset에서 해당 프레임워크를 고르면 빌드 명령과 출력 폴더가 자동으로 채워진다. 대표적인 값은 다음과 같다.

Vite (React/Vue): Build command npm run build, Output dist
Astro: npm run build, Output dist
Next.js (정적 내보내기): npx next build, Output out
Create React App: npm run build, Output build

빌드가 실패하면 로그 맨 아래 빨간 줄을 먼저 읽자. 대부분 출력 폴더 이름이 틀렸거나, 내 PC와 Node.js 버전이 달라서다. 버전 문제는 Settings → Environment variables에 NODE_VERSION = 20처럼 넣으면 해결된다.

8. 따라하기 3 - 명령어 한 줄로 올리기 (Wrangler, 개발자용)

터미널이 익숙하다면 클라우드플레어 공식 도구 Wrangler로 내 PC에서 바로 올릴 수 있다.

# Node.js 설치 후 (https://nodejs.org 에서 LTS 버전)
npx wrangler login                          # 브라우저가 열리면 '허용'
npx wrangler pages project create my-site   # 처음 한 번만
npx wrangler pages deploy ./my-site         # 올릴 때마다 이것만

마지막 명령이 끝나면 주소가 출력된다. 스크립트에 넣어 두면 "빌드하고 바로 배포"를 한 번에 할 수 있다.

9. 내 도메인 연결하기 (선택)

pages.dev 주소도 충분히 쓸 만하지만, gildong.com 같은 내 도메인을 붙이면 훨씬 그럴듯하다. 도메인은 1년에 1~2만 원 정도다.

방법 A. 도메인을 클라우드플레어 DNS로 옮기기 (추천)

대시보드 홈에서 Add a domain(도메인 추가) → 내 도메인 입력 → Free 요금제 선택.
기존 DNS 기록을 자동으로 불러온다. 메일 관련(MX) 기록이 있다면 빠지지 않았는지 한 번 확인한다.
클라우드플레어가 알려 주는 네임서버 2개(예: xxx.ns.cloudflare.com)를 복사한다.
도메인을 산 곳(가비아, 후이즈, 카페24 등)의 관리 페이지 → 네임서버 변경에서 기존 값을 지우고 이 2개를 넣는다.
보통 몇 분~몇 시간, 길면 24시간 뒤 클라우드플레어에서 Active 메일이 온다.
이제 Pages 프로젝트 → Custom domains → Set up a custom domain → gildong.com 또는 www.gildong.com 입력 → Activate domain. DNS 기록과 https 인증서가 자동으로 만들어진다.

방법 B. 네임서버를 못 바꾸는 경우 (서브도메인만)

회사 도메인처럼 네임서버를 마음대로 못 바꿀 때는 home.회사도메인.com 같은 서브도메인만 연결할 수 있다. Custom domains에 서브도메인을 입력하면 안내가 나오는데, 원래 도메인 업체의 DNS 관리 화면에서 CNAME 기록을 하나 추가하면 된다.

호스트(이름): home
값(대상): gildong-home.pages.dev

⚠️ 반드시 Pages 화면에서 도메인을 먼저 추가한 다음 CNAME을 만들어야 한다. CNAME만 먼저 만들면 "522 오류"가 뜬다.

10. 알아 두면 좋은 설정 두 가지

_redirects - 주소 바꾸기

사이트 맨 위에 _redirects라는 이름(확장자 없음)의 파일을 넣으면 주소 이동 규칙을 만들 수 있다. 페이지 이름을 바꿨을 때 옛 주소로 들어온 사람을 새 주소로 보내 준다.

/old-page   /new-page   301
/blog       https://blog.example.com   302

_headers - 보안·캐시 헤더

마찬가지로 _headers 파일로 응답 헤더를 넣을 수 있다. 다른 사이트가 내 사이트를 iframe으로 몰래 감싸는 것을 막는 등 기본 보안 설정에 쓴다.

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
/images/*
  Cache-Control: public, max-age=86400

404 페이지 꾸미기

사이트 맨 위에 404.html을 만들어 두면, 없는 주소로 들어왔을 때 그 페이지를 보여준다.

11. 무료로 어디까지 쓸 수 있나?

Pages 무료 요금제의 주요 한도는 다음과 같다(2026년 10월 공식 문서 기준).

트래픽(방문자 수): 정적 파일은 사실상 제한 없음
배포(빌드) 횟수: 한 달 500번
파일 개수: 사이트당 20,000개
파일 하나 크기: 최대 25MiB → 큰 동영상은 유튜브나 R2에 따로 올리기
프로젝트 수: 계정당 100개
연결 도메인: 프로젝트당 100개

개인 포트폴리오, 동아리·가게 소개 페이지, 소규모 회사 홈페이지 정도라면 무료로 충분하다.

12. 자주 막히는 문제와 해결법

접속하면 404 Not Found → index.html이 맨 위에 있는지, 이름 철자·대소문자가 맞는지 확인. zip이면 폴더가 한 겹 더 있지 않은지 확인. GitHub 방식이면 Build output directory가 맞는지 본다.
이미지만 안 나온다 → 경로 문제다. C:\Users\...\photo.jpg 같은 내 PC 경로를 쓰면 안 되고 images/photo.jpg처럼 상대 경로로 써야 한다. 대소문자(.JPG vs .jpg)도 확인.
한글이 깨진다 → 파일을 UTF-8로 저장하고 <meta charset="UTF-8">이 있는지 확인.
고쳤는데 예전 화면이 보인다 → 브라우저 캐시다. Ctrl + F5(맥은 Cmd + Shift + R)로 새로고침하거나 시크릿 창으로 열어 본다.
"너무 많은 리디렉션" 오류 (기존 서버를 클라우드플레어 프록시 뒤에 둔 경우) → SSL/TLS 설정이 Flexible로 되어 있을 때 자주 생긴다. 서버에 인증서가 있다면 Full (strict)로 바꾼다. Pages만 쓰면 신경 쓸 일이 없다.
도메인 연결이 계속 Pending → 네임서버 변경이 아직 퍼지는 중이다. 최대 하루 기다려 보고, 도메인 업체 화면에서 네임서버가 제대로 저장됐는지 다시 확인한다.

13. 내가 실제로 쓰는 방식

나는 이 블로그(k0.co.kr)를 집 서버에서 직접 돌리고 있어서 https도 서버에서 직접 발급받는다. 대신 "서버가 꺼져도 절대 안 꺼져야 하는 사이트"는 생각이 다르다. 최근 가족 회사의 오래된 홈페이지를 정적 사이트(Astro)로 새로 만들었는데, 최종적으로는 이 사이트를 Cloudflare Pages로 옮길 계획이다. 이유는 단순하다.

집 서버가 정전이나 고장으로 멈춰도 회사 홈페이지는 계속 떠 있어야 한다.
정적 사이트라 Pages 무료 요금제로 충분하고, 서버 관리 부담이 사라진다.
GitHub에 글을 올리면 자동으로 배포되니, 나중에 다른 사람이 관리를 이어받기도 쉽다.

정리하면 직접 운영하는 재미와 자유가 필요하면 내 서버, 안정적으로 떠 있기만 하면 되는 정적 사이트는 Cloudflare Pages가 좋은 조합이었다.

마치며 - 오늘 할 일 체크리스트

☐ my-site 폴더에 index.html 만들기
☐ 클라우드플레어 가입 + 이메일 인증
☐ Workers & Pages → Pages → 드래그 앤 드롭으로 첫 배포
☐ 내이름.pages.dev 주소를 휴대폰으로 열어 보기
☐ (다음 단계) GitHub 연결로 자동 배포 설정
☐ (다음 단계) 내 도메인 연결

처음 내 홈페이지가 주소로 열리는 순간은 생각보다 짜릿하다. 오늘 1~4번까지만 해도 충분하다. 따라하다 막히는 부분이 있으면 댓글로 남겨 주시면 같이 봐 드리겠다.

글에 대한 질문이나 오류 제보는 문의하기로 보내 주세요.