4강 · 인터넷에 무료로 배포하기

지금 그 페이지는 내 컴퓨터 안에만 있어요. 노트북을 닫으면 아무도 볼 수 없죠.

오늘 그걸 바꿔요. 30분 뒤면 https://로 시작하는 진짜 주소가 생기고, 그 주소를 카톡으로 보낼 수 있어요. 받은 사람이 폰에서 열어요.

비용은 0원이에요. 카드도 안 넣어요.

오늘 만들 것

인터넷에 살아 있는 내 페이지. 진짜 주소, 진짜 https, 진짜로 남에게 보여줄 수 있는 것.

그리고 앞으로 뭘 고치든 몇 초 만에 반영하는 방법.

준비물

3강을 마친 상태 (git 저장점이 찍혀 있는 my-page 폴더)
25분
이메일 주소 하나

따라 하기

1. 어디에 올릴지 정하기

내 페이지를 대신 보여줄 컴퓨터가 필요해요. 그걸 빌려주는 서비스가 많고, 정적인 페이지 한 장은 대부분 무료예요. 광고도 안 붙어요.

이 강의에서는 Cloudflare Pages를 써요. 무료 범위가 넉넉하고, 카드 등록을 요구하지 않고, 한국에서 빠르거든요. Netlify나 Vercel도 똑같이 좋아요. 나중에 옮겨도 돼요.

2. 파일을 인터넷 창고에 올리기

배포 서비스는 내 폴더를 직접 못 봐요. 중간에 창고가 하나 필요해요. 그게 GitHub예요. 3강에서 쓴 git의 온라인 버전이라고 생각하면 돼요.

github.com에서 계정을 만드세요. 이메일과 비밀번호면 끝이에요.

그다음 에이전트에게 시키세요.

내 my-page 폴더를 GitHub에 올리고 싶어. GitHub 계정은 방금 만들었어.
나는 git과 GitHub를 처음 써.

1. 필요한 설정을 알려 주고, 내가 직접 해야 하는 건 무엇인지 알려 줘
2. GitHub에 새 저장소를 만드는 방법을 단계별로 알려 줘 (이름은 my-page)
3. 저장소는 public으로 할 거야
4. 내 폴더를 그 저장소에 올려 줘

각 단계에서 브라우저로 뭘 눌러야 하는지도 한국어로 알려 줘.

에이전트가 단계를 나눠서 안내해요. 중간에 GitHub 로그인을 물어보면 브라우저 창이 뜨고, 승인 버튼을 누르면 돼요.

다 되면 브라우저에서 github.com/내아이디/my-page에 들어가 보세요. index.html이 거기 있어요. 내 파일이 인터넷 창고에 도착했어요.

3. 배포 연결하기

이제 Cloudflare에게 "저 창고를 보고 페이지를 띄워 줘"라고 부탁해요.

dash.cloudflare.com에서 계정을 만드세요. 무료 플랜을 고르면 카드는 안 물어봐요.
왼쪽 메뉴에서 Workers & Pages → Create → Pages → Connect to Git을 누르세요.
GitHub 연결을 승인하고, my-page 저장소를 고르세요.
빌드 설정 화면이 나와요. 아무것도 입력하지 말고 그대로 두세요. HTML 파일 하나뿐이라 빌드할 게 없어요.
Save and Deploy를 누르세요.

1~2분 기다리면 초록색 체크와 함께 주소가 하나 나와요. my-page-abc.pages.dev 같은 모양이에요.

그 주소를 클릭하세요. 내 페이지가 인터넷에 떠 있어요.

4. 폰으로 열어보기

그 주소를 나에게 카톡으로 보내세요. 폰에서 열어보세요.

내가 만든 페이지가 내 폰에 떠요. 이게 오늘의 진짜 결과물이에요. 파일이 아니라, 어디서든 열리는 것이요.

글자가 잘리거나 너무 작으면 컴퓨터로 돌아가 에이전트에게 말하세요.

배포한 페이지를 폰에서 봤더니 [글자가 너무 작아]. 폰 화면에서
읽기 좋게 고쳐 줘.

5. 고친 걸 반영하기

이제부터가 좋아요. 페이지를 고칠 때마다 이렇게만 하면 돼요.

