ToolDeck

HTML to Markdown 변환기

HTML을 Markdown 형식으로 변환

예시 시도

HTML 입력

Markdown 출력

로컬에서 실행 · 시크릿 붙여넣기 안전
Markdown 출력이 여기에 표시됩니다…

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

HTML to Markdown 변환은 HTML 마크업을 John Gruber가 2004년에 만든 경량 일반 텍스트 서식 문법인 Markdown으로 변환하는 과정입니다. Markdown은 렌더링 없이도 읽기 쉽게 설계되었습니다. HTML이 <strong>이나 <a href="">처럼 여는 태그와 닫는 태그를 필요로 하는 반면, Markdown은 약식 문자를 사용합니다: **굵게**, [링크](url), # 제목. HTML을 Markdown으로 변환하면 원시 HTML보다 읽기, 편집, 버전 관리가 쉬운 파일이 생성됩니다.

변환 과정은 HTML 요소를 Markdown의 동등한 표현으로 매핑합니다. <h2>는 ##이 되고, <ul><li>는 - 항목이 되며, <a> 태그는 [텍스트](url)가 됩니다. <div>, <span>, 사용자 정의 데이터 속성처럼 Markdown에 직접 대응하는 표현이 없는 HTML 요소도 있습니다. 변환기는 설정에 따라 이러한 태그를 제거하거나 원시 HTML 그대로 전달합니다.

Markdown은 개발자 문서(GitHub, GitLab, Bitbucket), 정적 사이트 생성기(Hugo, Jekyll, Astro), 노트 앱(Obsidian, Notion), 기술 블로그의 표준 작성 형식이 되었습니다. 기존 HTML 콘텐츠를 Markdown으로 변환하는 것은 웹사이트를 마이그레이션하거나, CMS 콘텐츠를 가져오거나, 웹 페이지를 이식 가능한 형식으로 보관할 때 흔히 수행하는 작업입니다. HTML과 달리 Markdown 파일은 버전 관리에서 깔끔한 diff를 생성하므로 문서 변경에 대한 코드 리뷰가 실용적입니다.

HTML to Markdown 변환기를 사용하는 이유

HTML을 Markdown으로 수동으로 재작성하는 것은 느리고 오류가 발생하기 쉬운 작업입니다. 특히 중첩 목록, 테이블, 또는 수십 개의 링크가 있는 페이지는 더욱 그렇습니다. 자동화된 변환기는 구조적 매핑을 즉시 그리고 일관되게 처리합니다.

브라우저에서 즉시 변환
HTML을 붙여넣으면 수 밀리초 안에 Markdown 출력을 얻습니다. 서버 왕복이 없고, 처리 대기열을 기다릴 필요가 없습니다. 변환은 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다.
🔒
데이터 개인정보 보호
HTML이 사용자 기기를 벗어나지 않습니다. 모든 처리는 클라이언트 측에서 이루어지므로 업로드가 없고, 로깅이 없으며, 콘텐츠에 대한 제3자 접근도 없습니다.
📝
문서 구조 보존
제목, 목록, 링크, 이미지, 코드 블록, 테이블이 Markdown의 올바른 동등 표현으로 매핑됩니다. 중첩 구조와 인라인 서식은 재귀적으로 처리됩니다.
🔀
계정이나 설치 불필요
도구를 열고 바로 변환을 시작하세요. 설치할 것도 없고, 설정할 API 키도 없으며, 가입 양식도 없습니다. 최신 브라우저가 있는 모든 기기에서 작동합니다.

HTML to Markdown 활용 사례

프론트엔드 개발자: CMS 마이그레이션
WordPress, Drupal, 또는 헤드리스 CMS에서 블로그 게시물이나 페이지를 HTML로 내보낸 다음, Next.js, Astro, Hugo 같은 정적 사이트 생성기에서 사용할 Markdown으로 변환하세요.
백엔드 엔지니어: API 문서화
자동 생성된 HTML API 문서를 소스 코드 옆에 저장되는 Markdown 파일로 변환하세요. Markdown 문서는 GitHub 렌더링과 통합되며 설명하는 코드와 함께 버전 관리됩니다.
DevOps: 런북 변환
HTML로 내보낸 내부 위키 페이지(Confluence, SharePoint)를 해당 인프라 코드와 함께 Git 저장소에 저장되는 Markdown 런북으로 변환하세요.
QA 엔지니어: 테스트 케이스 문서화
웹 기반 도구의 HTML 테스트 리포트나 수동 테스트 계획을 검증하는 코드 변경 사항과 함께 풀 리퀘스트에서 검토할 수 있는 Markdown 파일로 변환하세요.
데이터 엔지니어: 웹 스크래핑 정리
스크래핑한 웹 페이지에서 HTML 보일러플레이트를 제거하고 깔끔한 Markdown 텍스트를 생성하세요. 내비게이션, 광고, 레이아웃 마크업을 제거하면서 기사 콘텐츠와 구조를 보존합니다.
학생: 연구 노트
웹 리소스에서 콘텐츠를 복사하여 HTML을 Markdown으로 변환한 뒤 Obsidian, Notion, 또는 Markdown 기반 노트 시스템으로 가져오세요. 제목, 링크, 서식이 보존됩니다.

