포스트

[GitHub 100일 챌린지] Day 14 - README.md 구조화하기

[GitHub 100일 챌린지] Day 14 - README.md 구조화하기

100일 챌린지 Day 14 - 전문적인 README 구조를 배웁니다

배울 내용

  1. 프로젝트 유형별 README 구조
  2. Table of Contents 추가하기
  3. 실전 README 템플릿

Topic1. 프로젝트 유형별 구조

프로젝트 종류에 따라 README 구조가 달라집니다.

라이브러리/패키지 프로젝트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Library Name

## Installation
설치 방법 (npm, pip 등)

## Quick Start
빠른 시작 가이드

## API Reference
함수/클래스 설명

## Examples
사용 예시 코드

## Contributing
기여 가이드

실제 예시:

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
# Awesome Logger

JavaScript 로깅 라이브러리

## Installation

```bash
npm install awesome-logger
```

## Quick Start

```javascript
const logger = require('awesome-logger');

logger.info('Hello, World!');
logger.error('Something went wrong');
```

## API

### logger.info(message)
정보성 메시지 출력

### logger.error(message)
에러 메시지 출력

웹 애플리케이션

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# App Name

## Features
주요 기능 목록

## Demo
라이브 데모 링크

## Screenshots
화면 캡처

## Tech Stack
기술 스택

## Getting Started
로컬 실행 방법

## Deployment
배포 가이드

실제 예시:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Todo Master

할 일 관리 웹앱

## Features
- ✅ Task 추가/삭제/수정
- 📅 마감일 설정
- 🏷️ 태그 분류
- 📊 통계 대시보드

