Markdown 편집기

Markdown 편집기 소개

이 Markdown 편집기는 Markdown 문서를 작성할 때 편집 화면과 미리보기를 나란히 실시간으로 보여 주는 무료 온라인 도구입니다. Markdown은 문서화, README 파일, 블로그 게시물, 기술 문서 작성, 메모에 널리 쓰이는 경량 마크업 언어입니다. 왼쪽에 Markdown을 작성하면 오른쪽에서 렌더링된 HTML 결과를 바로 확인할 수 있습니다.

편집기에는 제목, 굵게, 기울임, 링크, 이미지, 코드 블록, 목록, 인용문, 가로줄 같은 자주 쓰는 Markdown 문법을 빠르게 삽입할 수 있는 다기능 도구 모음이 있습니다. Markdown 문법을 외우지 않아도 시작할 수 있습니다. 도구 모음 버튼을 클릭하면 커서 위치에 서식이 삽입되고, 원하면 Markdown을 직접 입력해도 됩니다.

편집기는 문서를 업로드하지 않고 로컬에서 Markdown을 파싱합니다. 외부 이미지 URL은 해당 호스트에 요청을 보낼 수 있고, 사이트의 다른 스크립트도 요청을 보낼 수 있습니다. 모든 경우에 대한 개인정보 보호를 보장하지는 않습니다. 편집기는 실시간 미리보기, 글자 수 및 단어 수 세기, Markdown과 HTML 출력 모두의 클립보드 복사, .md 파일로 바로 다운로드를 지원합니다.

주요 기능

• 즉시 렌더링되는 Markdown 편집과 HTML 미리보기를 나란히 표시
• 굵게, 기울임, 제목(H1-H3), 링크, 이미지, 코드 블록, 목록, 인용문, 가로줄 버튼이 있는 전체 도구 모음
• 제목, 강조, 코드, 링크, 이미지, 목록, 인용문, 가로줄을 지원하는 내장 Markdown-HTML 파서
• 편집기 위에 표시되는 실시간 글자 수 및 단어 수
• 클릭 한 번으로 Markdown 원본을 클립보드에 복사
• 웹 페이지나 이메일 편집기에 붙여넣을 수 있도록 렌더링된 HTML을 클립보드에 복사
• 로컬 보관과 버전 관리를 위해 문서를 .md 파일로 다운로드
• 비우기 버튼으로 빈 편집기에서 새로 시작
• 자주 쓰는 Markdown 문법을 한눈에 볼 수 있는 빠른 참조 카드
• 모바일 기기에서는 편집기와 미리보기를 위아래로 쌓는 반응형 레이아웃
• 어떤 조명 환경에서도 편안하게 편집할 수 있는 완전한 다크 모드 지원
• 지원하는 모든 Markdown 기능을 보여 주는 기본 샘플 내용

Markdown 편집기 사용 방법

1. 작성 시작: 편집기를 열면 지원하는 모든 Markdown 기능을 보여 주는 샘플 내용이 로드됩니다. 비우고 새로 시작하거나, 샘플을 수정하며 각 문법이 어떻게 동작하는지 확인해 보세요.
2. 도구 모음 사용: 도구 모음 버튼을 클릭하면 해당 Markdown 문법이 커서 위치에 삽입됩니다. 먼저 텍스트를 선택하면 굵게나 기울임 같은 서식으로 감쌀 수 있습니다.
3. 즉시 미리보기: 입력하는 동안 이 기본 파서가 필터링된 미리보기를 업데이트합니다. 대상 Markdown 렌더러에 따라 결과가 다를 수 있으므로 게시하기 전에 해당 환경에서 서식을 확인하세요.
4. 통계 확인: 편집기 위에서 글자 수와 단어 수가 실시간으로 갱신되어 요구 사항이나 글자 수 제한에 맞게 문서 길이를 관리할 수 있습니다.
5. 복사 또는 다운로드: “MD” 버튼으로 Markdown 원문을, “HTML” 버튼으로 렌더링된 HTML을 복사하거나, “저장” 버튼으로 문서를 .md 파일로 다운로드하세요.

지원하는 Markdown 문법

