Markdown Preview

Markdown 텍스트를 HTML로 실시간 렌더링하여 미리 봅니다

예시 시도

Markdown

미리 보기

로컬에서 실행 · 시크릿 붙여넣기 안전

미리 보기가 여기에 표시됩니다…

로컬에서 실행 · 시크릿 붙여넣기 안전

미리 보기가 여기에 표시됩니다…

이것도 써보세요:단어 카운터 케이스 변환기 Lorem Ipsum 생성기 Line Sorter 중복 줄 제거기 텍스트 비교 정규식 테스터 비밀번호 생성기 슬러그 생성기

Markdown이란 무엇인가?

Markdown은 2004년 John Gruber가 만든 경량 마크업 언어입니다. 별표, 해시, 대시 같은 일반 텍스트 서식 기호를 사용해 구조를 나타냅니다. 제목, 굵게, 기울임, 목록, 링크, 코드 블록 등을 표현할 수 있습니다. Markdown 미리 보기 도구는 해당 일반 텍스트를 서식이 적용된 HTML로 렌더링하여 게시 전에 최종 문서가 어떻게 보일지 정확히 확인할 수 있게 해줍니다. 원래 Markdown 명세는 Gruber의 Daring Fireball 문서에 기술되어 있으며, 이후 CommonMark로 공식화되었습니다.

Markdown은 개발자 문서, README 파일, 정적 사이트 생성기(Jekyll, Hugo, Astro), 위키, 지식 베이스의 기본 작성 형식이 되었습니다. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit, Notion 모두 Markdown을 기본으로 지원합니다. 소스가 일반 텍스트이기 때문에 Markdown 파일은 Git으로 버전 관리하고, 브랜치 간 차이를 비교하고, 파일의 겹치지 않는 부분에서 충돌 없이 병합하기가 매우 쉽습니다.

Markdown 미리 보기 도구는 입력을 파싱하여 실시간으로 HTML로 변환합니다. 이를 통해 파일을 커밋하거나 페이지를 게시하기 전에 서식 오류, 잘못된 링크, 예상치 못한 중첩을 발견할 수 있습니다. 이 미리 보기 도구는 서버 왕복 없이 완전히 브라우저 내에서 실행되므로, 네트워크로 콘텐츠를 전송하지 않고 내부 또는 민감한 문서를 작업할 수 있습니다.

온라인 Markdown 미리 보기 도구를 사용하는 이유

미리 보기 없이 일반 편집기에서 Markdown을 작성하면 결과를 추측해야 합니다. 실시간 미리 보기 도구는 그 피드백 루프를 즉시 해소합니다.

⚡

실시간 렌더링

입력하는 즉시 서식이 적용된 결과를 확인합니다. 모든 제목, 목록, 코드 블록, 링크가 바로 렌더링되므로 실수를 그 순간 바로 발견할 수 있습니다.

🔒

개인 정보 우선 처리

모든 파싱이 브라우저에서 이루어집니다. Markdown 텍스트는 서버에 업로드되지 않으므로 내부 문서, 예시의 API 키, 초안 블로그 게시물을 안전하게 작업할 수 있습니다.

📝

계정이나 설치 불필요

페이지를 열고 바로 입력을 시작하세요. 회원가입 양식도, 다운로드할 데스크톱 앱도, 설정할 VS Code 확장도 없습니다. 브라우저가 있는 모든 기기에서 작동합니다.

🌐

완전한 CommonMark 지원

제목, 굵게, 기울임, 취소선, 인라인 코드, 펜스 코드 블록, 순서 있는 목록과 없는 목록, 링크, 인용문, 수평선이 모두 지원됩니다.

Markdown 미리 보기 활용 사례

컴포넌트 문서를 작성하는 프런트엔드 개발자

GitHub에 푸시하기 전에 README 파일과 컴포넌트 문서를 미리 확인합니다. 코드 예시가 펜스 블록 안에서 올바르게 렌더링되는지, 상대 경로 링크가 올바른 파일을 가리키는지 검증합니다.

