Markdown HTML 변환기

Markdown을 웹에 붙일 HTML로 바꾸고, 붙이기 전에 깨질 자리를 먼저 보여 줍니다

Markdown HTML 변환기는 #, **, - 같은 기호로 쓴 Markdown 글을 웹 페이지가 읽는 HTML 태그로 바꾸는 도구입니다. 변환 규칙은 GitHub Flavored Markdown(GFM) 명세를 따르고, 엔진은 널리 쓰이는 오픈 소스 라이브러리 marked 18을 이 페이지 안에 넣어 씁니다. 글을 입력하는 동안 오른쪽에서 웹 화면과 HTML 코드를 바로 확인할 수 있고, 결과는 본문 HTML·꾸밈을 넣은 HTML·전체 문서(.html) 가운데 붙여 넣을 곳에 맞는 형태로 복사하거나 저장합니다.

변환만 하고 끝내지 않고, 붙여 넣은 뒤에 문제가 될 자리를 점검표로 모아 보여 줍니다. 한국어에서 자주 생기는 '강조 기호가 글자로 남는' 문장, 빈 줄 없이 바꿔서 한 줄로 이어 붙은 줄, 다른 사이트에서는 열리지 않는 상대 주소, 닫지 않은 코드 블록 같은 곳이 그 대상입니다. 점검 카드를 누르면 편집기가 그 줄로 이동하고, 가운데 구조 띠에는 문서가 어떤 블록으로 이루어졌는지와 점검할 위치가 함께 표시됩니다. 글은 브라우저 안에서만 바뀌고 서버로 보내지 않습니다.

Markdown을 HTML로 바꾸는 상황

• 블로그·홈페이지의 HTML 칸에 글을 올릴 때: 워드프레스의 '사용자 정의 HTML' 블록처럼 HTML을 직접 받는 칸에 Markdown 기호를 그대로 붙이면 ##와 **가 글자로 보입니다. 먼저 HTML로 바꾸면 제목·목록·표가 제 모양으로 들어갑니다.
• AI 채팅 답변이나 메모를 웹에 옮길 때: AI 채팅 도구의 답변과 개발자용 메모 앱의 글은 Markdown 기호로 정리되어 나오는 경우가 많습니다. 이런 글을 그대로 붙이면 기호가 남으므로 HTML이나 서식째 복사로 옮기는 편이 깔끔합니다.
• 이메일 뉴스레터를 만들 때: 메일 서비스는 <style>을 제한하는 경우가 있습니다. caniemail.com 조사에 따르면 Gmail 웹은 본문(body) 안의 <style>을 지원하지 않고 크기도 16 KB로 제한합니다. 이때는 태그마다 꾸밈을 직접 넣는 '꾸밈 넣기'가 안전합니다.
• README나 설명서를 웹 페이지 한 장으로 나눠 줄 때: '.html 저장'은 글꼴·표·코드 꾸밈과 다크 모드 색을 갖춘 문서 한 장을 만듭니다. 받는 사람은 별도 프로그램 없이 브라우저로 열 수 있습니다.
• HTML 편집 칸이 없는 편집기에 붙일 때: '서식째 복사'는 클립보드에 HTML과 일반 글자를 함께 넣습니다. 메일 작성 창이나 문서 편집기처럼 서식 붙여 넣기를 받는 곳에서는 제목·목록·표 모양이 그대로 들어갑니다.

쓰는 법

1. Markdown 넣기: 왼쪽 편집기에 글을 쓰거나 붙여 넣습니다. .md·.markdown·.txt 파일은 '파일 열기'로 고르거나 편집기에 끌어다 놓습니다. UTF-8이 아닌 옛 파일은 EUC-KR로 다시 읽습니다.
2. 문법 단추 쓰기: 편집기 위 단추는 고른 글자를 굵게·기울임·링크로 감싸거나, 고른 줄 앞에 제목·목록·인용 기호를 붙입니다. Ctrl+B·Ctrl+I·Ctrl+K(맥은 ⌘)도 같습니다. 기호는 색으로 구분되어 보여서 어디가 제목이고 어디가 강조인지 쉽게 읽힙니다.
3. 웹 화면으로 확인하기: 오른쪽 '웹 화면'은 결과를 실제 웹 페이지처럼 보여 줍니다. 편집기를 움직이면 같은 자리로 따라오고, 편집기에 커서를 두면 그 블록이 왼쪽 막대로 표시됩니다. 'HTML 코드'로 바꾸면 태그를 색으로 구분해 보여 줍니다.
4. 변환 규칙 고르기: 줄바꿈 처리, Markdown에 섞어 쓴 HTML 처리, HTML 형태, 강조 바로잡기, 제목 id를 고릅니다. 바꾸는 즉시 결과가 다시 만들어집니다.
5. 점검하고 복사하기: 아래 점검 카드를 확인하고 'HTML 복사', '서식째 복사', '.html 저장' 가운데 하나를 누릅니다. '이 브라우저에 저장'을 켜 두면 쓰던 글과 규칙이 이 브라우저에만 남아 다음에 열 때 이어서 쓸 수 있습니다.

