마크다운 미리보기

한쪽에 마크다운을 입력하면 다른 쪽에서 실시간으로 렌더링됩니다 — 제목, 굵게, 기울임, 목록, 코드 블록, 링크를 브라우저에서 즉시 미리보세요.

이 계산기가 도움이 되었나요?

마크다운 미리보기이란?

마크다운은 README, 블로그 게시물, 채팅 메시지, 문서 등 원시 HTML을 작성하지 않고도 간단하고 읽기 쉬운 서식을 원하는 수많은 곳에서 사용되는 가벼운 서식 문법입니다. 마크다운은 일반 텍스트이기 때문에 어디서든 쉽게 작성할 수 있지만, 문법을 조금이라도 잘못 작성하면 게시하기 전까지 알아차리기 쉽습니다. 이 미리보기는 입력하는 즉시 마크다운을 소스와 나란히 렌더링하므로, README를 커밋하거나 게시물을 게시하거나 서식 있는 메시지를 보내기 전에 서식 오류를 즉시 확인할 수 있습니다 — # 뒤의 누락된 공백, 닫히지 않은 코드 펜싱, 위 단락과 분리되지 않은 목록 등을 미리 확인할 수 있습니다.

이 계산기를 사용해야 할 때

Writing a GitHub or GitLab README and want to verify formatting before committing
Drafting a Markdown post for a blog platform, documentation site, or wiki
Checking a Markdown email or chat message renders correctly before sending
Learning Markdown syntax by experimenting with different formatting and seeing instant results
Converting a short Markdown snippet to HTML for pasting into a CMS or email template
Debugging a Markdown document where some formatting isn't rendering as expected

단계:

왼쪽 패널에 마크다운을 입력하거나 붙여넣으세요.
오른쪽에서 렌더링된 HTML 미리보기가 즉시 업데이트되는 것을 확인하세요.
미리보기가 의도한 대로 나올 때까지 문법을 조정하세요.
결과에 만족하면 완성된 마크다운 원본을 복사하세요.

공식

# 제목 →

제목

**굵게** → 굵게 *기울임* → 기울임 `코드` → 코드 [텍스트](url) → 텍스트 - 항목 →

항목

사용 사례

커밋하기 전에 GitHub나 GitLab README 미리보기
Slack, Discord 등 마크다운을 지원하는 채팅 앱용 서식 메시지 작성
게시하기 전에 블로그 게시물이나 문서 서식 확인
직접 실험하고 즉시 결과를 보며 마크다운 문법 배우기
짧은 마크다운 조각을 HTML로 빠르게 변환해 다른 곳에 붙여넣기

주요 이점

마크다운이 원본과 나란히 즉시 렌더링되는 것을 확인
어디에도 게시하기 전에 문법 실수 발견
브라우저에서 완전히 오프라인으로 실행 — 아무것도 업로드되지 않음
무료, 가입 불필요, 일반적인 용도에는 파일 크기 제한 없음

전문가 팁

