Markdown을 HTML로 변환하는 방법: 전체 가이드

2026-07-25· 태그: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Markdown을 HTML로 변환하는 방법

Markdown은 글쓰기를 위해 설계되었지만, 웹은 HTML 위에서 동작합니다. 모든 Markdown 문서는 브라우저가 표시하기 전에 HTML로 변환되어야 합니다. 이 가이드는 Markdown을 HTML로 변환하는 주요 방법을 다룹니다.

방법 1: 명령줄 도구

Pandoc

Pandoc은 수십 가지 형식을 지원하는 범용 문서 변환기입니다.

# Basic conversion
pandoc input.md -o output.html

# Standalone HTML with <html> and <body> tags
pandoc input.md -o output.html -s

# With table of contents
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark (JavaScript)

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

방법 2: 정적 사이트 생성기

Jekyll

Jekyll은 GitHub Pages를 구동합니다. _posts 또는 컬렉션의 Markdown 파일을 HTML로 변환합니다.

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

동적 콘텐츠를 위해 Liquid 템플릿과 함께 Kramdown 프로세서를 사용합니다.

Hugo

Hugo는 밀리초 단위의 빌드 속도로 유명한 Go 기반 정적 사이트 생성기입니다.

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

테이블, 펜스 코드 블록, 각주를 지원하는 Goldmark를 기본 Markdown 렌더러로 사용합니다.

Next.js (MDX)

Next.js는 Markdown 안에 React 컴포넌트를 포함할 수 있는 MDX를 지원합니다.

npm install next @next/mdx @mdx-js/loader

MDX를 사용하면 문서에 라이브 코드 예제, 차트, 폼을 포함할 수 있습니다.

방법 3: 온라인 변환기

도구 설치 없이 일회성 변환을 원한다면, 브라우저 기반 변환기가 즉각적인 결과를 제공합니다:

편집기 패널에 Markdown을 붙여넣거나 입력합니다.
HTML 출력이 실시간으로 표시됩니다.
생성된 HTML을 복사하여 모든 웹 페이지나 CMS에서 사용할 수 있습니다.

Markdown 미리보기 도구는 GitHub Flavored Markdown(테이블, 코드 블록, 작업 목록, 취소선)을 브라우저에서 완전히 처리합니다.

방법 4: 편집기 플러그인

| 편집기 | 기능 | 명령어 | |--------|---------|---------| | VS Code | 내장 미리보기 | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | 내장 지원 | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

처리 파이프라인

정적 사이트 생성기가 Markdown을 HTML로 변환할 때, 다음과 같은 파이프라인을 따릅니다:

Markdown → Parse to AST → Apply extensions → Render to HTML → Apply template → Output page

기능이 예상대로 렌더링되지 않는다면, 문제는 일반적으로 파서(해당 문법을 지원하지 않음)나 렌더러(예상치 못한 HTML을 출력함)에 있습니다.

Markdown을 HTML로 온라인 변환

Markdown 미리보기 도구를 사용하여 Markdown을 HTML로 즉시 변환하세요. 편집기에 Markdown을 입력하거나 붙여넣으면 렌더링된 미리보기가 실시간으로 업데이트됩니다.