Markdown 기호가 바뀌는 HTML 태그

아래 표의 HTML 칸은 이 도구가 실제로 내는 결과입니다. 표·할 일 목록·취소선·자동 링크는 CommonMark에 GFM이 더한 확장 문법입니다.

한국어 강조가 기호로 남는 이유와 '강조 바로잡기'

Markdown 명세는 별표가 강조를 열고 닫을 수 있는지를 앞뒤 글자로 정합니다. CommonMark 0.31.2의 정의에 따르면 강조를 여는 기호(왼쪽 경계)는 바로 뒤가 문장부호일 때 앞에 공백이나 문장부호가 있어야 하고, 강조를 닫는 기호(오른쪽 경계)는 바로 앞이 문장부호일 때 뒤에 공백이나 문장부호가 와야 합니다. 그래서 **"중요"**는처럼 따옴표·괄호·낫표 안쪽에 강조를 걸고 바로 뒤에 조사를 붙이면, 닫는 **가 강조를 닫지 못하고 별표가 글자로 남습니다. 명세의 예시 380(a**"foo"**)은 반대로 여는 쪽이 걸리는 경우입니다. 글자 바로 뒤의 **가 따옴표 앞에 있어서 강조를 열지 못합니다. 조사가 낱말에 바로 붙는 한국어와 일본어에서 특히 자주 생깁니다.

'강조 바로잡기'를 켜 두면(처음 상태) 이 도구는 이런 자리만 골라 강조로 읽습니다. 안쪽 끝이 문장부호이고 바깥이 한글·가나·한자라서 표준 규칙에 걸린 경우에만 바꾸고, 표준 규칙으로 이미 강조가 되는 문장은 손대지 않습니다. 바깥이 라틴 문자나 숫자이면 표준 규칙대로 두므로 2*(3+4)*5 같은 식은 기울임이 되지 않으며, 안에 코드·링크·HTML 태그가 든 강조도 바꾸지 않습니다. 바로잡은 자리는 점검표의 '강조 바로잡음' 카드로 알려 줍니다.

바로잡기는 이 도구가 만드는 HTML에만 적용됩니다. 같은 Markdown 원문을 GitHub처럼 표준 규칙을 쓰는 곳에 그대로 올리면 그 자리는 여전히 기호로 보입니다. 원문 자체를 어디서나 통하게 고치려면 강조를 문장부호 바깥에 거는 방법("**중요**"는)이 가장 간단하고, 따옴표까지 굵게 해야 한다면 <strong>"중요"</strong>는처럼 HTML 태그로 적습니다. 밑줄 기호(__)는 낱말 안에서 강조가 되지 않도록 정해져 있어 snake_case 같은 이름을 보호하므로, 한국어 문장에서는 별표를 쓰는 편이 안전합니다.

줄을 바꿨는데 한 줄로 이어 붙는 이유

Markdown에서 문단을 나누는 것은 빈 줄입니다. GFM 명세는 빈 줄 없이 한 번 바꾼 줄을 '소프트 줄바꿈'이라 부르고, HTML에서는 줄바꿈이나 공백으로 나타낼 수 있다고 정합니다. 브라우저는 이 줄바꿈을 공백 하나로 보여 주므로 결과에서는 두 줄이 한 줄로 이어집니다. GitHub 문서에 따르면 GitHub은 이슈·댓글에서는 줄바꿈을 자동으로 살리지만, .md 파일에서는 같은 글을 한 줄로 보여 줍니다.

시·주소·노래 가사처럼 줄마다 끊어 읽는 글은 '줄마다 <br>'을 고르면 됩니다. 문서 전체는 표준대로 두고 몇 줄만 나누려면 그 줄 끝에 역슬래시를 붙이는 방법을 권합니다. 줄 끝 공백 두 칸은 눈에 보이지 않고, 편집기가 저장할 때 지우는 경우도 있기 때문입니다. 표준 상태에서 이어 붙은 줄은 점검표의 '한 줄 바꿈이 이어짐' 카드가 줄 번호와 함께 알려 줍니다.

Markdown 안의 HTML과 안전

