내가 만든 웹페이지를 인터넷 주소로 올리기 — 링크 하나로 보여 주기 (클라우드플레어 워커스)

내 PC 에 있는 웹페이지 파일은 나만 봅니다. 인터넷에 올리면(배포) 주소가 생겨서, 폰에서도 남의 PC 에서도 열립니다. 이 편은 글자만 있는 한 장짜리 페이지를 만들고, 올릴 폴더를 정하고, 비밀이 섞이지 않았는지 걸러 낸 뒤 올립니다. (예시 회사는 가짜 이름 「가나다전자」입니다.)

1·3·4단계는 제가 클로드로 실제로 돌려서 받은 답이고(2단계는 내가 직접 하는 일), 5~7단계(로그인·올리기)는 클라우드플레어에 진짜로 올리는 일이라 돌려 보지 않고 공식 문서로 맞춘 **「예시 답」**입니다. 「예시 답」이라고 적힌 칸은 실제 화면과 글이 조금 다를 수 있습니다.

시작 전에

• 빈 폴더 하나를 만들고(이름은 영문으로, 예: 문서 폴더 안 ganada-site), 그 폴더에서 클로드(Claude Code)를 엽니다. 여는 법과 승인 방식(처음에는 Manual)은 02편 시작 전에와 같습니다.
• Node.js가 깔려 있어야 합니다. 올리는 도구(wrangler)가 Node.js 위에서 돕니다. 이미 깔려 있는지는 클로드에게 「Node.js 가 깔려 있는지 봐 줘」라고 물으면 알려 줍니다. 없으면 클라우드플레어 문서는 버전 관리 도구(Volta·nvm 같은 것)로 까는 것을 권합니다. (Workers 시작하기)
• 클라우드플레어 계정이 필요합니다(무료). dash.cloudflare.com 에서 가입하세요. 글자·그림 같은 정적 파일을 내보내는 요청은 무료이고 횟수 제한이 없다고 공식 문서가 적고 있습니다. (요금 안내)
• 이 편에서 올리는 것은 누구나 열 수 있는 페이지입니다. 회사 안 사람만 보게 하는 방법은 10편에 있습니다.

1단계 · 올릴 웹페이지 만들기

인터넷에 올릴 파일은 모두 public 폴더에 모읍니다. 이 폴더 이름이 4단계에서 중요해집니다.

✅ 이렇게 나오면 성공 — 폴더에 public/index.html 이 생기면 다음 단계로. (글 내용은 클로드마다 다릅니다. 내 회사 이야기로 바꿔 쳐도 됩니다.)

2단계 · 내 눈으로 열어 보기 (내가 직접)

이 단계는 클로드에게 말하지 않고 내가 직접 합니다. 탐색기에서 public 폴더의 index.html 을 더블클릭하면 브라우저에 페이지가 열립니다.

✅ 이렇게 나오면 성공 — 가나다전자 소개 글이 보이면 됩니다. 고치고 싶은 곳이 있으면 「제목을 ○○로 바꿔 줘」처럼 말하세요. 임시 연락처(02-000-0000 같은 것)는 실제 값으로 바꾸기 전에는 올리지 마세요.

3단계 · 올릴 폴더를 알려 주는 설정 파일 만들기

클라우드플레어에게 「이 이름으로, 이 폴더를 올려라」라고 알려 주는 설정 파일 wrangler.jsonc 를 만듭니다. 이름은 영문 소문자·숫자·하이픈만 쓰세요(63자 이하, 하이픈으로 시작하거나 끝나면 안 됨). 이 이름이 주소의 앞부분이 됩니다.

✅ 이렇게 나오면 성공 — 폴더 맨 위에 wrangler.jsonc 가 생기고, 안에 "directory": "./public" 이 보이면 다음 단계로. 날짜 칸(compatibility_date)은 클라우드플레어 실행 환경의 기준 날짜입니다. 공식 문서 예시에는 「오늘 날짜로 두라」는 주석이 있으니, 마음에 걸리면 「날짜를 오늘로 바꿔 줘」라고 말하세요.

4단계 · 올리기 전에, 공개되면 안 되는 것 걸러 내기

public 폴더 안의 파일은 전부 인터넷에 올라가고, 주소를 아는 사람은 누구나 내려받을 수 있습니다. 그래서 올리기 전에 한 번 점검합니다.

이번에는 일부러 실수를 하나 심어 봅니다. 메모장으로 public 폴더 안에 memo.txt 를 만들고 아래 두 줄(가짜 내용)을 적어 저장하세요. 급하게 메모를 아무 폴더에나 넣어 두었다가 같이 올리는 실수를 흉내 내는 것입니다.

