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

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

HTML은 브라우저가 실제로 렌더링하는 마크업입니다 — <h1>, <ul>, <table>, <a> 등. Markdown은 최소한의 구두점(#은 제목, *은 강조, -은 목록 항목)으로 동일한 구조를 표현하는 경량 일반 텍스트 포맷입니다. GitHub Flavored Markdown(GFM)은 본가 CommonMark 명세에 표, 취소선, 작업 목록, 자동 링크를 추가한 확장입니다. HTML을 Markdown으로 변환하면 렌더링되거나 내보낸 HTML을 편집 가능한 일반 텍스트 Markdown으로 되돌릴 수 있습니다 — CMS 콘텐츠 마이그레이션이나 README 정리에 필요한 바로 그것입니다.

출력은 어떤 GitHub Flavored Markdown 기능을 지원하나요?

동봉된 turndown@7.2.0 엔진과 turndown-plugin-gfm 확장이 HTML에서 GFM 풀세트를 출력합니다: <h1>–<h6>에서 #부터 ######까지의 ATX 스타일 제목, 중첩 가능한 순서 있는·없는 목록, 굵게 **text**와 기울임 *text*, <del>에서 취소선 ~~text~~, 인라인 링크 [text](url) 및 인라인 이미지 ![alt](src), 언어 힌트가 있는 펜스 코드 블록(```js), 인라인 코드 `code`, <table>에서 파이프 표, checkbox 입력에서 GFM 작업 목록 - [ ] / - [x], 인용 >, 수평선 ---. 미리보기 패널은 marked@12.0.2로 출력된 Markdown을 재렌더링해 변환 결과를 시각적으로 확인할 수 있습니다.

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

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

1. 새니타이즈: 붙여 넣은 HTML은 먼저 DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })를 통해 탐색이 시작되기 전에 <script> 요소, 모든 on* 이벤트 핸들러 속성, javascript: URI를 제거합니다. DOMPurify는 Mozilla MDN, Atlassian, Microsoft 365가 사용하는 것과 동일한 XSS 새니타이저입니다.
2. 변환: turndownService.turndown이 정리된 DOM을 순회해 GitHub Flavored Markdown을 출력합니다 — 제목은 # 접두사로, 목록은 - / 1. 항목으로, <table>은 파이프 표로 변환됩니다. Markdown은 읽기 전용 출력 <textarea>에 value로 기록됩니다(innerHTML 아님)，본질적으로 안전합니다.
3. 렌더링: 출력된 Markdown은 marked.parse로 재파싱되고, DOMPurify로 다시 새니타이즈된 후, 미리보기 패널의 innerHTML에 할당됩니다 — Markdown이 예상 구조로 왕복됨을 시각적으로 확인할 수 있습니다. 라이브 모드는 입력을 150 ms 디바운싱해, 붙여 넣는 중에도 파서를 과부하시키지 않고 미리보기를 갱신합니다.

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

• 프라이버시: 모든 새니타이즈, 변환, 렌더링이 브라우저에서 일어납니다. HTML — 내보낸 CMS 게시글, 사내 문서, 기밀 페이지 소스 — 은 서버에 도달하지 않습니다.
• 기본값으로 XSS 안전: 붙여 넣은 HTML은 turndown이 탐색하기 전 DOMPurify를 통과하고, 미리보기 패널은 재렌더링된 HTML을 innerHTML에 넣기 전 DOMPurify를 다시 통과시킵니다. 따라서 <script> 태그나 onerror= 핸들러가 든 마크업을 붙여 넣어도 무해한 미리보기와 깨끗한 Markdown만 나옵니다.
• GFM 완전 지원: <table> 요소는 Markdown 파이프 표로, <del>은 취소선으로, checkbox 목록은 GFM 작업 목록으로 변환됩니다. 대부분의 온라인 변환기는 HTML → Markdown 경로에서 표를 잃습니다 — 동봉된 turndown-plugin-gfm 확장이 그것을 보존합니다.

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

HTML을 Markdown으로 변환하는 사례는 콘텐츠 마이그레이션, 문서 작성, 아카이빙에 걸쳐 나타납니다:

