Markdown 편집기
Markdown이란?
Markdown은 2004년 존 그루버(John Gruber)가 만든 경량 마크업 언어입니다. 간결한 텍스트 형식 구문을 사용하여 구조화된 HTML로 변환할 수 있습니다. Markdown은 문서 작성, 블로그 게시물, README 파일 등에 널리 사용되며, 간결하고 읽기 쉬운 특성으로 개발자들에게 깊이 사랑받고 있습니다. Markdown은 플랫폼마다 지원 문법과 렌더링 결과가 조금씩 다릅니다. GitHub, 블로그, 문서 시스템에 게시하기 전 표, 코드블록, 링크, 이미지 표시를 미리 확인하는 것이 좋습니다.
사용 방법
사용 방법
- 왼쪽 편집기에 마크다운 텍스트를 입력합니다
- 오른쪽 패널에서 실시간 미리보기를 확인합니다
- 도구 모음 버튼을 사용하여 일반 구문을 삽입합니다
- 하단 바에 단어 수, 글자 수, 줄 수가 표시됩니다
- 콘텐츠는 브라우저 로컬 저장소에 자동 저장됩니다
기능
편집 팁
- 미리보기 렌더링은 플랫폼마다 다를 수 있으므로, 테이블, HTML 또는 확장 마크다운 기능을 사용할 때는 대상 시스템에서 최종 결과를 확인하세요.
- 자동 저장은 초안 작성 시 유용하지만, 브라우저 데이터를 삭제하거나 기기를 변경하기 전에 중요한 메모는 별도로 보관하세요.
활용 사례
기술 원리
Markdown 렌더링은 일반적으로 세 단계를 거칩니다: 토크나이저가 텍스트를 제목, 단락, 목록, 코드 블록 같은 구문 단위로 분할하고, 파서가 문법 규칙에 따라 토큰 스트림을 추상 구문 트리(AST)로 변환하며, 렌더러가 AST를 순회하여 해당 HTML을 출력합니다. 대표적인 JavaScript 라이브러리로는 marked, markdown-it, remark, micromark가 있으며, 번들 크기, 속도, 확장성에서 차이가 있지만 모두 CommonMark 규범을 따릅니다. CommonMark는 원래 Markdown 문법의 모호함(예: 중첩 목록 들여쓰기 방법, 인라인 코드 경계 찾기)을 수정하여 구현 간 동일한 렌더링 결과를 보장합니다. CommonMark 위에서 GitHub는 GFM(GitHub Flavored Markdown)을 추가했는데, 표, 작업 목록(- [ ]), 취소선(~~), 자동 링크, 펜스 코드 블록을 지원합니다. GFM은 현재 사실상의 표준이며, 대부분의 현대 Markdown 도구가 기본적으로 활성화합니다. 코드 블록 구문 강조는 보통 highlight.js 또는 Prism.js로 수행되며, 렌더링 시점에서 언어 태그를 인식하고 키워드, 문자열, 주석에 CSS 클래스를 태깅하여 테마가 색상으로 스타일링합니다. 사용자가 제공한 HTML이 XSS를 유발하는 것을 방지하기 위해, 렌더러는 보통 DOMPurify나 유사한 허용 목록 필터를 통해 script, iframe, on* 이벤트 속성을 제거합니다. 따라서 다른 사람의 Markdown을 붙여넣어도 악성 스크립트가 실행되지 않습니다.
- 파싱 흐름: 원시 텍스트가 토크나이저 -> 파서 -> 렌더러를 거쳐 HTML이 되며, AST가 중간 표현입니다.
- 표준: CommonMark가 공식 문법입니다. GFM은 표, 작업 목록, 취소선, 펜스 코드 블록, 자동 링크로 확장합니다.
- 라이브러리 비교: marked는 작고 빠르고, markdown-it은 풍부한 플러그인 생태계를 가지며, remark는 통합 생태계 위에서 문서 처리 파이프라인에 적합합니다.
- 구문 강조: highlight.js 또는 Prism.js가 파싱 시점에서 코드 블록의 언어 태그를 읽고 키워드, 문자열, 주석에 CSS 클래스를 태깅합니다.
- XSS 방어: DOMPurify 같은 라이브러리가 허용 목록에 따라 출력 HTML을 필터링하여 script, iframe, on* 이벤트 속성을 제거하고 스크립트 주입을 방지합니다.
- 실시간 미리보기: 편집기가 입력 이벤트를 감지하고 각 변경을 디바운싱한 뒤 재파싱하여, 반응성과 성능의 균형을 맞추기 위해 diff로 우측 DOM을 업데이트합니다.
예시
제목, 목록, 코드 블록
# 제목 1
## 제목 2
- 목록 항목 A
- 목록 항목 B
- 중첩된 목록 항목
```javascript
function hello() {
console.log('Hello Markdown');
}
```표
| 도구 | 유형 | 크기 |
|---------|--------|------|
| Vite | 빌드 | 작음 |
| Webpack | 빌드 | 큼 |
| Rollup | 번들러 | 중간 |인용문과 링크
> "Markdown은 글쓰기를 콘텐츠 자체로 되돌려 놓는다."
> -- John Gruber
참고: [CommonMark Spec](https://commonmark.org)자주 묻는 질문
어떤 Markdown 사양을 지원하나요?
대부분의 빌드는 CommonMark에 GitHub Flavored Markdown 확장(테이블, 취소선, 체크리스트, 언어를 지정한 펜스 코드 블록)을 추가해 지원합니다. 일부는 $math$ 수식을 위한 MathJax/KaTeX와 다이어그램용 Mermaid도 포함합니다. 사용 가능한 기능은 툴바에서 확인하세요.
문서가 업로드되나요?
아니요. Markdown 파싱과 렌더링은 보통 markdown-it이나 remark 같은 JS 라이브러리로 브라우저에서 처리됩니다. 작성 중인 문서는 기기를 떠나지 않습니다.
실시간 미리보기는 어떻게 동작하나요?
입력하는 동안 소스 패널의 내용을 파싱해 미리보기 패널에 HTML로 렌더링합니다. 동기 스크롤은 두 패널의 단락 위치를 맞춰 함께 움직입니다. 대부분의 빌드는 전체 화면 모드와 좌우 분할 토글도 지원합니다.
문서를 내보낼 수 있나요?
네. .md(원본 소스), HTML(렌더링된 결과로 웹페이지에 그대로 삽입 가능), PDF(브라우저의 인쇄 엔진을 통한 출력)로 저장할 수 있습니다. PDF는 제목, 목록, 코드 블록, 삽입된 이미지를 그대로 유지합니다. 픽셀 단위로 정밀한 PDF가 필요하다면 HTML을 워드프로세서에 붙여넣어 사용하세요.
탭을 닫아도 작성 중인 문서가 저장되나요?
대부분의 빌드는 localStorage에 자동 저장되므로, 같은 브라우저에서 다시 열면 내용이 복원됩니다. 시크릿 창을 닫거나 사이트 데이터를 지우면 사라집니다. 영구 저장이 필요하다면 .md 파일로 주기적으로 내보내 파일 시스템이나 git 저장소에 보관하세요.
이미지를 붙여넣으면 업로드되나요?
일부 에디터는 붙여넣은 이미지를 인라인 base64로 저장합니다(markdown 소스에서 보입니다). 다른 에디터는 이미지 호스팅에 업로드하기도 하니 페이지의 동작을 확인하세요. 프라이버시가 중요하다면 이미지를 먼저 파일 시스템에 저장한 뒤 상대 경로로 참조하는 것이 좋습니다.
표, 수식, 다이어그램을 삽입할 수 있나요?
GitHub Flavored Markdown의 표(| col1 | col2 |)는 어디서나 동작합니다. 수식 블록($x^2$)과 Mermaid 다이어그램(```mermaid)은 별도 지원이 필요하므로 툴바에 버튼이 있는지 확인하세요. 지원하는 환경에서는 미리보기에서 실시간으로 렌더링됩니다.