HTML to Markdown 변환기 완벽 가이드
HTML to Markdown 변환기는 웹 페이지의 HTML 소스 코드를 깔끔한 Markdown 문법으로 자동 변환해주는 무료 온라인 도구입니다. Markdown은 텍스트 기반의 경량 마크업 언어로, GitHub, GitLab, Notion, Obsidian, Jekyll, Hugo 등 다양한 플랫폼에서 널리 사용됩니다. 웹 페이지의 콘텐츠를 블로그나 위키, README 파일로 옮기거나, 기존 HTML 문서를 Markdown 기반 정적 사이트 생성기(SSG)로 마이그레이션할 때 이 도구가 큰 도움이 됩니다. 수동으로 HTML 태그를 하나하나 Markdown으로 바꾸는 번거로운 작업 없이, 복잡한 HTML 구조도 한 번의 클릭으로 정확하게 변환할 수 있습니다.
지원하는 HTML 태그 및 변환 규칙
이 변환기는 DOMParser를 기반으로 HTML을 파싱하여 정확한 DOM 트리를 생성한 뒤, 각 노드를 재귀적으로 순회하며 대응되는 Markdown 문법으로 변환합니다. 지원하는 주요 태그와 변환 규칙은 다음과 같습니다.
- 제목 태그(h1~h6): # 기호의 개수로 변환합니다. h1은 #, h2는 ##, h6는 ######으로 변환됩니다.
- 굵은 텍스트(strong, b): **텍스트** 형태로 변환됩니다.
- 기울임 텍스트(em, i): *텍스트* 형태로 변환됩니다.
- 취소선(del, s, strike): ~~텍스트~~ 형태로 변환됩니다 (GFM 확장).
- 링크(a): [텍스트](URL) 형태로 변환됩니다.
- 이미지(img):  형태로 변환됩니다.
- 순서 없는 목록(ul/li): - 기호를 사용한 리스트로 변환됩니다.
- 순서 있는 목록(ol/li): 1. 2. 3. 형태의 번호 리스트로 변환됩니다.
- 테이블(table): GFM(GitHub Flavored Markdown) 테이블 문법으로 변환됩니다.
- 코드(code, pre): 인라인 코드는 `코드`, 코드 블록은 ``` 펜스 코드블록으로 변환됩니다.
- 인용문(blockquote): > 기호를 사용한 인용문으로 변환됩니다.
- 수평선(hr): --- 형태로 변환됩니다.
- 줄바꿈(br): Markdown 줄바꿈으로 변환됩니다.
활용 시나리오
- 블로그 글을 HTML에서 Markdown으로 마이그레이션할 때
- 웹 페이지 콘텐츠를 GitHub README나 Wiki로 옮길 때
- CMS(WordPress, Tistory 등)의 HTML 글을 정적 사이트(Jekyll, Hugo, Gatsby)로 이전할 때
- 이메일 템플릿이나 HTML 문서를 Markdown 노트(Obsidian, Notion)로 변환할 때
- API 응답의 HTML 데이터를 Markdown 형태로 저장하거나 표시할 때
DOMParser 기반 정확한 파싱
이 도구는 정규식 기반의 단순 치환이 아닌, 브라우저 내장 DOMParser API를 사용하여 HTML을 정확하게 파싱합니다. DOMParser는 입력된 HTML 문자열을 완전한 DOM 트리로 변환하므로, 중첩된 태그나 복잡한 구조도 정확하게 처리할 수 있습니다. 예를 들어 리스트 안에 링크가 있거나, 테이블 셀 안에 굵은 텍스트가 있는 경우에도 올바르게 변환됩니다. 불완전한 HTML이나 닫히지 않은 태그도 브라우저의 자동 보정 기능 덕분에 안정적으로 처리됩니다.
GFM 테이블 변환
HTML 테이블은 GitHub Flavored Markdown(GFM) 테이블 문법으로 변환됩니다. thead와 tbody를 구분하여 헤더 행과 구분선(---)을 자동으로 생성하며, 셀 내부의 인라인 서식(굵기, 링크 등)도 유지됩니다. thead가 없는 단순 테이블의 경우 첫 번째 행을 헤더로 처리합니다. 테이블 변환 기능은 옵션에서 활성화/비활성화할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. 복잡한 중첩 HTML도 변환이 되나요?
A. 네, DOMParser 기반으로 파싱하기 때문에 중첩된 리스트, 테이블 안의 링크, 인용문 안의 코드블록 등 복잡한 구조도 정확하게 변환됩니다. 다만 CSS 스타일이나 JavaScript 코드는 Markdown에서 표현할 수 없으므로 무시됩니다.
Q. 변환된 Markdown을 GitHub에서 바로 사용할 수 있나요?
A. 네, GFM(GitHub Flavored Markdown) 테이블, 취소선, 펜스 코드블록 등 GitHub에서 지원하는 확장 문법을 사용하여 변환하므로 GitHub README, Issue, Wiki 등에서 바로 사용할 수 있습니다.
Q. HTML의 style 속성이나 class는 어떻게 처리되나요?
A. Markdown은 순수 텍스트 기반의 마크업 언어이므로 CSS 스타일, class, id 등의 HTML 속성은 변환 과정에서 제거됩니다. 의미론적 태그(strong, em 등)의 서식만 Markdown 문법으로 보존됩니다.
Q. 이미지 태그의 width, height 속성은 유지되나요?
A. 표준 Markdown에서는 이미지 크기 지정을 지원하지 않으므로 width, height 속성은 변환 시 제거됩니다. 이미지의 alt 텍스트와 src URL만  형태로 변환됩니다.
Q. 불완전한 HTML을 입력해도 되나요?
A. 네, 브라우저의 DOMParser가 자동으로 태그를 보정하므로 닫히지 않은 태그나 불완전한 HTML 조각도 최대한 정확하게 처리됩니다. 단, 원본 HTML이 심하게 깨져 있으면 결과물도 기대와 다를 수 있습니다.