• CMS 마이그레이션: WordPress 또는 Ghost 글을 HTML로 내보내 Hugo / Jekyll / 11ty / Astro 정적 사이트 재구축을 위해 Markdown으로 변환합니다. 변환은 제목 레벨, 링크, 목록, 인라인 강조를 유지합니다.
• README 정리: wiki 페이지나 웹 기사의 렌더링된 HTML을 붙여 넣어 프로젝트 README나 문서 사이트를 위한 편집 가능한 Markdown으로 가져옵니다 — 구조를 손으로 다시 입력하는 대신.
• 아카이빙과 노트: HTML 이메일이나 웹 클리핑을 캡처해 Obsidian, Notion, 또는 일반 텍스트 지식 베이스에 저장할 Markdown으로 변환합니다 — Markdown은 diff 친화적이고 포맷 변환도 살아남습니다.

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

<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul>를 붙여 넣으면 ## Heading과 중첩된 글머리표 목록을 가진 Markdown이 나오고, 미리보기 패널은 같은 중첩 구조로 다시 렌더링됩니다. 헤더 행과 데이터 행 두 개짜리 <table>을 붙여 넣으면 대응하는 | col | col | 파이프 표가 생성됩니다 — 변환이 제목, 목록, 표를 보존함을 확인합니다.

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

네. 모든 새니타이즈, 변환, 렌더링은 브라우저 탭 안의 JavaScript로 로컬에서 실행됩니다. 동봉된 세 라이브러리 — turndown@7.2.0(turndown-plugin-gfm@1.0.2 동봉), marked@12.0.2, DOMPurify@3.1.7 — 는 페이지와 동일 오리진에서 제공되므로 CDN 의존이 없고 fetch도 XMLHttpRequest도 없으며, 입력에 대해 navigator.sendBeacon도 호출하지 않습니다. 외부 라이브러리도 함께 포장된 정적 번들이기 때문에 페이지를 한 번 로드하면 오프라인에서도 동작합니다. 내보낸 게시글, 사내 문서, 기밀 페이지 소스는 모두 사용자의 기기에 머무릅니다.

렌더링된 미리보기 패널은 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 스킴을 제거합니다. <img src=x onerror=alert(1)>을 붙여 넣으면 document.querySelector('#output-preview img[onerror]')는 null을 반환하고 어떤 알림도 뜨지 않습니다.

GFM 표는 HTML에서 변환되나요?

네. HTML → Markdown 방향은 turndown-plugin-gfm이 <table> 노드를 순회해 동등한 파이프 표 Markdown을 출력하는 커스텀 룰을 추가합니다 — 헤더 행, |---|---| 정렬 행, 데이터 행 순. 대부분의 온라인 변환기는 이 경로에서 표를 잃지만 — 본 도구는 보존합니다. 취소선(<del>text</del> → ~~text~~)과 작업 목록(<input type="checkbox"> → - [ ] / - [x])도 같은 방식으로 변환됩니다.

내 HTML은 깔끔하게 변환되나요?

표준 GFM 기능 세트 — h1부터 h6까지의 제목, 중첩 가능한 순서 있는·없는 목록, 굵게/기울임/취소선, 인라인 링크, 인라인 이미지, 언어 태그가 있는 펜스 코드 블록, 인라인 코드, 파이프 표, 작업 목록, 인용, 수평선, 자동 링크 — 에 대해서는 변환이 깔끔하고 예측 가능합니다. 엣지 케이스: HTML 주석(<!-- ... -->)은 제거됩니다(Markdown에는 주석 문법이 없음); 인라인 스타일링과 class 속성은 Markdown에 대응이 없어 삭제됩니다; <sub> / <sup> 같은 드문 인라인 태그는 일반 텍스트로 변환됩니다. 이는 turndown의 문서화된 동작이지 버그가 아닙니다.

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

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

이 HTML→Markdown 변환기는 turndown@7.2.0(+ turndown-plugin-gfm@1.0.2), marked@12.0.2, DOMPurify@3.1.7을 같은 오리진에 동봉하고, GFM 기능 세트를 완전히 출력하며, 렌더링된 모든 HTML 문자열이 DOM에 닿기 전에 새니타이즈합니다. 업로드 없음, CDN 없음, 텔레메트리 없음 — 모든 바이트가 브라우저 안에 머무릅니다.