[GitHub 100일 챌린지] Day 13 - README.md 기본 작성하기
[GitHub 100일 챌린지] Day 13 - README.md 기본 작성하기
100일 챌린지 Day 13 - README.md는 프로젝트의 첫인상입니다
배울 내용
- README.md의 역할과 중요성
- Markdown 기본 문법
- 좋은 README 구조
Topic1. README.md란?
README.md = 프로젝트 설명서
Repository에 방문하면 가장 먼저 보이는 문서입니다.
README의 역할
1
2
3
4
5
6
7
8
9
🎯 첫인상 결정:
- 프로젝트가 무엇인지
- 어떻게 사용하는지
- 왜 만들었는지
👥 대상:
- 처음 보는 개발자
- 협업하려는 팀원
- 미래의 나 자신
좋은 README vs 나쁜 README
❌ 나쁜 예:
1
2
3
# My Project
코드입니다.
✅ 좋은 예:
1
2
3
4
5
6
7
8
9
10
11
12
# Todo App
간단한 할 일 관리 웹 애플리케이션
## 기능
- 할 일 추가/삭제
- 완료 체크
- 로컬 스토리지 저장
## 사용 방법
1. index.html 열기
2. 할 일 입력 후 Enter
차이점:
1
2
3
4
5
6
7
8
9
나쁜 README:
- 내용 부족
- 사용법 없음
- 동기부여 실패
좋은 README:
- 명확한 설명
- 실행 방법 제시
- 방문자 도움
해보기: 유명 오픈소스 README 보기
1
2
3
1. github.com/facebook/react 방문
2. README.md 스크롤하며 구조 파악
3. 어떤 섹션들이 있는지 확인
결과: 전문적인 README의 구조를 이해할 수 있습니다
Topic2. Markdown 기본 문법
README.md는 Markdown 형식을 사용합니다.
제목 (Headers)
1
2
3
4
# 제목 1 (가장 큼)
## 제목 2
### 제목 3
#### 제목 4
표시 결과:
제목 1
제목 2
제목 3
텍스트 스타일
1
2
3
4
**굵게** (Bold)
*기울임* (Italic)
~~취소선~~ (Strikethrough)
`코드` (Inline code)
표시 결과:
- 굵게
- 기울임
취소선코드
목록 (Lists)
순서 없는 목록:
1
2
3
4
5
- 항목 1
- 항목 2
- 하위 항목 2-1
- 하위 항목 2-2
- 항목 3
순서 있는 목록:
1
2
3
1. 첫 번째
2. 두 번째
3. 세 번째
링크와 이미지
1
2
[링크 텍스트](https://example.com)
예시:
1
2
[Google](https://google.com)
코드 블록
인라인 코드:
1
`console.log('Hello')`를 실행하세요
코드 블록:
1
2
3
4
5
```javascript
function hello() {
console.log('Hello, World!');
}
```
Python 예시:
1
2
3
4
```python
def hello():
print("Hello, World!")
```
인용구
1
2
> 이것은 인용구입니다.
> 여러 줄도 가능합니다.
표시 결과:
이것은 인용구입니다. 여러 줄도 가능합니다.
수평선
1
2
3
---
또는
***
해보기: Markdown 연습하기
1
2
3
4
1. my-first-repo의 README.md 편집
2. 위 문법들을 하나씩 추가
3. Preview 탭 클릭해서 결과 확인
4. Commit changes로 저장
결과: Markdown 문법을 실제로 사용해볼 수 있습니다
Topic3. 좋은 README 구조
실전에서 사용하는 README 템플릿을 배워봅시다.
기본 구조
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 프로젝트 제목
간단한 한 줄 설명
## 소개
프로젝트가 무엇인지, 왜 만들었는지 설명
## 기능
- 주요 기능 1
- 주요 기능 2
- 주요 기능 3
## 설치 방법
실행에 필요한 단계
## 사용 예시
간단한 사용법 또는 스크린샷
## 기술 스택
사용한 언어/프레임워크
## 라이선스
오픈소스 라이선스 정보
실전 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# Simple Calculator
웹 기반 계산기 애플리케이션
## 소개
HTML, CSS, JavaScript로 만든 간단한 계산기입니다.
사칙연산을 지원하며, 반응형 디자인이 적용되어 있습니다.
## 기능
- ➕ 덧셈, 뺄셈, 곱셈, 나눗셈
- 🔢 소수점 계산
- 🔄 초기화 (AC 버튼)
- 📱 모바일 반응형
## 설치 방법
```bash
# Repository 클론
git clone https://github.com/username/calculator.git
# 폴더 이동
cd calculator
# index.html 파일 열기
open index.html
```
## 사용 방법
1. 숫자 버튼 클릭
2. 연산자 선택
3. = 버튼으로 결과 확인
## 기술 스택
- HTML5
- CSS3
- Vanilla JavaScript
## 라이선스
MIT License
섹션별 팁
1. 제목과 설명:
1
2
3
4
# 명확한 프로젝트명
한 문장으로 핵심 전달
"XXX을 위한 YYY" 형식 추천
2. 뱃지 (선택):
1
2
3. 스크린샷 (추천):
1
2
3
## 미리보기
4. 설치 방법:
1
2
3
4
5
6
7
8
## 설치
단계별로 명확하게:
1. 첫 번째 단계
2. 두 번째 단계
3. 세 번째 단계
코드는 복사하기 쉽게
5. 기여 방법 (오픈소스):
1
2
3
## Contributing
Pull Request는 언제나 환영합니다!
해보기: 나만의 README 작성하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1. my-first-repo README.md 편집
2. 위 템플릿 참고해서 작성:
- 프로젝트 제목
- 소개 (연습용이라고 적어도 OK)
- 배우고 있는 것
- 목표
3. Markdown 문법 활용:
- 제목 (##)
- 목록 (-)
- 굵게 (**)
- 코드 블록 (```)
4. Preview로 확인 후 Commit
결과: 체계적인 README.md를 작성할 수 있습니다
정리
완료 체크:
- README.md의 역할을 이해했다
- Markdown 기본 문법을 사용할 수 있다
- 좋은 README 구조를 알고 있다
Markdown 치트시트:
1
2
3
4
5
6
7
8
9
# 제목
## 부제목
**굵게**
*기울임*
- 목록
1. 순서
[링크](URL)
`코드`
> 인용
README 작성 원칙:
1
2
3
4
1. 명확하게: 누구나 이해할 수 있게
2. 간결하게: 핵심만 담기
3. 친절하게: 초보자 눈높이
4. 최신 유지: 코드와 동기화
다음: Day 14 - README.md 구조화 →
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.