개발자

마크다운 미리보기

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

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

마크다운 미리보기이란?

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

이 계산기를 사용해야 할 때

  • GitHub 또는 GitLab README를 작성하고 커밋 전에 포맷팅을 확인하려는 경우
  • 블로그 플랫폼, 문서 사이트 또는 위키용 마크다운 게시물을 초안하는 경우
  • 보내기 전에 마크다운 이메일 또는 채팅 메시지가 올바르게 렌더링되는지 확인하는 경우
  • 다양한 포맷팅으로 실험하고 즉시 결과를 보면서 마크다운 구문을 배우는 경우
  • CMS나 이메일 템플릿에 붙여넣기 위해 짧은 마크다운 스니펫을 HTML로 변환하는 경우
  • 일부 포맷팅이 예상대로 렌더링되지 않는 마크다운 문서를 디버깅하는 경우

단계:

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

공식

# 제목 →

제목

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

사용 사례

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

주요 이점

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

전문가 팁

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

피해야 할 일반적인 실수

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

주요 용어 설명

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

관련 개념

예시

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

결과 해석 방법

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

자주 묻는 질문

이 도구는 어떤 마크다운 문법을 지원하나요?
제목(# ~ ######), 굵게(**텍스트**), 기울임(*텍스트*), 인라인 코드(`코드`), 코드 블록(```), 링크([텍스트](url)), 글머리 기호 목록(- 항목), 번호 매기기 목록(1. 항목), 인용문(> 텍스트)을 지원합니다.
제 콘텐츠가 어딘가에 저장되거나 업로드되나요?
아니요. 모든 파싱과 렌더링은 JavaScript를 사용해 브라우저 내에서 전적으로 이루어집니다. 입력한 내용은 어떤 서버로도 전송되거나 저장되거나 기록되지 않습니다.
왜 서식이 올바르게 표시되지 않나요?
마크다운은 정확한 문법을 요구합니다 — 예를 들어 많은 렌더러가 문단과 목록을 올바르게 구분하려면 그 사이에 빈 줄이 필요하고, 제목은 # 기호 뒤에 공백이 있어야 합니다. 사용 중인 서식 주변에 공백이나 줄바꿈이 빠지지 않았는지 확인하세요.
커밋 전에 GitHub README를 미리보는 데 사용할 수 있나요?
네, 이 도구가 지원하는 일반적인 마크다운 요소의 경우 가능합니다. GitHub의 렌더러는 이 가벼운 미리보기에 포함되지 않는 표나 작업 목록 같은 GitHub-Flavored Markdown 확장 기능을 일부 지원하므로, 기본 문법을 넘어서는 부분은 항상 GitHub 자체에서 최종 렌더링을 다시 확인하세요.
이 도구는 어떤 마크다운 구문을 지원합니까?
제목(# 부터 ###### 까지), 굵게(**텍스트**), 기울임(*텍스트*), 인라인 코드(`코드`), 코드 블록(```), 링크([텍스트](url)), 글머리 기호 목록(- 항목), 번호 매기기 목록(1. 항목), 인용문(> 텍스트)을 지원합니다.
내 콘텐츠가 어딘가에 저장되거나 업로드됩니까?
아닙니다. 모든 것이 JavaScript를 사용하여 브라우저에서 완전히 파싱되고 렌더링됩니다. 입력한 내용이 서버에 전송되거나, 저장되거나, 기록되지 않습니다.
포맷팅이 올바르게 표시되지 않는 이유는 무엇입니까?
마크다운은 정확한 구문이 필요합니다 — 예를 들어, 많은 렌더러에서 단락과 목록을 올바르게 구분하려면 그 사이에 빈 줄이 필요하고, 제목에는 # 기호 뒤에 공백이 필요합니다. 사용 중인 포맷팅 주변에 누락된 공백이나 줄 바꿈이 있는지 확인하세요.
커밋 전에 GitHub README를 미리 보는 데 이것을 사용할 수 있습니까?
이 도구가 지원하는 일반적인 마크다운 요소의 경우 가능합니다. GitHub의 렌더러는 이 경량 미리보기에는 포함되지 않은 일부 추가 GitHub-Flavored Markdown 확장(표 및 작업 목록 등)을 지원하므로, 기본 구문을 넘어선 모든 것에 대해 GitHub에서 최종 렌더링을 항상 다시 확인하세요.
마크다운에서 표를 어떻게 만듭니까?
표준 마크다운은 표를 지원하지 않지만 GitHub-Flavored Markdown은 지원합니다. 열을 구분하기 위해 파이프 문자(|)를, 헤더 구분자로 하이픈을 사용하세요. 이 미리보기는 표를 렌더링하지 않습니다 — 대상 플랫폼에서 최종 렌더링을 확인하세요.
마크다운에서 LaTeX 수학을 작성할 수 있습니까?
이 미리보기는 LaTeX 수학을 지원하지 않습니다. 수학 렌더링을 위해 KaTeX 또는 MathJax를 지원하는 도구를 사용하세요. GitHub와 같은 일부 플랫폼도 마크다운에서 LaTeX를 렌더링하지 않습니다.
Markdown으로 수평선을 추가하는 방법은?
하이픈(---), 별표(***), 또는 밑줄(___)을 3개 이상 독립된 줄에 입력합니다.

더 많은 도구 살펴보기

전체 도구 라이브러리에서 엄선한 새로운 추천입니다.

지수 계산기

건식벽체 계산기

압력 계산기

단위 변환기

텍스트 케이스 변환기

이메일 마케팅 투자 수익률 계산기