내 페이지 인터넷에 무료로 배포하기

다섯 레슨 동안 만든 모든 것이 아직 문 없는 주방에 살고 있어요. 페이지는 잘 돌아가지만, 요리한 그 컴퓨터에서만요. 이 코스가 처음부터 계속 걸어온 순간이 하나 있다면 바로 다음 몇 분이에요. 내가 만든 페이지가 진짜 주소를 달고 열린 인터넷에 올라가서, 폰에서 열리는 것.

이 단계를 자꾸 "와우 포인트"라고 부르는 건 저희가 직접 겪어봤기 때문이에요. 내 설정과 아무 상관 없는 기기에서 내가 만든 것이 로딩되는 느낌은 "로컬에서는 되는데"와는 종류가 다른 감각이에요. 빌더라는 말이 희망 사항이기를 멈추는 날이죠. (배포의 전체 이야기와 다른 선택지들은 이 레시피에 있어요 — 오늘은 이 코스 프로젝트에 맞춘 버전이에요.)

오늘 만들 것

내 이름이 붙은 진짜 URL 하나 — 라이브로 뜨고, 무료이고, 내 거예요. 그리고 이걸 실감 나게 만들어 주는 의식까지.

준비물

• first-page 폴더 — 자랑스러운 모습으로 다듬은 페이지
• GitHub 계정과 Cloudflare 무료 계정 (둘 다 없다면 이 강의에서 만들어요)
• 약 30분

따라 하기

오늘의 핵심 원칙 먼저. 배포도 클릭 경로를 외우는 게 아니라 흐름을 이해하는 일이에요. 우리가 만든 index.html을 GitHub에 저장하고, Cloudflare Pages가 그 저장소를 읽어 공개해요. 그다음부터는 GitHub에 새 저장점을 올릴 때마다 자동으로 다시 배포돼요. 이 강의에서는 선택지를 넓히지 않고 이 한 길만 따라갑니다.

1. 공개 전 마지막 맛보기

페이지가 곧 공개돼요. 먼저 Codex 채팅창에 주문 하나:

index.html을 낯선 사람의 눈으로 읽어 줘. 이 페이지에 공개하고
싶지 않을 만한 게 있어? — 실명 전체, 전화번호, 이메일, 직장,
뭐든. 찾은 걸 목록으로 알려 줘. 아직 아무것도 바꾸지는 마.

페이지의 주인으로서 결정하세요. 별명이냐 실명이냐, 남기느냐 지우느냐. 나중에 바꾸는 건 한 문장에 재배포 한 번이면 돼요. 문신이 아니니까요.

2. GitHub에 인터넷 저장소 만들기

먼저 GitHub에 로그인하고, Codex에게 저장소 만들기부터 맡기세요:

first-page 프로젝트를 GitHub에 올려 줘. 나는 GitHub가 처음이야.

1. index.html과 AGENTS.md에 비밀 정보가 없는지 먼저 확인해 줘.
2. GitHub에 first-page라는 새 public 저장소를 만드는 화면을
   한 단계씩 안내해 줘. 내가 로그인하거나 버튼을 눌러야 하면
   그 자리에서 멈춰서 기다려 줘.
3. 현재 git 저장점을 그 저장소의 main 브랜치에 올려 줘.
4. 끝나면 저장소 URL과 올라간 파일 목록을 알려 줘.

Codex가 로그인을 대신하지는 않아요. 브라우저에서 계정과 저장소를 만드는 단계는 직접 하고, 끝났다고 알려 주세요. github.com/내아이디/first-page에서 index.html이 보이면 인터넷 저장소 준비가 끝났어요.

3. Cloudflare Pages와 연결하기

Cloudflare 대시보드에 로그인하세요. 공식 Pages Git 연결 안내 기준으로 현재 경로는 다음과 같아요.

1. Workers & Pages로 이동해 Create application을 누르세요.
2. Pages → Connect to Git을 고르세요.
3. GitHub 연결을 승인하고 first-page 저장소를 선택하세요.
4. 프로젝트 이름은 원하는 대로 두고, Production branch는 main을 골라요.
5. 프레임워크는 쓰지 않으므로 Build command는 비워 두세요. Root directory도 비워 둡니다.
6. Save and Deploy를 누르세요.

