📝 마크다운 에디터 (Markdown Editor)

마크다운으로 문서를 작성하고 실시간으로 미리보기하세요. 간단한 문법으로 아름다운 문서, README, 블로그 포스트를 쉽게 작성할 수 있습니다.

글자 0자|단어 0개|줄 0줄|예상 읽기 1분 미만
✏️ 편집
👁️ 미리보기

미리보기가 여기에 표시됩니다

📖 마크다운 문법 가이드
# 제목 1가장 큰 제목
## 제목 2중간 제목
**굵게**굵은 텍스트
*기울임*기울임 텍스트
~~취소선~~취소선
[링크](url)하이퍼링크
- 항목글머리 목록
1. 항목번호 목록
`코드`인라인 코드
```코드```코드 블록
> 인용인용문
---구분선
| 표 |테이블
![이미지](url)이미지

📚 마크다운(Markdown)이란?

마크다운(Markdown)은 일반 텍스트로 서식이 있는 문서를 작성하기 위한 경량 마크업 언어입니다. 2004년 존 그루버(John Gruber)가 만들었으며, 읽기 쉽고 쓰기 쉬운 순수 텍스트 포맷으로 HTML 등으로 변환할 수 있습니다.

🎯 마크다운의 장점

  • 간단한 문법 - HTML보다 훨씬 쉽게 배우고 사용할 수 있습니다
  • 가독성 - 원본 텍스트 자체도 읽기 쉽습니다
  • 플랫폼 독립적 - 어떤 텍스트 에디터에서도 작성 가능합니다
  • 버전 관리 - Git과 완벽하게 호환되어 변경사항 추적이 쉽습니다
  • 광범위한 지원 - GitHub, Reddit, Stack Overflow 등 많은 플랫폼에서 사용됩니다

📖 주요 사용처

README.md 파일
기술 문서
블로그 포스트
위키 페이지
이메일
메모/노트

📝 기본 문법

1. 제목 (Headings)

마크다운:
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
결과:

제목 1

제목 2

제목 3

2. 강조 (Emphasis)

마크다운:
*기울임* 또는 _기울임_
**굵게** 또는 __굵게__
***굵은 기울임*** 또는 ___굵은 기울임___
~~취소선~~
결과:
기울임
굵게
굵은 기울임
취소선

3. 목록 (Lists)

마크다운:
- 항목 1
- 항목 2
  - 하위 항목 2.1
  - 하위 항목 2.2

1. 번호 항목 1
2. 번호 항목 2
3. 번호 항목 3
결과:
  • 항목 1
  • 항목 2
    • 하위 항목 2.1
    • 하위 항목 2.2
  1. 번호 항목 1
  2. 번호 항목 2
  3. 번호 항목 3

4. 링크와 이미지

