온라인 마크다운 뷰어

Markdown을 붙여 넣고 바로 렌더링 결과를 확인하세요. GFM, LaTeX, Mermaid, 코드 하이라이팅을 지원하며 HTML 복사, PDF/PNG 내보내기, 공유 링크 생성까지 한 화면에서 처리할 수 있습니다.

실시간 미리보기를 지원하는 온라인 마크다운 뷰어

MD Viewer는 Markdown을 깔끔하고 읽기 쉬운 HTML로 실시간 변환해 주는 무료 온라인 뷰어입니다. README, RFC, 변경 로그, 회의록, .md 파일 등을 붙여넣기만 하면 GFM 테이블, LaTeX 수식, Mermaid 다이어그램, 코드 하이라이팅까지 즉시 확인할 수 있습니다. GitHub나 평소에 사용하는 문서 사이트에서 보는 것과 비슷한 결과를 브라우저에서 바로 확인할 수 있습니다.

원문을 조금 고쳐야 할 때는 같은 화면을 가벼운 마크다운 에디터로 사용할 수 있습니다. 왼쪽에서 입력하고 오른쪽에서 미리보기를 확인한 뒤, 정리된 HTML을 복사하거나 공개 공유 링크를 만들면 됩니다. 회원가입도, 설치도, 복잡한 설정도 필요 없습니다.

렌더링 결과를 그대로 믿을 수 있는 마크다운 뷰어

온라인 마크다운 도구 중에는 중요한 부분을 대충 처리하는 경우가 많습니다. 각주가 빠지거나, 표 레이아웃이 틀어지거나, LaTeX 수식이 일반 텍스트로 표시되거나, Mermaid 블록을 아예 처리하지 못하는 경우도 많습니다. MD Viewer는 로컬 미리보기, HTML 복사, 공유 페이지에 모두 같은 렌더링 파이프라인을 사용합니다. 마크다운 뷰어에서 본 결과가 독자에게 전달되는 결과와 일치합니다.

실시간 미리보기는 내용을 붙여넣거나 직접 입력하는 동안 자연스럽게 업데이트됩니다. 수천 단어 분량의 README에 다이어그램과 수식이 섞여 있어도, 입력이 끊기지 않도록 디바운스 처리가 되어 있습니다.

전체 렌더링 지원

GitHub Flavored Markdown (GFM)

CommonMark는 물론 실제 문서에서 자주 쓰는 GFM 확장도 함께 지원합니다.

  • 열 정렬을 지원하는 테이블
  • - [ ], - [x] 형식의 작업 목록
  • 언어 힌트를 가진 펜스 코드 블록과 구문 강조
  • 원시 URL의 자동 링크
  • 긴 문서에 필요한 각주
  • ~~text~~ 문법의 취소선
기능 지원 참고
테이블 yes GFM 정렬 문법 지원
작업 목록 yes HTML에서 체크박스로 렌더링
각주 yes 자동 번호 매김
취소선 yes ~~이렇게~~ 작성

GitHub README를 그대로 붙여 넣어도 이 마크다운 뷰어는 체크박스를 빠뜨리지 않고, 표를 흐트러뜨리지 않으며, 각주 링크를 끊지 않습니다.

LaTeX 수식

$E = mc^2$ 같은 인라인 수식과 $$ ... $$ 형식의 블록 수식은 KaTeX로 렌더링됩니다. 공식, 행렬, 합 기호, 그리스 문자가 마크다운 미리보기 안에 정확히 표시되므로 별도의 수식 뷰어를 열거나 수식을 이미지로 캡처할 필요가 없습니다.

int0inftye−x2,dx=fracsqrtpi2\\int_{0}^{\\infty} e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}

학술 글, 머신러닝 README, 기술 노트처럼 수식이 포함된 문서를 HTML로 변환해 확인할 때 특히 유용합니다.

Mermaid 다이어그램

