Markdown 편집기｜실시간 미리보기

Markdown 편집기란?

Markdown 편집기는 입력하는 동안 Markdown의 실시간 미리보기를 렌더링하는 무료 온라인 작성 환경입니다. 편집기와 미리보기가 나란히 표시됩니다. 왼쪽에서 입력하면 오른쪽에 서식이 적용된 결과물이 새로고침 없이 즉시 나타납니다. 제목과 굵은 텍스트부터 펜스 코드 블록, 표, 인용구까지 모든 구문을 처리합니다.

이 도구는 README, 기술 문서, 블로그 초안, 릴리스 노트 등 Markdown을 작성 형식으로 사용하는 모든 곳에서 활용하는 개발자를 위해 만들어졌습니다. 저장소에 변경사항을 푸시하고 미리보기 렌더링을 기다리거나, 로컬 편집기 플러그인을 설치할 필요 없이 브라우저에서 정확한 렌더링 미리보기를 바로 확인할 수 있습니다. 작업이 완료되면 버전 관리용 .md 파일이나 웹 페이지로 바로 사용할 수 있는 완전한 스타일의 .html 파일로 내보낼 수 있습니다. 계정, 서버 업로드, 설정이 필요 없습니다.

주요 기능

실시간 Markdown 미리보기 — @uiw/react-md-editor로 구동되며, 라이브러리에 포함된 동일한 Markdown 파싱을 사용해 실시간으로 미리보기를 렌더링합니다. 문자 입력을 멈추는 순간 미리보기에 변경사항이 반영됩니다.
구문 강조 — 펜스 코드 블록( `javascript , `python 등)은 미리보기 패널에서 구문 색상이 적용된 출력으로 렌더링됩니다. 편집기의 원시 Markdown 보기도 제목, 링크, 굵은 텍스트, 코드 스팬을 구분하기 위해 구문 색상을 적용합니다.
HTML로 내보내기 — "Download HTML"은 본문 폰트, 코드 블록, 인용구, 표를 포함하는 임베드된 CSS 스타일이 있는 완전한 <!DOCTYPE html> 문서를 생성합니다. document.html로 다운로드되며 외부 의존성 없이 모든 브라우저에서 정상적으로 열립니다.
.md 파일로 다운로드 — "Download MD"는 원시 Markdown 소스를 document.md로 저장합니다. 저장소에 커밋하거나 티켓에 첨부할 준비가 된 상태입니다.
Markdown 복사 — GitHub, GitLab, Confluence, Notion 또는 Markdown을 지원하는 입력 필드에 붙여넣기 위해 원시 Markdown 텍스트를 클립보드에 복사합니다.
HTML 복사 — 미리보기 패널에서 렌더링된 내부 HTML을 복사합니다. HTML을 허용하는 리치 텍스트 편집기에 서식이 적용된 콘텐츠를 붙여넣을 때 유용합니다.
일반 서식 도구모음 — @uiw/react-md-editor 도구모음은 굵게, 기울임꼴, 제목, 목록, 링크, 이미지, 코드 등의 버튼을 제공합니다. 키보드 단축키를 외울 필요가 없습니다.
빠른 참조 패널 — 편집기 아래의 구문 치트시트는 가장 많이 사용되는 9가지 Markdown 구조를 다룹니다: 제목, 굵게, 기울임꼴, 링크, 이미지, 인라인 코드, 목록, 인용구, 펜스 코드 블록.

Markdown 편집기 사용 방법

1단계: 작성 시작 또는 콘텐츠 불러오기

페이지가 로드되면 편집기에는 제목, 굵은/기울임꼴 텍스트, 순서 없는 목록, 펜스 JavaScript 코드 블록, 표, 인용구, 링크를 보여주는 샘플 문서가 포함되어 있습니다. 오른쪽 미리보기 패널에는 해당 샘플의 렌더링 결과가 표시됩니다.

작업 표시줄의 "Clear" 버튼을 클릭하거나 전체 선택 후 입력을 시작해 편집기를 지울 수 있습니다. 편집기 높이는 600px로 고정되어 있으며 긴 문서를 위한 수직 스크롤이 활성화되어 있습니다.

2단계: 도구모음이나 키보드로 Markdown 작성