거래처 담당자 김가나 010-0000-0000
관리자 비밀번호: demo1234

✅ 이렇게 나오면 성공 — public 안에 index.html 하나만 남았다고 하면 됩니다. 이미 어디엔가 올라간 비밀번호는 파일을 지워도 되돌릴 수 없으니, 실제로 쓰는 비밀번호였다면 바꾸세요. (이 편의 비밀번호는 가짜입니다.)

5단계 · 클라우드플레어에 로그인하기 (예시 답)

여기서부터는 클라우드플레어 계정이 필요합니다. 로그인과 허용 단추는 내가 직접 누릅니다. 클로드에게 비밀번호를 알려 줄 필요가 없습니다.

✅ 이렇게 나오면 성공 — 클로드가 내 클라우드플레어 계정 정보를 보여 주면 됩니다. 브라우저 창이 열리지 않는 PC 라면 아래 「막히면」 2번을 보세요.

6단계 · 인터넷에 올리기 (예시 답)

✅ 이렇게 나오면 성공 — 그 주소를 폰 브라우저(와이파이를 꺼 보면 더 확실합니다)에서 열어 소개 글이 보이면 됩니다. 내 PC 밖에서 열린다는 것이 올라갔다는 증거입니다. 올린 직후 1분쯤은 오류 화면이 나올 수 있습니다(아래 「막히면」 3번). 주소의 <내 계정 이름> 자리는 사람마다 다릅니다.

7단계 · 고쳐서 다시 올리기 (예시 답)

고친 뒤에는 같은 명령으로 다시 올립니다. 이름과 폴더는 3단계 설정 파일에 이미 적혀 있어서 다시 묻지 않습니다.

✅ 이렇게 나오면 성공 — 같은 주소를 새로고침했을 때 바뀐 전화번호가 보이면 끝입니다. 옛 글이 그대로 보이면 브라우저가 옛 파일을 붙잡고 있는 것이니 강제 새로고침(보통 Ctrl+F5)을 해 보세요.

다 됐습니다 — 이제 이렇게 말하면 됩니다

항상 이 폴더에서 클로드를 열고 이야기합니다.

• 「소개 페이지에 제품 목록 칸을 하나 늘려 줘. 그리고 올리기 전에 public 폴더를 한 번 더 점검해 줘.」
• 「올리기 전에, 지금 폴더의 설정 파일에 적힌 이름과 올릴 폴더를 먼저 말해 줘.」
• 「방금 고친 것만 다시 올려 줘.」
• 「이 페이지를 내리고 싶어. 어떻게 해야 해?」

막히면

1. node 나 npx 를 못 찾는다고 나온다 → Node.js 가 없습니다. 이렇게 다시 말하세요: "이 PC 에 Node.js 가 깔려 있는지 확인하고, 없으면 어디서 어떻게 받는지 알려 줘." 설치는 내가 직접 합니다. 설치 뒤 열려 있던 터미널·클로드를 껐다 켜야 보일 수 있습니다.
2. 로그인 창(브라우저)이 열리지 않는다 → 원격으로 접속한 PC 처럼 브라우저가 없는 곳일 수 있습니다. 보통 로그인은 같은 PC 의 브라우저가 그 PC 안의 임시 주소(localhost)로 돌아와야 끝납니다. 그래서 링크만 다른 PC 에서 열면 허용한 뒤 「사이트에 연결할 수 없음」으로 끝납니다. 공식 문서는 이럴 때 wrangler login --device 를 안내합니다. 화면에 나온 주소를 폰이나 다른 PC 에서 열고, 함께 나온 짧은 코드를 확인해 허용하는 방식입니다. 이렇게 다시 말하세요: "wrangler login --device 로 로그인해 줘. 주소와 코드가 나오면 내가 폰에서 직접 허용할게."
3. 올렸는데 주소가 열리지 않고 523 같은 오류가 난다 → 공식 문서는 workers.dev 주소로 처음 올린 직후에는 1분쯤 기다리면 풀린다고 안내합니다. 기다려도 안 되면 이렇게 다시 말하세요: "올린 결과 화면에 나온 주소가 정확히 뭐였는지 다시 보여 줘."
4. 이름 오류가 난다 → 이름은 영문·숫자·하이픈만, 63자 이하, 하이픈으로 시작하거나 끝나면 안 됩니다. 이렇게 다시 말하세요: "이름을 ganada-intro 처럼 영문 소문자와 하이픈만으로 바꾸고 설정 파일도 맞춰 줘."
5. 내 프로젝트가 아닌 엉뚱한 것이 올라갔다 → 제가 겪은 일입니다. 다른 프로젝트 폴더에서 올리는 명령을 쳤는데, 위쪽 폴더의 설정 파일이 먼저 잡혀 엉뚱한 사이트가 대신 올라갔습니다. 올리기 전에 이렇게 말하세요: "올리기 전에 지금 위치한 폴더와 설정 파일의 이름, 올릴 폴더를 먼저 말하고, 내가 맞다고 하면 올려 줘."
6. 파일이 너무 많거나 크다는 오류가 난다 → 무료 요금제에서는 한 번에 올릴 수 있는 파일이 2만 개, 파일 하나가 25 MiB 까지라고 공식 문서에 적혀 있습니다. 이렇게 다시 말하세요: "public 폴더의 파일 개수와 가장 큰 파일 다섯 개의 크기를 알려 줘."
7. 회사 사람만 보게 하고 싶다 → workers.dev 주소는 주소를 아는 사람이면 누구나 엽니다. 페이지에 로그인 단추를 달아도 페이지 파일 자체는 공개입니다. 이 문제는 10편에서 다룹니다.
8. 올린 것을 내리고 싶다 → 공식 wrangler delete 가 올린 워커를 지웁니다. 이렇게 말하세요: "이 워커를 내리고 싶어. 지우기 전에 무엇이 지워지는지 먼저 알려 주고, 내가 허락하면 지워 줘." (공식 문서에 지우지 않고 무엇이 지워질지만 보여 주는 --dry-run 이 있습니다.)

