·2분 읽기
마크다운 HTML 변환 실전 9가지 예시 — 블로그·문서·이메일까지 활용법
마크다운을 HTML로 변환하는 실무 9가지 상황을 정리했어요. 블로그 포스트, 이메일 템플릿, PDF 생성, 정적 사이트 빌드까지 실전 예시.
📄
마크다운 미리보기 바로 사용하기
마크다운을 실시간으로 미리보기하세요
→
왜 마크다운으로 쓰고 HTML로 뿌리나
마크다운은 **쓰기 쉽고 변환 가능한 포맷**이에요. HTML은 웹에서 바로 렌더링되죠. 실무에서는 이 둘을 **상황에 따라 자유롭게 전환**하는 능력이 필요해요.
오늘 9가지 실전 시나리오를 정리했어요. 각 시나리오마다 추천 도구와 예시 코드가 함께 있습니다.
1. 블로그 포스트 작성
마크다운으로 쓰고 Next.js·Hugo가 HTML로 렌더링. 가장 흔한 케이스.
- Next.js: `next-mdx-remote`, `contentlayer`
- Hugo: 자체 마크다운 엔진
- Jekyll: Kramdown
GitHub에서 바로 쓰는 README.md도 같은 원리예요.
2. 정적 사이트 생성
마크다운 파일 수백 개를 한 번에 HTML로 빌드. 11ty, Astro, VitePress 같은 정적 사이트 빌더가 이 작업을 자동화해요.
3. 이메일 템플릿 작성
마케팅 이메일을 마크다운으로 쓰고 SendGrid·Postmark 같은 서비스가 HTML로 변환 전송. 디자이너 없이도 일관된 이메일을 빠르게 발송할 수 있어요.
4. PDF 문서 생성
마크다운 → HTML → PDF 체인. pandoc 또는 `md-to-pdf` 같은 CLI 도구로 한 줄에 끝나요.
```
pandoc input.md -o output.pdf
```
계약서, 보고서, 이력서 템플릿에 유용.
5. Slack·Discord 메시지 포맷팅
일부 플랫폼은 마크다운 부분 지원. 제한된 문법만 되니 변환 도구로 HTML 대체본도 준비.
6. Notion → 블로그 이관
Notion은 마크다운 export 지원. 이 파일을 정제 후 HTML로 변환해 블로그에 올려요. 대량 이관에 `notion-to-md` 같은 라이브러리 활용.
7. 개발 문서 (Swagger·API docs)
API 문서를 마크다운으로 작성하고 Redoc·Slate가 HTML로 렌더링. 코드 블록·표 구조 보존이 강점.
8. 대시보드 임시 리포트
데이터 분석 결과를 마크다운으로 요약하고 사내 위키(Confluence·Notion)에 HTML 변환 후 공유. 코드 블록 + 표 + 이미지 조합 유지.
9. GitHub Wiki·Issue 템플릿
GitHub의 모든 텍스트 영역이 마크다운 지원. Issue 템플릿, PR 템플릿, Wiki를 마크다운으로 작성하면 프로젝트 관리 효율 급상승.
변환 도구 선택 가이드
- **JS 프로젝트**: marked, markdown-it, remark
- **Python**: markdown, mistune, commonmark-py
- **CLI**: pandoc (최강 범용), md-to-pdf, mdbook
- **브라우저 실시간 프리뷰**: Toolkio Markdown Preview
프로젝트 규모·언어에 맞게 선택하세요.
Toolkio Markdown Preview로 즉석 확인
Toolkio의 Markdown Preview는 **좌측 마크다운, 우측 실시간 HTML**이 뜨는 구조예요. 붙여넣으면 즉시 결과 확인. 복사 버튼으로 HTML만 뽑아 블로그 에디터에 붙여넣기까지 5초.