yeonliyou
Keep striving

GitHub 블로거를 위한 마크다운 생산성 툴 모음.zip

•

✍️ Markdown 글쓰기 효율을 극대화하는 생산성 툴 총정리

깃허브 블로그를 꾸준히 운영하다 보면, 마크다운 문법 그 자체보다도 글을 편리하게 쓰고 관리하는 환경이 더 중요하다는 생각이 든다.

이번 글에서는 마크다운 기반 블로깅을 더 효율적으로 만들어주는 다양한 도구와 확장 프로그램들을 정리해보았다.

주로 VSCode 확장, 외부 설치 프로그램, 브라우저 플러그인, 워크플로우 자동화 도구 등을 중심으로 소개한다.

1. VSCode Extension 모음

1) Markdown All in One

가장 필수적인 extension이다.

  • 기능: 실시간 미리보기, 자동 목차 생성, 단축키 지원
  • Ctrl + Shift + V로 미리보기 가능하며, Alt + Shift + F로 포맷팅도 지원한다.
  • 블로그 글을 작성할 때 마크다운 문법을 몰라도 빠르게 문단을 정리할 수 있다.

🔗 Marketplace 링크

2) Markdown Preview Enhanced

  • 기능: 코드 블록 렌더링, Mermaid 다이어그램, 수식(LaTeX) 미리보기
  • 복잡한 수식이나 그래프를 바로 시각화할 수 있어서 논문 정리나 기술 포스팅에도 적합하다.
  • Ctrl + Shift + V → “Open Preview Enhanced”로 실행하면 된다.

🔗 Marketplace 링크

3) Paste Image

  • 기능: 클립보드의 이미지를 자동으로 로컬 폴더에 저장 후 마크다운에 경로 삽입
  • 블로그 포스팅에 이미지를 자주 넣는 사람에게 매우 유용하다.
  • 기본 단축키: Ctrl + Alt + V

🔗 Marketplace 링크

4) Markdownlint

  • 기능: 마크다운 문법 검사기
  • 자동으로 문법 오류나 불필요한 공백을 알려준다.
  • 깔끔한 글 구조를 유지할 수 있어서 협업 시 특히 유용하다.

🔗 Marketplace 링크

5) Front Matter CMS

  • 기능: GitHub Pages, Jekyll, Hugo 블로그용 메타데이터 관리
  • 포스트별 태그, 썸네일, 날짜를 GUI로 쉽게 입력할 수 있다.
  • 블로그 관리까지 VSCode 안에서 가능해져서 효율적이다.

🔗 Marketplace 링크

2. 외부 프로그램 추천

1) Typora

  • 기능: 실시간 미리보기 가능한 마크다운 전용 에디터
  • 매우 깔끔한 UI와 오프라인 미리보기 기능이 강점이다.
  • VSCode보다 가볍고 글 집중도가 높아 블로깅용으로 적합하다.

🔗 Typora 공식 사이트

2) Obsidian

  • 기능: 노트 간 링크 기반 지식관리 툴
  • GitHub 블로그 초안 관리용으로 활용하기 좋다.
  • 폴더 구조를 그대로 유지하면서 버전 관리도 쉬워, 초안 → 완성 → 게시까지 체계적으로 정리할 수 있다.

🔗 Obsidian 공식 사이트

3) Notion + Git 연동

  • 기능: Notion에서 작성 후 md로 내보내 GitHub Pages에 자동 반영
  • Notion2Md 또는 n2y CLI 도구를 사용하면 노션 글을 자동으로 마크다운으로 변환 가능하다.
  • 노션의 협업성과 깃허브의 버전 관리가 결합되는 장점이 있다.

3. 웹 기반 도구

1) Dillinger

  • 기능: 실시간 온라인 마크다운 에디터
  • HTML, PDF, DOCX로 바로 변환 가능하다.
  • 외부 컴퓨터나 학교 PC에서도 브라우저로 빠르게 수정할 때 유용하다.

🔗 https://dillinger.io

2) Mermaid Live Editor

  • 기능: 마크다운 다이어그램(flowchart, sequence diagram, Gantt) 시각화
  • 코드 기반 다이어그램을 미리 확인하고, 결과를 바로 이미지로 저장할 수 있다.
  • 논문 정리나 시스템 설계 포스팅에 특히 유용하다.

🔗 https://mermaid.live

4. 브라우저 확장 추천

1) Markdown Viewer (Chrome)

  • GitHub 리포지토리 내 README.md를 더 깔끔하게 보기 좋게 렌더링해준다.
  • 로컬 마크다운 파일을 웹에서 미리보기 할 때도 쓸 수 있다.

🔗 Chrome Web Store

2) Dark Reader

  • GitHub Pages 블로그를 어두운 테마로 자동 전환해주는 확장이다.
  • 밤에 글을 작성하거나 수정할 때 눈의 피로를 줄일 수 있다.

🔗 Chrome Web Store

5. 워크플로우 자동화

1) GitHub Actions + Hugo / Jekyll

  • GitHub Actions를 이용하면 main 브랜치에 push하는 순간 자동으로 블로그가 배포된다.
  • actions/checkout + jekyll-build-deploy 등의 기본 워크플로우를 사용하면 된다.
  • 수동 배포 없이 완전 자동화가 가능하다는 점이 매력적이다.

2) Prettier + Markdownlint 자동 포맷팅

  • pre-commit 훅으로 설정해두면, 커밋할 때마다 문법을 자동으로 정리해준다.
  • 블로그 글의 일관된 포맷을 유지하기 좋다.

마크다운은 단순한 문법이지만, 그 위에 어떤 환경을 구성하느냐에 따라 생산성과 집중도가 크게 달라진다.
위의 도구들은 모두 실제 블로거들이 자주 사용하는 실용적인 툴들이며,
각자의 워크플로우에 맞게 조합하면 훨씬 쾌적한 글쓰기 환경을 만들 수 있다.

결국 중요한 것은 “내가 편하게 오래 쓸 수 있는 시스템”을 만드는 일이라고 생각한다.
글을 꾸준히 쓰는 사람에게는 그 자체가 가장 강력한 생산성 툴일지도 모른다.

Table of Contents