마크다운은 README, 기술 블로그, 회의록, 릴리스 노트를 쓰는 사실상의 표준이 되었습니다. 다만 작성 중에 결과를 확인하려면 커밋해서 GitHub에서 보거나 별도 에디터를 띄워야 하는 번거로움이 있습니다.
이 도구는 왼쪽에 마크다운을 쓰면 오른쪽에서 즉시 렌더링 결과를 보여 줍니다. 표·코드블록·체크리스트 같은 GitHub Flavored Markdown 문법을 지원하고, 스크롤이 서로 동기화되어 긴 문서에서도 위치를 잃지 않습니다. 완성된 문서는 HTML 파일로 저장하거나 브라우저 인쇄 기능으로 PDF로 내보낼 수 있으며, HTML 소스를 그대로 복사해 다른 시스템에 붙여 넣을 수도 있습니다.
사용 방법
- 마크다운 작성 — 왼쪽 편집기에 직접 쓰거나 기존 문서를 붙여넣습니다. 상단 툴바의 버튼으로 굵게·기울임·제목·코드·링크·목록·표를 삽입할 수 있고, 텍스트를 선택한 상태에서 누르면 선택 영역을 감쌉니다.
- 미리보기 확인 — 오른쪽에서 렌더링 결과를 확인합니다. 스크롤 동기화가 켜져 있으면 편집기를 내릴 때 미리보기도 같은 비율로 따라 내려갑니다. HTML 탭으로 전환하면 생성된 마크업을 직접 볼 수 있습니다.
- PDF로 내보내기 — PDF 저장 버튼을 누르면 인쇄용으로 정돈된 레이아웃이 인쇄 대화상자에 표시됩니다. 대상(Destination)에서 'PDF로 저장'을 선택하면 A4 규격의 PDF가 만들어집니다. 코드블록과 표는 페이지 중간에서 잘리지 않도록 처리되어 있습니다.
- HTML로 저장하거나 복사 — HTML 저장은 스타일이 포함된 완결된 HTML 문서를 내려받습니다. 복사 버튼은 같은 문서를 클립보드에 담으므로 메일 본문이나 CMS에 그대로 붙여 넣을 수 있습니다.
.md원본도 따로 다운로드할 수 있습니다.
자주 묻는 질문
PDF를 바로 다운로드하지 않고 인쇄 대화상자를 여는 이유가 무엇인가요?
한글을 포함한 모든 언어를 정확히 렌더링하기 위해서입니다.
자바스크립트 PDF 라이브러리로 파일을 직접 만들면 한글·일본어·중국어 글리프를 담은 폰트를 별도로 내장해야 하고, 그 폰트 파일만 수 MB에 달합니다. 반면 브라우저의 인쇄 파이프라인은 시스템에 설치된 폰트를 그대로 써서 벡터 PDF를 만들기 때문에 용량 부담 없이 어떤 언어든 선명하게 출력되고, 텍스트 선택과 검색도 그대로 됩니다. 대화상자에서 한 번 더 클릭해야 하지만 결과물의 품질이 확실히 낫습니다.
GitHub에서 보이는 것과 렌더링 결과가 조금 다릅니다.
마크다운에는 여러 방언이 있고, GitHub는 그중 GFM에 자체 확장을 더해 씁니다.
이 도구는 GFM 규격을 따르므로 표·취소선·체크리스트·자동 링크는 동일하게 동작합니다. 다만 GitHub 고유의 알림 블록(> [!NOTE]), 이슈·PR 자동 링크(#123), @멘션, 이모지 단축코드(:tada:)는 GitHub 서버에서 처리하는 확장이라 여기서는 일반 텍스트로 남습니다.
HTML 태그를 직접 써도 되나요?
네, 마크다운 안의 HTML은 그대로 렌더링됩니다.
다만 출력 전에 DOMPurify로 정화(sanitize)하므로 <script> 태그나 onclick 같은 이벤트 속성은 제거됩니다. 남의 마크다운을 붙여넣어 미리보기할 때 스크립트가 실행되는 것을 막기 위한 조치입니다. <details>·<img>·<table> 같은 일반적인 태그는 정상 동작합니다.
알아두면 좋은 개념
CommonMark와 GFM
마크다운은 2004년에 만들어질 때 엄밀한 명세 없이 시작되어 구현마다 결과가 달랐습니다. CommonMark는 이를 정리한 표준 명세로, 중첩 목록이나 강조 문법의 모호한 경우까지 규정합니다.
GFM(GitHub Flavored Markdown)은 CommonMark 위에 표, 취소선, 작업 목록, 자동 링크를 더한 확장입니다. 오늘날 대부분의 도구가 GFM을 기준으로 삼으므로, 문서를 쓸 때 GFM 범위 안에 머무르면 어디에 붙여 넣어도 비슷하게 보입니다.
마크다운을 안전하게 렌더링하기
마크다운을 HTML로 바꾸면 XSS 위험이 생깁니다. 마크다운은 원시 HTML을 허용하므로 <img src=x onerror=alert(1)> 같은 입력이 그대로 실행될 수 있습니다.
사용자 입력을 렌더링하는 서비스라면 반드시 정화 단계를 거쳐야 합니다. 이 도구도 marked 로 변환한 뒤 DOMPurify로 위험한 태그와 속성을 제거하고 나서 화면에 그립니다. 서버에서 렌더링한다면 isomorphic-dompurify 나 Python의 bleach 같은 라이브러리로 같은 처리를 하세요.
인쇄용 CSS의 기본
화면용 스타일을 그대로 인쇄하면 여백이 어긋나고 요소가 페이지 경계에서 잘립니다. @page { size: A4; margin: 18mm 16mm; } 로 용지와 여백을 정하는 것이 출발점입니다.
page-break-inside: avoid 를 코드블록과 표에 걸어 두면 중간에서 잘리지 않고, orphans·widows 를 지정하면 문단의 첫 줄이나 마지막 줄만 다음 페이지로 넘어가는 것을 막을 수 있습니다. 화면 전용 요소(네비게이션·버튼)는 @media print 안에서 display: none 으로 감춥니다.