3부 세상에 공개한다

12장 · GitHub과 Vercel로 인터넷에 공개하기

지금 내 홈페이지는 내 노트북 안에만 있습니다. 24시간 켜져 있는 남의 컴퓨터에 올려 두고 주소를 붙입니다.

지금 내 홈페이지는

내 노트북 안에만 있습니다. 노트북을 끄면 아무도 못 봅니다. 인터넷에 공개한다 = 24시간 켜져 있는 남의 컴퓨터(서버)에 파일을 올려 두고, 주소를 붙이는 것입니다.

가게에 비유하면 이렇습니다.

왜 GitHub을 거쳐서 올리냐면, 창고를 두면 좋은 게 많기 때문입니다. 올릴 때마다 버전이 남아 망가져도 이전 상태로 되돌릴 수 있습니다. 노트북이 고장 나도 파일은 창고에 남습니다. 그리고 Vercel이 창고를 지켜보다가 새로 올라오면 알아서 다시 공개합니다. 순서는 늘 같습니다. 내 폴더에서 고치기 → GitHub에 올리기 → Vercel이 공개.

무료 요금제 주의 — 회사·상품 사이트라면 꼭

Vercel 무료(Hobby) 요금제는 공식 가이드상 '개인·비상업적 용도' 전용입니다. 상품·서비스 판매 홍보, 방문자 결제, 광고 게재, 돈 받고 만든 사이트는 상업적 이용이고, 회사 직원이 업무로 만든 회사 사이트도 해당할 수 있습니다. 상업적 이용엔 유료(Pro 이상) 요금제가 필요하다고 안내합니다. 연습은 무료로 공개하고, 회사·수익 사이트로 운영할 땐 유료 요금제를 검토하세요.

GitHub — 창고 만들기

① 가입 — github.com/signup. 이메일·비밀번호·사용자 이름(영문) 입력 → 메일 인증. 사용자 이름을 메모하세요. 저장소 주소 github.com/사용자이름에 들어갑니다. 비밀번호는 단톡방·메모장에 적지 않습니다.

② 빈 저장소 만들기 — 오른쪽 위 + → New repository. Repository name은 my-homepage(폴더 이름과 똑같이). 공개 범위는 Private(비공개). Add README는 끈 채로 → Create repository. 다음 화면의 https://github.com/…/my-homepage.git 주소를 복사합니다.

Private을 권하는 이유: 창고(저장소)와 매장(공개 페이지)은 따로입니다. 창고를 잠가도 사이트는 열립니다. 실수로 넣은 메모·연락처·키가 파일째 노출되는 걸 막는 두 번째 자물쇠입니다. 개인 계정의 비공개 저장소는 Vercel 무료 요금제에 연결됩니다(2026-09 기준). 회사 조직(Organization) 계정의 비공개 저장소는 무료 요금제로 공개가 안 되니, 처음엔 개인 계정으로 연습하세요.

비밀번호·키 — 두면 안 되는 곳

• API 키 = 비밀번호입니다. 새면 내 계정으로 사용·결제가 일어날 수 있습니다
• 홈페이지 파일에 키·비밀번호를 적지 않습니다. 공개 페이지는 원본도 보입니다
• 비밀 파일(.env 등)은 GitHub에 올리지 않습니다 → .gitignore 목록에 적어 제외
• 단톡방·캡처 화면에 키·비밀번호가 찍혀 있지 않은지 보내기 전에 확인
• 이미 새었다면: 파일에서 지우는 걸로 끝이 아니라 키를 새로 발급해 교체

모르면 Claude에게: "올리기 전에 비밀번호·키가 든 파일이 있는지 점검해줘."

③ 첫 올리기(push) — Git을 몰라도 됩니다. 요청문에 그렇게 적습니다.

이 폴더를 GitHub에 처음 올리고 싶어. 나는 Git을 몰라.
저장소 주소: https://github.com/[사용자이름]/my-homepage.git
1) 올리기 전에 비밀번호·키·개인정보가 든 파일 점검
2) .env 같은 비밀 파일은 .gitignore로 제외
3) 저장 메시지는 '첫 홈페이지'
4) 기본 브랜치 이름은 main으로
5) 올리기(push) 직전에 올라갈 파일 목록을 보여주고
   내 확인을 받아줘
로그인 창이 뜨면 무엇을 눌러야 하는지도 알려줘.

Git 이름·이메일을 물으면 GitHub 가입 때 쓴 것으로 답합니다. push 직전 확인 요청이 오면 올라갈 파일 목록을 읽고 승인. 브라우저에 GitHub 로그인 창이 뜨면 로그인 → 승인(Authorize). GitHub 저장소 페이지를 새로고침해 index.html이 보이면 성공입니다. 브랜치는 몰라도 됩니다. Vercel이 main을 봅니다.

