## 한 줄 요약
로드맵을 다 만들었는데 실제 사이트엔 안 보여서 한참 헤맸어요. 알고 보니 "내 컴퓨터에서 미리보기"와 "인터넷에 진짜 올라간 사이트"는 완전히 다른 곳이었고, 그 사이를 GitHub과 Vercel이 이어주고 있었어요.
## 누구에게 도움이 될까
- 학습메이트한테 "이거 만들어줘"를 시켜서 파일은 생겼는데, 실제 사이트(배포된 주소)엔 안 보여서 당황한 적 있는 분
- "로컬", "커밋", "푸시", "배포"라는 말이 다 따로따로 들려서 뭐가 뭔지 헷갈리는 분
## Before — 이런 상황이었어요
4주 로드맵을 인터뷰로 완성하고 "위키에 저장했어요, 미리보기에서 확인해보세요"라는 말을 들었어요. 그런데 제가 실제로 열어본 건 https://learning-hub-template.vercel.app — 진짜 인터넷 주소였는데, 거기엔 로드맵이 안 보였어요. "분명 만들었다고 했는데 왜 없지?" 싶어서 답답했어요.
## 어떻게 했나 — 실제 대화
이렇게 물어봤어요:
```
https://learning-hub-template.vercel.app/ 여기엔 없잖아 ㅠㅠ
```
막힘: 여기서 저는 "로컬 미리보기(localhost:4321)"랑 "실제 배포된 사이트(.vercel.app 주소)"가 같은 건 줄 알았어요. 그런데 순이가 확인해보니, 로컬엔 있는데 배포 사이트엔 없었어요.
해결 — 순이가 설명해준 구조:
| 단계 | 뭐하는 곳 | 언제 바뀌나 |
|---|---|---|
| ① 로컬 (localhost:4321) | 내 컴퓨터 안에서만 보이는 임시 미리보기 | 파일 저장하면 바로 반영 |
| ② GitHub | 코드를 저장해두는 온라인 창고 | 커밋 + 푸시를 해야 반영 |
| ③ Vercel (.vercel.app 주소) | 실제로 남들이 보는 배포된 사이트 | GitHub이 바뀌면 자동으로 감지해서 새로 만듦 |
즉 로컬에서 파일을 만드는 것만으로는 부족하고, "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이 새로 만드는 시간이 필요해요
오늘의 솔직한 마음: 채팅으로 진행하다 보니 중간 상태가 눈에 안 보여서 실제 코드 작업보다 더 답답하고 힘들었어요. 그래도 한 번 겪고 나니 다음엔 훨씬 수월할 것 같아요.