Markdown 글에는 HTML 태그를 섞어 쓸 수 있고, 변환기는 기본적으로 그 태그를 결과에 그대로 옮깁니다. marked 문서도 'marked는 출력 HTML을 정리(sanitize)하지 않는다'고 밝히고 별도 필터를 권합니다. 남이 쓴 글이나 AI가 만든 글을 바꿀 때는 스크립트나 클릭 동작이 섞여 들어올 수 있으므로, '원본 HTML' 규칙을 세 가지로 나눴습니다.

• 안전하게(처음 상태): 허용 목록에 없는 태그와 속성을 뺍니다. script, style, iframe, object, embed, form과 입력 칸·svg는 내용까지 지우고, onclick 같은 on 이벤트 속성과 javascript:, vbscript: 주소, 그림이 아닌 data: 주소도 지웁니다. 뺀 것은 '뺀 HTML' 카드에 종류별 개수로 나옵니다.
• 그대로: 적은 HTML을 바꾸지 않습니다. 직접 쓴 표나 영상 삽입 코드를 살려야 할 때 고르고, 스크립트나 on 속성이 남아 있으면 '위험한 HTML이 그대로' 카드가 경고합니다.
• 글자로: 태그를 실행하지 않고 글자 그대로 보이게 바꿉니다. HTML 사용법을 설명하는 글처럼 태그를 보여 주는 것이 목적일 때 씁니다. GFM 명세의 '허용하지 않는 HTML' 확장도 title, textarea, style, xmp, iframe, noembed, noframes, script, plaintext 9개 태그의 <를 글자로 바꾸는 방식입니다.

웹 화면 미리 보기는 어느 규칙에서든 스크립트를 실행하지 않습니다. 미리 보기는 allow-scripts를 주지 않은 sandbox iframe 안에 그려지며, MDN 문서에 따르면 이 경우 그 안의 스크립트는 실행이 허용되지 않습니다. 다만 '안전하게'는 붙여 넣을 사이트의 보안 필터를 대신하지 않습니다. 사이트마다 받는 태그가 다르므로, 붙여 넣은 뒤에는 그 사이트의 미리 보기로 한 번 더 확인하세요.

HTML 형태 고르는 기준

제목 id와 문서 안 링크

