Markdown을 HTML로 내보내기

Markdown은 구조화된 콘텐츠를 쓰는 가장 빠른 방법이지만, 웹은 HTML로 돌아갑니다. 둘 사이의 다리는 즉각적이고 안전해야 합니다. 마크다운 미리보기를 열어 Markdown을 쓰고, HTML이 실시간으로 렌더링되는 것을 보며, 깔끔하게 정리된 출력을 내보내세요. 모두 브라우저 안에서 이뤄집니다.

TL;DR

Markdown을 쓰면 HTML이 즉시 보이고, 복사와 저장이 가능합니다.

• 입력 중 실시간 미리보기 — 세 가지 보기 모드(분할·편집·미리보기)로 편집, 읽기, 둘 다를 할 수 있습니다.
• 깔끔하고 안전한 HTML — 출력은 DOMPurify로 정리되어 CMS나 이메일에 붙여넣어도 안전합니다.
• 복사 또는 저장 — HTML을 클립보드에 담거나 독립적인 .html 파일을 로컬에 저장합니다.

Markdown이란

Markdown은 간단하고 읽기 쉬운 기호로 텍스트에 서식을 지정하는 가벼운 마크업 언어입니다. #으로 제목을, 대시로 목록을, 별표로 강조를 만들고, 보통 URL은 링크가 됩니다. 소스는 거의 일반 텍스트에 가까워서, 한 문단 이상의 구조화된 콘텐츠를 쓸 때 곧바로 찾게 됩니다.

기술 글을 쓰는 거의 모든 곳에 쓰입니다 — README 파일, 문서 사이트, 블로그 글, 릴리스 노트, 사내 위키. 이유는 단순합니다. Markdown은 도구 없이도 쓰고 읽을 수 있고, 필요할 때 풍부한 HTML로 변환됩니다.

내부적으로 이 도구는 markdown-it 엔진으로 CommonMark 명세에 따라 Markdown을 렌더링합니다. CommonMark는 Markdown의 표준화되고 명확하게 정의된 해석입니다. 즉 오래된 Markdown 계통에서 흔하던, 방언마다 달라 예상치 못한 결과가 아니라 예측 가능하고 일관된 출력을 얻습니다.

미리보기와 보기 모드

입력할 때마다 미리보기에 HTML이 실시간으로 렌더링됩니다. 세 가지 보기 모드로 얼마나 볼지 제어합니다.

• 분할 — 왼쪽에 편집기, 오른쪽에 렌더링된 미리보기. 기본값이며 글을 쓰는 동안 가장 좋은 모드입니다. 소스와 결과를 함께 봅니다.
• 편집 — Markdown 입력만 전체 폭으로. 글쓰기에 집중하고 미리보기가 필요 없을 때 유용합니다.
• 미리보기 — 렌더링된 HTML만. 완성된 결과를 읽거나 누군가에게 보여줄 때 유용합니다.

모드는 언제든 바꿀 수 있습니다. 분할 모드와 미리보기 모드에서는 렌더링된 출력이 입력할 때마다 갱신됩니다.

단계별: HTML 내보내기

마크다운 미리보기는 전적으로 브라우저 안에서 돌아갑니다. 흐름은 이렇습니다.

1. Markdown을 입력하거나 붙여넣습니다. 입력 칸에 넣습니다. 템플릿에서 시작하고 싶으면 샘플로 예제를 불러오고, 초기화로 모두 지울 수 있습니다.
2. 보기 모드를 고릅니다. 소스, 결과, 둘 다 중 무엇을 볼지에 따라 분할, 편집, 미리보기를 선택합니다.
3. 네 가지 옵션을 켭니다. 각각 Markdown이 렌더링되는 방식을 바꿉니다.
   • 줄바꿈 반영 — 텍스트의 단일 줄바꿈이 출력에서 <br>이 됩니다(합쳐지지 않습니다).
   • URL 링크화 — https://example.com 같은 맨 URL이 자동으로 클릭 가능한 링크가 됩니다.
   • 문자 치환 — 곧은따옴표를 스마트한 조판(곡은따옴표, 대시)으로 바꿉니다.
   • 원본 HTML — Markdown 안에 인라인 HTML을 넣을 수 있게 합니다. 참고: 켜더라도 출력은 정리됩니다(아래 참조). 위험한 태그와 핸들러는 보거나 복사하기 전에 제거됩니다.
