STEP 1
Cloudflare 가입
dash.cloudflare.com 으로 접속합니다. (가입 완료 후 화면에서 언어를 한국어로 바꾸셔도 좋습니다)
순서
회원가입
↓
이메일 인증 (Cloudflare에서 온 이메일에 들어가 verify를 꼭 해주세요)
↓
로그인Cloudflare Pages 실습 — 코딩 없이, AI가 만들어준 HTML 파일 하나면 충분합니다.
오늘은 AI가 만든 HTML 랜딩페이지를 인터넷에 공개해보겠습니다. 배포가 끝나면 아래와 같은 주소가 만들어집니다.
https://my-landing.pages.dev이 주소를 누구에게나 공유할 수 있습니다.
예를 들어 아래와 같은 파일이 준비되어 있어야 합니다.(html 파일 하나만 있어도 가능)
Landing
├── index.html
├── style.css
├── script.js
└── images※ 반드시 index.html 파일이 있어야 합니다.
html 파일명이 다르게 만들어 주는 경우가 있는데 이 경우 index.html로 이름을 변경해야지만 인식이 됩니다.
dash.cloudflare.com 으로 접속합니다. (가입 완료 후 화면에서 언어를 한국어로 바꾸셔도 좋습니다)
회원가입
↓
이메일 인증 (Cloudflare에서 온 이메일에 들어가 verify를 꼭 해주세요)
↓
로그인왼쪽 메뉴의 컴퓨트(Compute)메뉴를 누르고 Workers 및 Pages 를 선택합니다.
오른쪽 위 버튼부터 순서대로 눌러줍니다.
애플리케이션 생성 클릭
↓
upload your static files 선택
Cloudflare UI는 조금씩 바뀔 수 있지만 이름만 조금 다를 뿐 과정은 거의 동일합니다.
AI가 만들어준 폴더 또는 파일을 업로드합니다. 압축파일을 그대로 드래그해도 됩니다.
index.html 파일
또는
Landing 폴더 또는 Landing.zip업로드가 끝나면 배포(Deploy) 버튼을 누릅니다.
약 20초 정도 기다리면 Cloudflare가 자동으로 사이트를 만들어 줍니다.
https://landing-abc.pages.dev이제 누구나 접속할 수 있습니다.
🎉 배포 완료!
AI에게 내가 원하는 부분을 수정해줘 라고 요청합니다.
새로운 HTML을 받는다
↓
Cloudflare Pages에서 Upload
↓
기존 프로젝트 선택
↓
새 파일 업로드
↓
자동 업데이트끝입니다.
| 증상 | 원인 | 확인할 것 |
|---|---|---|
| 흰 화면만 나와요 | 대부분 index.html 이 없어서 발생합니다. | 업로드한 폴더 최상단에 index.html 이 있는지 확인 |
| 이미지가 안 보여요 | 폴더 구조가 달라졌을 가능성이 큽니다. | 코드에는 images/logo.png 인데 실제로는 logo.png 만 있는 경우 |
| CSS가 적용되지 않아요 | style.css 경로가 맞지 않습니다. | HTML 안의 <link rel="stylesheet" href="style.css"> 경로 확인 |
| 한글만 깨져 보여요 | 문자 인코딩 선언이 빠졌습니다. | HTML 맨 위 <head> 안에 <meta charset="utf-8"> 이 있는지 확인 |
AI에게 아래 프롬프트를 그대로 입력합니다.
1페이지짜리 자기소개 랜딩페이지를 HTML/CSS/JS로 만들어줘.
반응형으로 제작하고, index.html, style.css, script.js 구조로 만들어줘.
한글이 깨지지 않도록 head 안에 <meta charset="utf-8"> 을 꼭 넣어줘.Cloudflare Pages는 개발자를 위한 서비스가 아니라, 정적 웹페이지를 가장 쉽게 공개하는 서비스라고 생각하면 됩니다.
오늘 우리가 배운 핵심은 웹 개발이 아닙니다.
AI가 만든 결과물을
인터넷에 공개하는 방법
을 배운 것입니다.
AI
↓
랜딩페이지 생성
↓
Cloudflare Pages
↓
URL 생성
↓
공유“무료로 시작하고 싶은 분들은 Cloudflare Pages를 사용하면 됩니다. 하지만 실제 사업을 운영하거나 신청폼, 결제, 회원관리까지 연결하고 싶다면 저는 아임웹 같은 쇼핑몰 서비스를 추천합니다.”