마크다운 미리보기

마크다운 미리보기, 줄바꿈과 안전 처리까지

언제 쓰나요

깃허브에 올릴 README를 커밋하기 전에 표가 제대로 그려지는지 보고 싶을 때, 노션이나 블로그에 붙일 글을 기호만으로 빠르게 써 두고 싶을 때, 받은 .md 파일을 HTML 메일이나 사내 게시판에 옮길 코드로 바꾸고 싶을 때 이 도구를 열어요. 프로그램을 깔지 않아도 되고, 왼쪽에 쓰는 대로 오른쪽 결과가 따라 바뀌어요.

사용 방법

1단계마크다운 쓰기

1. 1① 처음에는 체크리스트·표·인용·코드 블록이 담긴 예시 글이 들어 있어요. 그대로 고치면서 문법을 익혀도 돼요.
2. 2② 칸 이름 옆에 지금까지 쓴 글자 수가 나와요. 공백과 줄바꿈도 한 글자로 세요.

2단계미리보기 확인

1. 3③ 타자를 멈추고 0.15초가 지나면 미리보기가 새로 그려져요. 휴대폰에서는 입력 칸 아래에, PC에서는 오른쪽에 나와요.

3단계저장하거나 복사하기

1. 4④ ‘HTML 복사’는 본문 태그만, ‘.html 저장’은 글꼴·표 테두리 스타일까지 넣은 완성 문서를 줘요. 파일 이름은 document.md, document.html이에요.
2. 5⑤ 확인 창에서 승인해야 지금 글이 지워지고 예시로 돌아가요.

줄바꿈 규칙과 변환 과정

가장 많이 헷갈리는 부분은 줄바꿈이에요. 이 도구는 깃허브 문서와 같은 방식이라 Enter 한 번은 줄을 바꾸지 않고 앞 줄에 이어 붙여요. 문단을 나누려면 빈 줄을 하나 두고, 문단 안에서 줄만 바꾸려면 줄 끝에 공백 두 칸이나 \ 를 붙여요.

글은 marked 라이브러리가 HTML로 바꾸고, 그 결과를 한 번 더 걸러요. script·iframe·style·form 같은 태그는 통째로 지우고, onclick 같은 이벤트 속성과 javascript:로 시작하는 주소도 떼어 내요. 그다음 스크립트가 아예 돌지 않는 격리된 칸에 넣어 보여 줘요.

저장한 .html 파일은 제목이 ‘문서’로 고정돼 있고, 미리보기와 같은 글꼴·표·인용 스타일이 head 안에 들어 있어요. 브라우저로 열어 인쇄하면 PDF로도 남길 수 있어요.

‘HTML 복사’로 가져간 코드는 스타일이 없어서, 붙여 넣는 곳의 글꼴과 표 모양을 그대로 따라요.

주의할 점

• 임시 저장은 이 브라우저에만 — 글은 쓸 때마다 이 기기의 브라우저 저장소에 덮어써져요. 시크릿 창이나 저장소를 지우는 설정에서는 남지 않으니, 중요한 글은 .md로 받아 두세요.
• 미리보기 속 링크 — 미리보기 칸은 스크립트가 막힌 격리 칸이지만 새 창 열기는 허용돼 있어서, 링크를 누르면 새 탭에서 열려요. 미리보기 안에서 페이지가 바뀌지 않으니 쓰던 글은 그대로 남아요.
• HTML 직접 쓰기 — 마크다운 안에 <div> 같은 태그를 섞어 쓰면 그대로 반영되지만, 위에서 말한 위험 태그와 속성은 저장 파일에서도 빠져요.

• 초안은 하나만 — 임시 저장 칸은 하나라서 새 글을 쓰기 시작하면 이전 초안을 덮어써요. 여러 문서를 오가며 쓸 때는 하나를 끝낼 때마다 .md로 받아 두세요.

• 코드 블록 언어 표시 — ```js처럼 언어 이름을 적어도 색으로 구분해 칠하지는 않고, 회색 상자 안에 고정폭 글꼴로만 보여 줘요.

더 궁금한 점