[설치](#설치)처럼 #로 시작하는 링크는 같은 문서의 제목으로 이동하는 목차 링크입니다. 이 링크가 동작하려면 제목에 같은 이름의 id가 있어야 하는데, marked는 제목에 id를 붙이지 않습니다. '제목 id'를 켜면 GitHub 문서가 설명하는 규칙대로 id를 붙입니다: 영문은 소문자로, 공백은 하이픈(-)으로 바꾸고, 그 밖의 공백과 문장부호는 지우며, 같은 제목이 다시 나오면 -1, -2를 붙입니다. 문서에 #링크가 있는데 제목 id가 꺼져 있으면 점검표가 알려 주고, 카드의 단추로 바로 켤 수 있습니다.

점검표가 알려 주는 것

• 강조가 기호로 남음 / 강조 바로잡음: 문장부호에 붙은 강조 때문에 표준 규칙으로는 별표가 남는 자리입니다. 바로잡기를 켜면 '바로잡음'으로, 끄면 '기호로 남음'으로 나옵니다.
• 한 줄 바꿈이 이어짐: 빈 줄 없이 바꾼 줄이 띄어쓰기로 합쳐진 자리입니다.
• 닫히지 않은 코드 블록: ```로 열고 닫지 않아 그 아래 글이 모두 코드가 된 경우입니다.
• 표 칸이 넘침: 머리 줄보다 칸이 많은 줄입니다. GFM은 남는 칸을 버리므로 내용이 사라집니다.
• 상대 주소: /images/a.png나 docs/a.md처럼 사이트 주소 없이 적은 그림·링크입니다. 미리 보기에서는 이 페이지 주소를 기준으로 열리지만, 다른 사이트에 붙이면 깨질 수 있습니다.
• 설명 없는 그림: ![](주소)처럼 대체 텍스트가 빈 그림입니다.
• 제목 단계 건너뜀: ## 다음에 바로 ####가 오는 것처럼 단계를 건너뛴 제목입니다. 화면 낭독기로 목차를 따라가는 사람에게 구조가 어긋나 보입니다.
• 제목 id가 필요한 링크 / 갈 곳 없는 # 링크: 문서 안 링크가 이동할 제목이 없거나, 제목 id가 꺼져 있어 이동하지 않는 경우입니다.
• 뺀 HTML / 위험한 HTML이 그대로 / 글자로 바꾼 HTML: '원본 HTML' 규칙에 따라 빼거나 남기거나 글자로 바꾼 태그입니다.

자주 틀리는 경우

• 문단 바로 아래의 번호 목록: 빈 줄 없이 문단 아래에 2. 항목을 쓰면 목록이 되지 않고 문단에 이어 붙습니다. 문단을 끊고 목록을 시작할 수 있는 번호는 1뿐입니다. 글머리 목록(- 항목)은 문단 바로 아래에서도 목록이 됩니다.
• 4칸 들여쓴 줄: 줄 앞에 공백 4칸이나 탭을 넣으면 코드 블록이 됩니다. 문단을 들여 쓰려는 공백은 결과에 나오지 않으니 지우세요.
• 글 바로 아래의 ---: 구분선을 넣으려고 글 바로 아래 줄에 ---를 쓰면 위 글이 2단계 제목이 됩니다. 구분선 앞에는 빈 줄을 둡니다.
• 파일 맨 위의 머리 정보(front matter): 정적 사이트용 .md 파일 맨 위의 ---로 감싼 title: … 줄은 Markdown 문법이 아니라서 구분선과 제목으로 바뀝니다. 변환 전에 지우세요.
• 공백이 든 링크 주소: [파일](내 문서.pdf)는 링크가 되지 않습니다. [파일](<내 문서.pdf>)처럼 감싸거나 공백을 %20으로 적습니다.
• 표 앞의 빈 줄: 표는 문단 바로 아래에서도 시작되지만, 표가 끝나는 자리에는 빈 줄이 있어야 다음 글이 표 안으로 들어가지 않습니다.
• 복사한 뒤 사이트에서 다시 꾸밈: '꾸밈 넣기'로 넣은 style은 붙여 넣은 사이트의 디자인보다 우선합니다. 사이트 디자인을 따르게 하려면 '본문만'을 고르세요.

한계

• 각주([^1]), 수식, 다이어그램 문법은 marked의 기본 문법이 아니라서 글자 그대로 남습니다.
• 코드 블록에 색을 칠하지 않습니다. 언어 이름은 language-… 클래스로 남기므로, 붙여 넣을 사이트의 코드 강조 기능이 색을 정합니다.
• 강조 바로잡기는 바깥 글자가 한글·가나·한자인 **, *, ~~에만 적용합니다. 밑줄 기호, 세 겹 별표(***), 안에 코드·링크·HTML 태그가 든 강조는 표준 규칙대로 둡니다.
• '안전하게'는 이 도구의 허용 목록 기준입니다. 붙여 넣을 사이트가 따로 걸러 내는 태그는 사이트마다 다릅니다.
• 미리 보기의 그림은 적힌 주소에서 바로 불러옵니다. 서식째 복사 결과가 어떻게 보이는지는 붙여 넣는 편집기에 따라 다릅니다.
• 2 MB가 넘는 글은 변환하지 않습니다. 3만 자가 넘는 글은 입력이 느려지지 않도록 편집기의 문법 색 표시를 끄고 변환만 합니다.

출처

기준: 문법은 CommonMark 0.31.2와 GFM 0.29-gfm 명세, 동작은 marked 18.0.9 출력, 브라우저 기능은 MDN 문서, 메일 지원 현황은 caniemail.com을 2026년 10월 22일에 확인했습니다. 위 표의 HTML은 이 도구의 실제 출력입니다.

• 01CommonMark Spec 0.31.2왼쪽·오른쪽 경계(flanking) 정의, 예시 380, 목록이 문단을 끊는 조건, 들여쓴 코드 블록
• 02GitHub Flavored Markdown Spec 0.29-gfm표·할 일 목록·취소선·자동 링크, 허용하지 않는 HTML 9개 태그, 소프트·강제 줄바꿈
• 03GitHub Docs — Basic writing and formatting syntax이슈·댓글과 .md 파일의 줄바꿈 차이, 제목 링크(id) 만드는 규칙
• 04marked 문서출력 HTML을 정리하지 않는다는 안내, gfm(기본 켬)·breaks(기본 끔) 설정
• 05MDN — iframe의 sandbox 속성allow-scripts가 없으면 스크립트를 실행하지 않음
• 06MDN — ClipboardItem클립보드에 text/html과 text/plain을 함께 넣는 방법
• 07Can I email — <style> elementGmail 웹은 body 안의 style 미지원, 16 KB 제한
• 08RFC 7763 — The text/markdown Media Type.md 파일의 형식 이름 text/markdown(2016년 3월)
• 09John Gruber — Markdown2004년 공개된 원래 Markdown과 '읽기 쉬운 글' 설계 목표

자주 묻는 질문

함께 쓰는 도구