한 번에 맡기기 (익숙해진 다음에)

역할: 너는 내 PC 에서 일하는 도우미다. 내가 만든 정적 웹페이지(HTML 파일)를 클라우드플레어 워커스의 정적 파일 올리기(Workers static assets)로 인터넷에 올려 준다. 나는 초보자이니 어려운 말은 풀어서, 한 단계씩 말해 줘.

맥락: 지금 열려 있는 폴더가 작업 폴더다. 인터넷에 올라가는 것은 public 폴더 안의 파일 전부이고, 주소를 아는 사람은 누구나 내려받을 수 있다. 설정 파일은 폴더 맨 위의 wrangler.jsonc 이고, 서버 코드(main)는 쓰지 않는다. 올리는 도구는 wrangler 이고 npx 로 부른다. 로그인과 허용 단추는 사람이 브라우저에서 직접 누른다. 로그인 후 주소는 이름.계정이름.workers.dev 꼴이다.

입력: <운영체제>, <쓰는 클로드: Claude Code 터미널 / 데스크톱 앱의 Code 탭>, <워커 이름: 영문 소문자·숫자·하이픈, 63자 이하>, <올릴 페이지: 이미 public 폴더에 있다 / 새로 만들어 줘(내용: ...)>

작업:
① 확인 — 아무것도 만들기 전에 먼저 본다. 지금 폴더의 전체 경로를 말해 준다. Node.js 가 깔려 있는지(node --version) 본다. 없으면 어디서 받는지만 알려 주고 멈춘다. wrangler.jsonc 가 이미 있으면 덮어쓰지 말고 멈춰서 묻는다.
② 페이지 — public 폴더에 index.html 이 없으면 내가 말한 내용으로 만든다. 연락처 같은 칸은 지어내지 말고 「(입력 필요)」로 둔다.
③ 설정 — wrangler.jsonc 를 만든다. name 은 내가 말한 이름, compatibility_date 는 오늘 날짜, assets.directory 는 "./public". main 은 넣지 않는다.
④ 점검 — public 폴더 안의 모든 파일을 열어, 비밀번호·키·토큰·개인정보(이름+전화번호)·내부 메모가 있는지 본다. 하나라도 있으면 올리지 말고, 어느 파일의 어느 줄인지 알려 주고 멈춘다. 파일을 지우거나 옮기는 일은 내가 말할 때만 한다.
⑤ 올리기 전 확인 — 올라갈 파일 목록, 워커 이름, 예상 주소 형태를 말해 주고 「올려도 될까요?」라고 묻고 기다린다. 내가 「예」라고 하면 아래 순서로 한다.
 - npx wrangler login — 브라우저가 열리면 내가 직접 로그인하고 허용한다고 안내하고 기다린다. 끝나면 npx wrangler whoami 로 로그인된 계정을 확인한다.
 - npx wrangler deploy — 처음 올리면 workers.dev 계정 이름(하위 도메인)을 정하라고 물을 수 있다. 그때는 내게 묻는다.
