Cloudflare Pages 무료 배포 방법, HTML 게임 폴더 끌어다 올리기

AI로 만든 HTML 파일 하나를 남들도 열 수 있는 주소로 올리는 가장 쉬운 길이 Cloudflare Pages 무료 배포입니다. 이 글은 제미나이(Gemini)로 개발 지시문(PRD)과 코드를 받고, 메모장으로 index.html을 저장하고, Cloudflare에 폴더를 끌어다 놓아 주소를 만든 뒤 카카오톡으로 휴대폰에 보내 실행하는 40단계를 설명합니다. 별도 코딩 도구는 필요 없고 카드 등록도 하지 않습니다.

Cloudflare Pages 무료 배포 전에 알아 둘 것

배포는 내가 만든 웹사이트를 인터넷에 공개하는 일입니다. 내 컴퓨터에서 더블클릭해 여는 HTML 파일은 나만 볼 수 있지만, 배포하면 주소를 아는 누구나 휴대폰과 PC에서 열 수 있습니다.

예시로 쓰는 결과물은 초등학교 저학년 아이의 영단어 암기를 돕는 우주 슈팅 게임입니다. 제미나이로 30분 정도 주고받아 만든 HTML 파일 하나짜리 게임입니다. 실제로 걸리는 시간은 AI와 몇 번 주고받느냐에 따라 달라집니다.

무료 플랜 한도 (2026년 10월 공식 문서 기준)

• 끌어다 놓기(Direct Upload) 업로드: 파일 1,000개까지, 파일 하나당 25MiB까지. 폴더 하나나 zip 파일 하나를 올립니다.
• 명령줄 도구 Wrangler로 올리면 사이트당 파일 20,000개까지 됩니다.
• 깃 연동 빌드: 무료 플랜 월 500회
• 사용자 지정 도메인: 프로젝트당 100개
• 기본 주소: 프로젝트이름.pages.dev

HTML 게임 하나는 이 한도에 한참 못 미칩니다. 요금과 한도는 바뀔 수 있으니 가입할 때 공식 안내를 한 번 더 확인합니다. Cloudflare는 새 프로젝트에 Workers(정적 자산)를 권하는 쪽으로 옮겨 가고 있지만 Pages도 계속 지원합니다. 폴더 하나를 올리는 용도라면 Pages가 가장 간단합니다.

준비물

• 구글 계정. Cloudflare 가입에 씁니다.
• 제미나이를 쓸 수 있는 환경(gemini.google.com)
• 메모장과 웹 브라우저
• 카카오톡이 깔린 휴대폰. 마지막 확인용입니다.

가장 흔한 실수: PRD를 읽지 않고 붙여 넣기

따라 하기 전에 이것부터 짚습니다. 제미나이가 만든 PRD(개발 지시문)를 꼼꼼히 읽지 않고 그대로 붙여 넣어 코드를 만들면, 원하는 게임이 안 나올 수 있습니다.

예시에서도 그랬습니다. 원한 것은 미사일을 쏘아 영단어를 맞히는 슈팅 게임이었는데, 나온 것은 한글 뜻을 보고 영어를 고르는 게임이었습니다. 지시문을 다시 읽어 보니 미사일을 발사한다는 내용이 어디에도 없었습니다.

초보자가 정말 많이 하는 실수입니다. AI 결과물이 내 의도에 완벽하게 맞을 거라고 생각하면 안 됩니다. AI는 대신 생각해 주는 게 아니라, 내가 준 지시를 최대한 그럴듯하게 실행할 뿐입니다. PRD를 받으면 코드로 넘어가기 전에 원하는 기능이 다 들어 있는지부터 확인합니다.

PRD를 점검할 때는 AI에게 이렇게 물어보면 빠릅니다.

방금 만든 PRD에서 게임 방식(조작법, 목표, 점수, 끝나는 조건)만 따로 뽑아서 번호 목록으로 보여 줘.
내가 원하는 핵심 기능은 "미사일을 쏘아 정답 영단어를 맞히는 것"이야. 이 기능이 PRD에 빠져 있으면 추가해서 PRD를 다시 써 줘.

따라 하기 40단계

1. 개발 지시문(PRD) 만들기

무엇을, 왜, 어떻게 만들지 상세하게 적은 설계도를 먼저 만듭니다. 개발에서는 이것을 PRD(Product Requirements Document, 제품 요구사항 문서)라고 부릅니다.