## Demo
🔗 [https://todo-master-demo.com](https://todo-master-demo.com)

## Screenshots
![Main](./images/main.png)

## Tech Stack
- Frontend: React, TypeScript
- Backend: Node.js, Express
- Database: MongoDB

학습/튜토리얼 프로젝트

1
2
3
4
5
6
7
8
9
10
11
12
13
# Course Name

## About
학습 목표와 내용

## Contents
학습 순서/목차

## Prerequisites
선수 지식

## Resources
참고 자료

실제 예시:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Python 100일 챌린지

## About
Python 기초부터 실전까지 100일 학습 프로그램

## Contents
1. Week 1-2: 기초 문법
2. Week 3-4: 자료구조
3. Week 5-6: 함수와 모듈
...

## Prerequisites
- 프로그래밍 기초 지식
- Python 3.8+ 설치

해보기: 자신의 프로젝트 유형 파악하기

1
2
3
1. 현재 프로젝트가 어떤 유형인지 확인
2. 해당 유형의 구조 선택
3. README.md에 섹션 추가

결과: 프로젝트에 맞는 구조를 선택할 수 있습니다


Topic2. Table of Contents 추가하기

긴 README에는 목차가 있으면 편리합니다.

수동 목차 작성

1
2
3
4
5
6
7
## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Contributing](#contributing)
- [License](#license)

링크 규칙:

1
2
3
4
5
6
7
제목: ## Installation Guide
링크: #installation-guide

변환 규칙:
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
45
46
# My Awesome Project

프로젝트 한 줄 설명

## Table of Contents

- [Features](#features)
- [Getting Started](#getting-started)
  - [Prerequisites](#prerequisites)
  - [Installation](#installation)
- [Usage](#usage)
- [API Documentation](#api-documentation)
- [Contributing](#contributing)
- [License](#license)

## Features

주요 기능 설명...

## Getting Started

### Prerequisites

필요한 것들...

### Installation

```bash
npm install my-project
```

## Usage

사용 방법...

## API Documentation

API 설명...

## Contributing

기여 방법...

## License

MIT License

목차 활용 팁

1
2
3
4
5
6
7
✅ 언제 추가?
- README가 5개 섹션 이상
- 스크롤이 많이 필요한 경우

❌ 불필요한 경우:
- 짧은 README (< 3개 섹션)
- 간단한 프로젝트

해보기: 목차 추가하기

1
2
3
1. README.md 상단에 ## Table of Contents 추가
2. 각 섹션 링크 작성
3. 링크 클릭해서 이동 테스트

결과: 긴 README를 탐색하기 쉽게 만들 수 있습니다


Topic3. 실전 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
# Project Title

<p align="center">
  <img src="logo.png" alt="Logo" width="200"/>
</p>

<p align="center">
  간단하고 명확한 한 줄 설명
</p>

## 📋 Table of Contents

- [About](#about)
- [Features](#features)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)

## 🎯 About

프로젝트에 대한 상세한 설명을 작성합니다.

**배경**:
- 왜 이 프로젝트를 시작했는지
- 어떤 문제를 해결하는지

**목표**:
- 프로젝트의 궁극적인 목표

## ✨ Features

- 🚀 빠른 성능
- 💡 직관적인 UI
- 🔒 안전한 보안
- 📱 반응형 디자인

## 🚀 Getting Started

### Prerequisites

```bash
node >= 14.0.0
npm >= 6.0.0
```

### Installation

```bash
# Clone the repository
git clone https://github.com/username/project.git

# Go to project directory
cd project

# Install dependencies
npm install

# Run the app
npm start
```

## 💻 Usage

### Basic Example

```javascript
import { awesome } from 'my-project';

const result = awesome.doSomething();
console.log(result);
```

### Advanced Example

```javascript
// 고급 사용 예시
```

## 📸 Screenshots

| Main Screen | Settings |
|-------------|----------|
| ![Main](./screenshots/main.png) | ![Settings](./screenshots/settings.png) |

## 🛠️ Tech Stack

**Frontend**
- React 18
- TypeScript
- Tailwind CSS

**Backend**
- Node.js
- Express
- MongoDB

**DevOps**
- Docker
- GitHub Actions
- AWS

## 🤝 Contributing

Contributions are welcome!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📝 License

Distributed under the MIT License. See `LICENSE` for more information.

## 📧 Contact

Your Name - [@twitter](https://twitter.com/username)

Project Link: [https://github.com/username/project](https://github.com/username/project)

## 🙏 Acknowledgments

- [Awesome Library](https://github.com/awesome/library)
- [Inspiration Project](https://github.com/inspiration/project)

이모지 활용

1
2
3
4
5
6
7
8
9
10
11
📋 목차, 리스트
🎯 목표, 포커스
✨ 기능, 특징
🚀 시작, 빠른
💻 코드, 개발
📸 스크린샷
🛠️ 도구, 기술
🤝 협업, 기여
📝 문서, 라이선스
📧 연락, 이메일
🙏 감사, 인사

사용 팁:

1
2
3
4
5
6
7
✅ 적절히 사용:
- 섹션 제목 앞
- 주요 포인트 강조

❌ 과도한 사용:
- 모든 단어에 이모지
- 전문성 해침

섹션별 작성 가이드

About 섹션:

1
2
3
4
5
6
## About

이 프로젝트는 [문제]를 해결하기 위해 만들어졌습니다.

[기존 솔루션]의 [단점]을 개선하여,
[우리 솔루션]을 제공합니다.

Features 섹션:

1
2
3
4
5
6
## Features

핵심 기능만 3-5개:
- 🎯 명확한 설명
- ⚡ 성능 강조
- 🔒 보안 중요

Getting Started:

1
2
3
4
5
6
7
8
## Getting Started

최소한의 단계로:
1. 설치
2. 설정
3. 실행

각 단계는 복사-붙여넣기 가능하게

해보기: 템플릿 적용하기

1
2
3
4
1. 위 템플릿 복사
2. 자신의 프로젝트에 맞게 수정
3. 불필요한 섹션 제거
4. 필요한 섹션 추가

결과: 전문적인 README를 빠르게 작성할 수 있습니다


정리

완료 체크:

  • 프로젝트 유형별 구조를 이해했다
  • Table of Contents를 추가할 수 있다
  • 실전 템플릿을 활용할 수 있다

README 구조화 원칙:

1
2
3
4
1. 유형 파악: 라이브러리 vs 앱 vs 학습
2. 필수 섹션: 소개, 설치, 사용법
3. 선택 섹션: 상황에 맞게
4. 논리적 순서: 위에서 아래로 자연스럽게

체크리스트:

1
2
3
4
5
6
✅ 명확한 제목
✅ 한 줄 설명
✅ 설치 방법
✅ 사용 예시
✅ 기술 스택 (선택)
✅ 라이선스 (선택)

다음: Day 15 - README.md 고급 기능

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.