← 홈으로 🐙 Week 11 · GitHub 입문

GitHub 입문
내 앱을 인터넷에 올리기 🐙

Week 10에서 만든 커피 내기 룰렛, 지금은 내 PC에서만 열려요.
오늘은 GitHub으로 전 세계 누구나 접속 가능한 URL을 만듭니다.

🐙 GitHub이 뭔가?

GitHub = 코드용 Google Drive + 타임머신 + 협업 게시판 + 무료 웹호스팅

구글 드라이브처럼 파일을 저장하고 공유할 수 있는데, 개발자에게 특별히 유용한 능력이 세 가지 더 있어요.

기능 Google Drive GitHub
파일 저장 ✅ ✅
공유 링크 ✅ ✅
변경 내역 완전 기록 제한적 ✅ 누가·언제·무엇을 바꿨는지 전부
팀 코드 협업 ❌ ✅ 동시 작업 · 리뷰 · 합치기
웹사이트 무료 공개 ❌ ✅ GitHub Pages
오픈소스 생태계 ❌ ✅ 전 세계 코드 공개·공유
💡 오늘 우리가 쓸 기능은 딱 두 가지: 파일 저장(Repository) + 웹사이트 공개(GitHub Pages). 나머지는 알아두면 좋은 맥락이에요.

📖 GitHub 핵심 용어 사전

GitHub을 처음 열면 낯선 단어들이 가득해요. 비유로 한 번에 이해해봅니다.

Repository 레포지토리 / 레포
📁 프로젝트 전용 폴더
코드·파일·변경 히스토리가 모두 담긴 공간. 프로젝트마다 하나씩 만들어요.
Clone 클론
📥 구글 드라이브 "내 드라이브에 복사"
GitHub의 레포지토리를 내 PC로 내려받기. 이후 로컬에서 작업합니다.
Branch 브랜치
🌿 원본 건드리지 않는 실험 공간
새 기능을 만들 때 main(원본)은 건드리지 않고 별도 작업 공간을 생성. 문제 없으면 나중에 합칩니다.
Commit 커밋
💾 게임 세이브 포인트
"무엇을 바꿨는지" 메모와 함께 저장. 언제든 이 지점으로 되돌아올 수 있어요.
Push 푸시
⬆️ 내 PC → GitHub 올리기
로컬에서 Commit한 내용을 GitHub 서버로 전송. "업로드"와 비슷한 개념이에요.
Pull 풀
⬇️ GitHub → 내 PC 내려받기
팀원이 Push한 최신 변경사항을 내 PC로 가져오기. 협업 시 항상 최신 상태 유지.
Pull Request PR, 풀 리퀘스트
📋 "이 코드 합쳐도 될까요?" 결재 올리기
내 Branch 작업을 main에 합치기 전에 팀원에게 리뷰를 요청하는 절차. 팀 협업의 핵심.
Merge 머지
🔀 가지를 줄기에 접붙이기
Pull Request가 승인되면 Branch의 변경사항을 main에 통합. 작업이 완성된 후 한 번.
Issue 이슈
📌 업무 게시판 포스트잇
버그 신고, 기능 요청, 할 일을 카드로 관리. 누가 맡을지 할당하고 완료 시 닫아요.
Fork 포크
🍴 레시피 복사해서 내 버전으로
다른 사람의 레포지토리를 내 계정으로 통째로 복사. 원본에 영향 없이 자유롭게 수정.

보너스 3가지

README
📄 건물 입구 안내판
레포지토리 첫 화면에 표시되는 소개문. 프로젝트 설명, 설치 방법 등을 씁니다.
Star ⭐
👍 개발자판 "좋아요"
유용하다 생각하는 레포지토리에 별 달기. 즐겨찾기 + 응원의 의미.
GitHub Pages
🌐 "이 폴더를 웹사이트로 공개"
레포지토리 안의 HTML 파일을 인터넷에 공개. 오늘 핵심으로 쓸 기능!

👨‍💻 개발자들의 GitHub 사용법

실제 개발자들은 GitHub을 어떻게 쓸까요? 패턴이 두 가지예요.

혼자 개발할 때 (1인 플로우)

  코드 작성  →  Commit (저장+기록)  →  Push (GitHub 업로드)  →  완성!

이것만 반복해요. 심플하죠. 오늘 우리가 할 것도 이 흐름의 단순화 버전입니다.

팀으로 협업할 때 (팀 플로우)

  Repository 생성 (프로젝트 공간 만들기)
           │
           ├──────────┬──────────┐
     팀원 A        팀원 B        팀원 C
    Clone ↓        Clone ↓        Clone ↓        (내 PC로 복사)
  Branch 생성    Branch 생성    Branch 생성      (각자 작업 공간)
  코드 작성      코드 작성      코드 작성
  Commit         Commit         Commit            (변경 저장)
  Push ↓         Push ↓         Push ↓            (GitHub 올리기)
           │
  Pull Request (코드 리뷰 요청)
           │
  팀원들 검토 & 피드백
           │
  Merge → main 업데이트
           │
  모든 팀원 Pull → 최신 코드 받기