1단계. 제미나이를 엽니다

• 위치: 브라우저 주소창에 gemini.google.com을 입력하고 구글 계정으로 로그인합니다. 휴대폰이라면 제미나이 앱을 씁니다.
• 확인: 질문을 입력할 수 있는 화면이 뜹니다.

2단계. 아래 요청 문장을 입력합니다

예시로 쓴 요청입니다.

초등학교 저학년 딸을 위한 영단어 암기용 슈팅 게임을 만들고 싶어. 3D 환경 우주 배경 캐릭터는 키티 라스트워 서바이벌 스타일로 모바일에서도 게임할 수 있는 환경을 만들기 위해 반응형 웹사이트로 만들 수 있는 PRD를 만들어 줘.

• 대안: 자기 아이디어에 맞게 바꿔 씁니다. 원하는 핵심 기능(예: 미사일 발사)은 처음부터 문장에 넣는 편이 안전합니다.
• 확인: 입력창에 문장이 들어갑니다.

3단계. 요청을 전송합니다

• 위치: Enter 키를 누르거나 입력창 오른쪽의 보내기(화살표) 버튼을 누릅니다.
• 확인: AI가 PRD(개발 지시문)를 만들어 줍니다.

4단계. 지시문대로 코드를 만들어 달라고 요청합니다

• 위치: 같은 대화에서 이어서 씁니다. 예: "이 PRD대로 HTML 파일 하나로 실행되는 전체 코드를 만들어 줘."
• 확인: AI가 <!DOCTYPE html>로 시작하는 코드를 출력합니다.

2. 코드를 파일로 저장하고 실행하기

5단계. 바탕화면에 "deploy" 폴더를 만듭니다

• 위치: 바탕화면 빈 곳에서 마우스 오른쪽 버튼 → 새로 만들기 → 폴더
• 확인: 바탕화면에 폴더가 생깁니다. 이 폴더를 통째로 Cloudflare에 올립니다.

6단계. 메모장을 엽니다

• 위치: 시작 메뉴 검색창에 "메모장"을 입력합니다.
• 확인: 빈 메모장이 열립니다.

7단계. 메모장에 코드를 붙여 넣습니다

• 위치: 제미나이 답의 코드 상자 오른쪽 위 복사 버튼을 누른 뒤, 메모장에서 Ctrl + V를 누릅니다.
• 확인: 메모장에 코드가 보입니다.

8단계. 파일 이름을 index.html로 정해 저장합니다

• 위치: 파일 → 다른 이름으로 저장 → 5단계에서 만든 폴더
• 주의: "파일 형식"을 "모든 파일"로 바꾸고, 인코딩은 UTF-8로 둡니다. 텍스트 문서로 저장되면 index.html.txt가 돼 브라우저가 웹페이지로 열지 않습니다.
• 확인: 폴더 안에 브라우저 아이콘 모양의 index.html이 보입니다. 첫 페이지 파일 이름은 index.html이어야 주소만 쳐도 바로 열립니다.

9단계. index.html을 더블클릭해 엽니다

• 확인: 브라우저에 게임 화면이 뜹니다. 예시의 첫 결과에서는 캐릭터가 나오지 않았습니다.

10단계. 마음에 안 드는 부분을 AI에게 수정 요청합니다

• 대안: 결과가 마음에 들면 건너뛰고 14단계로 갑니다.
• 위치: 같은 대화에 "캐릭터가 화면에 안 나와. 고친 전체 코드를 다시 줘"처럼 증상을 그대로 씁니다.
• 확인: AI가 고친 코드나 새 프롬프트를 내놓습니다.

11단계. 고친 코드로 index.html을 덮어써 저장하고 다시 엽니다

• 위치: 메모장에서 Ctrl + A로 전체 선택 후 새 코드를 붙여 넣고 Ctrl + S로 저장합니다. 브라우저에서는 F5로 새로고침합니다.
• 확인: 캐릭터가 나옵니다. 예시에서는 캐릭터는 나왔지만 한글 뜻을 맞추는 게임이었습니다.

12단계. 결과가 원하는 형태인지 확인합니다

• 확인: 원하는 게임 방식(예: 미사일 발사)인지 직접 해 봅니다. 예시에서는 여기서 다른 게임이라는 걸 알아챘습니다.

