마크다운 에디터
마크다운을 작성하고 실시간으로 미리보기를 확인합니다.
마크다운 에디터
기본 문법
굵은 글씨와 기울임 글씨를 사용할 수 있습니다.
인라인 코드도 지원합니다.
인용문은 이렇게 표현합니다.
- 순서 없는 목록 1
- 순서 없는 목록 2
- 순서 없는 목록 3
- 순서 있는 목록
- 두 번째 항목
- 세 번째 항목
console.log("Hello, World!");마크다운 에디터 — 실시간 미리보기로 문서를 빠르게 작성하기
마크다운(Markdown)은 2004년 존 그루버(John Gruber)와 에런 스워츠(Aaron Swartz)가 공동 설계한 경량 마크업 언어입니다. "읽기 쉬운 텍스트 그 자체가 곧 문서 형식이 된다"는 철학 아래 탄생했으며, 별도의 WYSIWYG 에디터 없이도 제목, 목록, 링크, 코드 블록 등 구조화된 서식을 적용할 수 있습니다. 이 에디터는 입력과 동시에 렌더링 결과를 좌우 분할 화면으로 보여 주므로, 문법을 학습하면서 즉시 결과를 확인할 수 있습니다.
CommonMark 0.30 명세와 GFM 확장
마크다운은 원래 명세가 모호해 파서마다 해석이 달랐습니다. 이를 해결하기 위해 2014년 CommonMark 프로젝트가 시작되었고, 현재 0.30 버전이 사실상 표준으로 자리잡았습니다. GitHub Flavored Markdown(GFM)은 CommonMark 위에 테이블, 체크박스 목록, 취소선, 자동 링크 등을 추가한 확장 규격입니다. GFM은 GitHub, GitLab, Notion, Obsidian 등 주요 플랫폼에서 채택하고 있어 호환성이 매우 높습니다.
핵심 문법 빠른 참고표
| 요소 | 마크다운 문법 | 렌더링 결과 |
|---|---|---|
| 제목 1 | # 제목 | H1 태그 |
| 굵게 | **텍스트** | 텍스트 |
| 기울임 | *텍스트* | 텍스트 |
| 링크 | [텍스트](URL) | 하이퍼링크 |
| 코드 블록 | ```lang ... ``` | 구문 강조 코드 |
| 체크박스 (GFM) | - [x] 항목 | 체크된 목록 |
| 테이블 (GFM) | | A | B | | 표 형태 출력 |
실무 활용 시나리오
1. GitHub README 작성 — 프로젝트 소개, 설치 가이드, API 레퍼런스를 마크다운 하나로 관리합니다. 배지(badge) 이미지, Mermaid 다이어그램, 코드 예제를 함께 넣으면 문서 품질이 크게 올라갑니다.
2. 기술 블로그 포스팅 — fenced code block에 언어를 지정하면(```javascript, ```python) 구문 강조가 적용되어 독자의 가독성이 향상됩니다. Jekyll, Hugo, Next.js 등 정적 사이트 생성기에서 마크다운은 기본 콘텐츠 포맷입니다.
3. 사내 위키 / 지식 관리 — Confluence, Notion, Obsidian에서 마크다운을 지원하며, 팀원 간 문서 버전 관리를 Git으로 할 수 있어 변경 이력 추적이 용이합니다.
4. 이메일 뉴스레터 초안 — 마크다운으로 먼저 구조를 잡은 뒤 HTML로 변환하면 이메일 클라이언트 호환 문제를 줄이면서도 빠르게 뉴스레터를 제작할 수 있습니다.
자주 하는 실수와 해결법
줄바꿈이 적용되지 않는 문제는 가장 흔한 실수입니다. CommonMark에서는 줄 끝에 공백 2개 또는 빈 줄 하나를 넣어야 단락이 나뉩니다. 중첩 목록은 들여쓰기를 공백 2~4칸으로 정확히 맞춰야 하위 항목으로 인식됩니다. 코드 블록 안에서 역따옴표(```)를 사용해야 할 때는 외부 블록을 네 개의 역따옴표(````)로 감싸면 됩니다. 또한 테이블 구분선에서 하이픈(-) 개수가 최소 3개 이상이어야 파서가 올바르게 렌더링합니다.
관련 도구
마크다운 문서를 블로그에 게시하기 전 블로그 SEO 체커로 키워드 밀도와 구조를 점검하세요. 본문의 불필요한 공백이나 줄바꿈은 텍스트 정리 도구로 한 번에 제거할 수 있습니다. 레이아웃 시안용 더미 텍스트가 필요하면 한글 Lorem Ipsum 생성기를 활용하세요.
참고 자료
- CommonMark Spec 0.30 — spec.commonmark.org/0.30
- GitHub Flavored Markdown Spec — github.github.com/gfm
- MDN Web Docs: HTML 요소 레퍼런스 — developer.mozilla.org
- Daring Fireball: Markdown 원본 문법 — daringfireball.net/projects/markdown/syntax