편집기 상단의 도구모음에는 가장 일반적인 서식 작업에 대한 버튼이 있습니다. 선택한 텍스트를 굵은 텍스트용 이중 별표로 감싸려면 B를 클릭하고, 기울임꼴용 단일 별표로 감싸려면 I를 클릭합니다. 제목 버튼은 #, ##, ### 접두사를 삽입합니다. 코드 펜스 버튼은 언어 플레이스홀더가 있는 삼중 백틱 블록을 삽입합니다.

구문 강조가 있는 펜스 코드 블록의 경우 다음과 같이 작성합니다:

def greet(name: str) -> str: return f"Hello, {name}!"

print(greet("world"))

미리보기는 이를 색상이 적용된 코드 블록으로 렌더링합니다. 페이지 하단의 빠른 참조 패널에 9가지 구문 패턴이 한눈에 표시됩니다.

3단계: 미리보기 패널에서 렌더링 결과 확인

오른쪽 패널은 입력하는 동안 업데이트됩니다. 전체 문서를 검토하기 위해 편집기와 독립적으로 스크롤할 수 있습니다. data-color-mode="auto" 속성은 편집기와 미리보기가 운영 체제의 라이트 또는 다크 모드 설정에 자동으로 적응함을 의미합니다.

확인해야 할 사항:

표가 테두리와 교차 헤더 스타일로 렌더링되는지
링크가 클릭 가능한지(렌더링된 HTML에서 href 속성 사용)
코드 블록에 지정한 언어의 올바른 구문 색상이 있는지
이미지가 표시되는지(공개적으로 접근 가능한 이미지 URL을 참조한 경우)

4단계: 문서 내보내기

사용 사례에 맞는 내보내기를 선택하세요:

Markdown 복사 — GitHub PR 설명, Jira 댓글, Notion 페이지 또는 Markdown 필드에 원시 소스를 붙여넣기
HTML 복사 — HTML 입력을 허용하는 리치 텍스트 편집기에 렌더링된 마크업을 붙여넣기
MD 다운로드 — document.md를 다운로드 폴더에 저장
HTML 다운로드 — 임베드된 스타일이 있는 document.html을 저장(정적 웹 페이지로 호스팅 가능)

내보낸 HTML 문서에는 합리적인 기본값이 설정된 <style> 블록이 포함됩니다: 시스템 폰트 스택, max-width: 800px 중앙 정렬 레이아웃, 코드 배경 #f4f4f4, 인용구 왼쪽 테두리, 테두리가 있는 전체 너비 표.

5단계: 기록으로 이전 작업 복원

프리미엄 지원자는 편집기 아래의 기록 패널을 사용하여 이전에 자동 저장된 문서를 복원할 수 있습니다. 비프리미엄 사용자는 편집기 콘텐츠가 세션 간에 지속되지 않으므로, 페이지를 떠나기 전에 작업을 복사하거나 다운로드해야 합니다.

실제 사용 예시

프로젝트 README 작성

새 CLI 도구의 README를 만드는 개발자:

# my-cli

A command-line tool for batch file renaming.

## Installation

npm install -g my-cli


## Usage

my-cli --pattern "*.log" --prefix "archive-"


## Options

| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |

실시간 미리보기에는 열 헤더가 있는 표, 구문 강조가 적용된 bash 코드 블록, 제목 계층 구조가 표시됩니다. "Download MD"를 클릭하여 파일을 프로젝트 루트에 직접 저장합니다.

문서에서 스타일이 적용된 HTML 페이지 만들기

API 엔드포인트를 설명하는 Markdown 문서를 가진 기술 작가. 콘텐츠를 붙여넣고 미리보기를 확인한 후 "Download HTML"을 클릭합니다. 생성된 document.html에는 임베드된 CSS가 포함되어 있어 브라우저에서 열거나 이메일 첨부파일로 전송해도 올바르게 렌더링됩니다. 외부 스타일시트가 필요 없습니다.

릴리스 변경 로그 초안 작성

버전 2.4.0 변경 로그를 작성하는 개발자는 편집기를 사용하여 "Breaking Changes", "New Features", "Bug Fixes"에 대한 ## 제목으로 문서를 구성하고 각 제목 아래에 순서 없는 목록을 사용합니다. "Copy HTML"을 클릭하여 리치 HTML 입력을 허용하는 회사의 릴리스 관리 도구에 서식이 적용된 콘텐츠를 직접 붙여넣습니다.

팁과 모범 사례