마크다운:
[링크 텍스트](https://example.com)
[제목이 있는 링크](https://example.com "제목")

![이미지 대체 텍스트](image.jpg)
![이미지](image.jpg "이미지 제목")
결과:
링크 텍스트
제목이 있는 링크

5. 코드 (Code)

마크다운:
인라인 코드: `const x = 10;`

```javascript
// 코드 블록
function hello() {
  console.log("Hello, World!");
}
```
결과:
인라인 코드: const x = 10;
// 코드 블록
function hello() {
  console.log("Hello, World!");
}

6. 인용구 (Blockquotes)

마크다운:
> 인용구입니다.
> 여러 줄로 작성할 수 있습니다.
>
> > 중첩된 인용구도 가능합니다.
결과:
인용구입니다.
여러 줄로 작성할 수 있습니다.

🚀 고급 문법 (GitHub Flavored Markdown)

1. 표 (Tables)

마크다운:
| 제목 1 | 제목 2 | 제목 3 |
|--------|--------|--------|
| 내용 1 | 내용 2 | 내용 3 |
| 내용 4 | 내용 5 | 내용 6 |

정렬:
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:---------|:-----------:|-----------:|
| 왼쪽     | 가운데       | 오른쪽     |
결과:
제목 1제목 2제목 3
내용 1내용 2내용 3

2. 체크박스 (Task Lists)

마크다운:
- [x] 완료된 작업
- [ ] 미완료 작업
- [ ] 또 다른 작업
결과:
  • 완료된 작업
  • 미완료 작업
  • 또 다른 작업

3. 이모지 (Emoji)

마크다운:
:smile: :heart: :thumbsup: :rocket: :tada:
결과:
😄 ❤️ 👍 🚀 🎉

4. 구분선 (Horizontal Rule)

마크다운:
---
또는
***
또는
___
결과:

🎯 사용 사례

1. GitHub README 작성

프로젝트 소개, 설치 방법, 사용법, 라이선스 정보 등을 포함한 README.md 파일을 작성할 때 가장 많이 사용됩니다. 코드 블록, 표, 링크를 활용하여 전문적인 문서를 만들 수 있습니다.

README.md, CONTRIBUTING.md, CHANGELOG.md

2. 블로그 포스트

Jekyll, Hugo, Gatsby 등 정적 사이트 생성기에서 마크다운으로 블로그 포스트를 작성합니다. 간단한 문법으로 제목, 이미지, 코드 예시 등을 포함한 포스트를 빠르게 작성할 수 있습니다.

3. 기술 문서 작성

API 문서, 사용자 가이드, 개발자 문서 등을 작성할 때 사용합니다. 코드 예시와 설명을 함께 작성하기 좋으며, 버전 관리가 용이합니다.

4. 메모 및 노트

Obsidian, Notion, Typora 등 마크다운 지원 노트 앱에서 개인 메모, 회의록, 학습 노트 등을 작성할 때 사용합니다. 간단하면서도 구조화된 노트를 만들 수 있습니다.

5. 협업 도구

Slack, Discord, GitHub Issues, Pull Requests 등에서 메시지를 작성할 때 마크다운을 사용하여 코드, 링크, 강조 등을 표현합니다.

🌐 마크다운 종류

종류설명주요 특징사용처
CommonMark표준 명세명확한 문법 규칙, 일관성범용적으로 사용
GitHub Flavored (GFM)GitHub 확장 버전표, 체크박스, 취소선, 코드 하이라이팅GitHub, GitLab
MultiMarkdown확장 기능 추가각주, 테이블, 수식학술 문서
Markdown ExtraPHP 기반 확장표, 각주, 정의 목록WordPress 등
KramdownRuby 구현속성 지정, TOC 자동 생성Jekyll

💻 실전 예시

완성된 README.md 예시

# 프로젝트 이름

> 프로젝트에 대한 간단한 설명

![License](https://img.shields.io/badge/license-MIT-blue.svg)

## 📋 목차

- [설치 방법](#설치-방법)
- [사용법](#사용법)
- [기여하기](#기여하기)
- [라이선스](#라이선스)

## 🚀 설치 방법

```bash
npm install your-package
```

## 📖 사용법

기본 사용 예시:

```javascript
import { yourFunction } from 'your-package';

yourFunction('hello');
```

## 🤝 기여하기

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

## 📝 라이선스

MIT License - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.

## 📧 연락처

Your Name - your.email@example.com

❓ 자주 묻는 질문 (FAQ)

Q1. 마크다운과 HTML을 함께 사용할 수 있나요?

A. 네, 대부분의 마크다운 파서는 HTML 태그를 허용합니다. 마크다운으로 표현하기 어려운 복잡한 레이아웃이나 스타일이 필요할 때 HTML을 직접 사용할 수 있습니다.

예시:
<div style="color: red;">빨간색 텍스트</div>

⚠️ 주의: 일부 플랫폼(예: GitHub)은 보안상의 이유로 특정 HTML 태그를 제한합니다.

Q2. 코드 블록에서 언어를 지정하는 이유는?

A. 언어를 지정하면 구문 강조(syntax highlighting)가 적용되어 가독성이 크게 향상됩니다.

```javascript - JavaScript 구문 강조
```python - Python 구문 강조
```html - HTML 구문 강조

GitHub, GitLab, 대부분의 마크다운 렌더러는 100개 이상의 언어를 지원합니다. 언어를 지정하지 않으면 일반 텍스트로 표시됩니다.

Q3. 줄바꿈이 적용되지 않아요!

A. 마크다운에서 줄바꿈은 두 가지 방법이 있습니다:

1. 문단 구분 (한 줄 띄우기):
첫 번째 문단
(빈 줄)
두 번째 문단

2. 줄바꿈 (스페이스 2개 또는 <br>):
첫 번째 줄 (끝에 스페이스 2개)
두 번째 줄
또는
첫 번째 줄<br>두 번째 줄

단순히 Enter만 치면 같은 문단으로 인식됩니다.

Q4. 마크다운 파일 확장자는 .md와 .markdown 중 무엇을 써야 하나요?

A. .md가 더 널리 사용되고 권장됩니다.

• .md - 짧고 타이핑하기 편함 (GitHub 표준)
• .markdown - 명확하지만 길다

둘 다 동일하게 작동하지만, 대부분의 프로젝트와 플랫폼은 .md를 사용합니다. 일관성을 위해 하나만 선택해서 사용하세요.

Q5. 이미지 크기를 조절할 수 있나요?

A. 표준 마크다운 문법으로는 불가능하지만, HTML을 사용하면 가능합니다:

마크다운 (크기 조절 불가):
![이미지](image.jpg)

HTML (크기 조절 가능):
<img src="image.jpg" width="300">
<img src="image.jpg" width="50%">

일부 마크다운 확장(예: Kramdown)은 ![이미지](image.jpg){:width="300"} 같은 문법을 지원하기도 합니다.

Q6. 마크다운을 PDF로 변환할 수 있나요?

A. 네, 여러 방법이 있습니다:

1. Pandoc (추천):
pandoc input.md -o output.pdf

2. 온라인 도구:
Markdown to PDF, Dillinger 등

3. 에디터 기능:
VS Code, Typora, Mark Text 등은 PDF 내보내기 기능을 제공합니다.

4. 프린트:
GitHub에서 마크다운 미리보기 후 브라우저의 "PDF로 저장" 기능 사용

💡 사용 팁

  • 미리보기 사용: 작성 중 실시간 미리보기로 결과를 확인하세요.
  • 일관성 유지: * vs - 리스트, **굵게** vs __굵게__ 등 한 가지 스타일만 사용하세요.
  • 공백 주의: 제목 앞뒤, 리스트 항목 사이에 적절한 공백을 넣어 가독성을 높이세요.
  • 목차 활용: 긴 문서에는 목차를 만들어 탐색을 쉽게 하세요.
  • 뱃지 사용: README에 shields.io 뱃지를 추가하여 프로젝트 상태를 한눈에 보여주세요.
  • 상대 경로: 같은 저장소 내 파일 링크는 상대 경로를 사용하세요 (예: [문서](docs/guide.md)).
  • Lint 도구: markdownlint 같은 도구로 마크다운 문법을 검사하세요.
  • 템플릿 활용: README, CONTRIBUTING 등은 템플릿을 사용하여 빠르게 작성하세요.
  • 이모지: 제목에 이모지를 추가하면 시각적으로 구분이 쉽습니다 (남용은 금물!).

⚠️ 주의사항

  • 플랫폼별 차이: GitHub, Reddit, Stack Overflow마다 지원하는 마크다운 문법이 조금씩 다릅니다.
  • 특수문자 이스케이프: *, _, #, [ 등을 문자로 표시하려면 백슬래시(\)를 앞에 붙이세요.
  • 들여쓰기 주의: 리스트와 코드 블록에서 들여쓰기가 의미를 가집니다. 탭/스페이스를 일관되게 사용하세요.
  • 링크 테스트: 상대 경로 링크가 제대로 작동하는지 확인하세요. 대소문자, 경로 오류에 주의하세요.
  • 이미지 경로: 로컬 이미지는 저장소에 포함하거나 CDN을 사용하세요. 외부 링크는 깨질 수 있습니다.
  • 보안: 사용자 입력을 마크다운으로 렌더링할 때 XSS 공격에 주의하세요. 안전한 파서를 사용하세요.
  • PDF 변환 한계: 복잡한 HTML/CSS는 PDF로 변환 시 제대로 표시되지 않을 수 있습니다.
  • 테이블 복잡도: 너무 복잡한 테이블은 HTML을 사용하거나 단순화하는 것이 좋습니다.
  • Git 충돌: 여러 명이 같은 마크다운 파일을 수정하면 merge conflict가 발생할 수 있습니다.