13단계. PRD(개발 지시문)를 처음부터 다시 읽습니다

• 주의: 원래는 코드를 만들기 전에, 붙여 넣기 전에 읽어야 하는 단계입니다.
• 확인: 원한 기능이 지시문에 들어 있는지 알 수 있습니다. 예시에서는 미사일 발사가 어디에도 없었습니다.

14단계. 원하는 결과물이 나올 때까지 수정 요청을 반복합니다

• 확인: 원하는 게임이 나옵니다.

3. 무료 배포처 고르기

배포하려면 클라우드 서비스에 가입해야 합니다. 가장 유명한 곳은 AWS지만, 처음에는 설정이 훨씬 간단하고 카드 등록이 필요 없는 무료 서비스가 낫습니다.

개인이 간단한 웹사이트를 무료로 배포할 대표적인 곳은 버셀(Vercel)과 Cloudflare입니다. 파일 몇 개짜리 간단한 배포라면 둘이 거의 비슷하고, 여기서는 Cloudflare를 씁니다.

4. Cloudflare 가입하기

15단계. 구글에서 Cloudflare를 검색합니다

• 확인: 검색 결과에 cloudflare.com이 나옵니다.

16단계. 상단에 보이는 Cloudflare 사이트를 클릭합니다

• 확인: Cloudflare 사이트가 열립니다.

17단계. "무료로 시작하기" 버튼을 클릭합니다

• 대안: 이미 계정이 있으면 로그인으로 들어갑니다.
• 확인: 신규 가입 화면이 나옵니다.

18단계. 구글 이메일을 입력합니다

• 확인: 이메일 칸에 주소가 들어갑니다.

19단계. 새 비밀번호를 입력합니다

• 주의: 구글 계정 비밀번호와 다른, Cloudflare 전용 비밀번호를 새로 만듭니다.
• 확인: 비밀번호 칸이 채워집니다.

20단계. "사람인지 확인"에 체크합니다

• 확인: 체크 표시가 됩니다.

21단계. 약관 동의 항목을 선택합니다

• 대안: 필수 항목만 체크하고 optional(선택) 항목은 빼도 됩니다.
• 확인: 동의 항목이 체크됩니다.

22단계. Sign up을 클릭합니다

• 확인: 다음 화면으로 넘어갑니다. 가입한 이메일로 인증 메일이 오면 링크를 눌러 둡니다.

23단계. 중간에 영어 안내가 나오면 건너뜁니다

• 대안: Skip을 눌러도 됩니다.
• 확인: 영어로 가득한 관리 화면(대시보드)이 나옵니다. 배포만 할 때는 나머지 메뉴를 몰라도 됩니다.

5. 프로젝트 만들기

대시보드 메뉴 이름과 위치는 화면 개편으로 바뀔 수 있습니다. 메뉴가 안 보이면 왼쪽 위 검색창에 "Workers & Pages"를 입력합니다.

24단계. 왼쪽 메뉴에서 Build(빌드)를 찾습니다

• 위치: 화면 왼쪽 메뉴
• 확인: Build 항목이 보입니다.

25단계. Build 아래 Compute & AI를 클릭합니다

• 확인: 하위 메뉴가 펼쳐집니다.

26단계. 바로 아래 Workers & Pages를 클릭합니다

• 확인: 처음이면 프로젝트가 없다는 표시(No projects found)가 나옵니다.

27단계. 화면 오른쪽 위 Create application(또는 Add) 버튼을 클릭합니다

• 위치: 화면 오른쪽 위
• 확인: 만들 수 있는 항목 목록이 나옵니다.

28단계. 목록에서 웹사이트 배포용 Pages를 선택합니다

• 확인: 배포 방식을 묻는 화면이 나옵니다.

29단계. "Drag and drop your files"의 Get started를 클릭합니다

• 대안: 개발자들은 보통 깃허브 같은 코드 저장소(repository)를 연결해, 코드를 올릴 때마다 자동으로 배포합니다.
• 주의: 끌어다 놓기(Direct Upload)로 만든 프로젝트는 나중에 깃 연동으로 바꿀 수 없습니다. 깃 자동 배포를 쓰려면 그때 새 프로젝트를 만듭니다.
• 확인: 프로젝트 이름을 정하는 화면이 나옵니다.

30단계. 프로젝트 이름을 입력합니다

