마크다운 미리보기

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

마크다운 미리보기이란?

마크다운은 README, 블로그 게시물, 채팅 메시지, 문서 등 원시 HTML을 작성하지 않고도 간단하고 읽기 쉬운 서식을 원하는 수많은 곳에서 사용되는 가벼운 서식 문법입니다. 마크다운은 일반 텍스트이기 때문에 어디서든 쉽게 작성할 수 있지만, 문법을 조금이라도 잘못 쓰면 이미 게시한 뒤에야 알아채기 쉽습니다.

이 미리보기 도구는 입력하는 동안 마크다운을 원본과 나란히 렌더링해주므로, README를 커밋하거나 게시물을 발행하거나 서식이 있는 메시지를 보내기 전에 # 뒤의 공백 누락, 닫히지 않은 코드 펜스, 위 문단과 분리되지 않은 목록 같은 서식 실수를 즉시 잡아낼 수 있습니다.

공식

# 제목 → <h1>제목</h1>

**굵게** → <strong>굵게</strong>

*기울임* → <em>기울임</em>

`코드` → <code>코드</code>

[텍스트](url) → <a href="url">텍스트</a>

- 항목 → <ul><li>항목</li></ul>

계산 방법

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

예시

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

주요 이점

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

피해야 할 일반적인 실수

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

전문가 팁

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

주요 용어 설명

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

일반적인 사용 사례

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

자주 묻는 질문

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

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

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

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

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

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

커밋 전에 GitHub README를 미리 볼 때 사용할 수 있나요?

이 도구가 지원하는 일반적인 마크다운 요소라면 가능합니다. GitHub의 렌더러는 표나 작업 목록처럼 이 가벼운 미리보기 도구가 지원하지 않는 GitHub 전용 확장 문법(GFM)을 일부 지원하므로, 기본 문법을 넘어서는 부분은 항상 GitHub에서 최종 렌더링을 다시 확인하세요.

마크다운 미리보기