도구모음은 선택된 텍스트 주위에 서식을 삽입합니다. 단어를 선택하고 굵게 버튼을 클릭하면 선택 영역이 단어가 됩니다. 선택된 것이 없으면 버튼은 커서 위치에 bold text와 같은 플레이스홀더를 삽입합니다.

펜스 코드 블록에 구문 강조를 적용하려면 언어 식별자가 필요합니다. 빈 ` 블록은 일반 고정폭 텍스트로 렌더링됩니다. 색상 출력을 얻으려면 여는 백틱 바로 뒤에 언어 이름을 추가하세요( `typescript , `sql , `yaml ).

HTML 복사는 실시간 미리보기의 내부 HTML을 캡처합니다. handleCopyHtml 함수는 document.querySelector('.w-md-editor-preview')?.innerHTML을 읽습니다. 미리보기가 아직 렌더링되지 않은 경우(예: 페이지 로드 직후) 복사된 HTML이 비어 있을 수 있습니다. "Copy HTML"을 클릭하기 전에 미리보기가 채워질 때까지 기다리세요.

다운로드된 HTML은 자체 완결적입니다. document.html 파일에는 필요한 모든 스타일이 인라인으로 포함되어 있습니다. 추가 자산 없이 이메일로 전송하거나, 정적 파일 서버에 호스팅하거나, 티켓에 첨부할 수 있습니다.

지우기는 확인을 요청하지 않습니다. "Clear"를 클릭하면 편집기가 즉시 비워집니다. 저장하지 않은 작업이 있으면 먼저 다운로드하거나 복사하세요.

일반적인 문제 및 해결 방법

"편집기에 로딩 스피너가 표시됩니다." @uiw/react-md-editor 컴포넌트는 서버 사이드 렌더링 문제를 피하기 위해 지연 로드됩니다. 편집기 번들을 로드하는 동안 잠시 스피너가 표시됩니다. 정상적인 연결에서는 1~2초 내에 사라집니다.

"HTML 복사에서 빈 출력이 생성되었습니다." 함수는 미리보기 컨테이너의 innerHTML을 읽습니다. 미리보기가 아직 렌더링되지 않은 경우(매우 느린 연결에서는 드물게 발생) 빈 문자열을 반환할 수 있습니다. 미리보기 패널을 스크롤하여 렌더링을 트리거한 후 다시 시도하세요.

"표가 렌더링되지 않습니다." Markdown 표는 헤더 행과 데이터 행 사이에 대시의 구분 행이 필요합니다: |------|------|. 헤더 행의 각 셀에 해당하는 구분 셀이 있는지 확인하세요. 앞뒤 파이프 문자(|)는 선택사항이지만 일관성을 위해 권장됩니다.

"펜스 코드에 구문 강조가 없습니다." 언어 식별자가 여는 백틱과 같은 줄에 공백 없이 있는지 확인하세요: `javascript 이고 ` javascript 가 아닙니다. 언어 이름이 소문자이고 올바르게 철자되어 있는지도 확인하세요(python, Python 아님).

"macOS에서 다운로드한 MD 파일에 확장자가 없습니다." macOS는 표준 유형으로 인식하지 못하는 파일의 .md 확장자를 제거하는 경우가 있습니다. 다운로드 후 파일 이름을 변경하여 .md를 추가하거나, 다운로드 저장 위치를 항상 묻도록 브라우저를 설정하세요.

개인정보 보호 및 보안

모든 Markdown 렌더링, HTML 변환, 파일 내보내기는 브라우저 내에서 완전히 이루어집니다. 입력한 콘텐츠는 Glyph Widgets 서버나 제3자에게 전송되지 않습니다. 페이지가 로드된 후에는 오프라인으로도 작동합니다. 이로 인해 내부 문서, 독점 기술 사양, 기밀 프로젝트 세부 정보가 포함된 초안 작성에 안전하게 사용할 수 있습니다.

자주 묻는 질문

Markdown 편집기는 무료인가요? 예, 사용 제한 없이 완전히 무료입니다. 어떠한 형태의 등록, 구독, 결제도 필요 없습니다.

오프라인에서 작동하나요? 페이지가 로드되고 편집기 번들이 초기화되면 모든 작성, 미리보기, 내보내기 기능이 네트워크 연결 없이 작동합니다.

데이터가 안전한가요? 입력하는 모든 내용은 브라우저의 메모리에 남습니다. 서버로 전송되는 콘텐츠가 없습니다. 기밀 문서, 내부 API 참조 또는 개인 메모를 안전하게 작성할 수 있습니다.

