Markdown 온라인 미리보기 도구를 사용하면 한쪽 패널에서 Markdown을 작성하면서 반대쪽에서 렌더링된 HTML을 실시간으로 확인할 수 있습니다 — 에디터 설정, 빌드 단계, 브라우저 확장 프로그램이 전혀 필요 없습니다. README 초안, 블로그 게시물, 문서 스니펫을 붙여넣어 커밋하기 전에 렌더링 결과를 정확히 확인하세요.
Markdown이란?
Markdown은 John Gruber가 2004년에 만든 경량 마크업 언어입니다. HTML로 변환되는 일반 텍스트 문법을 사용합니다 — **bold**는 bold가 되고, # Heading은 <h1>이 됩니다. 목표는 깔끔하게 렌더링되는 읽기 쉬운 소스 텍스트입니다.
오늘날 Markdown은 어디에나 있습니다:
- GitHub README와 PR 설명
- 문서 사이트 (Docusaurus, MkDocs, VitePress)
- 정적 사이트 생성기 (Astro, Hugo, Jekyll)
- 노트 앱 (Obsidian, Notion, Bear)
- API 문서 (Swagger 설명, Postman 컬렉션)
GitHub Flavored Markdown (GFM)
가장 널리 사용되는 Markdown 방언은 **GitHub Flavored Markdown(GFM)**으로, CommonMark 명세를 개발자 중심 기능으로 확장합니다:
테이블
| 메서드 | 엔드포인트 | 설명 |
|--------|----------------|------------------|
| GET | /users | 모든 사용자 조회 |
| POST | /users | 사용자 생성 |
| DELETE | /users/{id} | 사용자 삭제 |컬럼 정렬 지원(:---, :---:, ---:)이 있는 깔끔한 HTML 테이블로 렌더링됩니다.
작업 목록
- [x] CI 파이프라인 설정
- [x] 단위 테스트 작성
- [ ] 통합 테스트 추가
- [ ] 스테이징에 배포GitHub의 issue와 PR에서 인터랙티브 체크박스로 렌더링됩니다.
구문 강조가 있는 펜스 코드 블록
```javascript
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
```시작 펜스 뒤의 언어 식별자(javascript, python, go, bash 등)가 대부분의 렌더러에서 구문 강조를 활성화합니다.
취소선
~~deprecated API~~ → `/v2/users`를 사용하세요자동 링크
GFM은 URL을 자동으로 링크로 변환합니다: https://example.com은 [text](url) 문법 없이도 클릭 가능한 링크가 됩니다.
핵심 Markdown 문법 레퍼런스
제목
# H1 — 페이지 제목
## H2 — 주요 섹션
### H3 — 하위 섹션
#### H4 — 세부 사항강조
**굵은 텍스트**
*기울임꼴 텍스트*
***굵은 기울임꼴***
`인라인 코드`링크와 이미지
[링크 텍스트](https://example.com)
[제목이 있는 링크](https://example.com "마우스오버 제목")
목록
- 순서 없는 항목
- 다른 항목
- 중첩 항목 (2칸 들여쓰기)
1. 첫 번째 순서 있는 항목
2. 두 번째 항목
3. 세 번째 항목인용구
> 이것은 블록 인용구입니다.
>
> 여러 단락에 걸칠 수 있습니다.
>> 중첩 인용구수평선
---
***
___인라인 HTML
Markdown은 원시 HTML을 출력으로 그대로 통과시킵니다. Markdown으로 표현할 수 없는 것에 HTML을 섞을 수 있습니다:
<details>
<summary>클릭하여 펼치기</summary>
여기에 숨겨진 콘텐츠.
</details>일반적인 Markdown 사용 사례
README 파일
잘 구성된 README의 전형적인 내용:
# 프로젝트 이름
무엇을 하는지에 대한 짧은 설명.
## 설치
```bash
npm install my-package사용법
import { myFn } from 'my-package';
myFn({ option: true });API
| 옵션 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| debug | boolean | false | 디버그 로그 활성화 |
| timeout | number | 5000 | 요청 타임아웃 (ms) |
라이선스
MIT
### API 문서
Markdown은 OpenAPI에 투자하기 전에 REST API를 문서화하는 데 이상적입니다:
```markdown
## POST /auth/token
자격 증명을 JWT 액세스 토큰으로 교환합니다.
**요청 본문**
```json
{
"email": "user@example.com",
"password": "secret"
}응답 200
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"expiresIn": 3600
}응답 401 — 잘못된 자격 증명.
### 변경 로그
Keep a Changelog 형식은 Markdown을 사용합니다:
```markdown
## [2.1.0] — 2026-03-15
### 추가됨
- 다크 모드 지원
- 빠른 검색 키보드 단축키 (Cmd+K)
### 수정됨
- Windows에서 줄 끝 정규화 (#234)
- WebSocket 핸들러 메모리 누수 (#241)
### 사용 중단됨
- `legacyAuth()` — 대신 `authenticate()` 사용Markdown 방언: 무엇을 선택할까
| 방언 | 사용 위치 | 주요 추가 기능 |
|---|---|---|
| CommonMark | 범용 기준 | 엄격한 명세, 일관성 |
| GFM | GitHub, GitLab, Gitea | 테이블, 작업 목록, 자동 링크 |
| MDX | React/Astro 사이트 | Markdown 내 JSX 컴포넌트 |
| MultiMarkdown | 학술 글쓰기 | 각주, 인용 |
| Pandoc Markdown | 문서 변환 | LaTeX 수식, 인용 |
대부분의 개발 콘텐츠에는 GFM이 적합합니다. 정적 사이트에서는 MDX로 완전한 컴포넌트 파워를 사용할 수 있습니다.
Markdown 미리보기 vs 로컬 에디터
| 접근 방식 | 속도 | 기능 | 설정 불필요 |
|---|---|---|---|
| 온라인 미리보기 (ZeroTool) | 즉시 | GFM + 강조 | Yes |
| VS Code + 확장 | 빠름 | 완전한 에디터 | 설치 필요 |
| Obsidian | 전체 앱 | 위키링크 + 플러그인 | 설치 필요 |
| GitHub 웹 에디터 | 온라인 | GFM만 | 로그인 필요 |
온라인 도구는 빠른 README 초안 작성, PR 설명의 Markdown 검토, 문서에 붙여넣기 전 스니펫 렌더링 확인에 가장 빠른 방법입니다.
깔끔한 Markdown을 위한 팁
일관된 제목 계층 — 레벨을 건너뛰지 마세요 (H1에서 H3으로 바로 가지 마세요). 스크린 리더와 문서 생성기는 제목 트리에 의존합니다.
블록 요소 주변에 빈 줄 — 제목, 코드 블록, 목록, 인용구 앞뒤에 빈 줄을 추가하세요. 일부 파서는 없으면 올바르게 렌더링하지 않습니다.
들여쓰기 코드보다 펜스 코드 블록 권장 — 목록 안에 중첩될 때 코드의 4칸 들여쓰기는 모호합니다. 언어 태그가 있는 펜스 블록은 명시적이고 구문 강조를 지원합니다.
반복 URL에는 참조 링크 — 긴 URL을 여러 번 반복하는 대신 참조 스타일 링크를 사용하세요:
자세한 내용은 [MDN 문서][mdn]를 참조하세요.
[MDN][mdn] 사이트에도 가이드가 있습니다.
[mdn]: https://developer.mozilla.org줄 바꿈에 후행 공백 피하기 — 후행 2칸 공백 줄 바꿈(line \n)은 보이지 않아 오류가 발생하기 쉽습니다. 대신 <br>을 사용하거나 단락을 재구성하세요.
지금 Markdown 미리보기
ZeroTool의 Markdown 미리보기는 완전한 구문 강조를 갖춘 GitHub Flavored Markdown을 실시간으로 렌더링합니다. 콘텐츠를 붙여넣고 즉시 결과를 확인하세요 — 가입 불필요, 100% 브라우저 기반.