영어 메시지여도 괜찮습니다. 통째로 복사해 Claude에게 넘기면 됩니다.

Vercel — 매장 열기

① 가입 — vercel.com/signup. 요금제를 묻는 화면이 나오면 Hobby(개인 프로젝트) → Continue with GitHub → GitHub 로그인 → Vercel 접근 승인. 대시보드가 보이면 완료.

② 저장소 가져오기 → Deploy — 대시보드에서 새 프로젝트(Add New → Project). GitHub 저장소 목록에서 my-homepage 옆 Import. 안 보이면 권한 설정에서 이 저장소를 허용합니다. Framework Preset이 Other인지 확인 — 다른 이름이 잡혀 있으면 Other로. 나머지는 그대로 → Deploy → 완료 화면까지 기다리기. 미리보기를 누르면 내 주소(○○.vercel.app)로 열립니다.

Other로 두는 이유: Vercel은 폴더를 보고 '어떤 방식으로 만든 사이트인지' 자동으로 추측합니다. 우리 홈페이지는 설치 없이 열리는 파일 묶음이라 공식 안내상 'Other'가 맞습니다. 엉뚱한 이름이 잡히면 필요 없는 조립 단계를 돌리다 배포가 실패할 수 있습니다. 이미 실패했다면 Settings → Build and Deployment에서 Other로 바꾸고 다시 배포. 실패 화면이 떠도 사이트가 망가진 게 아닙니다. 설정 한 칸의 문제입니다.

③ 내 폰에서 열어 보기 — 완주선입니다. 주소를 복사해 카카오톡 '나와의 채팅'으로 보내고, 폰에서 열어 전화·신청 버튼을 직접 눌러 봅니다. 폰에서 이상한 곳은 캡처해 둡니다. 곧 고칩니다. PC에선 되는데 폰에서 이상하면 좋은 발견입니다.

방금 일어난 일: 내 노트북에서 말로 만든 파일이, 지금 인터넷 어디서나 열립니다. 작업실 → 창고 → 매장 → 간판.

공개한 뒤에도 고치기

유지보수의 비밀은 이겁니다. 주소는 그대로 두고, 파일만 고쳐서 다시 올리면 됩니다. GitHub에 새로 올리면(push) Vercel이 알아서 다시 공개합니다. Vercel 화면에 다시 들어갈 필요가 없습니다.

push = GitHub에 올리기. 이 한 단어만 기억하세요. 안 바뀌어 보이면 브라우저가 옛 화면을 기억하는 중입니다. 잠시 뒤 다시 새로고침.

유지보수 습관 네 가지

• 한 번에 하나 고치고 → 확인하고 → 올리기. 섞으면 원인을 못 찾습니다
• 올릴 때 메시지는 '무엇을 바꿨는지' 한 줄. 되돌릴 때 지도가 됩니다
• 망가지면: "어제 잘 되던 버전으로 되돌려줘." 기록이 남아 있어 가능합니다
• 한 달에 한 번: 연락처·일정·안내 문구가 아직 맞는지 폰으로 훑어보기

이 홈페이지의 올리기 기록을 날짜·메시지 표로 보여줘.
그리고 '폰 화면 수정' 직전 상태로 되돌리고 싶어.
- 기록은 지우지 말고, 되돌린 내용을 새로 저장하는 방식으로
- 되돌리기 전에 무엇이 바뀌는지 먼저 설명해줘
- 내가 '진행'이라고 하면 되돌리고 GitHub에도 올려줘

'기록은 지우지 말고' — 망가져도 다시 돌아올 길을 남겨 두는 한 줄입니다. 사이트는 올리고 끝이 아니라, 가게처럼 가끔 들여다보는 것입니다.

이 장의 결과물

• ☐ GitHub 계정을 만들고 my-homepage 저장소를 Private으로 만들었다
• ☐ push 전에 올라갈 파일 목록을 읽었고, 저장소에서 index.html이 보인다
• ☐ Vercel로 공개해 ○○.vercel.app 주소가 PC와 내 폰에서 열린다
• ☐ 폰에서 찾은 문제 1개를 고쳐 다시 올렸다
• ☐ 홈페이지 주소와 GitHub 저장소 주소를 메모했다

오늘 밤, 내 주소를 한 사람에게 보내 보세요. '내가 만든 거야' 한마디가 계속 고치게 만드는 힘입니다.