HTML to Markdown

제목(h1~h6), 단락, 굵게, 기울임, 취소선, 인라인 코드, 펜스 코드 블록, 인용 블록, 수평선, 링크, 이미지, 순서 있는 목록, 순서 없는 목록, 중첩 목록, 표를 처리합니다 — CommonMark와 GitHub Flavored Markdown(GFM) 전체 기능 세트를 포괄합니다. div, section, article과 같은 알 수 없는 구조적 요소는 자식 요소를 투명하게 통과시켜 콘텐츠가 절대 손실되지 않습니다. CMS 내보내기, 스크래핑한 글, 문서 페이지 등 실제 현장의 HTML 대부분은 별도 후처리 없이 깔끔하게 변환됩니다.

Pandoc은 강력한 커맨드라인 변환기이지만 설치, 터미널, 옵션 학습이 필요합니다. 자동화된 서버 측 파이프라인에는 적합하지만, 일회성 변환에는 과도합니다. Turndown.js는 HTML-to-Markdown 작업에서 가장 많이 사용되는 자바스크립트 라이브러리로 — 주간 npm 다운로드 250만 회 이상, GitHub 스타 10,800개 이상 — 이 도구도 Turndown을 신뢰할 수 있게 만드는 동일한 DOM 기반 파싱 방식을 사용합니다. 차이점은 모든 것이 브라우저에서 실행된다는 점입니다: 설치 없음, 커맨드라인 없음, 서버 왕복 없음, 기기에서 파일이 나가지 않습니다. Turndown은 Node 프로젝트 설정이 필요하지만, 이 도구는 그렇지 않습니다.

마크다운은 기술 문서 작성, 문서화, 콘텐츠 관리를 위한 표준 일반 텍스트 형식입니다. HTML을 마크다운으로 변환하면 Notion이나 Obsidian에 콘텐츠를 임포트하고, 코드와 함께 Git 저장소에 커밋하고, Astro, Hugo, Jekyll 같은 정적 사이트 생성기로 게시하거나, AI 모델과 LLM에 공급할 수 있습니다. 2024년에 발표된 연구에 따르면 마크다운은 대규모 언어 모델과 함께 사용할 때 원시 HTML 대비 토큰 사용량을 68~87% 줄입니다 — RAG 파이프라인 구축이나 파인튜닝 데이터셋 준비 시 실질적인 비용 및 정확도 차이로 이어집니다.

네 — CMS 마이그레이션은 가장 일반적인 업무 활용 사례 중 하나입니다. WordPress, Confluence, SharePoint, Ghost 또는 다른 플랫폼에서 내보낸 HTML을 붙여 넣으면 새 시스템에 임포트할 수 있는 깔끔한 마크다운을 얻을 수 있습니다. WordPress 내보내기는 HTML 콘텐츠 블록을 제공하고, Confluence는 페이지를 HTML 또는 XHTML로 내보냅니다 — 둘 다 깔끔하게 변환됩니다. 최상의 결과를 위해서는 내비게이션과 푸터가 포함된 전체 페이지 HTML이 아닌 콘텐츠 본문만 붙여 넣으세요. 팀들이 커맨드라인 없이 이틀 이내에 150~200페이지 분량의 문서 사이트를 마이그레이션하는 데 브라우저 기반 HTML-to-Markdown 변환을 활용한 사례가 있습니다.

표는 GitHub Flavored Markdown(GFM) 파이프 테이블 형식으로 변환되며, 헤더 행 뒤에 대시 구분 행이 추가됩니다. 이 형식은 GitHub, GitLab, VS Code 미리보기, Notion, Obsidian, Docusaurus, 그리고 사실상 모든 현대 마크다운 렌더러에서 작동합니다. 중첩 표는 표준 마크다운이 기본적으로 지원하지 않으므로 평탄화됩니다. align 속성이나 CSS text-align을 통한 열 정렬 — 왼쪽, 가운데, 오른쪽 — 은 구분 행의 콜론 위치를 통해 보존됩니다(예: 왼쪽 정렬은 :---, 가운데는 :---:, 오른쪽은 ---:).

