클로드 코드로 첫 페이지 만들기06 / 06전체 레슨 →

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

for 클로드 구독자 · 6강 — 내 페이지에 진짜 URL이 생겨서 폰에서 열려요. 무료 배포, 그리고 내 컴퓨터와 인터넷의 차이. 이 코스의 하이라이트예요.

오늘의 접시: 진짜 URL에 올라간 내 페이지 — 폰에서 열려요

다섯 레슨 동안 만든 모든 것이 아직 내 컴퓨터 안에만 있어요. 페이지는 잘 돌아가지만, 만든 그 컴퓨터에서만요. 이 강의가 처음부터 향해 온 순간이 하나 있다면 바로 다음 15분이에요. 내가 만든 페이지가 진짜 주소를 달고 인터넷에 올라가서, 폰에서 열리는 것.

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

오늘 만들 것

https://your-chosen-name.pages.dev — 라이브로 뜨고, 무료이고, 내 거예요. 그리고 이걸 실감 나게 만들어 주는 마무리 단계까지.

준비물

  • first-kitchen 폴더 — 자랑스러운 모습으로 다듬은 페이지
  • 무료 Cloudflare 계정: dash.cloudflare.com — 이메일만 있으면 되고, 신용카드 불필요, 2분이면 끝나요. 지금 만들고 돌아오세요.
  • 약 15분

따라 하기

1. 공개 전 마지막 점검

페이지가 곧 공개돼요. 먼저 이렇게 요청하세요:

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

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

2. 배포 요청하기

이 페이지를 진짜 인터넷에 올려 줘. 무료로.

1. 이 프로젝트가 브라우저가 열 수 있는 정적 파일뿐이고, 그 안에
   비밀 정보가 없는지 확인해 줘.
2. 무료 Cloudflare 계정이 있어. Cloudflare Pages로
   [PICK-A-NAME]이라는 프로젝트 이름으로 배포해 줘 — 그게 내 URL
   [PICK-A-NAME].pages.dev가 되니까, 이미 누가 쓰고 있을 때를
   대비해서 예비 이름도 하나 골라 줘.
3. 일회성 Cloudflare 로그인을 위해 브라우저 창이 뜰 거야 —
   언제 뜰지 미리 알려주고, 내가 끝낼 때까지 기다려 줘.
4. 라이브가 되면 URL을 알려주고 실제로 로딩되는지 확인해 줘.
5. 세이브 포인트 만들어 줘: "첫 배포".

이 과정에서 제일 무서워 보이는 게 3번인데, 실체는 그냥 로그인 버튼이에요. 승인을 누르세요. 예전 같으면 시스템 관리자의 오후를 통째로 잡아먹었을 일을, 터미널이 몇 초 만에 해치우는 걸 지켜보세요.

3. 마무리 단계 (건너뛰지 마세요)

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

4. 업데이트 동작 익히기

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

새 버전 배포해 줘.

같은 URL, 새 버전, 몇 초. 앞으로 이 루프 안에서 살게 돼요. 내 컴퓨터에서 만들고, 확인하고, 배포하기.

막혔을 때

  • 프로젝트 이름이 이미 있대요 — Pages 전체에서 선착순이에요. 예비 이름을 쓰거나 새로 지으세요. 언젠가 이 URL을 입으로 말할 날이 오니, 마음에 드는 걸 고르세요.
  • 로그인 창이 안 떠요 — 대신 터미널에 로그인 링크가 찍혀요. "로그인 URL 보여 줘"라고 하고 직접 클릭하세요.
  • URL에 "nothing is here yet"이 떠요 — 갓 배포된 사이트는 전 세계에서 깨어나는 데 1분쯤 걸릴 수 있어요. 60초 기다렸다가 새로고침하면 나타나요.
  • 라이브가 된 후에 주소/전화번호/실명이 보여요 — 당황할 필요 없어요. 고치고, "새 버전 배포해 줘", 끝. (캐시가 몇 분간 옛 페이지를 붙들고 있을 수 있어요.)
  • GitHub 연결을 제안해요 — 훌륭한 정석 워크플로지만 오늘 할 일은 아니에요. "지금은 직접 배포만 할게."

마무리 체크

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

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

잠깐만 실감해 보세요. 다섯 레슨 전만 해도 컴퓨터에게 뭘 만들라고 말해 본 적이 없었어요. 지금은 직접 만든 것이 인터넷에 주소를 갖고 있어요. 남은 레슨들은 이 능력을 가진 사람이 다음에 뭘 하느냐에 대한 이야기예요. 먼저 진짜 일상을 겨냥하는 것부터요.

다음은 심화예요 — 나만의 AI 도구 만들기에서 내 데이터를 다루는 도구를 만들어요.

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

직접 만들고 돌아가는 걸 확인했나요? 그럼 서빙하세요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.

어느 단계에서 막혔나요?

여기에 바로 물어보세요. 계정은 필요 없어요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 답변은 본문에 반영돼서 다음 사람은 매끄럽게 지나가요.

더 고픈가요?

새 레슨이 올라오는 대로 메일함에 도착해요. 스팸 없이, 언제든 구독 취소할 수 있어요.