1주차 3일차 · 내 사이트를 인터넷에 올리기 (배포)

오늘 할 일

• 지금까지 만든 내 사이트를 GitHub에 올리기
• Vercel로 배포해서 내 URL 만들기
• 그 URL을 브라우저에서 열어 확인하기

지금까지 로컬(내 컴퓨터)에서만 보던 그 사이트를, 오늘 인터넷에 올립니다. 배포는 이번 챌린지에서 제일 어려운 관문이니 천천히, 막히면 학습메이트한테 물으며 갑니다.

오늘 나오는 말

• 배포 — 내 컴퓨터에만 있던 사이트를 인터넷에 올려 누구나 주소로 볼 수 있게 하는 것.
• GitHub — 사이트 파일을 보관하는 인터넷 창고. 배포가 여기서 출발합니다.
• Vercel (버셀) — GitHub에 올린 사이트를 실제 인터넷 주소로 띄워주는 서비스.
• URL — 인터넷 주소. 배포가 끝나면 내이름.vercel.app 같은 주소가 생깁니다.

시작 전에 — 내 작업 폴더 열기

배포할 사이트는 첫날부터 작업해온 그 사이트, 즉 my-learning-hub 폴더입니다. 오늘도 이 폴더를 Cowork로 열고 시작합니다. (계속 열어놨으면 그대로 이어서 하면 됩니다.)

폴더가 어디 있는지 헷갈리면, 아무 데서나 학습메이트한테 물어봐도 됩니다.

내 my-learning-hub 폴더가 어디 있는지 찾아줘. 찾으면 그 폴더에서 이어서 작업하자.

✅ 학습메이트가 어제까지 만든 내 사이트(랜딩·위키 등)를 알아보면, 제대로 그 폴더에서 시작한 겁니다.

시작 전에 — 회원가입 두 개

오늘은 인터넷에 올리는 날이라 두 곳에 가입(로그인)이 필요합니다.

• GitHub — 사이트를 올려둘 창고
• Vercel — 사이트를 인터넷에 띄워줄 서비스

가입도 AI한테 물어보며 합니다. 아래를 붙여넣으면 어디서 뭘 누르면 되는지 안내해줍니다.

나는 코딩을 모르는 비개발자야. 오늘 내 사이트를 인터넷에 올릴 거야.
그러려면 GitHub와 Vercel에 가입(로그인)이 필요하다고 들었어.
아직 계정이 없어. 두 곳에 어떻게 가입하는지 순서대로 안내해줘.
Vercel은 GitHub 계정으로 바로 로그인하는 게 편하다고 하던데, 그 방법으로 부탁해.
가입하다 막히면 내가 화면을 캡처해서 보여줄게.

✅ GitHub 계정이 생기고, 그 계정으로 Vercel에도 로그인되면 준비 끝입니다. ❓ 가입 화면에서 뭘 눌러야 할지 모르겠으면, 그 화면을 캡처해서 학습메이트한테 보여주며 "여기서 뭘 눌러?" 하고 물어봅니다.

1단계 — GitHub에 올릴 도구 먼저 깔기

GitHub에 올리려면 도구 두 개가 필요합니다. Git(파일 버전 관리)과 GitHub CLI(GitHub에 올리는 도구). 초보 컴퓨터엔 대개 없으니 오늘 먼저 깝니다. 설치도 학습메이트한테 시킵니다.

내 사이트를 GitHub에 올리고 Vercel로 배포까지 할 거야. 나는 코딩을 몰라.
- 오늘 필요한 도구를 전부 확인해줘: Git, GitHub CLI(gh), 그리고 Node.js(Vercel 도구가 이 위에서 돌아).
- 없는 것만 지금 내 컴퓨터에 맞게 설치해줘. "깔까요?"라고 되묻지 말고 바로 진행해줘.
- 설치 중에 내가 직접 클릭해야 하는 화면이 나올 때만, 뭘 눌러야 하는지 알려줘.
- 설치가 끝났는데 도구를 못 찾겠다고 나오면, 새 터미널에서 다시 확인해줘.
- 다 되면 "이제 준비됐어"라고 알려줘.