지금 바뀐 내용을 "폰 글씨 크기 수정"이라는 이름으로 저장하고,
GitHub에 올려 줘.

Cloudflare가 알아서 알아채고 1분 안에 새 버전으로 바꿔요. 아무것도 안 눌러도 돼요.

이 흐름이 앞으로 계속 쓸 리듬이에요. 고치고 → 저장하고 → 올리고 → 자동 배포.

6. 친구 한 명에게 보내기

마지막 단계예요. 건너뛰지 마세요.

주소를 한 사람에게 보내세요. 아무나 말고, 내가 뭔가 만들었다는 걸 알면 좋아할 사람 한 명이요.

"나 이거 만들었어"라고 보내는 순간, 배우는 사람에서 만드는 사람으로 넘어가요. 그게 이 강의의 진짜 목적이에요.

막혔을 때

GitHub에 올릴 때 비밀번호를 계속 물어봐요. GitHub는 비밀번호 대신 토큰을 써요. 에이전트에게 "GitHub 인증이 안 돼. 어떻게 설정하면 되는지 알려 줘"라고 하면 지금 상황에 맞는 방법을 안내해요. VS Code의 GitHub 로그인을 쓰는 게 제일 쉬워요.

Cloudflare에서 빌드가 실패했어요. 빌드 설정에 뭔가 적혀 있을 가능성이 커요. 프로젝트 설정에서 빌드 명령을 비우고, 출력 디렉터리도 비운 다음 다시 배포하세요.

주소는 열리는데 빈 화면이에요. 파일 이름이 index.html이 맞는지 확인하세요. Index.html이나 index.htm이면 안 열려요. 대소문자까지 정확해야 해요.

저장소를 private으로 만들었어요. 괜찮아요. Cloudflare가 접근 권한을 물어보면 승인하면 돼요. 다만 public이 더 간단하고, 자기소개 페이지에 숨길 게 없다면 public을 권해요.

주소가 너무 못생겼어요. pages.dev 주소는 무료라 그래요. 내 도메인을 사서 붙일 수 있는데, 그건 연 만 원 정도 들어요. 지금은 그냥 두세요. 주소가 예뻐진다고 페이지가 좋아지진 않아요.

남에게 보여주기 부끄러워요. 다들 그래요. 완벽해서 보여주는 게 아니라, 보여줘서 완벽해지는 거예요. 첫 반응을 받고 나면 다음에 뭘 고칠지가 저절로 보여요.

마무리 체크

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

https://로 시작하는 내 페이지 주소가 있어요
그 주소를 폰에서 열어봤어요
뭔가 고친 다음, 저장하고 올려서 자동으로 반영되는 걸 봤어요
사람 한 명에게 주소를 보냈어요

네 개가 다 됐다면, 시즌 1은 여기까지예요.

4강 전에는 없던 것이 지금 있어요. 인터넷에 올라간, 내가 만든 것. 아무도 되돌릴 수 없는 사실이에요.

그리고 더 중요한 게 생겼어요. 뭔가 만들고 싶을 때 어디서 시작할지 아는 사람이 됐어요. 설치하고, 말로 시키고, 고치고, 되돌리고, 올린다. 이 다섯 동작이면 웬만한 건 다 만들어요.

다음은 어디로

여기서 멈춰도 괜찮아요. 첫 페이지를 배포한 사람은 이미 대부분보다 멀리 왔어요.

더 만들고 싶다면 단편 레슨에 지난 강의가 전부 정리돼 있어요. 순서대로 읽으면 돼요.

내 파일을 다루는 AI 도구 만들기 — 내 CSV를 읽고 요약하는 도구, 나 없이 도는 자동화
사람들이 쓰는 웹앱 만들기 — 방문자의 입력을 받아 저장하는 진짜 앱
내 업무 자동화하기 — 파일 정리, 주간보고, 아침 브리핑
AI 에이전트 팀 만들기 — 여러 에이전트가 동시에 일하게

막힌 곳이 있었다면 아래 질문 상자에 남겨 주세요. 그건 강의에 난 구멍이지, 읽는 사람 잘못이 아니에요.

인터넷에 무료로 배포하기