API 문서를 작성하는 백엔드 엔지니어

엔드포인트 설명, 요청/응답 예시, 인증 가이드를 Markdown으로 작성합니다. 렌더링된 결과를 미리 보며 JSON 코드 블록, 표, 중첩 목록이 의도한 대로 표시되는지 확인합니다.

런북을 관리하는 DevOps 엔지니어

Git 저장소에 Markdown으로 저장된 런북과 장애 대응 플레이북은 정확한 서식이 필요합니다. 번호가 매겨진 목록과 코드 스니펫이 포함된 단계별 지침을 병합 전에 미리 확인합니다.

테스트 계획을 작성하는 QA 엔지니어

테스트 시나리오, 수용 기준, 버그 리포트를 Markdown으로 문서화합니다. 미리 보기 도구를 사용해 체크리스트, 제목, 상호 참조가 깔끔하게 렌더링되는지 확인합니다.

파이프라인을 문서화하는 데이터 엔지니어

파이프라인 README에는 스키마, DAG 의존성, 설정이 기술됩니다. 인라인 코드, 펜스 SQL 블록, 번호가 매겨진 설정 단계가 올바르게 서식이 적용되었는지 문서를 미리 확인합니다.

Markdown 문법을 배우는 학생

왼쪽에 Markdown을 입력하고 오른쪽에서 HTML 결과를 확인합니다. 제목, 목록, 굵게, 기울임, 코드 블록을 실험하면서 문법에 대한 감각을 익혀 보세요.

Markdown 문법 참조

아래 표는 일반적인 Markdown 문법을 렌더링 결과 및 해당 HTML 요소에 매핑합니다. 거의 모든 Markdown 파서가 지원하는 CommonMark 기준을 다룹니다.

Markdown	렌더링 결과	HTML 태그
# Heading	Heading 1	<h1>
## Heading	Heading 2	<h2>
bold	Bold text	<strong>
italic	Italic text	<em>
~~strike~~	Strikethrough	<del>
`code`	Inline code	<code>
```lang\n...\n```	Fenced code block	<pre><code>
- item	Unordered list	<ul><li>
1. item	Ordered list	<ol><li>
[text](url)	Hyperlink	<a href>
> quote	Blockquote	<blockquote>
---	Horizontal rule	<hr>

Markdown 방언 비교

다양한 플랫폼이 원래 Markdown 명세에 추가 기능을 확장합니다. 어떤 방언을 대상으로 하는지 알면 다른 렌더러에서 조용히 실패하는 문법을 피하는 데 도움이 됩니다.

GitHub Flavored Markdown (GFM)

작업 목록(- [ ] / - [x]), 파이프 문법의 표, 취소선(~~text~~), 자동 링크 URL을 추가합니다. GitHub 이슈, 풀 리퀘스트, README 파일에서 사용되는 방언입니다. CommonMark를 기반으로 하는 GitHub Flavored Markdown 명세에 정의되어 있습니다.

CommonMark

원래 Markdown 문법에 대한 엄격하고 명확한 명세입니다. CommonMark는 중첩 목록, 지연 연속 줄, 블록 인용문 내 빈 줄 같은 엣지 케이스에 대한 정확한 규칙을 정의합니다. 대부분의 최신 파서(marked, markdown-it, goldmark)는 CommonMark를 기본값으로 사용합니다.

MultiMarkdown (MMD)

각주, 인용 키, 수식(LaTeX), 정의 목록, 문서 메타데이터로 Markdown을 확장합니다. 주로 학술 글쓰기와 PDF 또는 LaTeX로 내보내는 장문 문서에 사용됩니다.

MDX

Markdown 파일 안에 JSX 컴포넌트를 직접 삽입합니다. Docusaurus, Nextra, Astro 콘텐츠 컬렉션 같은 문서 프레임워크에서 사용됩니다. MDX 파일은 빌드 시 React 컴포넌트로 컴파일됩니다.

