마크다운 미리보기 무료 — 마크다운 문법 완전 정리와 실시간 렌더링

블로그 글을 쓰거나 GitHub README를 작성할 때, 또는 개발 문서를 만들 때 마크다운을 많이 사용합니다. 하지만 실제로 어떻게 보일지 확인하기 전까지 불안한 경우가 많습니다. 오늘은 마크다운이 무엇인지, 기본 문법부터 실전 활용법까지 정리해드립니다.

---

마크다운이란?

마크다운(Markdown)은 2004년 존 그루버(John Gruber)가 만든 경량 마크업 언어입니다. 일반 텍스트 형식으로 작성하지만 HTML로 변환됩니다.

마크다운의 설계 철학:
"읽기 쉽고 쓰기 쉬운 일반 텍스트로 작성해도 그대로 출판 가능해야 한다"

마크다운 입력:
**굵은 글씨**와 *이탤릭*

HTML 변환:
<strong>굵은 글씨</strong>와 <em>이탤릭</em>

---

마크다운이 사용되는 곳

• GitHub: README.md, 이슈, 풀 리퀘스트 설명
• Notion: 주요 텍스트 에디터
• Discord: 채팅에서 텍스트 서식
• Slack: 메시지 서식
• Reddit: 게시글 작성
• 티스토리: 마크다운 모드 지원
• 개발 문서: Docusaurus, MkDocs 등
• 이 블로그 글: 마크다운으로 작성됨

---

마크다운 기본 문법

제목 (Heading)

# 제목 1 (H1)
## 제목 2 (H2)
### 제목 3 (H3)
#### 제목 4 (H4)
##### 제목 5 (H5)
###### 제목 6 (H6)

텍스트 서식

**굵은 글씨** 또는 __굵은 글씨__
*이탤릭* 또는 _이탤릭_
***굵은 이탤릭***
~~취소선~~
`인라인 코드`

목록

순서 없는 목록:
- 항목 1
- 항목 2
  - 중첩 항목
* 별표도 가능
+ 플러스도 가능

순서 있는 목록:
1. 첫 번째
2. 두 번째
3. 세 번째

링크와 이미지

[링크 텍스트](URL)
[ToolZip](https://www.toolzip.app)

![이미지 설명](이미지URL)
![ToolZip 로고](https://www.toolzip.app/logo.png)

코드 블록

인라인 코드: `console.log("Hello")`

블록 코드:
```javascript
function hello() {
  console.log("Hello, World!");
}
```

인용문

> 인용문입니다.
> 여러 줄도 가능합니다.
>
> > 중첩 인용도 됩니다.

표

| 헤더 1 | 헤더 2 | 헤더 3 |
|--------|--------|--------|
| 내용 1 | 내용 2 | 내용 3 |
| 내용 4 | 내용 5 | 내용 6 |

정렬:
| 왼쪽 | 가운데 | 오른쪽 |
|:-----|:------:|-------:|
| L    |   C    |      R |

수평선

---
***
___

체크박스 (GitHub Flavored Markdown)

- [x] 완료된 항목
- [ ] 미완료 항목
- [x] 다른 완료 항목

---

마크다운 확장 문법 (GFM)

GitHub Flavored Markdown(GFM)은 기본 마크다운에 기능을 추가한 확장 버전입니다. GitHub, 노션 등에서 지원합니다.

자동 링크:

https://www.toolzip.app → 자동으로 클릭 가능한 링크로 변환

취소선:

~~삭제된 텍스트~~

각주:

본문의 내용[^1]

[^1]: 각주 내용

---

마크다운 작성 팁

1. 빈 줄로 문단 구분:
마크다운에서 단순 줄바꿈은 같은 문단으로 처리됩니다. 새 문단을 시작하려면 빈 줄을 하나 넣어야 합니다.

2. 표 정렬 단축키:
표를 작성할 때 열 너비를 맞출 필요 없습니다. 파이프(|)와 하이픈(-)만 있으면 됩니다.

3. 코드 블록 언어 지정:
언어를 지정하면 구문 강조(Syntax Highlighting)가 적용됩니다.

```python
print("Hello")

```

---

마크다운 vs HTML

기능	마크다운	HTML
학습 난이도	낮음	높음
가독성	높음	낮음
기능 범위	제한적	완전
용도	문서, 블로그	웹 전반

---

가장 쉬운 방법 — 브라우저에서 실시간 미리보기

ToolZip 마크다운 미리보기 바로가기 →

• 📝 실시간 렌더링 (타이핑하면 즉시 반영)
• 🎨 구문 강조 코드 블록
• 📋 HTML 변환 결과 확인
• 💰 완전 무료, 회원가입 불필요

---

사용 방법

1. toolzip.app/tools/markdown-preview 접속
2. 왼쪽 편집창에 마크다운 입력
3. 오른쪽에서 실시간 렌더링 확인
4. HTML 탭에서 변환된 HTML 확인

---

자주 묻는 질문

Q. 티스토리에서 마크다운을 사용할 수 있나요?

티스토리는 마크다운 에디터 모드를 지원합니다. 글쓰기 화면에서 에디터 전환 버튼을 눌러 마크다운 모드로 바꿀 수 있습니다.

Q. 마크다운 파일 확장자는 무엇인가요?

.md 또는 .markdown입니다. GitHub의 README.md가 대표적인 예입니다.

Q. 마크다운에서 HTML을 직접 쓸 수 있나요?

대부분의 마크다운 파서에서 HTML 태그를 그대로 사용할 수 있습니다. 마크다운으로 표현하기 어려운 레이아웃은 HTML을 사용하면 됩니다.

---

정리

• ✅ 실시간 마크다운 렌더링
• ✅ 구문 강조 코드 블록
• ✅ HTML 변환 결과 확인
• ✅ 완전 무료, 회원가입 불필요

ToolZip 마크다운 미리보기 바로가기 →

---

관련 도구: 글자수 세기 · JSON 포맷터 · 텍스트 비교