내 사이트가 안 바뀌었어요 — 로컬·GitHub·배포, 3단계를 헷갈렸던 하루

한 줄 요약

로드맵을 다 만들었는데 실제 사이트엔 안 보여서 한참 헤맸어요. 알고 보니 “내 컴퓨터에서 미리보기”와 “인터넷에 진짜 올라간 사이트”는 완전히 다른 곳이었고, 그 사이를 GitHub과 Vercel이 이어주고 있었어요.

누구에게 도움이 될까

• 학습메이트한테 “이거 만들어줘”를 시켜서 파일은 생겼는데, 실제 사이트(배포된 주소)엔 안 보여서 당황한 적 있는 분
• “로컬”, “커밋”, “푸시”, “배포”라는 말이 다 따로따로 들려서 뭐가 뭔지 헷갈리는 분

Before — 이런 상황이었어요

4주 로드맵을 인터뷰로 완성하고 “위키에 저장했어요, 미리보기에서 확인해보세요”라는 말을 들었어요. 그런데 제가 실제로 열어본 건 https://learning-hub-template.vercel.app — 진짜 인터넷 주소였는데, 거기엔 로드맵이 안 보였어요. “분명 만들었다고 했는데 왜 없지?” 싶어서 답답했어요.

어떻게 했나 — 실제 대화

이렇게 물어봤어요:

https://learning-hub-template.vercel.app/ 여기엔 없잖아 ㅠㅠ

막힘: 여기서 저는 “로컬 미리보기(localhost:4321)“랑 “실제 배포된 사이트(.vercel.app 주소)“가 같은 건 줄 알았어요. 그런데 순이가 확인해보니, 로컬엔 있는데 배포 사이트엔 없었어요.

해결 — 순이가 설명해준 구조:

즉 로컬에서 파일을 만드는 것만으로는 부족하고, “GitHub Desktop에서 커밋 → Push” 버튼까지 눌러야 그게 GitHub에 올라가고, 그걸 Vercel이 알아서 가져다가 실제 사이트를 다시 만들어줘요.

그다음 GitHub Desktop을 열어서, 아래 순서로 진행했어요:

1. 변경된 파일 목록 확인 (이번엔 00-roadmap.md 등 3개 파일)
2. Summary 칸에 짧게 메시지 쓰기
3. “Commit 3 files to main” 클릭
4. “Push origin” 클릭

막힘 2: 이 과정을 채팅으로 하나하나 확인하면서 진행하다 보니, 코드로 직접 하는 것보다 “지금 뭐가 어디 상태인지”가 눈에 잘 안 보여서 훨씬 답답하게 느껴졌어요. 화면 캡처를 여러 번 주고받으며 겨우 상황을 맞춰갔어요.

After — 결과

Push 이후 1~2분 기다렸다가 실제 배포 주소에서 다시 확인하니, 로드맵이 정상적으로 떠 있었어요. “로컬 → GitHub → Vercel” 3단계가 순서대로 이어진다는 걸 몸으로 이해하고 나니, 다음부터는 “왜 안 바뀌지?” 하고 당황하지 않고 “아, 아직 커밋·푸시를 안 했구나”를 바로 떠올릴 수 있게 됐어요.

배운 것 / 재사용 자산

• 기억할 3단계: 로컬(내 컴퓨터, 즉시 반영) → GitHub(커밋·푸시해야 반영) → Vercel(자동 배포, 1~2분 소요).
• 사이트에 변화가 안 보일 때 체크리스트:
  1. 로컬 미리보기(localhost)에서는 보이나요? → 안 보이면 파일 자체를 다시 확인
  2. GitHub Desktop에서 커밋·푸시를 했나요? → 안 했으면 지금 하기
  3. 푸시한 지 1~2분 지났나요? → Vercel이 새로 만드는 시간이 필요해요
• 오늘의 솔직한 마음: 채팅으로 진행하다 보니 중간 상태가 눈에 안 보여서 실제 코드 작업보다 더 답답하고 힘들었어요. 그래도 한 번 겪고 나니 다음엔 훨씬 수월할 것 같아요.