네. 변환은 브라우저 내장 DOM 파서를 사용해 브라우저에서 완전히 이루어집니다 — 파일이 업로드되지 않으며 페이지 로드 후 인터넷 연결이 필요하지 않습니다. 따라서 사내 문서, 독점 API 레퍼런스, 기기 밖으로 나가서는 안 되는 고객 작업 등 기밀 HTML과 함께 안전하게 사용할 수 있습니다. 직접 확인할 수 있습니다: 브라우저 개발자 도구를 열고 네트워크 탭으로 이동해, HTML을 붙여 넣고 변환을 실행할 때 네트워크 요청이 발생하지 않음을 확인하세요. 기기에서 어떤 것도 나가지 않습니다.

마크다운 출력의 모든 줄 끝에서 공백과 탭을 제거하고, 연속된 여러 빈 줄을 하나의 빈 줄로 축소합니다. 이를 통해 파일을 깔끔하게 유지하고, 엄격한 마크다운 파서에서 렌더링에 영향을 줄 수 있는 보이지 않는 공백을 방지합니다 — 특히 후행 공백을 린트 문제로 강조 표시하는 GitHub에서 유용합니다. 공백 검사를 실행하는 문서 도구에 출력물을 바로 삽입하기도 쉽게 만들어 줍니다. 거의 모든 경우에 이 옵션을 켜 두는 것이 안전합니다. 후행 공백이 의미론적 의미를 가지는 경우는 극히 드뭅니다.

네. 중첩된 ul 및 ol 요소는 재귀적으로 처리되며, 각 레벨은 마크다운 출력에서 올바르게 들여쓰기됩니다. 혼합 중첩 — 순서 없는 목록 안의 순서 있는 목록, 또는 그 반대 — 도 올바르게 처리됩니다. 예를 들어 순서 있는 목록 안에 세 단계 깊이의 순서 없는 목록이 있는 경우, 각 레벨에서 CommonMark 표준인 4칸 들여쓰기가 적용됩니다. 이는 정규식 기반 변환기가 자주 실패해 깨진 마크다운을 생성하는 예외 케이스 중 하나입니다. DOM 기반 파싱은 이를 안정적으로 처리합니다.

출력은 표와 취소선을 위한 GitHub Flavored Markdown(GFM) 확장이 포함된 CommonMark를 따릅니다. CommonMark는 대부분의 플랫폼이 사용하는 표준화된 사양이며, GFM은 GitHub, GitLab, VS Code가 모두 지원하는 파이프 테이블 문법과 ~~ 취소선을 추가합니다. 따라서 출력은 GitHub, GitLab, VS Code, Notion, Obsidian, Docusaurus, MkDocs, 그리고 대부분의 현대 마크다운 렌더러와 호환됩니다. GFM 확장 없는 순수 CommonMark가 필요하다면 표만 차이가 있으며, 그 외 모든 것은 동일합니다.

HTML 조각이나 전체 페이지 본문을 붙여 넣을 수 있습니다. 최상의 결과를 위해 내비게이션, 사이드바, 푸터가 포함된 전체 문서가 아닌 주요 콘텐츠 영역만 붙여 넣으면 의미 있는 콘텐츠에 집중된 출력을 얻을 수 있습니다. 대부분의 개발자는 브라우저 개발자 도구 Elements 패널에서 원하는 article 또는 문서 div만 복사합니다(마우스 오른쪽 클릭 → 복사 → outerHTML 복사). 이렇게 하면 구조적 페이지 외장 없이 깔끔한 콘텐츠 HTML을 얻을 수 있습니다. 전체 페이지 HTML도 처리할 수 있지만, 출력에 내비게이션 텍스트가 링크 목록으로 포함되는데, 이는 보통 원하는 결과가 아닙니다.

Perplexity, ChatGPT, Gemini 같은 AI 시스템은 이제 웹 콘텐츠를 읽고, 청크로 나누고, 재활용해 답변을 생성합니다. 마크다운은 토큰을 소비하면서도 의미론적 의미를 추가하지 않는 HTML 구조 태그를 제거하기 때문에 AI가 선호하는 입력 형식입니다. <p class="article-body"> 태그로 감싼 단락은 일반 마크다운의 동일한 단락보다 더 많은 토큰을 소비합니다. 2024년에 발표된 연구에 따르면 마크다운은 동일한 콘텐츠 기준으로 원시 HTML 대비 토큰 사용량을 68~87% 줄입니다 — 이는 API 비용을 직접 절감하고 RAG(검색 증강 생성) 파이프라인의 신호 대 잡음비를 개선합니다.