✅ "도구가 다 준비됐다"는 답이 나오면 다음으로 넘어갑니다. ❓ 설치 화면에서 뭘 눌러야 할지 모르겠으면 그 화면을 캡처해서 "여기서 뭘 눌러?" 하고 물어봅니다. ❓ 깔았다는데 "못 찾는다(not found)"고 하면 → "새 터미널을 열어서 다시 확인해줘" 하면 대부분 해결됩니다. (방금 깐 도구는 새 창부터 보여요.)

2단계 — 내 사이트를 GitHub에 올리기

오늘의 진짜 관문은 이 단계입니다. 지금 열어놓은 이 my-learning-hub 폴더(며칠간 랜딩·위키·개념페이지를 채운 그 사이트)를 GitHub 창고에 통째로 올립니다. 여기만 넘으면 다음 배포는 거의 자동입니다.

지금 이 폴더(my-learning-hub, 내 학습허브 사이트)를 통째로 GitHub에 올려줘.
Git으로 해줘. 나는 코딩을 몰라서 명령어를 직접 못 쳐, 네가 대신 실행해줘.
- GitHub에 새 저장소(repository)를 하나 만들어서, 이 폴더 내용을 전부 올려줘.
- 저장소는 비공개(private)로 만들어줘. 내 학습일지가 들어 있어서.
- 처음이라 GitHub 로그인/인증이 필요하면, 뭘 어디서 해야 하는지 알려줘.
- 다 올라가면 GitHub에서 내 사이트 주소(저장소 링크)를 알려줘.

🔒 왜 비공개로 만드나 — 저장소에는 사이트에 안 보이는 파일도 같이 올라갑니다. 학습일지처럼 나만 보는 기록도요. 비공개로 두면 배포한 사이트는 그대로 열리면서 파일만 나만 볼 수 있습니다. 나중에 공개하고 싶어지면 그때 바꾸면 됩니다.

올리는 도중 GitHub가 인증(너 맞아?)을 요구할 수 있습니다. 처음 한 번만이고, 학습메이트가 뭘 하라고 짚어줍니다.

🔑 인증, 미리 알고 가면 안 무섭습니다 (처음 한 번만) 보통 이렇게 흘러갑니다: ① 채팅에 8자리 코드**(예: A1B2-C3D4)가 보이고 → ② 브라우저가 열리면(안 열리면 학습메이트가 알려준 주소를 직접 열기) → ③ 그 코드를 입력하고 **초록 버튼(Authorize)을 누릅니다. ★ 이 인증은 컴퓨터 보안이라 내가 직접 하는 부분이에요. 그래서 학습메이트가 한참 조용하면 = 지금 내가 브라우저에서 할 차례라는 뜻일 때가 많습니다. 고장난 게 아니에요. 헷갈리면 화면을 캡처해서 "지금 뭘 하면 돼?" 물어보세요.

✅ GitHub 사이트에 들어갔을 때 내 사이트 파일들이 보이면 성공입니다. 가장 큰 관문을 넘은 것입니다. ❓ 인증 단계에서 막히면 "지금 이 인증 화면에서 뭘 해야 해?" 하고 캡처와 함께 물어봅니다.

GitHub를 배우는 진짜 이유

오늘은 배포하려고 올렸지만, GitHub의 쓸모는 그보다 큽니다.

AI는 내 컴퓨터 안에서 일합니다. 혼자 쓸 땐 상관없지만, 여럿이 함께 일하려면 — 사람과 사람이든, 사람과 AI든 — 작업물이 오가는 공동 창고가 필요합니다. 그게 GitHub예요.