💡 왜 Branch를 쓸까요? "실험 중인 코드"와 "실제 서비스 중인 코드"를 분리하기 위해서예요. Branch에서 실컷 시험해보고, 문제없으면 그때 main에 합칩니다.

오픈소스에 기여할 때

남의 프로젝트를 Fork(복사) → 내 계정에서 수정 → Pull Request → 원 오너가 마음에 들면 Merge. 전 세계 개발자들이 이 방식으로 협력해요. GitHub에는 이렇게 만들어진 무료 코드가 수억 개 있습니다.

오늘 우리가 하는 것

🎯 오늘의 범위
계정 만들기 → Repository 만들기 → 파일 업로드 → Pages ON → 🎉 URL 공유!

Git 명령어, Clone, Branch, PR은 다 건너뜁니다. 웹 브라우저만으로 오늘 목표를 달성해요.

📝 회원가입

1
github.com 접속
브라우저에서 github.com으로 이동 → 오른쪽 상단 Sign up 클릭.
2
이메일 / 패스워드 입력
이메일 주소와 패스워드를 입력합니다. 이후 인증 메일이 오니 자주 쓰는 주소를 사용하세요.
3
⭐ username 결정 — URL에 들어갑니다
username은 나중에 내 사이트 주소가 됩니다.
https://내username.github.io/coffee-roulette
영문·숫자·하이픈(-)만 사용 가능. 짧고 깔끔하게 정해요.
4
이메일 인증
가입 후 받은 인증 메일에서 Verify email address 버튼 클릭. 이 단계가 완료되어야 Repository를 만들 수 있어요.
💡 이미 계정이 있으면? Sign in으로 로그인만 하면 됩니다. 가입은 건너뛰어도 돼요.

📁 Repository 만들기

Repository = 이 프로젝트의 전용 폴더. 지금 커피 내기 룰렛을 위한 폴더를 만들어봐요.

1
New repository 버튼 클릭
로그인 후 오른쪽 상단 + 아이콘 → New repository. 또는 github.com/new 직접 접속.
2
Repository name 입력
coffee-roulette 로 입력하세요. 이 이름이 URL의 일부가 됩니다.
3
⭐ Public 선택 (필수!)
Public 을 반드시 선택해야 합니다. Private으로 하면 GitHub Pages 무료 사용이 불가능해요.
4
README 체크 후 생성
Add a README file 체크박스 클릭 → 하단 Create repository 버튼. 폴더가 생성됩니다.
⚠️ Private → Pages 무료 불가: GitHub의 무료 플랜에서 GitHub Pages는 Public 레포지토리에서만 작동해요. Public이 아닌 경우 유료 Pro 플랜이 필요합니다.

⬆️ index.html 파일 올리기

Week 10에서 만든 룰렛 파일을 준비합니다. 한 가지 중요한 준비가 있어요.

준비
파일 이름을 index.html로 변경
Week 10 파일 이름이 coffee-roulette.html 이라면 index.html 로 이름을 바꿔주세요. 브라우저는 폴더에 접속할 때 index.html을 자동으로 첫 페이지로 인식합니다. 이름이 다르면 URL 접속 시 파일 목록만 보여요.
1
Add file → Upload files
Repository 페이지에서 Add file 버튼 → Upload files 클릭.
2
index.html 드래그 앤 드롭
탐색기(Finder)에서 index.html 파일을 GitHub 업로드 영역으로 끌어다 놓으세요. 또는 choose your files 클릭으로 파일 선택.
3
Commit 메시지 작성 후 저장
아래 Commit changes 영역에 메시지를 입력합니다.
예시: 커피 내기 룰렛 첫 업로드
입력 후 Commit changes 버튼 클릭.
💡 Commit 메시지가 뭔가요? "이번에 무엇을 했는지" 메모예요. 나중에 히스토리를 볼 때 "언제 어떤 변경을 했는지" 한눈에 보입니다. 게임 세이브 포인트에 이름 붙이는 것과 같아요.

🌐 GitHub Pages 켜기

파일이 올라갔으면 이제 "공개 스위치"를 켤 차례예요.

1
Settings 탭 이동
Repository 상단 메뉴에서 Settings 탭 클릭.
2
Pages 메뉴 찾기
왼쪽 사이드바에서 Pages 클릭. (Code and automation 섹션 안에 있어요)
3
Branch 설정
Source: Deploy from a branch 선택
Branch: main, 폴더: / (root)
→ Save 버튼 클릭
4
배포 완료까지 1~3분 대기
Save 후 페이지를 새로고침하면 상단에 "Your site is live at..." 메시지가 뜹니다. 뜨기까지 1~3분 걸려요.
💡 왜 root(/)로 설정하나요? 레포지토리 최상위 폴더(root)에 index.html이 있기 때문이에요. GitHub Pages는 root의 index.html을 시작 페이지로 삼습니다.

🎉 나만의 URL 확인 & 공유

Settings → Pages에 이런 주소가 나타납니다.

https://내username.github.io/coffee-roulette
username 부분 = 내가 가입 시 정한 아이디
coffee-roulette 부분 = Repository 이름