플로차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트, 상태 다이어그램을 인라인 SVG로 렌더링합니다. 다른 문서에서 사용하던 Mermaid 블록을 붙여넣기만 하면, diagrams.net을 열거나 PNG로 따로 내보내지 않아도 바로 다이어그램을 확인할 수 있습니다.

flowchart LR
  Paste[Markdown 붙여넣기] --> Render[실시간 미리보기]
  Render --> Copy[깨끗한 HTML 복사]
  Render --> Share[공개 공유 링크]

다이어그램은 공유 링크에도 함께 포함되며, 화면 크기에 관계없이 선명하게 표시됩니다.

이미지와 리치 미디어

Markdown 이미지는 원본 해상도에 맞춰 인라인으로 렌더링됩니다.

이미지를 설명하는 대체 텍스트

복사한 HTML에는 이미지 URL이 그대로 유지되고, 공유 페이지에서는 모바일 독자도 편하게 볼 수 있도록 반응형으로 표시됩니다. 코드, 표, 수식, 다이어그램과 함께 사용하면 이 온라인 마크다운 뷰어만으로도 완성된 기술 글을 확인하고 공유할 수 있습니다.

키보드 단축키

보던 내용을 바로 고쳐야 할 때도 손을 키보드에서 떼지 않고 작업할 수 있습니다.

단축키 동작
Cmd / Ctrl + B 선택 영역 굵게
Cmd / Ctrl + I 선택 영역 기울임
Cmd / Ctrl + K 링크 삽입
Cmd / Ctrl + E 인라인 코드
Cmd / Ctrl + S 초안 확정 / 스냅샷 저장
Cmd / Ctrl + / 미리보기 패널 전환
Tab / Shift+Tab 목록 들여쓰기 / 내어쓰기

여러 렌더링 테마

색상, 글꼴, 여백을 한 번에 조정하는 테마를 선택할 수 있습니다. 같은 Markdown도 CSS를 직접 만지지 않고 기술 문서, 에세이, 학술 노트, 현대적인 랜딩 페이지처럼 다른 분위기로 렌더링할 수 있습니다. 각 테마는 다음 요소를 함께 다듬습니다.

  • 색상 체계: 배경, 본문, 제목, 링크, 코드 블록, 인용 강조 색상
  • 글꼴 계열: 긴 글에 어울리는 세리프, 제품 문구에 맞는 산세리프, 기술 노트에 적합한 모노스페이스, CJK 친화적인 폰트 스택
  • 글자 크기와 줄 간격: 촘촘한 읽기, 편안한 읽기, 여유 있는 읽기 리듬
  • 제목 크기와 굵기: 절제된 편집 스타일에서 강한 마케팅 페이지 계층까지

선택한 테마는 세션이 바뀌어도 유지되고 공개 공유 페이지에도 반영됩니다. 독자는 작성자가 고른 최종 스타일을 그대로 보게 되므로, 마크다운 뷰어에서 테마 하나만 고르면 바로 발행 가능한 결과에 가까워집니다.

이 온라인 마크다운 뷰어로 할 수 있는 일

  • 어떤 Markdown이든 붙여 넣고 바로 렌더링 확인: README, RFC, 변경 로그, 회의록, 설계 문서
  • 푸시하기 전에 GitHub README 미리보기: 깨진 표, 끊긴 링크, 서식 문제를 먼저 찾기
  • 다른 사람이 보낸 Markdown 보기: .md 파일을 마크다운 뷰어에 넣고 몇 초 안에 읽기 좋은 페이지로 확인
  • 문제를 발견하면 그 자리에서 수정: 보기 화면을 그대로 에디터처럼 사용하면서 내용을 잃지 않고 고치기
  • 깨끗한 HTML 복사: 정리된 의미론적 HTML을 CMS, 뉴스레터, 정적 사이트에 바로 붙여 넣기
  • 공개 공유 링크 만들기: 각 스냅샷마다 안정적인 URL을 만들고 서버에서 Markdown을 다시 렌더링
  • 브라우저 안에서 완료: 공유를 선택하기 전까지 콘텐츠는 사용자의 기기 안에 유지