지금은 내 사이트 하나 올리는 것이지만, 이 구조를 익혀두면 나중에 AI에게 일을 맡기고 결과를 받아보는 방식이 그대로 여기서 굴러갑니다. 오늘 넘은 관문이 그 시작점입니다.

3단계 — Vercel로 배포해서 내 URL 만들기

GitHub에 올렸으면 Vercel로 인터넷에 띄웁니다. Vercel CLI 설치·로그인도 학습메이트한테 시킵니다.

방금 GitHub에 올린 이 사이트를 Vercel로 배포해줘. Vercel CLI로 해줘.
나는 코딩을 몰라서 명령어를 직접 못 쳐, 네가 대신 실행해줘.
- Vercel CLI가 없으면 "깔까요?"라고 되묻지 말고 바로 설치해줘.
- 처음이라 Vercel 로그인이 필요하면, 아까 만든 GitHub 계정으로 로그인하게 안내해줘.
- 방금 올린 그 GitHub 저장소를 배포하는 거야.
- 배포가 끝나면 내 사이트 URL(주소)을 알려줘.

로그인은 브라우저가 열리며 "이 접속을 허락할래?" 하면 허락을 누르면 됩니다. 그 뒤 Vercel이 사이트를 만들어 내이름.vercel.app 같은 주소를 줍니다.

★ 여기서도 마찬가지 — 학습메이트가 조용하면 브라우저를 확인하세요. 로그인 허락을 기다리고 있는 겁니다. (Vercel 도구는 1단계에서 챙긴 Node.js 위에서 돌아요. 1단계를 건너뛰었다면 돌아가서 먼저 하세요.)

✅ .vercel.app으로 끝나는 URL이 나오면 배포 성공입니다. ❓ URL이 안 나오거나 에러가 뜨면 그 메시지를 그대로 학습메이트한테 보여주며 "이게 무슨 뜻이고 어떻게 고쳐?" 하고 물어봅니다.

4단계 — 내 URL 열어서 확인하기

받은 URL을 브라우저에 붙여넣고 엽니다. 로컬에서만 보던 사이트가 인터넷 주소로 뜨고, 이 링크는 친구 폰에서도 열립니다. 내 사이트가 세상에 나왔습니다.

방금 받은 URL로 내 사이트가 잘 열리는지 같이 확인해줘.
혹시 로컬에서 보이던 것과 다르게 나오는 부분이 있으면 알려줘.

✅ 그 URL을 열었을 때 내 사이트가 뜨면 오늘의 미션 완료입니다. ❓ 화면 일부가 깨지거나 안 보이면 "로컬에선 보였는데 배포하니 안 보여, 왜 그런지 봐줘" 하고 물어봅니다.

개념 한 입

오늘 나온 말 중, 처음 보면 낯선 것들:

• CLI (명령줄) — 버튼 클릭 대신 글자 명령어로 컴퓨터에 시키는 방식. 우리는 명령어를 외우지 않고, 학습메이트한테 말로 시키면 대신 실행해줍니다.
• 저장소 (repository, 레포) — GitHub 안에서 한 프로젝트의 파일을 모아두는 창고 한 칸.
• 인증 / 로그인 — "정말 너 맞아?"를 확인하는 절차. 처음 한 번만 하면 그다음부터는 안 물어봅니다.

마무리 · 학습 기록하기 (학습 자산화)

1단계 · 학습일지 — 학습메이트한테 아래 프롬프트를 넣어 학습일지를 작성하세요.

오늘 학습일지 작성해줘.

2단계 · 사례글 — 학습메이트가 제안하는 소재 중 하나 골라 사례글로.

3단계 · 업로드 — 미리보기로 복사 → 지피터스에 붙여넣기 → AI 온보딩 태그 → 발행

✅ 사례글이 올라가면 오늘 완주.

내일은 사이트를 고치다 망가져도 이전으로 되돌리는 법(커밋·되돌리기)을 배웁니다. 이걸 알면 마음 놓고 이것저것 바꿔볼 수 있습니다.