잠시 뒤 https://이름.pages.dev 모양의 주소가 생겨요. 그 주소를 열어 index.html이 나오는지 확인하세요. 이 단계의 버튼 이름이 달라졌다면 Codex에게 공식 문서를 기준으로 현재 화면을 다시 안내해 달라고 하세요:

Cloudflare Pages의 공식 Git integration 문서를 기준으로 안내해 줘:
https://developers.cloudflare.com/pages/get-started/git-integration/

지금 내 화면에는 [보이는 버튼이나 오류를 그대로 적기]가 보여.
다음에 눌러야 할 것 하나만 말하고 기다려 줘.

다 되면 저장점 하나를 남기세요:

세이브 포인트 만들어 줘: "첫 배포".

4. 의식 (건너뛰지 마세요)

1. URL을 폰으로 여세요. 노트북 말고 폰이요. 폰이 증거예요. 이 주방에 한 번도 닿은 적 없는 기기니까요.
2. 재밌어할 딱 한 사람에게 링크를 보내세요. "잠깐, 이걸 '네가' 만들었다고?"가 돌아오는 걸 보세요. 그 메시지가 이 레슨의 진짜 졸업장이에요.

5. 업데이트 동작 익히기

페이지에서 작은 것 하나를 바꾼 뒤:

방금 바꾼 내용을 "첫 배포 뒤 작은 수정"이라는 저장점으로 남기고
GitHub main 브랜치에 올려 줘. Cloudflare Pages 배포가 끝나면
같은 URL에서 바뀐 내용을 확인해 줘.

같은 URL, 새 요리, 몇 초. 앞으로 이 루프 안에서 살게 돼요. 로컬에서 요리하고, 맛보고, 배포하기.

막혔을 때

• 고른 이름이 이미 있대요 — 무료 호스팅의 주소는 대개 선착순이에요. 에이전트에게 "다른 이름으로 다시 해 줘"라고 하면 돼요. 언젠가 이 URL을 입으로 말할 날이 오니, 마음에 드는 걸 고르세요.
• GitHub에 올릴 때 로그인이 안 돼요 — VS Code 왼쪽 아래 계정 메뉴에서 GitHub 로그인을 먼저 마친 뒤 다시 요청하세요. 비밀번호를 터미널에 붙여넣지는 마세요.
• Cloudflare에서 저장소가 안 보여요 — GitHub의 Cloudflare 앱이 first-page 저장소에 접근하도록 허용됐는지 확인하세요. Cloudflare의 Git 연결 설정에서 다시 승인해도 돼요.
• URL에 DNS 오류가 떠요 — 첫 배포 직후에는 주소가 퍼지는 데 시간이 걸릴 수 있어요. 다른 네트워크나 폰에서 열어 보고 잠시 뒤 다시 시도하세요.
• 라이브가 된 후에 주소/전화번호/실명이 보여요 — 당황할 필요 없어요. 고치고, "새 버전 배포해 줘", 끝. (캐시가 몇 분간 옛 페이지를 붙들고 있을 수 있어요.)
• 에이전트가 제시한 배포 단계가 헷갈려요 — 멈추고 물어보세요. "지금 이 단계를 초보자한테 하듯 다시, 화면에 뭐가 보일지까지 설명해 줘." 배포는 이 코스에서 움직이는 부품이 가장 많은 단계라, 천천히 가도 괜찮아요.

마무리 체크

나가기 전에 하나씩 확인해요:

□ 내 페이지가 진짜 URL에서 열린다 — 내 폰에서
□ 내가 아닌 한 사람이 열어봤다
□ 한 문장으로 업데이트를 배포했다
□ "첫 배포" 세이브 포인트가 존재한다

잠깐만 음미해 보세요. 여섯 레슨 전만 해도 컴퓨터에게 뭘 만들라고 말해 본 적이 없었어요. 지금은 직접 만든 것이 인터넷에 주소를 갖고 있어요. 이건 시작이지 끝이 아니에요.

다음은 자유 프로젝트예요. 단편 레슨에서 만들고 싶은 주제를 하나 골라, 이번 코스의 여섯 동작을 그대로 반복해 보세요.

배포는 지금까지 중 움직이는 부품이 가장 많은 단계예요. 막힌 단계가 있나요? 아래 질문 상자에 남겨 주세요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 질문 하나가 다음 사람의 길을 메워 줘요.