인라인 코드 요소(pre 안에 없는 code 태그)는 단일 백틱으로 감쌉니다. 코드 블록(pre > code 요소)은 CommonMark 및 GFM 표준인 트리플 백틱 펜스 블록으로 감쌉니다. code 요소에 'language-python' 또는 'lang-python' 같은 클래스가 있으면, 언어 식별자를 추출해 구문 강조를 위해 시작 펜스에 보존합니다. GitHub README 페이지나 문서 사이트에서 변환된 코드 블록은 출력에서 언어 태그를 유지하므로, HTML에서 가졌던 구문 강조가 마크다운으로도 유지됩니다.

Markdownify와 h2m은 빌드 파이프라인에서 프로그래밍 방식의 HTML-to-Markdown 변환을 위한 Node.js npm 패키지입니다. 스크립트로 수백 개의 파일에 걸쳐 변환을 자동화해야 할 때 적합한 선택입니다. 이 브라우저 도구는 그것들이 다루지 않는 사용 사례를 커버합니다: 빠른 일회성 변환, 서버와 공유할 수 없는 콘텐츠, Node 프로젝트를 전혀 설정하고 싶지 않은 상황. 변환 품질은 유사합니다 — 세 가지 모두 정규식이 아닌 DOM 기반 파싱을 사용합니다 — 하지만 이 도구는 콘텐츠 작업을 더 실용적으로 만드는 실시간 미리보기, 복사 버튼, 글자/단어 수 표시를 추가로 제공합니다.

네, 변환기는 모바일 브라우저에서도 완전히 작동합니다. 클립보드에서 HTML을 붙여 넣고, 변환을 실행하고, 마크다운 결과물을 복사하는 모든 작업을 휴대폰이나 태블릿에서 할 수 있습니다. 인터페이스는 작은 화면에 맞게 패널이 세로로 쌓이도록 조정됩니다. iOS 17 Safari와 Android 14 Chrome에서 테스트되었습니다. 일반적인 모바일 활용 사례: 브라우저의 공유 메뉴에서 글의 HTML을 가져와 변환한 다음, 데스크톱 없이 같은 기기에서 바로 Obsidian이나 Notion에 마크다운을 붙여 넣습니다. 회원가입 없음, 앱 다운로드 없음, 제한 없음.

HTML 주석(<!-- ... -->)은 마크다운에 주석 문법이 없고 주석이 실제 콘텐츠의 일부인 경우가 드물기 때문에 출력에서 제거됩니다. Script 태그와 그 내용도 삭제됩니다 — 자바스크립트는 마크다운에서 의미가 없습니다. Style 태그와 인라인 style 속성도 제거됩니다. CSS 스타일링은 마크다운으로 변환되지 않으며, 시각적 스타일이 아닌 요소 유형을 통해 의미론적 의미(굵게, 기울임, 제목)가 보존됩니다. span이 strong이나 b 태그가 아닌 CSS로 굵게 처리된 경우, 해당 스타일링은 콘텐츠 형식 변환의 올바른 동작으로 유지되지 않습니다.

없습니다. 서버가 개입하지 않으므로 브라우저 메모리가 처리할 수 있는 한도 외에는 크기 제한이 없습니다. 실제로 브라우저 DOM 파서는 수 메가바이트의 HTML을 문제없이 처리할 수 있으며, 이는 실제 CMS 페이지보다 훨씬 큽니다. 매우 큰 HTML 파일(책 전체 내보내기, 매우 긴 스크래핑 글)을 변환하는 경우, 가장 명확한 출력을 위해 한 번에 전부가 아닌 섹션별로 붙여 넣으세요. 변환 자체는 브라우저 탭의 자바스크립트에서 직접 실행되므로 크기에 관계없이 밀리초 단위로 완료됩니다.