마크다운 에디터/미리보기
실시간 렌더링과 구문 강조로 마크다운 작성 및 미리보기
사용 방법
편집 영역에 마크다운을 입력하거나 붙여넣습니다. 처음 열면 문법을 맥락 속에서 볼 수 있도록 짧은 예시 문서가 이미 들어 있으며, 언제든 자신의 내용으로 바꿀 수 있습니다. 줄바꿈, 들여쓰기, 빈 줄은 입력한 그대로 유지됩니다. 마크다운은 빈 줄로 문단을 구분하고 들여쓰기로 목록을 중첩하기 때문에 이 부분이 중요합니다.
입력하는 동안 미리보기가 갱신되는 것을 확인합니다. 렌더링 버튼을 누를 필요도, 기다릴 시간도 없습니다. 키를 누를 때마다 즉시 다시 렌더링되므로 표가 깨졌거나 코드 블록을 닫지 않은 실수가 게시 후가 아니라 만드는 순간에 드러납니다.
작업 내용에 맞게 화면 모드를 바꿉니다. 분할 보기는 편집 영역과 미리보기를 나란히 보여주며 실제 작성 중에 가장 적합합니다. 에디터만 보기는 전체 폭을 본문에 할당하므로 폭이 넓은 표나 긴 코드 블록을 다룰 때 편합니다. 미리보기만 보기는 결과만 표시하므로 최종 검토에 적합합니다.
통계 영역으로 분량을 확인합니다. 글자 수, 단어 수, 줄 수, 문단 수가 계속 집계됩니다. 패키지 설명, 풀 리퀘스트 요약처럼 길이 제한이 있는 글을 쓸 때, 또는 문서의 각 절을 읽기 쉬운 길이로 유지하려 할 때 유용합니다.
마크다운 복사를 누르면 원본 소스가 클립보드에 담깁니다. GitHub, GitLab, 정적 사이트 생성기 등 마크다운을 받는 곳에 붙여넣을 버전이며, 나중에 수정할 원본으로 보관해야 하는 버전입니다.
HTML 복사를 누르면 렌더링된 마크업이 대신 복사됩니다. CMS의 리치 텍스트 필드, 이메일 템플릿처럼 마크다운이 아니라 HTML을 받는 곳에 붙여넣을 때 사용합니다.
다운로드를 누르면 작업 내용이 document.md 파일로 저장됩니다. 이 에디터는 방문 사이에 원고를 보관하지 않으므로, 다시 돌아와 이어서 작업할 문서라면 다운로드가 유일한 보관 방법입니다. 중요한 내용은 탭을 닫기 전에 반드시 내려받으세요.
예시 불러오기는 특정 문법을 어떻게 쓰는지 확인하고 싶을 때 예시 문서를 다시 가져오고, 지우기는 편집 영역을 비워 새로 시작합니다. 둘 다 현재 내용을 대체하므로 필요한 내용은 먼저 내려받으세요.
프로 팁
- 작성 내용은 방문 사이에 저장되지 않습니다. 자동 저장도, 브라우저 저장소 사용도 없으므로 새로고침하거나 탭을 닫으면 원고가 사라지고 복구할 방법이 없습니다. 다시 입력하고 싶지 않은 내용을 썼다면 그때마다 .md 파일로 내려받으세요.
- 코드 블록은 고정폭 글꼴로 형식에 맞게 렌더링되지만 여기서는 색상 강조가 적용되지 않습니다. ```javascript처럼 언어를 지정한 코드 블록은 GitHub이나 자체 강조 기능이 있는 사이트에 붙여넣으면 정상적으로 색상이 적용됩니다.
- 표는 머리글 행 바로 아래에 하이픈으로 된 구분 행이 있어야 하며, 파이프 문자를 세로로 맞출 필요는 없습니다. 표가 하나의 문단처럼 렌더링된다면 거의 항상 이 구분 행이 빠진 것입니다.
- 표, 목록, 코드 블록 앞뒤에는 빈 줄을 두세요. 마크다운은 앞 문단에 붙어 있는 블록을 그 문단의 일부로 취급합니다. 목록이 한 줄로 이어져 나오는 가장 흔한 원인이 바로 이것입니다.
- 체크박스 목록은 선택되지 않은 항목은 - [ ], 선택된 항목은 - [x] 형태로 쓰며 대괄호 안에 공백이 있어야 합니다. GitHub과 GitLab에서 실제 체크박스로 렌더링되므로 리뷰 체크리스트에 쓰기 좋습니다.
- HTML 태그를 그대로 넣으면 통과되어 렌더링되므로 마크다운에 해당 문법이 없을 때 활용할 수 있습니다. 직접 작성한 내용에만 사용하고, 많은 플랫폼이 보안상 마크다운 안의 HTML을 제거한다는 점을 기억하세요. 의존하기 전에 대상 플랫폼에서 확인해야 합니다.
- 마크다운 복사와 HTML 복사는 서로 대체할 수 없습니다. 마크다운을 원본으로 보관하고 HTML은 한 방향 내보내기로만 취급하세요. HTML을 나중에 깔끔한 마크다운으로 되돌리는 작업은 훨씬 번거롭습니다.
사용 사례
README 파일 작성과 수정
제목, 설치 안내, 코드 예시, 기능 표가 들어간 프로젝트 README를 작성하고 커밋 전에 제대로 렌더링되는지 확인합니다.
기술 문서와 위키
마크다운을 지원하는 시스템을 위해 제목 계층, 중첩된 절차, 코드 예시가 포함된 문서 페이지를 작성합니다.
풀 리퀘스트와 이슈 설명
체크리스트, 코드 조각, 재현 절차가 들어간 긴 풀 리퀘스트 설명이나 버그 리포트를 이슈 트래커에 붙여넣기 전에 작성합니다.
정적 사이트 생성기용 블로그 글
Jekyll, Hugo, Astro, Next.js 등 마크다운 파일을 읽는 생성기용 글을 작성하고, 프론트 매터를 붙이기 전에 구조를 확인합니다.
마크다운 문법 익히기
각 문법이 어떤 결과를 만드는지 즉시 확인할 수 있으므로, 문법 표를 읽고 추측하는 것보다 빠릅니다.
마크다운을 HTML로 변환
마크다운 문서를 CMS 필드, 이메일 템플릿, 마크다운을 지원하지 않는 페이지 영역에 넣을 HTML로 변환합니다.
자주 묻는 질문
탭을 닫거나 새로고침하면 작성한 문서가 저장되나요?
저장되지 않습니다. 에디터는 입력한 내용을 페이지 메모리에만 보관하며 브라우저 저장소나 서버를 사용하지 않습니다. 따라서 새로고침하거나 탭을 닫거나 다른 페이지로 이동하면 원고가 사라지고 복구할 방법이 없습니다. 보관하려는 내용이라면 떠나기 전에 다운로드를 눌러 .md 파일로 저장하세요. 이는 의도된 설계상의 절충입니다. 아무것도 저장되지 않기 때문에 내용을 어디에 맡길 필요도 없지만, 그만큼 저장은 사용자 책임이 됩니다.
어떤 마크다운 문법을 지원하나요?
GitHub Flavored Markdown을 렌더링합니다. 표준 마크다운에 더해 대부분의 사용자가 기대하는 확장 문법이 포함됩니다. 표, 체크박스 목록, 물결표 두 개로 만드는 취소선, URL 자동 링크 변환이 여기에 해당합니다. 제목 6단계, 굵게, 기울임, 중첩이 가능한 순서 있는/없는 목록, 인용, 수평선, 인라인 코드, 코드 블록 같은 표준 요소도 모두 동작합니다. 마크다운 안에 넣은 HTML 태그도 그대로 통과되어 렌더링됩니다.
코드 블록에 색상 강조가 왜 적용되지 않나요?
이 미리보기는 코드 블록을 형식에 맞는 고정폭 블록으로 렌더링하지만 문법 색상은 적용하지 않습니다. ```python처럼 코드 블록 시작 부분에 적은 언어 이름은 소스에 그대로 보존되므로, GitHub이나 GitLab, 또는 자체 강조 기능이 있는 사이트에 붙여넣으면 정상적으로 색상이 적용됩니다. 언어 표기는 계속 쓰시면 됩니다. 이 미리보기에서만 시각적으로 드러나지 않을 뿐입니다.
표가 한 줄의 텍스트로 렌더링되는 이유는 무엇인가요?
마크다운 표는 머리글 행 바로 아래에 |---|---| 같은 하이픈 구분 행이 있어야 하는데, 보통 이 행이 빠진 것이 원인입니다. 다른 흔한 원인은 표와 위 문단 사이에 빈 줄이 없는 경우입니다. 이때 마크다운은 표 전체를 그 문단의 연장으로 취급합니다. 파이프 문자를 세로로 맞출 필요는 없고 줄 끝의 파이프도 선택 사항이므로, 그 둘은 원인이 아닙니다.
마크다운 복사와 HTML 복사는 어떻게 다른가요?
마크다운 복사는 입력한 그대로의 원본 소스를 제공합니다. GitHub, 저장소 파일, 정적 사이트 생성기에 붙여넣을 버전이며 나중에 수정할 원본으로 보관해야 하는 버전입니다. HTML 복사는 렌더링된 마크업을 제공하며 CMS 리치 텍스트 필드나 이메일 템플릿처럼 HTML만 받는 곳에 사용합니다. HTML은 한 방향 내보내기로만 취급하세요. 나중에 깔끔한 마크다운으로 되돌리는 것은 원본을 보관하는 것보다 훨씬 번거롭습니다.
문서 길이에 제한이 있나요?
글자 수나 단어 수에 정해진 제한은 없습니다. 다만 키를 누를 때마다 미리보기가 다시 렌더링되고 모든 처리가 브라우저에서 이루어지므로, 수천 줄에 이르는 아주 긴 문서에서는 특히 오래된 기기에서 반응이 느려질 수 있습니다. 긴 문서에서 입력이 밀리는 느낌이 든다면 에디터만 보기로 바꾸면 미리보기가 다시 렌더링되지 않아 속도가 회복됩니다.
작성한 내용이 어딘가로 전송되나요?
전송되지 않습니다. 편집과 렌더링 모두 브라우저의 자바스크립트로 처리되며 입력한 내용이 서버로 전송되는 일은 없습니다. 따라서 사내 문서나 아직 공개되지 않은 릴리스 노트처럼 온라인 서비스에 붙여넣기 꺼려지는 내용에도 안심하고 쓸 수 있습니다. 대신 앞에서 설명한 절충이 따릅니다. 아무것도 저장되지 않으므로 탭을 닫으면 내용도 남지 않습니다.
휴대폰이나 태블릿에서도 사용할 수 있나요?
사용할 수 있습니다. 화면 크기에 맞춰 레이아웃이 조정되지만, 휴대폰에서는 두 영역이 폭을 나눠 써야 하므로 분할 보기가 좁게 느껴집니다. 모바일에서는 에디터만 보기로 작성하고 결과를 확인할 때 미리보기만 보기로 전환하는 편이 낫습니다. 둘을 동시에 띄워 두려 하기보다 화면 모드 버튼으로 오가는 방식이 편합니다.
이 도구를 사용하는 이유
미리보기 없이 마크다운을 쓰면 제대로 됐는지는 게시한 뒤에야 알 수 있습니다. 실시간 에디터는 그 간격을 없애고, 브라우저에서 처리하기 때문에 에디터 설치나 서비스 가입에 따르는 준비 과정과 보안 문제도 함께 사라집니다.
- 작성 중에 오류를 발견합니다: 깨진 표, 닫히지 않은 코드 블록, 중첩되지 않는 목록이 커밋하고 페이지를 새로 불러온 뒤가 아니라 만드는 순간 미리보기에 드러납니다.
- 설치도 가입도 필요 없습니다: 브라우저 탭에서 바로 열려 즉시 동작하므로, 권한이 없는 컴퓨터에서 작업할 때나 파일 하나만 급히 고쳐야 할 때 실용적입니다.
- 내용이 기기 안에 머무릅니다: 렌더링이 전부 브라우저에서 이루어지므로 사내 문서 초안이나 미공개 노트가 서버로 전송되지 않습니다.
- 두 가지 출력 형식을 모두 제공합니다: 저장소와 정적 사이트용으로는 마크다운 소스를, 마크업만 받는 시스템용으로는 렌더링된 HTML을 복사할 수 있어 별도 변환 도구가 필요하지 않습니다.
- 분량을 즉시 확인합니다: 글자, 단어, 줄, 문단 수가 실시간으로 표시되어 길이 제한이 있는 글을 쓰거나 문서의 각 절을 실제로 읽히는 길이로 유지하는 데 도움이 됩니다.
- 문법을 빠르게 익힐 수 있습니다: 하나를 바꾸고 그 결과를 바로 보는 방식이 문법 표를 보며 익히는 것보다 훨씬 빠릅니다.
- 작업에 맞는 화면 모드를 제공합니다: 초안 작성에는 분할 보기, 폭이 넓은 표와 긴 코드에는 에디터만 보기, 최종 검토에는 미리보기만 보기를 쓸 수 있어 화면이 작업 내용에 맞춰집니다.