마크다운 에디터
마크다운을 실시간으로 미리보기하며 작성하고, HTML로 변환·복사할 수 있습니다.
좌측에 마크다운을 입력하면 미리보기가 여기에 나타납니다.
💡 마크다운 에디터 활용 꿀팁
블로그 포스팅 미리보기
블로그 포스팅 작성 시 미리보기 용도로 활용하세요.
자동 저장 지원
로컬 스토리지에 자동 저장되므로 새로고침해도 데이터가 날아가지 않습니다.
GitHub README 작성
GitHub README.md 파일을 작성할 때 유용합니다.
HTML 바로 복사
작성 후 'HTML 복사' 버튼으로 웹사이트에 바로 붙여넣을 수 있습니다.
⚙ 기술적 원리: Markdown 파서와 CommonMark AST 렌더링
Markdown은 2004년 John Gruber와 Aaron Swartz가 '읽기 쉽고 쓰기 쉬운' 마크업 언어를 목표로 설계했습니다. 핵심 아이디어는 이메일에서 자연스럽게 사용하던 텍스트 표현 관습(별표로 강조, 하이픈으로 목록)을 형식화한 것입니다. Markdown 파서는 텍스트를 읽어 추상 구문 트리(AST)를 생성하고, 이를 HTML로 직렬화합니다.
초기 Markdown에는 명확한 명세가 없어 파서마다 동작이 달랐습니다. 이 문제를 해결하기 위해 2014년 John MacFarlane을 중심으로 CommonMark 표준이 만들어졌으며, GitHub Flavored Markdown(GFM), GitLab, Reddit 등이 CommonMark를 기반으로 자신만의 확장을 추가했습니다. HeeyaTools Markdown Editor는 marked.js 라이브러리를 활용하여 CommonMark 호환 렌더링을 구현합니다.
렌더링 파이프라인은 다음과 같습니다: ① Markdown 텍스트 입력 → ② 토크나이저가 텍스트를 토큰으로 분해 → ③ 파서가 AST 생성 → ④ 렌더러가 HTML로 변환 → ⑤ DOMPurify로 XSS 위협 요소 제거 → ⑥ 안전한 HTML을 미리보기 영역에 삽입. 이 5번째 단계가 보안의 핵심입니다.
🔒 보안 아키텍처: DOMPurify와 XSS 공격 방어
Markdown에서 생성된 HTML을 브라우저에 그대로 삽입하면 XSS(Cross-Site Scripting) 공격에 취약합니다.
예를 들어
[click me](javascript:alert('XSS'))
처럼 작성된 Markdown이 검증 없이 렌더링되면 악성 스크립트가
실행될 수 있습니다.
HeeyaTools Markdown Editor는 DOMPurify
라이브러리를 사용하여 렌더링된 HTML에서 모든 이벤트 핸들러(
onclick
,
onerror
등),
javascript:
URL,
<script>
태그를 자동으로 제거합니다.
또한 모든 렌더링과 변환 작업이 브라우저 내 Zero-Server 환경에서 이루어지므로, 작성 중인 문서의 내용이 외부 서버로 전송되지 않습니다. 기업 내부 문서나 미공개 기술 문서 작성에도 안심하고 사용할 수 있습니다.
📚 산업 인사이트: Markdown의 확산과 현대 문서 생태계
Markdown은 현재 기술 문서 작성의 표준 언어입니다. GitHub의 README.md 문화가 확산되면서 오픈소스 세계의 공식 문서 형식이 되었고, Notion, Obsidian, Confluence, Dropbox Paper 등 주요 협업 도구들이 Markdown을 핵심 편집 인터페이스로 채택했습니다.
기술 서적 집필에도 Markdown이 활용됩니다. Pandoc은 Markdown을 PDF, EPUB, DOCX, LaTeX 등 다양한 형식으로 변환하는 범용 문서 변환기로, 전문 작가와 연구자들이 Markdown으로 초안을 작성하고 Pandoc으로 출판 형식으로 내보냅니다.
개발자 도구에서도 Markdown은 편재합니다. VS Code의 Jupyter Notebook 셀, AI 모델 API의 응답 형식, ChatGPT/Claude의 출력 형식 모두 Markdown을 사용합니다. Markdown을 능숙하게 다루는 것은 현대 기술 전문가의 핵심 리터러시입니다.