파일 업로드 없이 마크다운을 온라인으로 미리 보는 방법

마크다운은 일반 텍스트로도 읽기 쉽게 설계되었지만, 최종 문서가 어떻게 보이는지는 확인하고 싶기 마련입니다. 표가 잘 정렬되는지, 목록이 제대로 중첩되는지, 코드 블록에 구문 강조가 되는지 말이죠. 실시간 미리 보기는 원문 옆에 렌더링 결과를 보여 주고, 키를 누를 때마다 갱신합니다.

이 가이드에서는 마크다운을 미리 보는 일반적인 방법을 비교하고, 매일 쓸 때 큰 차이를 만드는 기능을 정리한 뒤, 아무것도 설치하지 않고 서버로 보내지도 않으면서 로컬 파일을 브라우저에서 여는 빠른 작업 흐름을 소개합니다.

마크다운을 미리 보는 세 가지 방법

1. 코드 에디터 안의 미리 보기

VS Code, JetBrains IDE를 비롯한 많은 에디터에 마크다운 미리 보기가 내장되어 있습니다. 이미 그 에디터를 주로 쓴다면 좋은 선택입니다. 단점도 있습니다. 에디터를 설치해야 하고, 수식과 다이어그램에는 확장 프로그램이 필요한 경우가 많으며, README.md를 읽기만 하려는 동료에게 간단히 건넬 수 있는 도구도 아닙니다.

2. 온라인 마크다운 뷰어

왼쪽에 편집기, 오른쪽에 미리 보기가 있는 웹사이트가 가장 빠른 방법입니다. 탭을 열고 바로 입력하면 됩니다. 문제는 온라인 도구마다 차이가 크다는 점입니다. 어떤 도구는 렌더링을 위해 텍스트를 서버로 보내고, 어떤 도구는 알리지 않고 브라우저에 문서를 저장하며, 상당수는 기본 문법만 지원해서 표도, 할 일 목록도, 수식도 안 됩니다.

3. 직접 호스팅하는 뷰어

직접 호스팅하는 정적 웹 앱은 웹사이트의 편리함과 완전한 통제권을 함께 제공합니다. 내 도메인에서 운영되고, 팀 전체에 똑같이 보이며, 무엇을 할 수 있고 없는지를 내가 결정합니다. 이 방법은 마크다운 에디터를 직접 호스팅하는 방법에서 자세히 다룹니다.

마크다운 뷰어를 고를 때 확인할 점

모든 뷰어가 똑같이 쓰기 편한 것은 아닙니다. 매일 쓰다 보면 다음 기능들이 중요해집니다.

• 즉각적인 렌더링. “렌더링” 버튼이나 눈에 띄는 지연 없이 입력하는 동안 미리 보기가 갱신되어야 합니다.
• 스크롤 동기화. 긴 문서에서는 미리 보기가 편집기를 따라와서, 편집 중인 문단이 오른쪽에 항상 보여야 합니다.
• GitHub-Flavored Markdown. 표, 할 일 목록, 취소선, 각주, 알림 상자가 GitHub와 똑같이 표시되어야 합니다. 잘 모르겠다면 마크다운 문법 총정리를 참고하세요.
• 사용하는 언어의 코드 구문 강조.
• 기술 문서를 쓴다면 수식과 다이어그램: LaTeX 수식과 Mermaid 다이어그램.
• 로컬 파일 열기. 파일 하나, 여러 파일, 폴더 전체를 드래그 앤 드롭으로 열 수 있어야 하며, 문서가 참조하는 이미지도 포함되어야 합니다.
• 내보내기. 문서가 완성되면 보통 HTML, PDF 또는 깔끔한 .md 파일이 필요합니다.
• 로컬 처리. 텍스트가 브라우저에서 렌더링되고 내 컴퓨터 밖으로 나가지 않는 것이 이상적입니다. 사내 문서, 계약서, 초안, 메모라면 특히 중요합니다.

Markdown Preview Editor로 빠르게 작업하기

Markdown Preview Editor는 바로 이 목록을 중심으로 만든 무료 오픈 소스 에디터입니다. 일반적인 사용 흐름은 다음과 같습니다.

1단계: 에디터 열기

온라인 버전이나 직접 호스팅한 사본을 여세요. 가입도 설치도 필요 없습니다. 인터페이스는 15개 언어로 제공되며 브라우저 언어에 자동으로 맞춰집니다.

2단계: 파일 열기

.md 파일을 편집기로 끌어 놓으세요. 여러 파일을 한꺼번에, 또는 폴더 전체를 놓아도 됩니다. 문서마다 별도의 탭에서 열리고 탭마다 실행 취소 기록이 따로 있습니다. 문서와 함께 놓은 이미지, 오디오, 동영상은 끌어 놓은 폴더를 기준으로 상대 경로가 해석되므로 미리 보기에 그대로 표시됩니다.

키보드가 편하다면 Ctrl+O(Mac에서는 ⌘O)를 눌러 파일을 고르거나, 폴더 버튼으로 디렉터리를 여세요.

3단계: 미리 보기를 옆에 두고 작성하기

왼쪽 편집기에 입력하면 오른쪽 미리 보기가 즉시 갱신되고 함께 스크롤됩니다. 서식 도구 모음으로 제목, 목록, 링크, 표, 코드 블록을 넣을 수 있습니다. 각주, 알림 상자, 수식, 다이어그램처럼 덜 쓰는 도구는 접을 수 있는 고급 편집기 줄에 있어서 도구 모음이 깔끔하게 유지됩니다.

클릭 한 번으로 세 가지 보기 모드를 전환할 수 있습니다. 편집기만, 분할 보기, 미리 보기만. 휴대폰에서는 레이아웃이 자동으로 맞춰지고, 도구 모음은 필요할 때까지 접혀 있습니다.

4단계: 저장하거나 내보내기

작업이 끝나면 문서를 .md로 저장하거나, 독립 실행형 HTML 파일로 내보내거나, PDF로 인쇄하세요. 자세한 방법은 마크다운을 HTML과 PDF로 변환하기에서 다룹니다.

내 파일은 어디로 갈까?

많은 웹 도구는 텍스트가 업로드되는지 쉽게 알 수 없습니다. 간단한 확인 방법이 있습니다. 브라우저의 개발자 도구를 열고 Network 탭으로 이동한 뒤 무언가를 입력해 보세요. 입력하는 동안 새 요청이 나타난다면 텍스트가 페이지 밖으로 나가고 있을 수 있습니다.

Markdown Preview Editor는 모든 것을 브라우저에서 렌더링합니다. 연 파일은 로컬에서 읽으며, 설정에서 문서 기억하기를 켜지 않는 한 문서는 열린 탭 안에만 보관됩니다. 문서 안의 외부 이미지와 링크는 허용하기 전까지 불러오지 않으므로, 파일을 여는 것만으로 다른 서버에 연결되는 일도 없습니다.

미리 보기를 더 편하게 쓰는 팁

• 이미지는 문서 옆에 images/나 assets/ 폴더에 두고 상대 경로로 연결하세요. 그런 다음 폴더 전체를 끌어 놓으면 모든 것이 표시됩니다.
• 파일마다 # 제목은 하나만 쓰세요. 내보낸 HTML의 제목이 되고, 긴 문서를 탐색하기도 쉬워집니다.
• 문서를 함께 작업할 때는 설정에서 줄 번호를 켜세요. “42번째 줄” 같은 리뷰 의견을 따라가기 쉬워집니다.
• 밤에는 어두운 테마를 쓰세요. 미리 보기도 편집기와 함께 테마가 바뀝니다.