마크다운 에디터

Markdown 에디터란?

Markdown 에디터는 좌우로 나뉜 작성 환경입니다. 한쪽에 일반 텍스트로 Markdown을 입력하면, 다른 쪽에 렌더링된 미리보기가 실시간으로 갱신됩니다. GitHub의 README, 각종 문서 사이트, 정적 사이트 생성기, 블로그 플랫폼, Obsidian 같은 노트 앱, 그리고 Discord나 Slack 같은 메신저까지 — Markdown은 이런 곳들의 텍스트 포맷을 책임지고 있습니다.

Markdown의 핵심은 "평문 상태에서도 읽기 쉽고, 렌더링하면 구조화된 HTML이 된다"는 점입니다. 서식 툴바를 만지작거릴 시간에 글 자체에 집중할 수 있죠. 기술 문서를 쓰는 사람과 개발자들이 Markdown을 선호하는 이유가 여기에 있습니다.

요즘 대부분의 Markdown 에디터는 *GitHub-Flavored Markdown*(GFM)을 지원합니다. 기본 CommonMark 스펙에 표, 체크리스트, 언어 힌트가 붙는 코드 펜스, 자동 링크, 취소선 같은 것들이 더해진 방언입니다.

Markdown 에디터를 쓰면서 익히게 되는 것들

• Markdown은 평문입니다. 에디터에서도 그대로 잘 읽히고, 동시에 HTML로 렌더링됩니다. 툴바도, 숨겨진 서식도 없습니다.
• 제목, 목록, 링크, 강조 — 이 네 가지로 일상 글쓰기의 90%가 해결됩니다. 표와 코드 펜스가 나머지 10% 대부분을 채워줍니다.
• 코드 펜스에 언어 힌트( js , python )를 붙이면 많은 렌더러에서 구문 강조가 자동으로 적용됩니다.

Markdown 에디터 사용법, 한 단계씩

1. 1

   왼쪽 창에 입력 시작하기

   제목은 #, 강조는 *나 _, 목록은 -로 시작합니다. 입력하는 즉시 오른쪽 창이 갱신됩니다.

2. 2

   구조 잡기

   제목, 코드 펜스, 표를 적절히 넣어 문서 흐름을 정리하세요. 대부분의 에디터는 자주 쓰는 서식에 단축키(Ctrl+B, Ctrl+I)를 지원합니다.

3. 3

   렌더링 결과 확인

   미리보기와 원본 소스를 나란히 비교해 보세요. 결과가 이상하게 나온다면 십중팔구 빈 줄이 빠졌거나 코드 펜스가 짝이 맞지 않은 경우입니다.

4. 4

   복사하거나 내보내기

   Markdown 원본을 그대로 복사해 README에 붙여 넣거나, 렌더링된 HTML을 복사해 Markdown을 지원하지 않는 이메일·CMS·기타 도구에 붙여 넣으면 됩니다.

Markdown 문법 치트시트

매일 쓰게 되는 Markdown의 80%만 정리했습니다. 그 외에는 검색 한 번이면 충분해요. 스펙은 CommonMark와 GitHub-Flavored Markdown을 참고하세요.

직접 따라 해볼 만한 Markdown 예제

# Project Name
A short description in one or two sentences.
## Install
```bashnpm install project-name```
## Quick start
- Step 1- Step 2- Step 3

| Feature | Free | Pro ||---------|:----:|:---:|| Editor  |  ✓   |  ✓  || Export  |      |  ✓  |

- [x] Draft the post- [x] Add screenshots- [ ] Publish

Markdown에서 자주 하는 실수

• 목록, 표, 코드 펜스 앞뒤에 빈 줄을 빼먹는 경우. 대부분의 렌더러는 새 블록을 시작하려면 빈 줄이 있어야 합니다.
• 목록 안에서 탭과 스페이스를 섞어 쓰기. 일부 렌더러는 아무 경고 없이 들여쓰기를 깨뜨립니다.
• 코드 펜스 안에 HTML을 넣고 렌더링되길 기대하기. 코드 펜스는 *있는 그대로* 보여주는 게 본질입니다.

Markdown 에디터 자주 묻는 질문