HTML to Markdown 요소 참조

아래 표는 일반적인 HTML 요소가 Markdown의 동등한 표현으로 어떻게 매핑되는지 보여줍니다. 이 매핑은 테이블, 취소선, 작업 목록으로 CommonMark 명세를 확장한 GitHub Flavored Markdown(GFM) 규칙을 따릅니다. 여기에 없는 요소(<div>, <form>, 사용자 정의 웹 컴포넌트 등)는 Markdown에 동등한 표현이 없으며 제거되거나 원시 HTML로 전달됩니다.

HTML 요소Markdown 문법비고
<h1>...<h6># ... ######ATX headings, level matches tag number
<p>Blank line separationDouble newline between paragraphs
<strong>, <b>**text**Bold / strong emphasis
<em>, <i>*text*Italic / emphasis
<a href="url">[text](url)Inline link with optional title
<img src="url">![alt](url)Image with alt text
<ul><li>- itemUnordered list with dash or asterisk
<ol><li>1. itemOrdered list, numbers restart per block
<blockquote>> textBlock quote, nestable with >>
<code>`code`Inline code span
<pre><code>```lang\ncode\n```Fenced code block with optional language
<hr>---Horizontal rule (three dashes)
<table>| col | col |GFM table syntax with alignment
<del>, <s>~~text~~Strikethrough (GFM extension)

Markdown 종류: GFM vs CommonMark vs 원본

모든 Markdown이 동일한 것은 아닙니다. 플랫폼마다 Markdown을 다르게 파싱하기 때문에 출력 형식이 중요합니다. 가장 일반적인 세 가지 종류는 GitHub Flavored Markdown(GFM), CommonMark, 그리고 Gruber의 원본 Markdown입니다.

GitHub Flavored Markdown (GFM)
가장 널리 사용되는 종류입니다. 테이블(파이프 문법), 취소선(~~텍스트~~), 작업 목록(- [x]), 자동 링크 URL을 추가합니다. GitHub, GitLab, 그리고 대부분의 개발자 도구에서 사용됩니다. 이 변환기는 기본적으로 GFM 호환 Markdown을 출력합니다.
CommonMark
원본 Markdown 문법의 모호함을 해소하는 엄격한 명세입니다. 목록 연속, 강조 파싱, 블록 수준 중첩에 대한 정확한 규칙을 정의합니다. GFM과 많은 정적 사이트 생성기의 기반으로 사용됩니다.
원본 Markdown
John Gruber의 2004년 명세입니다. 테이블, 펜스 코드 블록, 취소선을 지원하지 않습니다. 대부분의 최신 도구는 CommonMark의 하위 집합으로 취급합니다. 오늘날에는 목표 형식으로 거의 사용되지 않습니다.

코드 예제

JavaScript(Turndown), Python(markdownify 및 html2text), Go, 그리고 커맨드라인의 Pandoc을 활용한 실제 예제입니다.

JavaScript (Turndown)
import TurndownService from 'turndown'

const turndown = new TurndownService({ headingStyle: 'atx' })
const html = '<h1>Title</h1><p>A <strong>bold</strong> paragraph.</p>'
const md = turndown.turndown(html)
console.log(md)
// → "# Title\n\nA **bold** paragraph."
Python (markdownify)
from markdownify import markdownify

html = '<h2>Section</h2><ul><li>First</li><li>Second</li></ul>'
md = markdownify(html, heading_style='ATX')
print(md)
# → "## Section\n\n- First\n- Second"
Python (html2text)
import html2text

converter = html2text.HTML2Text()
converter.body_width = 0  # disable line wrapping

html = '<p>Visit <a href="https://example.com">Example</a> for details.</p>'
md = converter.handle(html)
print(md)
# → "Visit [Example](https://example.com) for details."
Go (html-to-markdown)
package main

import (
	"fmt"
	md "github.com/JohannesKaufmann/html-to-markdown"
)

