Markdown to HTML 변환기 — 온라인으로 Markdown을 HTML로 변환 _

Markdown to HTML 변환이란 무엇인가요?

Markdown은 최소한의 구두점(#은 제목, *은 강조, -은 목록 항목)으로 구조화된 글을 표현하는 경량 일반 텍스트 포맷입니다. GitHub Flavored Markdown(GFM)은 본가 CommonMark 명세에 표, 취소선, 작업 목록, 자동 링크를 더한 확장입니다. HTML은 브라우저가 실제로 렌더링하는 형태입니다. Markdown을 HTML로 변환하면 가벼운 문법으로 작성한 결과를 렌더링된 표면에 출고할 수 있습니다 — README, 정적 사이트 페이지, 또는 이메일 본문 — 태그를 직접 쓸 필요 없이.

어떤 GitHub Flavored Markdown 기능이 지원되나요?

동봉된 marked@12.0.2 파서는 GFM 풀세트를 지원합니다: #부터 ######까지의 ATX 스타일 제목, 중첩 가능한 순서 있는 및 순서 없는 목록, 굵게 **text**와 기울임 *text*, 취소선 ~~text~~, 인라인 링크 [text](url) 및 인라인 이미지 ![alt](src), 언어 태그가 가능한 펜스 코드 블록(```js), 인라인 코드 `code`, 헤더 행이 있는 파이프 표, GFM 작업 목록 - [ ] / - [x], 인용 >, 수평선 ---, 자동 링크. 각 요소는 미리보기 패널에서 GitHub의 렌더링과 동일한 결과를 보입니다.

Markdown to HTML 변환은 어떻게 작동하나요?

모든 변환은 브라우저에서 동봉된 두 개의 라이브러리로 로컬에서 실행됩니다 — CDN 없음, fetch 없음, 텔레메트리 없음. 큰 흐름은 다음과 같습니다:

1. 파싱: marked.parse(source)가 Markdown을 읽어 HTML 문자열을 생성합니다. 파서는 GFM 모드로 동작하므로 표, 작업 목록, 취소선, 자동 링크가 모두 인식됩니다.
2. 새니타이즈: HTML 출력은 innerHTML에 대입되기 전에 DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })를 거칩니다. DOMPurify는 Mozilla MDN, Atlassian, Microsoft 365가 사용하는 것과 동일한 XSS 새니타이저로, HTML을 파싱하고 DOM을 순회하면서 <script> 요소, 모든 on* 이벤트 핸들러 속성, javascript: URI 스킴을 제거합니다.
3. 렌더링: 새니타이즈된 HTML이 innerHTML을 통해 미리보기 패널에 기록됩니다. 원본 HTML은 읽기 전용 <textarea>로 두 번째 패널에 노출되어 마크업을 그대로 복사할 수 있습니다. 라이브 모드는 입력을 150 ms 디바운싱해, 타이핑 중에도 파서를 과부하시키지 않고 미리보기를 갱신합니다.

이 도구로 Markdown을 HTML로 변환해야 하는 이유는?

• 프라이버시: 모든 파싱, 새니타이즈, 렌더링이 브라우저에서 일어납니다. Markdown — 미공개 블로그 글, 사내 문서 초안, 비밀 README — 은 서버에 도달하지 않습니다.
• 기본값으로 XSS 안전: 렌더링 미리보기 패널은 innerHTML에 넣기 전 모든 HTML 문자열을 DOMPurify에 통과시키므로, Markdown에 섞인 <script> 태그나 onerror= 핸들러는 무해한 미리보기만 만들어냅니다. 원본 패널은 새니타이즈되지 않은 문자열을 보여주지만 읽기 전용 <textarea>의 value로 표시되어 실행되지 않습니다.
• GFM 완전 지원: 표, 취소선, 작업 목록, 자동 링크가 GitHub의 렌더링과 동일한 결과를 냅니다. Markdown 파이프 표는 <thead>와 <tbody>를 가진 HTML <table>로 변환됩니다 — 행이 빠지거나 구조가 평평해지지 않습니다.

Markdown to HTML 변환의 일반적인 활용 사례는 무엇인가요?

Markdown을 HTML로 변환하는 일은 문서 작성, 정적 사이트 구축, 이메일 작성에서 자주 등장합니다:

• GitHub README 작성: 프로젝트 README를 로컬에서 Markdown으로 초안 작성하고 푸시 전에 렌더링된 HTML을 미리 봅니다. 미리보기는 GitHub의 GFM 렌더러와 표, 작업 목록, 펜스 코드에서 일치합니다.
• 정적 사이트 콘텐츠: Markdown 포스트를 붙여 넣고 Markdown 소스가 아닌 마크업을 기대하는 CMS 필드나 템플릿 엔진용 HTML을 가져옵니다.
• 이메일 템플릿: 거래성 이메일 본문을 Markdown으로 작성하고 이메일 서비스 제공자의 템플릿 엔진을 위해 HTML로 변환합니다. 출력은 순수 시맨틱 HTML — 인라인 스타일도 이메일 클라이언트 호환을 위한 잡스러운 처리도 없습니다.