• 제목: H1은 #, H2는 ##, H3는 ###, H4는 ####을 사용합니다. 제목 수준이 내려갈수록 글자가 점점 작아지고 알맞은 여백이 적용됩니다.
• 굵게와 기울임: 굵게는 **별표 두 개** 또는 __밑줄 두 개__로, 기울임은 *별표 한 개* 또는 _밑줄 한 개_로 텍스트를 감쌉니다.
• 링크: [링크 텍스트](URL) 문법으로 클릭할 수 있는 링크를 만듭니다. 링크는 편의를 위해 새 탭에서 열립니다.
• 이미지:  문법으로 이미지를 삽입합니다. 이미지는 모서리가 둥근 반응형으로 표시됩니다.
• 코드: 인라인 코드는 백틱 한 개로, 여러 줄 코드 블록은 백틱 세 개로 감쌉니다. 코드에는 배경 스타일이 적용되며 언어별 구문 강조는 제공되지 않습니다.
• 목록: 줄을 - 또는 *로 시작하면 글머리 기호 목록, 1.로 시작하면 번호 목록이 됩니다.
• 인용문: 줄을 >로 시작하면 왼쪽에 파란색 테두리가 있는 스타일의 인용문이 만들어집니다.
• 가로줄: 한 줄에 ---, ***, ___ 중 하나만 입력하면 섹션 사이에 시각적 구분선이 만들어집니다.
• 줄바꿈: 빈 줄을 두 번 넣으면 문단이 나뉘고, 문단 안에서 줄을 한 번 바꾸면 줄바꿈이 됩니다.

활용 사례

• README 파일: 이 기본 미리보기로 README.md 파일을 작성한 뒤 GitHub에서 렌더링 결과를 확인하세요. 이 파서는 GFM 전체 사양을 구현하지 않습니다.
• 기술 문서: API, 라이브러리, 소프트웨어 프로젝트의 문서를 알맞은 서식, 코드 블록, 구조화된 제목으로 작성하세요.
• 블로그 게시물: 블로그 콘텐츠를 Markdown 형식으로 작성하고 레이아웃을 미리 본 다음, HTML을 복사하여 콘텐츠 관리 시스템에 붙여넣으세요.
• 메모 작성: 회의, 강의, 조사 중에 Markdown으로 체계적인 메모를 작성하세요. 메모를 .md 파일로 다운로드하면 정리해서 보관할 수 있습니다.
• 이메일 서식 작성: Markdown으로 내용을 작성한 뒤 필터링된 HTML 소스 텍스트를 복사하세요. HTML을 지원하는 편집기나 가져오기 방식을 사용해야 하며, 리치 텍스트 편집기에서는 소스가 일반 텍스트로 붙여넣어질 수 있습니다.
• Markdown 배우기: 도구 모음 버튼과 빠른 참조를 사용해 즉각적인 시각 피드백을 보며 Markdown 문법을 직접 익혀 보세요.
• 콘텐츠 이전: Markdown 콘텐츠를 HTML로 변환해 웹사이트, 위키, 지식 베이스 시스템에 삽입하세요.

자주 묻는 질문

팁과 모범 사례

• 제목으로 구조 만들기: 명확한 제목 계층으로 문서를 구성하세요. 문서 제목에는 H1, 주요 섹션에는 H2, 하위 섹션에는 H3를 사용합니다.
• 작성하면서 미리보기: 미리보기 패널을 계속 열어 두면 서식 문제를 일찍 발견하고 문서가 의도한 대로 보이는지 확인할 수 있습니다.
• 서식 적용 전에 텍스트 선택: 편집기에서 텍스트를 선택한 뒤 도구 모음 버튼을 클릭하면 선택한 텍스트가 해당 서식으로 감싸집니다.
• 기술 콘텐츠에는 코드 블록 사용: 코드 조각, 명령어, 설정 예시를 코드 블록으로 감싸면 서식이 유지되고 가독성이 좋아집니다.
• 자주 저장하기: 다운로드 버튼으로 작업 내용을 .md 파일로 저장하세요. Markdown 파일은 일반 텍스트이므로 어떤 텍스트 편집기에서도 열 수 있습니다.
• Markdown 문법 익히기: 도구 모음을 사용하거나 굵게는 **, 기울임은 *처럼 Markdown 문법을 직접 입력하세요. 이 소스 편집기에는 서식용 전용 키보드 단축키가 정의되어 있지 않습니다.