마크다운 미리보기

마크다운(Markdown) 문법으로 작성된 텍스트 소스를 실시간으로 렌더링하여 표준 HTML 결과물로 변환 및 시각적 레이아웃 미리보기를 동시 제공합니다.

언제 사용하나요?

깃허브(GitHub) README.md 작성, 벨로그나 티스토리 마크다운 포스팅 초안 검토, 정적 블로그 포스트 마크업 작성 시, 본인이 쓴 취합 마크다운 소스가 브라우저 화면 상에서 실제 어떻게 해석되어 폰트와 스타일, 테이블, 이미지 레이아웃으로 나타나는지 동적 검사하고 싶을 때 유용합니다.

사용 방법

좌측 마크다운 텍스트 편집 창에 소스 코드(헤더, 리스트, 강조, 테이블 등)를 기입합니다.
우측 뷰포트 영역에 즉각 렌더링되어 뿌려지는 깔끔한 미리보기 문서를 실시간 확인합니다.
변환된 표준 HTML 태그 코드가 필요한 경우 소스 보기 탭을 눌러 복사합니다.

입력값 안내

표준 마크다운 및 GFM(GitHub Flavored Markdown) 문법 요소를 완벽히 파악해 대입할 수 있습니다.

계산·변환 기준

웹 환경에서 안정적으로 동작하는 고성능 마크다운 파서 모듈(marked.js 등)을 사용하여 텍스트 원본 스트림을 HTML 토큰 트리로 어휘 분석합니다. XSS(크로스 사이트 스크립팅) 보안 사고를 차단하기 위해 유독성 스크립트 태그나 이벤트 핸들러 주입을 원천 필터링(Sanitize)하는 방어 프로세스를 포함합니다.

사용 예시

개발 프로젝트 리드미 작성 - 깃허브 올리기 전 마크다운 문법 누락이나 이미지 링크 깨짐을 에디터 탭 내에서 로컬 검사합니다.
마크다운 지원 웹 게시판 글 쓰기 - 블로그나 슬랙 포스팅 전 문단 단락 구분과 인용구(#, >) 스타일이 어색하지 않은지 예쁘게 가독합니다.
테이블 레이아웃 빌드 - 마크다운 고유 파이프(|) 기호 테이블의 열 높이 및 텍스트 좌우 정렬을 시각적으로 튜닝합니다.

예시

# 타이틀 → <h1>타이틀</h1>로 실시간 파싱 및 거대 헤더 폰트 적용
**굵게** → <strong>굵게</strong>로 강조 렌더링

주의사항

미리보기 컴포넌트 내의 이미지 링크는 로컬 하드디스크의 절대 경로(예: C:\images\...) 대신 웹 서버에 업로드된 URL 링크나 상대 경로를 기재하셔야 정상적으로 렌더링을 관측할 수 있습니다.

계산·사용 가이드

marked.js 파서를 통한 표준 HTML 마크업 렌더링

마크다운 소스 텍스트를 파싱하여 크롬, 사파리 등의 브라우저가 다이렉트로 해독 가능한 DOM 구조의 HTML 태그 문맥으로 정밀 컴파일하여 시각적인 스타일 레이아웃을 미리 구성합니다.

XSS 스크립트 인젝션 차단을 위한 Sanitize 보안 장치

사용자가 마크다운 내부에 악의적인 JavaScript 공격 태그를 숨겨 넣더라도 브라우저 세션 해킹을 예방하기 위해, 렌더링 직전 유독성 HTML 요소를 소독 필터링하는 강력한 보안 모듈을 기본 탑재하고 있습니다.

자주 묻는 질문

HTML 태그를 직접 마크다운 본문에 섞어 써도 되나요?

예. 마크다운 표준 스펙에 따라 기본 HTML 태그(br, img 등)는 해석이 허용되나 보안 취약점을 차단하기 위해 스크립트 실행 태그는 안전 필터 차단됩니다.

깃허브 특유의 체크박스(- [x]) 문법도 지원되나요?

예. GFM 확장 문법 규격을 탑재하여 체크리스트 목록 역시 시각적인 체크박스로 이쁘게 출력해 줍니다.