⑥ 확인 안내 — 올린 주소를 알려 주고, 폰 브라우저(와이파이를 끈 상태)로 열어 보라고 안내한다. 올린 직후 1분쯤은 523 같은 오류가 날 수 있다고 알려 준다.
⑦ 마무리 — 초보자 눈높이로 무엇이 올라갔는지, 고친 뒤 다시 올리는 법(같은 폴더에서 「다시 올려 줘」), 내리는 법(wrangler delete, 지우기 전에 무엇이 지워지는지 먼저 말하기)을 설명한다.

제약: 비밀키·토큰·비밀번호를 출력하거나 파일에 쓰지 않기. CLOUDFLARE_API_TOKEN 같은 토큰을 묻거나 저장하지 말기(로그인은 브라우저로 한다). 오류를 건너뛰지 않기. 기존 파일을 지우지 않기(덮어쓰지도 않기). 이 폴더 밖의 파일을 읽지도 쓰지도 않기. public 밖의 파일은 올리지 않기. 내가 「예」라고 하기 전에는 wrangler login 과 wrangler deploy 를 실행하지 않기. 컴퓨터 전체에 설치(npm i -g)하지 않기.

출력: 한 일, 확인된 것(Node.js 버전·로그인 계정), 올라간 파일 목록, 올린 주소, 검증 결과, 남은 일.

검증: 아래를 다시 열어서 확인하고, 하나라도 실패하면 완료로 보고하지 말 것.
 (가) wrangler.jsonc 에 name 과 "directory": "./public" 이 있고 main 이 없다.
 (나) public 폴더에 비밀번호·키·개인정보가 든 파일이 없다.
 (다) 올린 뒤: 올린 주소의 응답 코드가 200 이고 첫 화면 글이 index.html 과 같다. 폰으로 열어 보는 확인은 내가 직접 하므로 「남은 일」로 적는다.

내가 만들 때는

처음엔 이렇게 시켰습니다. 2026-09-27 15:05, 회사 사이트와 도구를 올려 둔 저장소가 인터넷에 열려 있다는 것을 알게 된 날 이렇게 말했습니다. 「자, 지금 이제 사용하는데 문제 없어? 그리고 저장소는 비공개로 전환한 다음 우리 회사 사람들한테는 사용할 수 있게 해 주면 되잖아.」 조직이 무료 요금제라 비공개 저장소는 GitHub Pages(저장소 파일을 그대로 웹에 내는 서비스)를 쓸 수 없었습니다. 그냥 비공개로 돌리면 사이트가 바로 꺼질 판이었습니다. 그래서 이 편의 방법, 클라우드플레어 워커스로 옮겼습니다. 같은 날 15:57 에는 이렇게 이어 말했습니다. 「…공개로 둘 몇 개만 정하고 나머지는 전부 저장소를 비공개로 돌리고, 차량 앱도 사용에 문제 없이 해 줘…」

옮길 때는 새 곳에 같은 결과를 먼저 올리고 비교한 뒤에 비공개로 바꿨습니다. 차량 앱은 올린 파일의 해시(파일 내용 지문)를 옛 것과 대조했더니 JS·CSS 는 전부 같았고 몇 파일만 줄바꿈 방식이 달랐습니다. 윈도우에서 내려받아 빌드하면 줄바꿈이 윈도우 방식으로 바뀌기 때문이고, 자동 빌드는 리눅스라 원래와 같아집니다. 도메인은 옛 연결을 끄고 곧바로 새 연결을 붙이는 순서를 지켰습니다. 거꾸로 하면 그 사이에 서비스가 꺼집니다. 실패도 있었습니다. 올리기 도구는 설정 파일을 이름 종류별로 위쪽 폴더까지 찾아 올라갑니다. 그 폴더에는 이름이 다른 설정 파일(wrangler.toml)이 있었는데, 위쪽 사이트 폴더의 wrangler.jsonc 가 먼저 잡혀 다른 프로젝트를 올리려던 명령이 사이트를 대신 올렸습니다. 이후로는 올리기 전에 설정 파일 이름을 직접 지정하고, 위의 「막히면」 다섯째 항목처럼 이름과 폴더를 먼저 말하게 합니다. 도메인 연결을 바꾸는 일은 명령으로 되지 않아 클라우드플레어 화면에서 직접 했습니다.

→ 뒷이야기 8단계에서 배포 길 세 가지(GitHub Pages → 자동 빌드 → 워커스)를, 13단계(9번)에서 회사 사이트를 옮긴 날을, 2단계에서 정적 사이트를 올릴 때 겪은 배포 실패와 옛 캐시 문제를 자세히 보세요.