마크다운 미리보기 7가지 활용 — VS Code, GitHub, Notion 비교 가이드

마크다운은 작성 문법(`**굵게**`, `## 제목`)과 렌더링 결과가 달라요. 미리보기 없이 작성하면 'GitHub에서는 표가 깨진다', 'Notion에서는 코드 블록이 안 된다' 같은 문제를 발견 못 해요. 저도 README 처음 쓸 때 표가 깨져서 다섯 번 푸시한 기억이 있어요. 미리보기 도구를 옆에 띄워두면 1초 만에 확인되거든요. 오늘은 환경별 차이까지 포함한 7가지 활용을 정리해 드릴게요.

VS Code에서 가장 많이 쓰는 패턴이에요. - `Ctrl+Shift+V` (Mac: `Cmd+Shift+V`): 새 탭에 미리보기 - `Ctrl+K V`: 현재 탭 옆에 미리보기 분할 분할 미리보기를 쓰면 왼쪽 작성·오른쪽 결과가 동시에 보여서 작업 속도가 2배 빨라요. 스크롤도 동기화돼요. 확장 프로그램 'Markdown Preview Enhanced'를 추가로 설치하면 수식(LaTeX)·다이어그램(Mermaid)·차트까지 렌더링돼요. 기술 문서 쓰는 사람 필수.

GitHub와 VS Code는 마크다운 렌더링이 약간 달라요. 흔한 차이. - **줄바꿈**: GitHub는 한 줄 띄워야 줄바꿈, VS Code는 자동으로 처리 - **표 정렬**: GitHub만 `:---:` 정렬 지원 - **체크박스**: `- [ ]` GitHub 전용 (Markdown 표준 X) - **이모지**: `:rocket:` GitHub만 자동 변환 GitHub 미리보기가 가장 정확해요. 푸시 전에 PR 미리보기 또는 README 편집 화면의 'Preview' 탭으로 확인하세요.

Notion·Obsidian도 마크다운 기반이지만 자체 확장 문법이 있어요. - **Notion**: `[[페이지명]]` 내부 링크 (위키 스타일). 표준 마크다운 X - **Notion**: 콜아웃 블록 자체 문법 - **Obsidian**: `[[파일명#섹션]]` 같은 강력한 내부 링크 - **Obsidian**: 수학·다이어그램 플러그인 풍부 표준 마크다운으로 작성하면 셋 다 호환되지만 각자 강점 활용하려면 별도 작성 필요해요. 한 곳에서 작성 후 복사하면 Notion 콜아웃 같은 건 깨지거든요.

마크다운으로 슬라이드 만드는 도구가 늘었어요. - **Marp**: VS Code 확장, `---`로 슬라이드 구분, PDF·PPTX 변환 - **Slidev**: Vue 기반, 코드 블록 그대로 슬라이드, 개발자 발표용 - **reveal.js**: 웹 기반 프레젠테이션 PowerPoint 키노트 작성보다 5배 빨라요. 디자인은 단조롭지만 코드 위주 발표(컨퍼런스·내부 공유)에 최적이에요. 미리보기를 띄워두고 슬라이드별 분량 조절하기 편해요.

Jekyll·Hugo·Next.js·Astro 같은 정적 사이트는 모두 마크다운 기반이에요. 작성 흐름. 1. `.md` 또는 `.mdx` 파일 작성 2. 로컬에서 `npm run dev`로 실시간 미리보기 3. 푸시 → Vercel·Cloudflare Pages 자동 배포 MDX는 마크다운 안에 React 컴포넌트 삽입 가능해서 차트·인터랙티브 요소까지 가능해요. 단 표준 마크다운보다 학습 곡선이 있고 GitHub 미리보기에서는 안 보여요.

회의 중 빠르게 작성해야 하는 상황이에요. - **Obsidian Daily Note**: 매일 새 노트 자동 생성, 템플릿 적용 - **VS Code + Foam**: VS Code 안에서 Obsidian 같은 양방향 링크 - **Logseq**: 블록 단위 노트, 그래프 뷰 우수 핵심은 미리보기로 정리된 결과를 즉시 확인하는 거예요. 회의 끝나자마자 깔끔한 문서를 공유할 수 있거든요. 양방향 링크(`[[회의명]]`)로 시간 지나도 검색 쉬워요.

마크다운으로 작성 후 다른 형식으로 변환하는 시나리오예요. - **마크다운 → HTML**: 이메일 뉴스레터, 일부 메신저 - **마크다운 → Word(.docx)**: Pandoc 사용, 회사 보고서 - **마크다운 → PDF**: 문서 배포, Marp·Pandoc 활용 - **마크다운 → 카카오톡 리치 메시지**: 비공식, 복사 시 일부 서식 유지 같은 원본을 다양한 포맷으로 재활용 가능해서 Single Source of Truth(SSOT) 원칙에 맞아요. 한 번 작성하고 여러 곳 배포할 수 있어요.

1. 좌측에 마크다운 입력 2. 우측에 실시간 렌더링 3. GFM(GitHub Flavored Markdown) 스타일 기본 적용 4. 결과 HTML 복사 또는 다운로드 브라우저 안에서 처리되므로 회사 내부 문서·기밀 메모도 안전해요. 표·코드 블록 호환성 점검은 [마크다운 표·코드 5가지 흔한 실수](/blog/markdown-table-code-5-common-mistakes)에서, 표 정렬 트릭은 [마크다운 표 정렬 4가지](/blog/markdown-table-alignment-4-tricks)에서 이어 보세요.