HTML to Markdown 변환기

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

HTML in:

  <h2>Pricing</h2>
  <p>Plans start at <strong>$9/mo</strong>. See the <a href="https://example.com/pricing">details</a>.</p>
  <table>
    <thead><tr><th>Plan</th><th>Price</th></tr></thead>
    <tbody><tr><td>Pro</td><td>$9</td></tr></tbody>
  </table>

Markdown out:

  ## Pricing

  Plans start at **$9/mo**. See the [details](https://example.com/pricing).

  | Plan | Price |
  | ---- | ----- |
  | Pro  | $9    |

  <!-- <div>, classes, and inline styles in the source are dropped — Markdown can't represent them. -->

주요 기능

예시

<table>
  <thead><tr><th>Region</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>EMEA</td><td>1,204</td></tr>
    <tr><td>APAC</td><td>980</td></tr>
  </tbody>
</table>

| Region | Sales |
| ------ | ----- |
| EMEA   | 1,204 |
| APAC   | 980   |

<p>Read the <a href="https://example.com/guide">setup guide</a> and the <a href="https://example.com/api">API reference</a>.</p>

Inline:
Read the [setup guide](https://example.com/guide) and the [API reference](https://example.com/api).

Reference:
Read the [setup guide][1] and the [API reference][2].

[1]: https://example.com/guide
[2]: https://example.com/api

<ul>
  <li>Build
    <ol>
      <li>Compile</li>
      <li>Bundle</li>
    </ol>
  </li>
  <li>Ship</li>
</ul>

- Build
  1. Compile
  2. Bundle
- Ship

<article>
  <h1>Changelog</h1>
  <p>We shipped <strong>dark mode</strong> and fixed <code>parseDate()</code>.</p>
  <blockquote><p>Thanks to everyone who reported it.</p></blockquote>
</article>

# Changelog

We shipped **dark mode** and fixed `parseDate()`.

> Thanks to everyone who reported it.

HTML을 Markdown으로 변환하는 방법

1. 1

   HTML 붙여넣기

   복사한 웹 페이지, CMS나 WYSIWYG 내보내기, 또는 스크랩한 HTML 스니펫을 넣으십시오. 붙여 넣는 대로 브라우저에서 DOM이 파싱되어 Markdown으로 직렬화됩니다 — 업로드 없이, 브라우저 메모리 외에 크기 제한 없이.

2. 2

   제목과 링크 스타일 선택

   ATX(#) 또는 Setext(===) 제목과 인라인 또는 참조 링크를 고르십시오. Markdown이 실시간으로 다시 렌더링되어 스타일을 즉시 비교할 수 있습니다. 출력은 GitHub Flavored Markdown을 대상으로 합니다 — 테이블, 작업 목록, 취소선 포함.

3. 3

   복사 또는 다운로드

   복사를 클릭해 Markdown을 가져가거나 다운로드로 .md 파일로 저장하십시오. 반대로 가려면 Markdown → HTML 탭으로 전환해 Markdown을 붙여 넣으면 렌더링된 HTML을 돌려받습니다.

흔한 함정

<div class="callout warning"><span style="color:red">Heads up!</span></div>
<!-- expecting the callout box and red colour to survive -->

Heads up!
<!-- container and styles dropped; only the text remains in Markdown -->

Line one<br>Line two
<!-- if the break form is removed, these merge into one line -->

Line one  
Line two
<!-- two trailing spaces preserve the <br> as a hard break -->

<table><tr><td><table><tr><td>inner</td></tr></table></td></tr></table>
<!-- nested table can't become a flat pipe table -->

<!-- Flatten to a single-level table first: -->
<table><tr><td>inner</td></tr></table>
→ | inner |
  | ----- |

<style>.x{color:blue}</style>
<script>track()</script>
<p>Body</p>
<!-- expecting the style and script to come through -->

Body
<!-- only the content survives; <script>/<style> are dropped -->

일반적인 활용 사례

웹/CMS 콘텐츠를 Notion, Obsidian, 정적 사이트로 이전

CMS, WordPress 내보내기, 오래된 HTML 사이트에서 페이지를 빼내 Notion, Obsidian, Hugo, Jekyll에 바로 들어가는 Markdown으로 변환하십시오. 장황한 마크업을 Git 저장소에 깔끔하게 살고 검토에서 합리적으로 diff되는 이식 가능한 텍스트와 맞바꿉니다.

WYSIWYG 에디터에서 내보내기

리치 텍스트 에디터는 밀도 높고 속성이 많은 HTML을 내보냅니다. 그 출력을 여기에 붙여 넣어 그 아래의 깔끔한 Markdown — 제목, 목록, 링크, 강조 — 을 되찾으십시오. 콘텐츠가 에디터에 갇혀 있는 대신 문서 파이프라인이나 Markdown 기반 지식 베이스로 옮겨갈 수 있습니다.

HTML을 Markdown으로 정리해 LLM과 RAG 파이프라인에 공급

원시 HTML은 모델이 결코 필요로 하지 않는 태그, 스크립트, 스타일에 토큰을 태웁니다. 스크랩한 페이지를 Markdown으로 변환하면 그 잡음은 걷어내면서 LLM이 잘 읽는 구조는 유지하므로, 컨텍스트 창에 실제 콘텐츠를 더 많이 담고 검색용으로 더 깔끔한 임베딩을 얻습니다.

리치 텍스트 붙여넣기를 Markdown으로 변환

웹 페이지, 이메일, 문서에서 서식 있는 텍스트를 복사하면 클립보드에 HTML로 도착합니다. 여기에 붙여 넣어 그 리치 텍스트를 커밋하거나, 풀 리퀘스트로 보내거나, 노트에 쓸 수 있는 Markdown으로 바꾸십시오 — 서식은 보존되고 잡동사니는 사라집니다.

페이지를 Markdown으로 보관

스크립트와 추적으로 가득한 무거운 HTML 스냅샷 대신 웹 페이지의 의미 있는 콘텐츠를 작고 미래에도 견디는 .md 파일로 저장하십시오. Markdown은 수십 년 뒤에도 어떤 텍스트 에디터에서나 읽을 수 있고 용량도 일부만 차지합니다.

레거시 HTML 문서를 Markdown으로

손으로 코딩한 HTML로 작성된 오래된 문서는 유지보수가 고통스럽습니다. Markdown으로 변환해 현대적 docs-as-code 워크플로로 가져오십시오 — 린트하고, 풀 리퀘스트에서 검토하고, 정적 사이트 생성기로 렌더링할 수 있는 곳으로.

기술 세부사항

CommonMark 대 GitHub Flavored Markdown 출력

변환기는 일반 CommonMark 또는, 기본값으로 GitHub Flavored Markdown 상위 집합을 대상으로 할 수 있습니다. CommonMark는 제목, 강조, 목록, 링크, 이미지, 코드, 인용을 정확히 정의합니다. GFM은 흔한 HTML에서 직접 대응되는 네 가지 구문을 더합니다: <table> → 파이프 테이블, 체크박스 목록 항목 → 작업 목록, <del>/<s> → 취소선, 맨 URL → 자동 링크. 대부분의 웹 콘텐츠가 테이블 등을 쓰므로 GFM 출력이 실용적 기본값입니다. 대상 렌더러가 GFM 확장을 이해하지 못할 때만 CommonMark를 고르십시오. 그 경우 테이블은 원시 HTML로 되돌아갑니다.

손실적이고 되돌릴 수 없는 변환 — 솔직히 말하면

HTML은 Markdown보다 엄격히 표현력이 풍부하므로 변환은 무손실일 수 없으며, 그 점을 솔직하게 밝힐 가치가 있습니다. Markdown에는 <div>, <span>, 기타 일반 컨테이너 구문이 없고, 클래스 이름, id, 인라인 style, colspan/rowspan, 임의 data-* 속성을 담을 방법이 없으며, 대부분의 시맨틱이나 레이아웃 요소에 대한 표현이 없습니다. 그것들은 풀리거나(콘텐츠 유지, 태그 제거), 버려지거나(속성), 떨어뜨리면 의미가 손실될 때는 원시 인라인 HTML로 보존됩니다. HTML → Markdown → HTML 왕복은 원본을 재현하지 못합니다. 이는 의도적 절충입니다: Markdown은 HTML을 비추기 위해서가 아니라 깔끔하고 diff 가능하며 사람이 편집할 수 있게 존재합니다. 대부분의 경쟁 도구는 이를 얼버무리지만, 이를 밝히면 Markdown이 옳은 대상인지 눈을 뜬 채 결정할 수 있습니다.

스타일 절충: ATX/Setext, 인라인/참조, 펜스/들여쓰기

세 가지 출력 선택에는 실제 절충이 있습니다. ATX 제목(#)은 여섯 단계 모두를 다루고 깔끔하게 grep됩니다. Setext(밑줄)는 H1/H2에만 존재하므로 도구가 상위 두 단계에 내보내고 그 아래에는 ATX로 되돌아갑니다. 인라인 링크는 URL을 텍스트 옆에 둡니다 — 링크가 드물 때 최적입니다. 참조 링크는 URL을 문서 끝으로 당깁니다 — 링크가 빽빽한 본문과 레이블 재사용에 최적입니다. 코드의 경우 펜스 블록(삼중 백틱)은 언어 정보 문자열을 지니고 안전하게 중첩되는 반면, 들여쓰기(네 칸) 코드 블록은 언어를 표현할 수 없고 목록 안에서 깨지므로 — 이 변환기는 <pre><code>에서 항상 펜스 블록을 내보냅니다.

모범 사례

변환 전에 HTML을 정리하세요

압축되었거나 깊이 엉킨 HTML — 특히 중첩 레이아웃 테이블과 떠도는 인라인 요소 — 은 먼저 잘 정돈되었을 때 더 깔끔하게 변환됩니다. 지저분한 소스를 HTML 포매터로 보기 좋게 정돈하고 정규화한 다음 변환하십시오. 깔끔한 입력은 원시 HTML 폴백이 적은 깔끔한 Markdown을 냅니다.

손실되는 부분을 예상하고 검토하세요

변환을 설계상 손실적인 것으로 다루십시오. 클래스, 인라인 스타일, <div>/<span> 래퍼, 특이한 속성은 출력에서 사라지며, 보통 이식 가능한 Markdown에 바라는 바입니다 — 다만 속성에만 살아 있던 의미적으로 중요한 것(aria-label, colspan으로 병합된 셀)이 있는지 결과를 훑어보고 중요하면 손으로 다시 넣으십시오.

문서의 링크 밀도에 맞춰 링크 스타일을 고르세요

여기저기 링크가 있는 본문에는 인라인 링크를 쓰십시오 — URL이 텍스트 옆에 남고 소스가 자연스럽게 읽힙니다. 섹션에 링크가 많거나 같은 URL을 재사용할 때는 참조 링크로 전환하십시오: 이를 문서 끝의 번호 목록으로 당기면 단락이 훑어보기 쉬워지고 긴 URL 반복을 피합니다.

페이지를 LLM에 보내기 전에 Markdown으로 변환하세요

웹 콘텐츠를 모델에 — 프롬프트, 임베딩, RAG 저장소용으로 — 공급할 때는 먼저 HTML을 Markdown으로 변환하십시오. 토큰을 낭비하고 잡음을 더하는 태그, 스크립트, 스타일을 걷어내고, 모델이 실제로 쓰는 구조는 유지하며, 컨텍스트 창 안에 실제 콘텐츠를 상당히 더 많이 담습니다.

변환 후 복잡한 테이블을 확인하세요

GFM 파이프 테이블은 평면적입니다 — 중첩 테이블 없음, 셀의 블록 콘텐츠 없음, 병합 셀 없음. 데이터가 많거나 레이아웃 테이블을 변환한 뒤 Markdown을 확인하십시오: 단순한 격자는 완벽히 변환되지만, colspan이나 중첩 블록이 있는 것은 품질이 떨어지고 원시 HTML로 나타날 수 있습니다. 깔끔한 파이프 테이블이 중요하면 소스 테이블을 먼저 단순화하십시오.

자주 묻는 질문