• 주의: 영어 소문자, 숫자, 하이픈(-)으로 짓습니다. 이 이름이 주소 프로젝트이름.pages.dev의 앞부분이 됩니다. 예: ai-game
• 확인: 이름 칸에 입력한 이름이 보입니다.

31단계. Create project를 클릭합니다

• 확인: 파일을 올리는 화면이 나옵니다.

6. 폴더 올리고 배포하기

32단계. "Drag and drop" 영역에서 폴더 선택을 클릭합니다

• 대안: 탐색기에서 폴더를 그 영역으로 바로 끌어다 놓아도 됩니다.
• 확인: 폴더를 고르는 창이 열립니다.

33단계. 바탕화면의 deploy 폴더를 선택합니다

• 확인: 폴더 안의 파일(index.html)이 목록에 보입니다.

34단계. 업로드 버튼을 누릅니다

• 확인: 업로드가 진행됩니다. 25MiB가 넘는 파일은 빨간 경고가 붙습니다.

35단계. 업로드가 끝나면 오른쪽 아래 "Deploy site"를 클릭합니다

• 위치: 화면 오른쪽 아래
• 순서: 업로드가 끝난 뒤에 누릅니다.
• 확인: 배포 성공 화면이 나옵니다.

36단계. "Continue to project"를 클릭합니다

• 확인: 프로젝트 화면에 도메인 주소(프로젝트이름.pages.dev)가 보입니다. 이것이 방금 만든 웹 게임의 주소입니다.

7. 내 게임 주소 확인하고 공유하기

37단계. 도메인 주소를 클릭합니다

• 확인: 새 탭에서 게임이 돌아갑니다.

38단계. 주소를 마우스로 드래그해 복사합니다

• 확인: 주소가 복사됩니다.

39단계. 카카오톡을 열어 주소를 붙여 넣고 보냅니다

• 위치: 내 휴대폰에서 확인하려면 "나와의 채팅"으로 보냅니다.
• 확인: 대화창에 주소가 링크로 보입니다.

40단계. 휴대폰에서 그 주소를 열어 게임을 실행합니다

• 확인: 모바일에서도 게임이 실행됩니다.

다 했는지 확인

• index.html이 들어 있는 폴더를 만들었다
• Cloudflare에 가입하고 Pages 프로젝트를 만들었다
• 폴더를 올려 배포했고 pages.dev 주소가 생겼다
• 주소를 눌러 PC에서 게임이 실행된다
• 휴대폰에서도 같은 주소로 실행된다

자주 막히는 곳

게임 화면에 캐릭터가 안 나올 때

AI에게 증상을 그대로 적어 수정을 요청하고, 고친 코드로 index.html을 덮어써 다시 엽니다. 그림 파일을 따로 쓰는 코드라면 그 파일도 같은 폴더에 있어야 합니다.

원하는 게임 방식이 아닐 때

미사일 발사 대신 단어 맞추기 게임이 나온 경우처럼, PRD에 원하는 기능이 없는 게 원인인 경우가 많습니다. PRD를 다시 읽고 빠진 기능을 넣어 다시 요청합니다.

더블클릭했는데 메모장으로 열릴 때

txt 파일로 저장된 것입니다. 다른 이름으로 저장에서 파일 형식을 "모든 파일"로 바꾸고 이름을 index.html로 다시 저장합니다.

영어 화면이 가득해서 막막할 때

Cloudflare 관리 화면은 대부분 영어입니다. 배포만 할 때는 Workers & Pages 메뉴 하나만 쓰면 되고, 처음 뜨는 안내는 건너뛰어도 됩니다.

배포 다음 할 일

실제 사용자(아이) 반응을 보고 조금씩 고쳐 나가면 됩니다. 고친 파일을 다시 올릴 때는 Workers & Pages에서 그 프로젝트를 열고 "Create a new deployment"를 눌러 폴더를 다시 끌어다 놓습니다. 주소는 그대로이고 내용만 바뀝니다.

돈을 버는 서비스를 내려면 pages.dev 대신 나만의 유료 도메인이 필요하고, 그 밖에도 신경 쓸 것이 꽤 많습니다. 회원 정보나 점수를 저장하려면 데이터베이스(DB)도 붙여야 합니다. HTML 파일 하나짜리 게임은 데이터를 저장하지 않으니, 지금 단계에서는 주소 공유까지면 충분합니다.