어떤 Markdown 방언을 지원하나요? @uiw/react-md-editor를 사용하며 remark를 기반으로 CommonMark 구문과 표, 작업 목록, 언어 식별자가 있는 펜스 코드 블록을 포함한 GitHub Flavored Markdown 확장을 지원합니다.

이미지를 삽입할 수 있나요? 예, 표준 Markdown 이미지 구문을 사용합니다: !alt text. 이미지는 공개적으로 접근 가능해야 합니다. 브라우저 컨텍스트에서는 로컬 파일 경로가 작동하지 않습니다. 이미지는 실시간 미리보기에 즉시 렌더링됩니다.

펜스 코드 블록에서 지원하는 언어는? 기본 remark/highlight.js 파이프라인이 지원하는 모든 언어에 대해 구문 강조를 렌더링합니다. JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON 등 일반적인 언어는 여는 펜스에 언어 식별자를 추가하면 모두 작동합니다.

다운로드한 HTML 파일에 인터넷 연결이 필요한가요? 아니요. 내보낸 document.html에는 모든 스타일이 <style> 블록에 인라인으로 포함되어 있습니다. 외부 CSS 프레임워크, CDN 리소스, 폰트가 로드되지 않습니다. 오프라인에서도 동일하게 렌더링됩니다.

키보드 단축키를 사용할 수 있나요? @uiw/react-md-editor 컴포넌트는 플랫폼에 따라 표준 텍스트 편집 단축키(Ctrl/Cmd+B로 굵게, Ctrl/Cmd+I로 기울임꼴)를 지원합니다. 운영 체제에서 단축키가 다르게 작동하는 경우 도구모음 버튼이 서식을 삽입하는 가장 안정적인 방법입니다.

작업 목록은 어떻게 만드나요? 미선택 항목에는 - [ ]를, 선택된 항목에는 - [x]를 사용합니다:

- [x] Write first draft
- [ ] Review with team
- [ ] Publish

편집기를 지우면 콘텐츠는 어떻게 되나요? 편집기가 즉시 빈 문자열로 재설정됩니다. 이전에 기록 패널(프리미엄 기능)을 사용했거나 콘텐츠를 복사/다운로드하지 않은 경우 도구 자체에서 복원할 수 없습니다.

Markdown 편집기란?

주요 기능

실시간 Markdown 미리보기 — @uiw/react-md-editor로 구동되며, 라이브러리에 포함된 동일한 Markdown 파싱을 사용해 실시간으로 미리보기를 렌더링합니다. 문자 입력을 멈추는 순간 미리보기에 변경사항이 반영됩니다.
구문 강조 — 펜스 코드 블록( `javascript , `python 등)은 미리보기 패널에서 구문 색상이 적용된 출력으로 렌더링됩니다. 편집기의 원시 Markdown 보기도 제목, 링크, 굵은 텍스트, 코드 스팬을 구분하기 위해 구문 색상을 적용합니다.
HTML로 내보내기 — "Download HTML"은 본문 폰트, 코드 블록, 인용구, 표를 포함하는 임베드된 CSS 스타일이 있는 완전한 <!DOCTYPE html> 문서를 생성합니다. document.html로 다운로드되며 외부 의존성 없이 모든 브라우저에서 정상적으로 열립니다.
.md 파일로 다운로드 — "Download MD"는 원시 Markdown 소스를 document.md로 저장합니다. 저장소에 커밋하거나 티켓에 첨부할 준비가 된 상태입니다.
Markdown 복사 — GitHub, GitLab, Confluence, Notion 또는 Markdown을 지원하는 입력 필드에 붙여넣기 위해 원시 Markdown 텍스트를 클립보드에 복사합니다.
HTML 복사 — 미리보기 패널에서 렌더링된 내부 HTML을 복사합니다. HTML을 허용하는 리치 텍스트 편집기에 서식이 적용된 콘텐츠를 붙여넣을 때 유용합니다.
일반 서식 도구모음 — @uiw/react-md-editor 도구모음은 굵게, 기울임꼴, 제목, 목록, 링크, 이미지, 코드 등의 버튼을 제공합니다. 키보드 단축키를 외울 필요가 없습니다.
빠른 참조 패널 — 편집기 아래의 구문 치트시트는 가장 많이 사용되는 9가지 Markdown 구조를 다룹니다: 제목, 굵게, 기울임꼴, 링크, 이미지, 인라인 코드, 목록, 인용구, 펜스 코드 블록.