실시간 미리보기 작동 방식

  1. 뷰어 패널에 Markdown을 붙여 넣거나 직접 입력합니다.
  2. 미리보기 패널이 하나의 렌더링 함수로 결과를 즉시 표시합니다. GFM, LaTeX, Mermaid, 이미지, 코드 하이라이팅이 모두 포함됩니다.
  3. Copy HTML을 누르면 화면에 보이는 것과 같은 HTML을 복사합니다.
  4. Share를 누르면 Cloudflare D1에 저장되는 안정적인 URL로 스냅샷을 공개합니다.

하나의 파이프라인, 하나의 출력, 예상치 못한 차이는 없습니다. 마크다운 뷰어, HTML 복사, 공유 페이지가 모두 같은 결과를 사용합니다.

예: Markdown에서 깔끔한 HTML로

import { renderResult } from "@/lib/render";

const { html } = renderResult("# Hello\n\nShip clean **HTML** in one click.");
// html은 정리된 의미론적 HTML이며 미리보기 패널과 동일합니다

같은 renderResult 함수가 뷰어 미리보기, 클립보드에 복사되는 HTML, 서버에서 렌더링되는 공유 페이지를 모두 구동합니다. 클라이언트 HTML을 정본으로 신뢰하지 않으며, 공유 레코드는 항상 서버에서 Markdown을 기준으로 다시 렌더링됩니다.

목표는 또 하나의 Markdown 포매터를 만드는 것이 아니었습니다. 빠르게 열리고, 렌더링 결과를 있는 그대로 보여 주며, 링크를 공유해도 믿을 수 있는 마크다운 뷰어를 만드는 것이었습니다.

활용 사례

  • 누군가 보낸 .md 파일을 데스크톱 마크다운 앱 없이 빠르게 열어 보기
  • 커밋 전에 README가 GitHub에서 어떻게 보일지 미리 확인하기
  • 원시 Markdown으로 전달된 RFC, 설계 문서, 회의 안건 읽기
  • 긴 기술 글을 발행하기 전에 최종 렌더링 점검하기
  • LaTeX가 포함된 학술 노트나 ML 문서의 수식 표시 확인하기
  • CLI를 설치하지 않고 Mermaid 다이어그램 보기
  • Markdown을 뉴스레터, 이메일, CMS에 넣을 깔끔한 HTML로 변환하기
  • 렌더링된 Markdown 페이지를 모바일 친화적인 공개 링크로 공유하기

이 온라인 마크다운 뷰어를 선택하는 이유

  • 무료, 회원가입 없음: 페이지를 열고 바로 붙여 넣기
  • GFM + LaTeX + Mermaid + 이미지 전체 지원: 중요한 요소를 빠뜨리지 않고 제대로 렌더링
  • 실시간 미리보기와 출력 일치: 보기, 복사, 공유 사이의 차이 최소화
  • 깨끗하고 안전한 HTML 복사: 어디에든 붙여 넣기 쉬운 결과
  • 서버 렌더링 기반 공유 링크: 안정적인 URL로 결과 공유
  • 여러 렌더링 테마: 색상, 글꼴, 크기 조합이 기본 제공
  • 필요할 때 바로 편집: 마크다운 뷰어가 가벼운 마크다운 에디터 역할까지 수행
  • 모바일 친화적인 공유 페이지: 독자가 직접 편집 화면을 열 필요 없음
  • 가벼운 설계: 과한 툴바나 불필요한 추적 없이 빠르게 사용

바로 시작하기

위 샘플을 자신의 Markdown으로 바꿔 보세요. 텍스트, 표, 수식, 다이어그램, 이미지가 입력과 함께 실시간으로 렌더링됩니다. 화면에 원하는 결과가 나오면 HTML을 복사하거나 공유 링크를 만들면 됩니다. 전체 흐름은 단순합니다. 온라인 마크다운 뷰어에서 붙여 넣고, 미리보고, 필요한 형식으로 가져가세요.

mdviewer.net에서 더 알아보기