Markdown to HTML 변환 예시는 어떤 모습인가요?

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com)를 붙여넣으면, 미리보기 패널에는 <h1>Title</h1>, 두 항목짜리 순서 없는 목록, <a href="https://example.com">link</a>가 들어 있습니다. 원본 패널은 정확한 HTML 문자열을 보여주므로 바로 템플릿에 붙여 넣을 수 있습니다. |---|---| 정렬 행이 있는 파이프 표는 <thead>와 <tbody>를 가진 완전한 <table>이 됩니다 — GFM 표가 GitHub의 렌더링과 같다는 것을 확인할 수 있습니다.

이 Markdown to HTML 변환기는 전적으로 내 브라우저에서 실행되나요?

네. 모든 파싱, 새니타이즈, 렌더링은 브라우저 탭 안의 JavaScript로 로컬에서 실행됩니다. 동봉된 두 라이브러리 — marked@12.0.2와 DOMPurify@3.1.7 — 는 페이지와 동일 오리진에서 제공되므로 CDN 의존이 없고 fetch도 XMLHttpRequest도 없으며, 입력에 대해 navigator.sendBeacon도 호출하지 않습니다. 외부 라이브러리도 함께 포장된 정적 HTML/CSS/JS 번들이기 때문에 페이지를 한 번 로드하면 오프라인에서도 동작합니다. 미공개 글, 사내 문서, 비밀 README는 모두 사용자의 기기에 머무릅니다.

렌더링된 미리보기 패널은 XSS 안전한가요?

네. innerHTML에 대입되는 모든 HTML 문자열은 먼저 DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })를 통과합니다. DOMPurify는 Cure53가 유지보수하는 오픈소스 XSS 새니타이저로, Mozilla MDN, Atlassian, Microsoft 365가 사용자 제공 HTML을 강화하는 데 사용하는 것과 동일한 라이브러리입니다. 기본 html 프로파일은 <script> 요소, 모든 on* 이벤트 핸들러 속성(onerror, onclick 등), href / src 내의 javascript: URI 스킴, 알려진 위험 CSS 표현식을 제거합니다. <img src=x onerror=alert(1)>을 붙여 넣으면 document.querySelector('#output-preview img[onerror]')는 null을 반환하고 어떤 알림도 뜨지 않습니다.

GFM 표는 지원되나요?

네. Markdown → HTML 방향은 marked의 GFM 모드가 파이프 표를 기본 지원합니다 — 헤더 행과 |---|---| 정렬 행에 이어 데이터 행을 두면 <thead>와 <tbody>를 가진 <table>이 생성됩니다. 취소선(~~text~~ → <del>text</del>)과 작업 목록(- [ ] / - [x] → <input type="checkbox">)도 GitHub의 렌더링과 동일한 결과를 냅니다.

내 Markdown은 손실 없이 변환되나요?

표준 GFM 기능 세트 — h1부터 h6까지의 제목, 중첩 가능한 순서 있는·없는 목록, 굵게/기울임/취소선, 인라인 링크, 인라인 이미지, 언어 태그가 있는 펜스 코드 블록, 인라인 코드, 파이프 표, 작업 목록, 인용, 수평선, 자동 링크 — 에 대해서는 HTML 출력이 안정적이며 GitHub의 렌더러와 일치합니다. 알아 둘 몇 가지 동작: Markdown 안에 들어간 원시 인라인 HTML(예: <sub>text</sub>)은 출력에 그대로 통과하며, CommonMark의 setext 스타일 제목(=== 밑줄)과 ATX 스타일 제목(# Title)은 모두 동일한 <h1>을 생성합니다. 이는 marked의 문서화된 동작이지 버그가 아닙니다. 반대 방향 — 렌더링된 HTML을 Markdown으로 되돌리는 경우 — 은 HTML to Markdown 도구를 사용하세요.

펜스 코드 블록에서 구문 강조가 지원되나요?

v1에서는 지원하지 않습니다. 펜스 코드 블록은 등폭 글꼴과 옅은 배경으로 렌더링되지만 언어별 토큰 강조는 없습니다. 구문 강조를 추가하려면 Prism 또는 highlight.js를 번들에 포함해야 하며, 각각 15–40 KB 증가에 더해 언어별 문법 파일과 Workshop Terminal 팔레트에 맞춘 테마 매트릭스가 필요합니다. 현재 렌더러는 정확성과 XSS 안전에 집중합니다; 인라인 강조 수요가 있다면 옵트인 토글로 확장하는 것이 합리적인 후속 작업입니다.

이 Markdown to HTML 변환기는 marked@12.0.2와 DOMPurify@3.1.7을 같은 오리진에 동봉하고, GFM 기능 세트를 지원하며, 렌더링된 모든 HTML 문자열이 DOM에 닿기 전에 새니타이즈합니다. 업로드 없음, CDN 없음, 텔레메트리 없음 — 모든 바이트가 브라우저 안에 머무릅니다.