다양한 마크다운 파서에서 가장 안정적으로 렌더링되도록 목록과 코드 블록 앞뒤에 빈 줄을 추가하세요
모호함을 피하려면 굵게는 별표 두 개, 기울임은 별표(또는 밑줄) 하나를 사용하세요
표처럼 추가 문법을 지원하는 대상 플랫폼(GitHub, Slack 등)이 있으므로 이 도구에서 먼저 미리 보고 최종 확인하세요
문서 구조와 접근성을 위해 제목 단계를 순차적으로 사용하세요(# 에서 ### 로 건너뛰지 마세요)

피해야 할 일반적인 실수

문단과 뒤따르는 목록 사이에 필요한 빈 줄을 빠뜨림
제목의 # 기호 뒤에 공백을 빠뜨려 렌더링되지 않음
코드 펜스(```)를 닫지 않아 나머지 문서 전체가 코드로 처리됨
굵게에 별표 두 개 대신 하나만 사용해 기울임으로 표시됨

주요 용어 설명

CommonMark: 불일치를 줄이기 위해 설계된 마크다운 문법의 표준화된 사양
GFM: 표와 작업 목록을 지원하는 확장 방언인 GitHub 전용 마크다운
코드 펜스(Code fence): 여러 줄 코드를 서식화하는 데 사용되는, 삼중 백틱(```)으로 구분된 블록
인라인 서식(Inline formatting): 블록 수준 요소와 달리 *기울임*이나 `코드`처럼 한 줄 안에 적용되는 서식

예시

"## 안녕\n\n이것은 **굵게**이고 이것은 *기울임*입니다."를 입력하면 2단계 제목 다음에 굵게와 기울임 텍스트가 있는 문단으로 렌더링됩니다.

결과 해석 방법

왼쪽 패널에는 원본 Markdown 소스 텍스트가 표시되고 오른쪽 패널은 이를 실시간으로 서식이 지정된 HTML로 렌더링합니다. 키를 누를 때마다 미리보기가 즉시 업데이트되어 각 구문 요소의 효과를 바로 확인할 수 있습니다. 흔한 렌더링 문제는 대부분 공백과 관련이 있습니다. 대부분의 렌더러는 문단과 그 뒤에 오는 목록 사이에 빈 줄이 필요합니다. 제목은 # 기호 뒤에 공백이 필요합니다. 코드 펜스(```)는 코드 블록 렌더링을 시작하려면 자체 줄에 있어야 합니다. 미리보기는 Markdown이 대부분의 플랫폼(GitHub, Slack, Discord 등)에서 어떻게 표시될지에 대한 근사치에 가깝지만, 각 플랫폼에는 약간씩 다른 렌더러가 있습니다. 기본 서식을 넘어서는 모든 항목에 대해서는 항상 대상 플랫폼에서 최종 확인하세요.

자주 묻는 질문

이 도구는 어떤 마크다운 문법을 지원하나요?

제목(# ~ ######), 굵게(**텍스트**), 기울임(*텍스트*), 인라인 코드(`코드`), 코드 블록(```), 링크([텍스트](url)), 글머리 기호 목록(- 항목), 번호 매기기 목록(1. 항목), 인용문(> 텍스트)을 지원합니다.

제 콘텐츠가 어딘가에 저장되거나 업로드되나요?

아니요. 모든 파싱과 렌더링은 JavaScript를 사용해 브라우저 내에서 전적으로 이루어집니다. 입력한 내용은 어떤 서버로도 전송되거나 저장되거나 기록되지 않습니다.

왜 서식이 올바르게 표시되지 않나요?

마크다운은 정확한 문법을 요구합니다 — 예를 들어 많은 렌더러가 문단과 목록을 올바르게 구분하려면 그 사이에 빈 줄이 필요하고, 제목은 # 기호 뒤에 공백이 있어야 합니다. 사용 중인 서식 주변에 공백이나 줄바꿈이 빠지지 않았는지 확인하세요.

커밋 전에 GitHub README를 미리보는 데 사용할 수 있나요?

네, 이 도구가 지원하는 일반적인 마크다운 요소의 경우 가능합니다. GitHub의 렌더러는 이 가벼운 미리보기에 포함되지 않는 표나 작업 목록 같은 GitHub-Flavored Markdown 확장 기능을 일부 지원하므로, 기본 문법을 넘어서는 부분은 항상 GitHub 자체에서 최종 렌더링을 다시 확인하세요.

What Markdown syntax does this tool support?

Headings (# through ######), bold (**text**), italics (*text*), inline code (`code`), code blocks (```), links ([text](url)), bulleted lists (- item), numbered lists (1. item), and blockquotes (> text).

Is my content saved or uploaded anywhere?

Why isn't my formatting showing up correctly?

Can I use this to preview a GitHub README before committing?

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

Markdown은 일반 텍스트로 작성하고 읽기 쉬운 가벼운 마크업 언어입니다. HTML은 더 복잡한 구문을 가진 완전한 마크업 언어입니다. Markdown은 표시를 위해 종종 HTML로 변환됩니다. 이 도구는 Markdown을 실시간으로 HTML로 렌더링합니다.

How do I create a table in Markdown?

표준 Markdown은 표를 지원하지 않지만 GitHub-Flavored Markdown은 지원합니다. 열을 구분하려면 파이프 문자(|)를, 헤더 구분선에는 하이픈을 사용하세요. 이 미리보기는 표를 렌더링하지 않으므로 대상 플랫폼에서 최종 렌더링을 확인하세요.

Can I write LaTeX math in Markdown?

This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.

마크다운 미리보기