마크다운 미리보기
마크다운을 실시간으로 미리보기하고 편집하세요. HTML로 렌더링된 결과를 즉시 확인할 수 있습니다.
마크다운 미리보기란?
마크다운 미리보기는 마크다운을 작성하면 HTML로 렌더링된 결과를 즉시 볼 수 있는 무료 온라인 도구입니다. 제목, 목록, 표, 코드 블록, 인라인 서식을 포함한 일반적인 마크다운 구문의 전체 범위를 지원합니다. 데스크톱 편집기를 설치하지 않고도 README 파일, 문서, 블로그 글, 기술 문서를 작성하는 데 적합합니다.
마크다운 미리보기 사용법
- 화면 왼쪽의 편집기에 마크다운 텍스트를 입력하거나 붙여넣으세요.
- 타이핑하는 동안 오른쪽 패널에서 렌더링된 HTML 미리보기가 실시간으로 업데이트되는 것을 확인하세요.
- 샘플 불러오기 버튼을 사용하여 지원되는 마크다운 구문의 종합적인 예시를 살펴보세요.
- 제목, 굵게, 기울임, 목록, 링크, 코드 블록을 사용하여 서식을 다듬으세요.
- 완성된 마크다운 텍스트를 복사하여 프로젝트, 리포지토리 또는 블로그 플랫폼에서 사용하세요.
팁 & 모범 사례
제목 계층 구조 올바르게 사용
항상 단일 H1 제목으로 시작하고 하위 섹션에는 H2부터 H6까지 사용하세요. 이렇게 하면 가독성을 향상시키고 스크린 리더가 콘텐츠를 효과적으로 탐색할 수 있는 명확한 문서 구조가 만들어집니다.
게시 전 미리보기
리포지토리에 커밋하거나 블로그에 게시하기 전에 항상 마크다운을 미리보세요. 목록 앞의 빈 줄 누락이나 닫히지 않은 서식 마커 같은 작은 구문 오류가 원시 텍스트에서 발견하기 어려운 예상치 못한 렌더링 결과를 유발할 수 있습니다.
펜스드 코드 블록 마스터하기
언어 식별자가 포함된 트리플 백틱(예: ```javascript)을 사용하여 구문 강조 코드 블록을 만드세요. 이렇게 하면 기술 문서의 가독성이 크게 향상되고 개발자가 코드 스니펫을 빠르게 식별할 수 있습니다.
참조 스타일 링크 사용
많은 링크가 있는 문서에서는 참조 스타일 링크 [텍스트][id]를 사용하여 마크다운 소스를 깔끔하고 유지보수하기 쉽게 유지하세요. 모든 URL을 문서 하단에 정의하면 한 곳에서 업데이트할 수 있습니다.
일반적인 사용 사례
GitHub README 파일
GitHub에 푸시하기 전에 오픈소스 프로젝트의 README.md 파일을 작성하고 미리보세요. 서식, 뱃지, 설치 안내, 링크가 사용자에게 보이기 전에 올바르게 렌더링되는지 확인하세요.
기술 문서
마크다운으로 API 문서, 설정 가이드, 개발자 핸드북을 작성하세요. GitBook, MkDocs, Docusaurus 같은 문서 플랫폼에 게시하기 전에 최종 모습을 미리보세요.
블로그 글 작성
Hugo, Jekyll, Gatsby 같은 많은 정적 사이트 생성기는 콘텐츠 작성에 마크다운을 사용합니다. 사이트를 빌드하고 배포하기 전에 블로그 글을 미리보며 서식 문제, 깨진 링크, 레이아웃 문제를 잡으세요.
FAQ
어떤 마크다운 문법이 지원되나요?
제목, 굵게, 기울임, 취소선, 링크, 목록, 인용문, 코드, 수평선이 지원됩니다.
텍스트가 어딘가에 저장되나요?
아니요. 모든 처리는 브라우저에서 이루어지며 서버로 전송되지 않습니다.
마크다운 표를 사용할 수 있나요?
네, 파이프(|)와 하이픈(-)을 사용하여 열과 헤더를 정의하는 표를 만들 수 있습니다. 미리보기에서 깔끔한 정렬과 테두리가 있는 올바른 서식의 HTML 표로 렌더링됩니다.
GitHub Flavored Markdown(GFM)을 지원하나요?
이 도구는 체크박스가 있는 작업 목록, 취소선 텍스트, 언어 힌트가 있는 펜스드 코드 블록, 표를 포함한 대부분의 GFM 기능을 지원합니다. 이는 GitHub 리포지토리와 위키에 게시할 콘텐츠를 미리보는 데 이상적입니다.
렌더링된 HTML을 내보낼 수 있나요?
미리보기 패널에서 렌더링된 출력을 직접 복사할 수 있습니다. 원시 HTML 소스 코드의 경우 브라우저 개발자 도구(F12)를 사용하여 미리보기 요소를 검사하고 생성된 HTML 마크업을 복사할 수 있습니다.