4. 통계 패널을 확인합니다. 문자·단어·줄·제목·링크·코드 블록을 보여줍니다. 구조가 의도대로 나왔는지 빠르게 확인하는 수단입니다.
5. 내보냅니다. HTML 복사를 눌러 렌더링된 HTML을 클립보드에 담거나, HTML 저장으로 독립적인 .html 문서를 저장합니다. Markdown 복사나 Markdown 저장으로 .md 소스를 내보낼 수도 있습니다.

정리와 안전

이 부분이 출력을 CMS, 이메일, 위키에 붙여넣어도 진짜로 안전하게 만듭니다. 렌더링된 HTML — Markdown 문법에서 왔든 사용자가 넣은 원본 HTML에서 왔든 — 은 미리보기나 클립보드에 도달하기 전에 모두 DOMPurify를 거칩니다.

DOMPurify(USE_PROFILES: { html: true }로 설정)는 위험한 부분을 제거합니다. <script> 태그, onclick 같은 인라인 이벤트 핸들러, 코드를 실행할 수 있는 다른 경로들입니다. 또한 style 태그와 속성도 금지해서 스타일의 꼼수가 스며들지 못합니다. DOMPurify 자체가 실패하더라도 정규식 기반 대체 정리기가 최악의 것들을 잡아내어, 원본의 안전하지 않은 HTML이 넘어가는 일은 없습니다.

원본 입력이 정리된 출력과 다르면, 도구는 **“안전하지 않은 HTML을 미리보기에서 제거했습니다.”**라고 알립니다 — 제거된 내용의 건수입니다. 이 알림은 무언가가 제거되었다는 신호이며, 민감한 곳에 붙여넣기 전에 정확히 바라는 것입니다.

한계와 정직함

무엇을 얻는지 정확히 알도록 몇 가지 정직한 제약을 짚습니다.

• CommonMark이며 GitHub Flavored Markdown이 아닙니다. 이 도구는 markdown-it로 CommonMark를 따릅니다. 표나 취소선(~~text~~) 같은 GitHub 고유의 확장을 Markdown 문법만으로는 렌더링하지 않습니다. 표나 취소선이 필요하면 원본 HTML을 켜고 HTML을 직접 쓰세요 — 그래도 정리됩니다.
• style은 제거됩니다. DOMPurify가 style 태그와 속성을 금지하므로, 원본 HTML의 인라인 스타일은 출력에 남지 않습니다.
• 원본 HTML은 선택 사항이고 그래도 정리됩니다. 원본 HTML 옵션은 인라인 HTML이 Markdown 파서를 통과하게 하지만, 렌더링 결과는 그 후에 정리됩니다. 안전하지만, 임의의 마크업을 실행하는 수단은 아닙니다.

자주 묻는 질문

HTML 출력은 안전한가요?

네. 렌더링된 HTML은 미리보기, 복사 버튼, 다운로드에 도달하기 전에 모두 DOMPurify를 거칩니다. 스크립트, 이벤트 핸들러, style 태그와 속성이 제거됩니다. 무언가가 제거되면 “안전하지 않은 HTML을 제거했습니다”라는 알림이 표시됩니다.

GitHub 표를 지원하나요?

Markdown 문법으로는 지원하지 않습니다. 이 도구는 CommonMark를 따르며 네이티브 표 문법이 없습니다. 표를 넣으려면 원본 HTML을 켜고 <table> 마크업을 직접 쓰세요 — 다른 HTML처럼 렌더링되고 정리됩니다.

HTML 파일을 저장할 수 있나요?

네. HTML 저장으로 기본 스타일을 갖춘 독립적인 .html 문서를 저장할 수 있습니다. 어떤 브라우저에서든 열 수 있습니다. 다른 곳에 붙여넣으려면 HTML 복사로 클립보드에 가져갈 수도 있습니다.

CommonMark란 무엇인가요?

CommonMark는 오래된 방언의 모호함을 없앤 Markdown의 표준화된 명세입니다. 이 도구는 markdown-it 엔진으로 CommonMark를 렌더링하므로, 같은 입력은 안정적으로 같은 출력을 냅니다. GitHub Flavored Markdown이 아니며, 표나 취소선 같은 기능은 핵심 명세에 포함되지 않습니다.