마크다운 에디터 프로 - 현대적 마크다운 편집 도구
CodeMirror 6 기반의 현대적 마크다운 에디터입니다. 실시간 프리뷰, 구문 강조, 수식 렌더링, 다이어그램 지원, 파일 관리, 내보내기 기능까지 모든 마크다운 편집 요구사항을 충족합니다. 개발자, 작가, 학생을 위한 완벽한 마크다운 편집 환경을 제공합니다.
목차
마크다운(Markdown) 완벽 가이드
마크다운(Markdown)은 2004년 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 공동 개발한 경량 마크업 언어입니다. "읽기 쉽고, 쓰기 쉬운" 텍스트 형식을 목표로 설계되었으며, 간단한 문법으로 HTML 문서를 생성할 수 있습니다.
이 가이드는 마크다운의 A부터 Z까지, 기초 문법부터 수학 수식, 다이어그램 작성까지 모든 것을 다룹니다. 초보자부터 전문가까지 누구나 참고할 수 있는 종합 레퍼런스입니다.
왜 마크다운을 배워야 하는가
현대 개발자와 작가에게 필수적인 기술
마크다운은 현대 소프트웨어 개발과 기술 문서 작성의 사실상 표준입니다. GitHub, GitLab, Bitbucket, Notion, Obsidian, Slack, Discord, Reddit, Stack Overflow 등 수많은 플랫폼에서 마크다운을 지원합니다.
학습 용이성
10분 안에 기본 문법을 익힐 수 있을 정도로 간단합니다. HTML 태그를 외울 필요가 없습니다.
높은 가독성
원본 텍스트도 읽기 쉬워 렌더링 없이도 내용 파악이 가능합니다.
플랫폼 독립성
어떤 텍스트 에디터에서든 작성 가능하며 HTML, PDF, Word 등으로 변환됩니다.
미래 보장성
순수 텍스트 파일이므로 특정 소프트웨어에 종속되지 않고 영구 보존됩니다.
마크다운을 지원하는 주요 플랫폼
개발 플랫폼
GitHub, GitLab, Bitbucket, Azure DevOps, SourceForge
노트/문서 도구
Notion, Obsidian, Typora, Bear, iA Writer, Ulysses
커뮤니케이션
Slack, Discord, Reddit, Stack Overflow, Discourse
기본 문법 완벽 가이드
CommonMark 표준을 기반으로 한 핵심 문법
3.1 제목 (Headings)
제목은 문서 구조의 뼈대입니다. # 기호의 개수로 제목 레벨(1~6)을 지정합니다. HTML의 <h1>부터 <h6>까지에 대응하며, SEO와 접근성을 위해 계층 구조를 올바르게 유지하는 것이 중요합니다.
마크다운 문법
# 제목 1 (H1) ## 제목 2 (H2) ### 제목 3 (H3) #### 제목 4 (H4) ##### 제목 5 (H5) ###### 제목 6 (H6)
대체 문법 (H1, H2만 가능)
제목 1 ====== 제목 2 ------
주의사항
# 기호와 텍스트 사이에 반드시 공백을 넣어야 합니다. "#제목"은 작동하지 않습니다. 또한 제목 앞뒤에 빈 줄을 넣는 것이 호환성을 위해 권장됩니다.
3.2 단락과 줄바꿈 (Paragraphs & Line Breaks)
단락은 빈 줄로 구분합니다. 같은 단락 내에서 줄바꿈을 하려면 줄 끝에 스페이스 2개 이상을 입력하거나 <br> 태그를 사용합니다.
단락 구분
첫 번째 단락입니다. 두 번째 단락입니다.
줄바꿈 (스페이스 2개 또는 <br>)
첫 번째 줄 두 번째 줄 (같은 단락) 또는 첫 번째 줄<br> 두 번째 줄
3.3 텍스트 강조 (Emphasis)
별표(*) 또는 밑줄(_)을 사용하여 다양한 텍스트 스타일을 적용할 수 있습니다. 호환성을 위해 단어 중간에 강조를 적용할 때는 별표 사용을 권장합니다.
| 스타일 | 문법 | 결과 | HTML |
|---|---|---|---|
| 기울임 | *텍스트* 또는 _텍스트_ | 텍스트 | <em> |
| 굵게 | **텍스트** 또는 __텍스트__ | 텍스트 | <strong> |
| 굵은 기울임 | ***텍스트*** | 텍스트 | <strong><em> |
| 취소선 | ~~텍스트~~ | <del> |
3.4 목록 (Lists)
순서 없는 목록은 -, *, + 기호를 사용하고, 순서 있는 목록은 숫자와 마침표를 사용합니다. 들여쓰기(스페이스 2~4개)로 중첩 목록을 만들 수 있습니다.
순서 없는 목록
- 항목 1 - 항목 2 - 중첩 항목 2.1 - 중첩 항목 2.2 - 항목 3 * 별표도 사용 가능 + 플러스도 사용 가능
순서 있는 목록
1. 첫 번째 2. 두 번째 1. 중첩 2.1 2. 중첩 2.2 3. 세 번째 // 숫자가 맞지 않아도 자동 정렬됨 1. 항목 1. 항목 1. 항목
목록 내 요소 추가
목록 항목 내에 단락, 인용문, 코드 블록, 이미지 등을 포함하려면 4칸 들여쓰기를 사용합니다.
3.5 링크 (Links)
마크다운은 인라인 링크와 참조 스타일 링크 두 가지 방식을 지원합니다. 참조 스타일은 긴 문서에서 가독성을 높여주며, URL 관리가 용이합니다.
| 유형 | 문법 |
|---|---|
| 인라인 링크 | [텍스트](URL) |
| 제목 포함 링크 | [텍스트](URL "제목") |
| 참조 스타일 | [텍스트][id] ... [id]: URL |
| 자동 링크 | <https://example.com> |
| 이메일 링크 | <email@example.com> |
참조 스타일 링크 예시
이 문장에서 [마크다운 가이드][1]와 [GitHub][gh]를 참조합니다. [1]: https://www.markdownguide.org "마크다운 가이드" [gh]: https://github.com
3.6 이미지 (Images)
이미지는 링크 문법 앞에 느낌표(!)를 추가합니다. 대체 텍스트(alt text)는 접근성과 SEO에 중요하므로 반드시 의미 있는 설명을 작성해야 합니다.
// 기본 이미지  // 제목 포함  // 링크가 걸린 이미지 [](링크URL) // 참조 스타일 ![대체 텍스트][id] [id]: 이미지URL
3.7 인용문 (Blockquotes)
> 기호로 인용문을 만들 수 있습니다. 중첩 인용, 다른 마크다운 요소와의 조합도 가능합니다.
마크다운 문법
> 첫 번째 단락 > > 두 번째 단락 > >> 중첩된 인용문 > > - 목록도 포함 가능 > - **강조**도 가능
렌더링 결과
첫 번째 단락
두 번째 단락
중첩된 인용문
- 목록도 포함 가능
- 강조도 가능
3.8 코드 (Code)
인라인 코드는 백틱(`)으로, 코드 블록은 세 개의 백틱(```)으로 감쌉니다. 코드 블록에 언어를 명시하면 구문 강조(syntax highlighting)가 적용됩니다.
인라인 코드와 코드 블록
인라인 코드: `const x = 10;`
코드 블록:
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```
// 언어 미지정 시
```
일반 코드 블록
```지원되는 주요 언어 식별자
3.9 수평선 (Horizontal Rules)
세 개 이상의 별표(***), 하이픈(---), 또는 밑줄(___)로 수평선을 만듭니다. 앞뒤에 빈 줄을 넣어야 제목으로 인식되지 않습니다.
내용 --- 다음 내용 *** 또 다른 내용 ___
3.10 이스케이프 문자 (Escaping)
마크다운 문법에 사용되는 특수 문자를 그대로 표시하려면 백슬래시(\)를 앞에 붙입니다.
이스케이프 가능한 문자
3.11 HTML 직접 사용
대부분의 마크다운 프로세서는 HTML 태그를 직접 사용할 수 있습니다. 마크다운으로 표현하기 어려운 레이아웃이나 스타일링에 유용합니다.
// 접기/펼치기 <details> <summary>클릭하여 펼치기</summary> 숨겨진 내용입니다. - 목록도 가능 - **마크다운**도 작동 </details> // 텍스트 정렬 <div align="center"> 가운데 정렬된 텍스트 </div> // 키보드 표시 <kbd>Ctrl</kbd> + <kbd>C</kbd> // 위/아래 첨자 H<sub>2</sub>O, X<sup>2</sup>
확장 문법 (Extended Syntax)
기본 문법을 확장한 고급 기능들
4.1 표 (Tables)
파이프(|)와 하이픈(-)으로 표를 만듭니다. 콜론(:)으로 열 정렬을 지정할 수 있습니다.
마크다운 문법
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 | | :--- | :---: | ---: | | 내용 | 내용 | 내용 | | 긴 내용 | 짧음 | 12345 |
렌더링 결과
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|---|---|---|
| 내용 | 내용 | 내용 |
| 긴 내용 | 짧음 | 12345 |
4.2 각주 (Footnotes)
각주를 사용하면 본문을 깔끔하게 유지하면서 추가 정보를 제공할 수 있습니다. 각주는 문서 하단에 자동으로 정리됩니다.
마크다운은 2004년에 만들어졌습니다[^1].
여러 줄의 각주도 가능합니다[^longnote].
[^1]: 존 그루버와 아론 스워츠가 공동 개발
[^longnote]: 긴 각주 예시
들여쓰기로 여러 단락 포함 가능
`코드`도 포함 가능4.3 정의 목록 (Definition Lists)
용어와 그 정의를 나열하는 특별한 형태의 목록입니다. 일부 마크다운 프로세서에서만 지원됩니다.
용어 1 : 용어 1의 정의 용어 2 : 용어 2의 첫 번째 정의 : 용어 2의 두 번째 정의
4.4 제목 ID (Heading IDs)
제목에 사용자 정의 ID를 부여하여 특정 섹션으로 직접 링크할 수 있습니다.
### 나의 제목 {#custom-id}
[나의 제목으로 이동](#custom-id)4.5 하이라이트 및 첨자
// 하이라이트 (일부 프로세서) ==하이라이트된 텍스트== // 아래 첨자 H~2~O → H₂O // 위 첨자 X^2^ → X² // HTML 대체 <mark>하이라이트</mark> H<sub>2</sub>O X<sup>2</sup>
GitHub Flavored Markdown (GFM)
GitHub에서 확장한 마크다운 표준
GFM은 CommonMark의 상위 집합으로, GitHub가 추가한 기능들을 포함합니다. 표, 체크리스트, 자동 링크, 취소선, 코드 펜스 등이 대표적입니다.
5.1 체크리스트 (Task Lists)
마크다운 문법
- [x] 완료된 작업 - [ ] 미완료 작업 - [ ] 또 다른 작업 - [x] 중첩된 완료 작업 - [ ] 중첩된 미완료 작업
렌더링 결과
5.2 GitHub 전용 기능
// 자동 링크 URL은 자동으로 링크됨: https://github.com // 사용자 멘션 @username을 멘션하면 알림이 갑니다 // 이슈/PR 참조 #123으로 이슈 참조 organization/repo#123 다른 저장소 참조 // 커밋 참조 a1b2c3d (SHA 해시의 처음 7자) // 이모지 단축코드 :+1: :heart: :rocket: :eyes: // 경고/노트 박스 (GitHub) > [!NOTE] > 유용한 정보입니다. > [!TIP] > 더 나은 방법을 제안합니다. > [!IMPORTANT] > 중요한 정보입니다. > [!WARNING] > 주의가 필요한 내용입니다. > [!CAUTION] > 위험한 결과를 초래할 수 있습니다.
유용한 정보입니다.
더 나은 방법을 제안합니다.
중요한 정보입니다.
주의가 필요한 내용입니다.
수학 수식 (LaTeX / KaTeX)
마크다운에서 수학 표현식 작성하기
GitHub, Notion, Obsidian 등 많은 플랫폼에서 LaTeX 문법을 사용한 수학 수식을 지원합니다. 인라인 수식은 $ 기호로, 블록 수식은 $$ 기호로 감쌉니다.
인라인 수식
문장 내 수식: $E = mc^2$
근의 공식: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$블록 수식
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + ... + x_n
$$
또는 코드 블록 형태:
```math
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
```자주 사용되는 LaTeX 문법
| 설명 | LaTeX 코드 | 결과 |
|---|---|---|
| 분수 | \frac{a}{b} | a/b |
| 제곱근 | \sqrt{x}, \sqrt[n]{x} | √x, ⁿ√x |
| 위/아래 첨자 | x^2, x_i, x^2_i | x², xᵢ, x²ᵢ |
| 시그마 | \sum_{i=1}^{n} | Σ (i=1 to n) |
| 적분 | \int_a^b, \iint, \iiint | ∫, ∬, ∭ |
| 극한 | \lim_{x \to \infty} | lim (x→∞) |
| 그리스 문자 | \alpha, \beta, \pi, \theta | α, β, π, θ |
| 비교 연산 | \leq, \geq, \neq, \approx | ≤, ≥, ≠, ≈ |
| 행렬 | \begin{matrix}...} | [ ] |
행렬 작성 예시
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$
// 대괄호 행렬
$$
\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6
\end{bmatrix}
$$다이어그램 (Mermaid)
텍스트로 다이어그램 그리기
Mermaid는 텍스트 기반으로 다이어그램을 생성하는 도구입니다. GitHub, GitLab, Notion, Obsidian 등에서 지원하며, 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트 등을 작성할 수 있습니다.
기본 사용법
```mermaid
graph TD
A[시작] --> B{조건}
B -->|Yes| C[처리1]
B -->|No| D[처리2]
C --> E[끝]
D --> E
```플로우차트 (Flowchart)
graph LR
A[사각형] --> B(둥근 사각형)
B --> C{다이아몬드}
C --> D((원))
// 방향: TB(위→아래), BT, LR(좌→우), RL시퀀스 다이어그램
sequenceDiagram
participant A as 클라이언트
participant B as 서버
A->>B: 요청
B-->>A: 응답
Note over A,B: 통신 완료클래스 다이어그램
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +String gender
Animal: +isMammal()
class Duck{
+String beakColor
+swim()
+quack()
}간트 차트
gantt
title 프로젝트 일정
dateFormat YYYY-MM-DD
section 기획
요구사항 분석 :a1, 2024-01-01, 7d
설계 :a2, after a1, 5d
section 개발
구현 :b1, after a2, 14d지원되는 다이어그램 타입
고급 활용 팁
마크다운 파워 유저가 되기 위한 기술
8.1 목차(TOC) 자동 생성
많은 마크다운 프로세서에서 자동 목차 생성을 지원합니다. 제목에서 자동으로 앵커 ID가 생성되므로 이를 활용해 목차를 만들 수 있습니다.
// 수동 목차 - [소개](#소개) - [설치 방법](#설치-방법) - [사용 예시](#사용-예시) // 자동 목차 (일부 프로세서) [[toc]] // VS Code 확장 프로그램 <!-- TOC -->으로 자동 생성
8.2 접기/펼치기 (Collapsible Sections)
<details>
<summary>더 보기 (클릭하여 펼치기)</summary>
여기에 숨겨진 내용을 작성합니다.
- 목록도 사용 가능
- **마크다운** 문법 지원
```python
print("코드 블록도 가능")
```
</details>8.3 뱃지 (Badges/Shields)
README 파일에 빌드 상태, 버전, 라이선스 등을 표시하는 뱃지를 추가할 수 있습니다.
// shields.io 사용     // 커스텀 뱃지 
8.4 키보드 단축키 표시
// HTML kbd 태그 사용 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> // 결과 예시 Ctrl + Shift + P
렌더링 예시:
Ctrl + Shift + P
8.5 주석 (Comments)
// HTML 주석 (렌더링되지 않음) <!-- 이 부분은 보이지 않습니다 --> // 링크 스타일 주석 [//]: # (이것도 주석입니다) [comment]: <> (다른 형태의 주석)
베스트 프랙티스
일관되고 읽기 좋은 마크다운 작성법
권장 사항
- # 기호와 텍스트 사이에 공백 넣기
- 제목, 인용문, 코드 블록 앞뒤에 빈 줄 넣기
- 단어 중간 강조는 별표(*) 사용하기
- 순서 목록은 마침표(.) 구분자 사용하기
- 같은 문서에서 목록 기호 통일하기
- URL 공백은 %20으로 인코딩하기
- 코드 블록에 언어 식별자 명시하기
- 이미지에 의미 있는 대체 텍스트 작성하기
피해야 할 사항
- #기호바로붙여쓰기
- 빈 줄 없이 요소 연속 배치
- 단어__중간에__밑줄 사용하기
- 순서 목록에 괄호(1)) 구분자 사용
- + * - 기호를 혼용하기
- URL에 공백 그대로 두기
- 코드 블록 언어 생략하기
- "이미지"라고만 대체 텍스트 작성
문서 구조화 권장사항
제목 계층
H1은 문서당 하나만 사용하고, H2 → H3 → H4 순서로 계층을 유지합니다. H2에서 바로 H4로 건너뛰지 마세요.
줄 길이
80~120자 정도로 줄바꿈하면 버전 관리 시 diff를 읽기 쉽고, 좁은 화면에서도 가독성이 좋습니다.
링크 텍스트
"여기를 클릭", "이 링크" 대신 링크의 목적지를 설명하는 의미 있는 텍스트를 사용합니다.
파일 이름
마크다운 파일은 소문자, 하이픈 구분, .md 확장자를 사용합니다. 예: getting-started.md
도구 및 에디터
마크다운 작성을 위한 추천 도구들
전용 에디터
- • Typora (WYSIWYG)
- • Obsidian (노트/PKM)
- • Mark Text (무료/오픈소스)
- • iA Writer (미니멀)
- • Ulysses (macOS/iOS)
- • Bear (Apple 생태계)
코드 에디터
- • VS Code + 확장
- • Sublime Text
- • Atom
- • Vim/Neovim
- • Emacs
- • JetBrains IDE
온라인 도구
- • StackEdit
- • Dillinger
- • HackMD/CodiMD
- • GitHub Web Editor
- • Notion
- • Markdown Tables Generator
VS Code 추천 확장 프로그램
Markdown All in One
단축키, 목차 생성, 자동 완성
Markdown Preview Enhanced
고급 미리보기, 다이어그램 지원
markdownlint
문법 검사 및 스타일 가이드
Paste Image
클립보드 이미지 바로 붙여넣기
자주 묻는 질문 (FAQ)
마크다운 관련 궁금증 해결
Q: 마크다운 vs HTML, 언제 무엇을 써야 하나요?
마크다운은 읽고 쓰기가 쉬우며 일반적인 문서 작성에 적합합니다. 복잡한 레이아웃, 색상 지정, 특수한 스타일링이 필요하면 HTML을 사용하세요. 대부분의 마크다운 프로세서는 HTML을 혼용할 수 있습니다.
Q: CommonMark와 GFM의 차이점은?
CommonMark는 마크다운의 표준 규격입니다. GFM(GitHub Flavored Markdown)은 CommonMark의 상위 집합으로, 표, 체크리스트, 자동 링크, 취소선 등의 기능을 추가로 지원합니다.
Q: 마크다운에서 텍스트 색상을 바꿀 수 있나요?
기본 마크다운은 색상 지정을 지원하지 않습니다. HTML을 허용하는 프로세서에서는 <span style="color:red">텍스트</span>처럼 사용할 수 있지만, GitHub 같은 플랫폼에서는 보안상 인라인 스타일이 제거됩니다.
Q: 이미지 크기를 조절할 수 있나요?
기본 마크다운 문법으로는 불가능합니다. HTML img 태그를 사용하여 <img src="..." width="300">처럼 지정하거나, 일부 프로세서에서 지원하는 확장 문법을 사용합니다.
Q: .md 파일과 .markdown 파일의 차이는?
기능적 차이는 없습니다. .md가 더 간결하여 널리 사용되지만, .markdown도 유효한 확장자입니다. 프로젝트나 팀의 컨벤션을 따르세요.
Q: 마크다운을 PDF로 변환하려면?
Pandoc(명령줄 도구), VS Code 확장(Markdown PDF), Typora 내장 기능, 온라인 도구(md2pdf.netlify.app) 등 다양한 방법이 있습니다. 스타일링이 중요하다면 Pandoc + CSS나 Prince가 좋습니다.
마크다운 치트시트
한눈에 보는 마크다운 문법 총정리
기본 문법
# H1 ~ ###### H6
*기울임* **굵게**
***굵은 기울임***
~~취소선~~
[링크](URL)
> 인용문
`인라인 코드`
```언어 코드 블록
--- 수평선
목록
- 항목 순서 없는 목록
* 항목 (동일)
1. 항목 순서 있는 목록
- [x] 완료된 작업
- [ ] 미완료 작업
(2-4칸 들여쓰기 = 중첩)
확장 문법
| 표 | 열 |
|---|---|
[^1] 각주 참조
[^1]: 내용 각주 정의
### 제목 {#id}
==하이라이트==
H~2~O 아래 첨자
X^2^ 위 첨자
수학 수식
$E=mc^2$ 인라인
$$수식$$ 블록
\frac{a}{b} 분수
\sqrt{x} 제곱근
\sum_{i=1}^n 시그마
\int_a^b 적분
Mermaid 다이어그램
```mermaid
graph TD 플로우차트
sequenceDiagram
classDiagram
gantt
pie
```
HTML 태그
<details> 접기/펼치기
<summary> 요약
<kbd> 키보드
<mark> 하이라이트
<sub> 아래 첨자
<sup> 위 첨자
<br> 줄바꿈
마크다운 마스터가 되셨습니다!
이 가이드에서 다룬 내용을 모두 익히셨다면, 어떤 플랫폼에서든 전문적인 문서를 작성할 수 있습니다. 마크다운은 배우기 쉽지만 완전히 익히려면 꾸준한 연습이 필요합니다. 실제 프로젝트의 README, 기술 문서, 블로그 포스트 작성에 적용해보세요. 왼쪽의 에디터에서 바로 연습을 시작해보세요!