func main() {
	converter := md.NewConverter("", true, nil)
	html := `<h3>Go Example</h3><p>Code: <code>fmt.Println()</code></p>`
	markdown, _ := converter.ConvertString(html)
	fmt.Println(markdown)
	// → "### Go Example\n\nCode: `fmt.Println()`"
}
CLI (Pandoc)
# Convert an HTML file to Markdown
pandoc input.html -f html -t markdown -o output.md

# Pipe HTML from stdin
echo '<p>Hello <em>world</em></p>' | pandoc -f html -t markdown
# → Hello *world*

# Use GitHub-Flavored Markdown output
pandoc input.html -f html -t gfm -o output.md

자주 묻는 질문

Markdown으로 변환할 수 없는 HTML 요소는 무엇인가요?
Markdown에는 <div>, <span>, <form>, <input>, <iframe>, 또는 사용자 정의 CSS 클래스와 스타일이 있는 요소에 대한 동등한 표현이 없습니다. 대부분의 변환기는 이러한 태그를 제거하고 내부 텍스트만 유지합니다. 일부 변환기는 지원되지 않는 HTML을 변환하지 않고 그대로 전달할 수 있는데, Markdown 명세에서 인라인 HTML을 명시적으로 허용하므로 이는 유효한 방식입니다. 해당 요소를 보존해야 한다면 변환기를 제거 대신 원시 HTML을 유지하도록 설정하세요.
HTML 테이블은 Markdown으로 어떻게 변환되나요?
HTML 테이블은 GFM 파이프 테이블 문법으로 매핑됩니다: | 헤더 | 헤더 |와 구분자 행 | --- | --- |. GFM 테이블은 colspan, rowspan, 셀 수준 스타일을 지원하지 않습니다. 병합된 셀이 있는 복잡한 테이블은 평탄화되어 구조 정보가 손실될 수 있습니다. 단순한 데이터 테이블의 경우 변환은 무손실입니다.
HTML to Markdown 변환은 무손실인가요?
아닙니다. Markdown은 HTML의 부분 집합이므로 변환 과정에서 일부 정보가 항상 손실됩니다. CSS 클래스, 인라인 스타일, 데이터 속성, 폼 요소, <article>이나 <section> 같은 시맨틱 태그는 Markdown에 동등한 표현이 없습니다. 텍스트 콘텐츠와 기본 구조(제목, 목록, 링크, 강조)는 정확하게 보존됩니다. 대부분의 문서화 및 콘텐츠 마이그레이션 작업에서 보존되는 요소가 실제로 중요한 부분입니다.
HTML to Markdown과 HTML to 일반 텍스트의 차이는 무엇인가요?
HTML to 일반 텍스트는 모든 서식을 제거하고 구조 없이 원시 텍스트만 생성합니다. HTML to Markdown은 문서 구조를 보존합니다: 제목은 제목으로 유지되고, 링크는 URL을 보존하며, 목록은 목록으로 유지되고, 강조가 보존됩니다. Markdown 출력은 동일한 논리적 구조로 다시 HTML로 렌더링될 수 있습니다.
Markdown을 다시 HTML로 변환할 수 있나요?
가능합니다. 모든 Markdown 프로세서(marked, markdown-it, Python-Markdown, goldmark)는 Markdown을 HTML로 변환합니다. 이 왕복 변환은 Markdown이 인기 있는 이유 중 하나입니다: 읽기 쉬운 형식으로 작성하고 웹용 HTML로 렌더링합니다. HTML-to-Markdown 변환에서 지원되지 않는 요소가 제거되기 때문에 왕복 변환은 완벽하게 대칭적이지 않습니다.
변환기는 인라인 CSS나 JavaScript가 있는 HTML을 어떻게 처리하나요?
인라인 CSS(style 속성)와 <style> 블록은 Markdown에 스타일 문법이 없으므로 변환 중 제거됩니다. JavaScript(<script> 태그와 onclick 같은 이벤트 핸들러)도 제거됩니다. 변환기는 문서 콘텐츠와 구조만 추출합니다. 이로 인해 HTML-to-Markdown 변환은 신뢰할 수 없는 HTML 콘텐츠를 문서로 가져올 때 유용한 정리 단계가 됩니다.
내 프로젝트에 어떤 Markdown 종류를 사용해야 하나요?
콘텐츠가 GitHub, GitLab, 또는 대부분의 문서 플랫폼에서 표시될 경우 GitHub Flavored Markdown(GFM)을 사용하세요. 다른 렌더러 간에 엄격한 명세 준수와 예측 가능한 파싱이 필요하다면 CommonMark를 사용하세요. 원본 Markdown은 레거시 시스템에서만 관련이 있습니다. GFM은 대부분의 프로젝트에서 가장 안전한 기본 선택입니다.