Productivity
Markdown Preview
README, 문서 초안, 안내문을 작성할 때 렌더링 결과를 즉시 확인할 수 있는 도구입니다.
도구 실행 패널
입력값을 붙여넣고 실행하면 결과를 바로 확인할 수 있습니다.
설명
도구 개요
이 페이지에서는 도구의 역할, 언제 쓰면 좋은지, 샘플로 어떻게 빠르게 확인할 수 있는지 정리합니다.
Markdown 문서를 HTML 미리보기로 렌더링합니다.
런타임 요약: Markdown을 HTML 미리보기로 렌더링합니다.
샘플 입력
아래 샘플을 그대로 붙여 넣으면 기본 처리 흐름을 바로 확인할 수 있습니다.
# Markdown Preview
- Astro
- Preact islands
- Browser-only toolsMarkdown 문서를 작성하면서 실제 렌더링 결과를 빠르게 확인하고 싶을 때 유용한 도구입니다. README, 운영 문서, 공지 초안처럼 텍스트 구조를 먼저 다듬고 싶은 작업에 잘 맞습니다.
렌더링은 브라우저 안에서만 수행되며, 미리보기 HTML은 sanitize 처리 후 표시됩니다. 즉, 스크립트 실행 없이 안전한 확인용 출력에 초점을 둡니다.
언제 쓰나요
- README나 문서를 작성하면서 결과 레이아웃을 바로 보고 싶을 때
- 목록, 제목, 코드블록, 링크 문법이 의도대로 보이는지 확인할 때
- 다른 시스템에 붙여 넣기 전 Markdown 구조를 빠르게 정리하고 싶을 때
미리보기에서 확인할 점
Markdown은 문법은 단순하지만, 실제 문서 완성도는 구조에서 갈리는 경우가 많습니다.
- 제목 레벨이 자연스럽게 내려가는지 확인합니다.
- 목록과 코드블록이 구분되어 보이는지 확인합니다.
- 링크 텍스트와 본문 흐름이 읽기 좋게 연결되는지 봅니다.
자주 생기는 실수
- 공백 줄이 부족해 목록과 본문이 붙어 보이는 것
- 코드블록 fence 개수를 잘못 닫는 것
- 제목 레벨을 건너뛰어 문서 구조가 어색해지는 것
- 실제 서비스 CSS까지 동일하게 재현될 것이라 기대하는 것
예시 입력
# Markdown Preview
- Astro
- Preact islands
예시 출력
<h1>Markdown Preview</h1>
<ul><li>Astro</li><li>Preact islands</li></ul>
FAQ
- 스크립트가 실행되나요?
- 미리보기 HTML은 sanitize 처리 후 렌더링되므로 스크립트나 위험한 태그는 실행되지 않습니다.
- 파일 업로드가 필요한가요?
- 아닙니다. 텍스트만 붙여 넣으면 됩니다.
- 결과를 저장할 수 있나요?
- 네. 렌더링 결과 HTML을 다운로드할 수 있습니다.
- GitHub 스타일 문법도 보이나요?
- 기본 Markdown과 일반적인 GFM 문법을 확인하는 용도로 적합합니다.
- 왜 실제 서비스 화면과 완전히 같지 않을 수 있나요?
- 이 도구는 안전한 미리보기를 위한 일반 렌더링이므로, 서비스별 CSS나 커스텀 컴포넌트까지 재현하지는 않습니다.
관련 도구
더 탐색하기
이 도구는 Productivity 카테고리에 속합니다. 비슷한 워크플로우가 필요하면 도구 허브의 전체 도구 목록 에서 비교해 보세요.