코드 예시: 프로그래밍 방식으로 Markdown 렌더링

브라우저 도구가 아닌 애플리케이션 내에서 Markdown을 렌더링해야 할 때 아래 라이브러리를 사용합니다. 각 예시는 Markdown 문자열을 HTML 문자열로 변환합니다.

JavaScript (marked)

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

Python (markdown)

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

Go (goldmark)

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

CLI (pandoc)

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

자주 묻는 질문

Markdown과 HTML의 차이점은 무엇인가요?

Markdown은 HTML로 변환되는 일반 텍스트 단축 표기입니다. <h1>Heading</h1> 대신 # Heading을 작성합니다. Markdown은 작성 속도가 빠르고 소스 형태에서 읽기 쉽지만, HTML은 모든 요소와 속성을 완전히 제어할 수 있습니다. 대부분의 Markdown 렌더러는 표준 HTML을 출력합니다.

Markdown과 GitHub Flavored Markdown은 같은 것인가요?

아닙니다. GitHub Flavored Markdown(GFM)은 CommonMark의 상위 집합으로, 표, 작업 목록, 취소선, 자동 링크를 추가합니다. 일반 Markdown(CommonMark)에는 이러한 기능이 포함되지 않습니다. Markdown이 GitHub에 표시될 예정이라면 GFM 문법으로 작성하세요. 다른 렌더러를 대상으로 한다면 해당 렌더러가 지원하는 확장을 확인하세요.

Markdown에 이미지를 삽입할 수 있나요?

네. 문법은 ![대체 텍스트](이미지-URL)입니다. 대체 텍스트는 대괄호 안에, 이미지 URL은 소괄호 안에 넣습니다. 선택적 제목도 추가할 수 있습니다: ![alt](url "제목"). 대부분의 렌더러는 이를 src, alt, title 속성을 가진 <img> 태그로 변환합니다.

Markdown에서 표를 어떻게 만드나요?

표는 원래 Markdown 명세에 포함되지 않지만, GFM과 대부분의 최신 파서가 지원합니다. 파이프(|)로 열을 구분하고 하이픈(--)으로 헤더 행을 표시합니다: | 이름 | 나이 |\n|---|---|\n| 김민준 | 30 |. 구분 행의 콜론으로 정렬을 제어합니다: :--- 왼쪽, :---: 가운데, ---: 오른쪽.

이 미리 보기 도구를 사용하면 텍스트가 서버로 전송되나요?

아닙니다. Markdown 파서는 JavaScript를 사용하여 완전히 브라우저 내에서 실행됩니다. 텍스트는 기기에 유지되며 네트워크를 통해 전송되지 않습니다. 도구를 사용하는 동안 브라우저의 네트워크 탭을 열어 확인할 수 있습니다.

이 미리 보기 도구는 어떤 Markdown 요소를 지원하나요?

이 도구는 제목(h1~h6), 굵게, 기울임, 취소선, 인라인 코드, 언어 힌트가 있는 펜스 코드 블록, 순서 있는 목록과 없는 목록, 링크, 인용문, 수평선을 처리합니다. 이러한 요소에 대해 CommonMark 파싱 규칙을 따릅니다.

수식이나 다이어그램이 포함된 Markdown을 미리 보려면 어떻게 해야 하나요?

수식(LaTeX)과 다이어그램(Mermaid)은 CommonMark나 GFM에 포함되지 않은 확장입니다. 렌더링하려면 해당 확장을 지원하는 파서가 필요합니다. 수식의 경우 markdown-it-katex 플러그인을 사용한 markdown-it, 또는 Mermaid 블록을 기본 렌더링하는 GitHub 같은 플랫폼을 사용하세요. 이 미리 보기 도구는 표준 Markdown 요소에 집중합니다.