이 URL을 브라우저에 입력하면 커피 내기 룰렛이 열립니다. 인터넷이 있는 곳이라면 세계 어디서든!

공유하는 법

✓
카카오톡 / Slack / Teams에 링크 붙여넣기
URL을 복사해서 팀 채팅에 붙여넣으면 끝. 파일 첨부 없이 링크만으로 누구나 접속 가능.
✓
QR 코드로 공유
구글에서 "URL QR 생성기" 검색 후 URL 붙여넣기 → QR 이미지 저장 → 회의 자료에 삽입. 스마트폰으로 바로 접속 가능.
💡 이제 "파일 달라고" 할 필요 없어요. Week 10까지는 index.html 파일을 카카오톡으로 보내야 했지만, 이제는 URL 하나만 공유하면 됩니다. 룰렛을 업데이트하면 같은 URL에 자동 반영돼요.

🔄 업데이트하는 법

룰렛 이름을 바꾸거나 색상을 수정하고 싶을 때, 업데이트 방법은 두 가지예요.

방법 ① 파일 덮어쓰기 (추천)

1
Cursor에서 index.html 수정 후 저장
Cursor 채팅창에 수정 요청 → 자동 수정 → Ctrl+S 저장.
2
GitHub에서 Upload files → 덮어쓰기
Repository → Add file → Upload files → 새 index.html 올리기 → Commit changes. 같은 이름이면 자동 덮어쓰기됩니다.
3
1~2분 후 URL 새로고침
Commit 후 GitHub Pages가 자동으로 재배포합니다. 같은 URL에서 바로 변경사항 확인.

방법 ② GitHub 웹에서 직접 편집

Repository에서 index.html 파일 클릭 → 오른쪽 상단 ✏️ (연필) 아이콘 → 웹 에디터에서 코드 수정 → Commit changes. 간단한 텍스트 변경에 적합해요.

💡 히스토리가 남는다는 게 여기서 빛납니다. "2주 전에 이름 바꾸기 전 버전으로 돌아가고 싶어"라고 하면, Repository → 파일 선택 → History에서 이전 Commit을 찾아 복구할 수 있어요.

❓ FAQ

Q. Private으로 만들었는데 Pages를 쓰려면 어떻게 하나요?
무료 플랜에서 GitHub Pages는 Public 레포지토리에서만 동작합니다. Private를 유지하면서 Pages를 쓰려면 월 $4 이상의 Pro 플랜이 필요해요. 또는 Repository의 Settings → General → Change visibility에서 Public으로 변경하면 됩니다.
Q. URL을 바꿀 수 있나요?
Repository 이름이 URL에 들어가므로, 이름을 바꾸면 URL도 바뀝니다. Settings → General → Repository name에서 변경 가능. 단, 기존 URL은 더 이상 동작하지 않으니 공유한 링크도 새로 알려줘야 해요.
Q. 파일을 여러 개 올리면 어떻게 되나요?
여러 파일을 올릴 수 있습니다. 브라우저는 index.html을 자동으로 첫 페이지로 인식해요. 이미지, CSS, JS 파일을 같은 레포에 올리고 HTML에서 참조하면 정상 작동합니다.
Q. Repository를 삭제하면 URL도 사라지나요?
네. Repository를 삭제하면 GitHub Pages 배포도 함께 사라지고 URL은 404 오류가 납니다. 삭제 전에 파일을 미리 백업해두세요.
Q. 회사 보안 정책상 코드를 Public으로 올리기 어려운데요?
커피 내기 룰렛처럼 민감한 정보가 없는 프로젝트라면 Public이 안전합니다. 다만 회사 업무 데이터, API 키, 내부 시스템 정보가 담긴 코드는 Public에 올리면 안 돼요. 그럴 때는 Vercel, Netlify처럼 Private 레포에서도 무료 배포가 가능한 서비스를 사용하거나, 사내 배포 환경을 이용하세요.

🎓 핵심 요약

오늘 한 일 플로우

  내 PC                GitHub.com
  ──────────           ──────────────────────────────
  index.html  →  Upload  →  Repository
                                  ↓
                              Pages 켜기
                                  ↓
                   https://username.github.io/coffee-roulette
                                  ↓
                         누구나 접속 가능!

핵심 용어 한 줄 정리

용어 한 줄 비유 오늘 썼나요?
Repository 프로젝트 전용 폴더 ✅ 만들었어요
Commit 게임 세이브 포인트 ✅ 파일 올릴 때
GitHub Pages 폴더를 웹사이트로 공개 ✅ 켰어요
Branch / PR / Merge 팀 협업 워크플로우 다음에 배워요
Clone / Push / Pull 로컬 ↔ GitHub 동기화 다음에 배워요

🐙 Week 11 완료!

🐙 GitHub 계정 생성
📁 Repository 만들기
⬆️ 파일 업로드
🌐 Pages 배포
🎉 URL 공유

이제 여러분의 앱에는 인터넷 주소가 생겼습니다.
다음 수업부터는 GitHub의 나머지 강력한 기능들 —
Branch, Pull Request, 협업 워크플로우를 직접 경험해볼 거예요.