[GitHub 100일 챌린지] Day 10 - GitHub UI 가이드

100일 챌린지 Day 10 - GitHub 인터페이스를 완벽히 이해합니다

배울 내용

1. GitHub 메인 화면 구성
2. Repository 페이지 둘러보기
3. 유용한 단축키와 팁

---

Topic1. GitHub 메인 화면 구성

상단 네비게이션 바

로그인 후 모든 페이지 상단에 표시됩니다.

좌측 영역:

🔍 Search bar
→ Repository, User, Code 검색
→ 단축키: / (슬래시)

📁 Pull requests
→ 내가 관련된 모든 PR

📋 Issues
→ 내가 관련된 모든 Issue

📊 Marketplace
→ GitHub Apps와 Actions

🔔 Explore
→ 트렌딩 프로젝트

우측 영역:

🔔 알림 (Notifications)
→ 새 알림 확인
→ 단축키: g + n

➕ Create new
→ New repository
→ Import repository
→ New gist
→ New organization

👤 프로필 메뉴
→ Your profile
→ Your repositories
→ Your projects
→ Your stars
→ Settings
→ Sign out

대시보드 (홈 화면)

좌측 사이드바:

Recent repositories
→ 최근 접속한 저장소

Recent activity
→ 내 활동 타임라인

Explore repositories
→ 추천 저장소

중앙 피드:

Following 탭:
→ 팔로우한 사람들의 활동

For you 탭:
→ 맞춤 추천 컨텐츠

해보기:

1. github.com 접속 (로그인 상태)
2. 대시보드 각 영역 클릭해보기
3. Recent repositories 확인

결과: GitHub 메인 화면 구조 파악!

---

Topic2. Repository 페이지 둘러보기

Repository 상단 메뉴

주요 탭:

📝 Code
→ 파일 브라우저
→ README 표시

📋 Issues
→ 버그, 기능 요청
→ 프로젝트 관리

↗️ Pull requests
→ 코드 기여
→ 코드 리뷰

⚡ Actions
→ CI/CD 자동화
→ Workflow 실행

📚 Projects
→ 칸반 보드
→ 프로젝트 관리

📖 Wiki
→ 문서화
→ 가이드 작성

🔒 Security
→ 보안 알림
→ 취약점 스캔

⚙️ Settings
→ Repository 설정
→ (Owner만 접근 가능)

Code 탭 상세

파일 브라우저:

📁 폴더 구조
→ 클릭하여 탐색

📄 README.md
→ 자동으로 하단에 표시

🌿 브랜치 선택
→ main/master 기본

🔄 Latest commit
→ 최신 커밋 정보

📥 Code 버튼
→ Clone (HTTPS/SSH)
→ Download ZIP
→ Open with GitHub Desktop

About 섹션 (우측 사이드바):

📝 Description
🏷️ Topics (태그)
⭐ Stars
👁️ Watchers
🍴 Forks
🔗 Website
📄 License

해보기:

1. 아무 Public Repository 접속
   (예: https://github.com/nodejs/node)
2. 각 탭 클릭해보기
3. Code 탭에서 파일 탐색
4. README 읽어보기

Issues 탭

Issue = 작업 항목:

버그 리포트
기능 요청
질문
토론

각 Issue:
- 제목 + 설명
- Labels (분류)
- Assignees (담당자)
- Comments (대화)

Filters:

Open issues (기본)
Closed issues
Assigned to you
Created by you
Mentioned

Pull Requests 탭

PR = 코드 기여 요청:

Open PRs
→ 리뷰 대기 중

Closed PRs
→ Merged (병합됨)
→ Closed (거부됨)

각 PR:
- 변경 내용
- Reviewers
- Checks (테스트 통과 여부)
- Comments

---

Topic3. 유용한 단축키와 팁

전역 단축키

Repository 내에서 사용 가능:

?        도움말 표시
/        검색창 포커스
s        검색창 포커스
g + c    Code 탭
g + i    Issues 탭
g + p    Pull requests 탭
g + w    Wiki 탭
g + n    Notifications

해보기:

1. 아무 Repository 접속
2. ? 키 입력
3. 단축키 목록 확인
4. 몇 가지 단축키 사용해보기

파일 탐색 단축키

Code 탭에서:

t        파일 검색 (fuzzy finder)
w        브랜치 선택
l        특정 라인으로 이동

파일 뷰어에서:

b        Blame 보기 (누가 작성했는지)
y        현재 커밋의 영구 링크

해보기:

1. Repository Code 탭에서
2. t 키 입력
3. 파일명 일부 타이핑
4. 파일 빠르게 찾기

코드 검색 팁

파일 내 검색:

Ctrl+F (Windows/Linux)
Cmd+F (Mac)
→ 현재 파일 내 검색

Repository 전체 검색:

상단 검색창 사용:
filename:config
language:python
org:microsoft

고급 검색 예시:

stars:>1000 language:javascript
→ 1000+ stars, JavaScript

fork:false language:python
→ Fork 아닌, Python

filename:package.json dependencies
→ package.json에서 dependencies 검색

Markdown 편집 팁

Issue/PR 작성 시:

Ctrl+B    굵게
Ctrl+I    기울임
Ctrl+K    링크
Ctrl+E    코드

미리보기:

Preview 탭 클릭
→ 렌더링 결과 확인

파일 첨부:

드래그 앤 드롭
또는
클립보드 붙여넣기 (Ctrl+V)

빠른 편집

웹에서 파일 편집:

1. 파일 열기
2. 연필 아이콘(✏️) 클릭
3. 내용 수정
4. Commit changes

GitHub.dev 에디터:

Repository에서 . (점) 키 입력
→ VSCode 웹 에디터 열림!
→ 코드 편집 가능

Star와 Watch

Star (⭐):

→ 북마크
→ 나중에 찾기 쉬움
→ Profile > Stars에서 확인

Watch (👁️):

Watching: 모든 알림 받기
Not watching: PR/Issue 알림만
Ignoring: 알림 받지 않음

해보기:

1. 관심 있는 Repository 찾기
2. Star 클릭 (⭐)
3. Watch → Watching 선택
4. Notifications에서 알림 확인

유용한 URL 패턴

빠른 이동:

github.com/username
→ 사용자 프로필

github.com/username?tab=repositories
→ 저장소 목록

github.com/username?tab=stars
→ Star한 저장소

직접 파일 접근:

github.com/user/repo/blob/main/path/to/file.js
→ 파일 보기

github.com/user/repo/tree/main/src
→ 폴더 보기

---

정리

완료 체크:

• GitHub 메인 화면 구성을 이해했다
• Repository 페이지 각 탭을 탐색했다
• 주요 단축키를 사용해봤다
• Star와 Watch 기능을 활용했다
• GitHub 검색을 사용해봤다

축하합니다! Phase 1 완료! 🎉

이제 GitHub 계정 설정과 기본 UI 사용법을 모두 익혔습니다!

다음: Phase 1 완료 페이지 →

← Day 9

전체 커리큘럼

Phase 완료 →