Markdown 편집기 사용 방법

1단계: 작성 시작 또는 콘텐츠 불러오기

2단계: 도구모음이나 키보드로 Markdown 작성

구문 강조가 있는 펜스 코드 블록의 경우 다음과 같이 작성합니다:

def greet(name: str) -> str: return f"Hello, {name}!"

print(greet("world"))

미리보기는 이를 색상이 적용된 코드 블록으로 렌더링합니다. 페이지 하단의 빠른 참조 패널에 9가지 구문 패턴이 한눈에 표시됩니다.

3단계: 미리보기 패널에서 렌더링 결과 확인

확인해야 할 사항:

표가 테두리와 교차 헤더 스타일로 렌더링되는지
링크가 클릭 가능한지(렌더링된 HTML에서 href 속성 사용)
코드 블록에 지정한 언어의 올바른 구문 색상이 있는지
이미지가 표시되는지(공개적으로 접근 가능한 이미지 URL을 참조한 경우)

4단계: 문서 내보내기

사용 사례에 맞는 내보내기를 선택하세요:

Markdown 복사 — GitHub PR 설명, Jira 댓글, Notion 페이지 또는 Markdown 필드에 원시 소스를 붙여넣기
HTML 복사 — HTML 입력을 허용하는 리치 텍스트 편집기에 렌더링된 마크업을 붙여넣기
MD 다운로드 — document.md를 다운로드 폴더에 저장
HTML 다운로드 — 임베드된 스타일이 있는 document.html을 저장(정적 웹 페이지로 호스팅 가능)

5단계: 기록으로 이전 작업 복원

실제 사용 예시

프로젝트 README 작성

새 CLI 도구의 README를 만드는 개발자:

# my-cli

A command-line tool for batch file renaming.

## Installation

npm install -g my-cli


## Usage

my-cli --pattern "*.log" --prefix "archive-"


## Options

| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |

문서에서 스타일이 적용된 HTML 페이지 만들기

릴리스 변경 로그 초안 작성

팁과 모범 사례

지우기는 확인을 요청하지 않습니다. "Clear"를 클릭하면 편집기가 즉시 비워집니다. 저장하지 않은 작업이 있으면 먼저 다운로드하거나 복사하세요.

일반적인 문제 및 해결 방법

개인정보 보호 및 보안

자주 묻는 질문

Markdown 편집기는 무료인가요? 예, 사용 제한 없이 완전히 무료입니다. 어떠한 형태의 등록, 구독, 결제도 필요 없습니다.

오프라인에서 작동하나요? 페이지가 로드되고 편집기 번들이 초기화되면 모든 작성, 미리보기, 내보내기 기능이 네트워크 연결 없이 작동합니다.

작업 목록은 어떻게 만드나요? 미선택 항목에는 - [ ]를, 선택된 항목에는 - [x]를 사용합니다:

- [x] Write first draft
- [ ] Review with team
- [ ] Publish

Markdown 편집기｜실시간 미리보기

Markdown 편집기란?

주요 기능

Markdown 편집기 사용 방법

1단계: 작성 시작 또는 콘텐츠 불러오기

2단계: 도구모음이나 키보드로 Markdown 작성

3단계: 미리보기 패널에서 렌더링 결과 확인

4단계: 문서 내보내기

5단계: 기록으로 이전 작업 복원

실제 사용 예시

프로젝트 README 작성

문서에서 스타일이 적용된 HTML 페이지 만들기

릴리스 변경 로그 초안 작성

팁과 모범 사례

일반적인 문제 및 해결 방법

개인정보 보호 및 보안

자주 묻는 질문

관련 도구

계속 읽기

Markdown 편집기｜실시간 미리보기

Markdown 편집기란?

주요 기능

Markdown 편집기 사용 방법

1단계: 작성 시작 또는 콘텐츠 불러오기

2단계: 도구모음이나 키보드로 Markdown 작성

3단계: 미리보기 패널에서 렌더링 결과 확인

4단계: 문서 내보내기

5단계: 기록으로 이전 작업 복원

실제 사용 예시

프로젝트 README 작성

문서에서 스타일이 적용된 HTML 페이지 만들기

릴리스 변경 로그 초안 작성

팁과 모범 사례

일반적인 문제 및 해결 방법

개인정보 보호 및 보안

자주 묻는 질문

관련 도구

계속 읽기