개발이나 문서 작업을 할 때 마크다운(Markdown, .md) 파일 자주 사용하시죠?
기존 VS Code 기본 환경에서는 코드창과 미리보기(Preview) 분할창을 2개 띄워두고 작업해야 해서 화면도 좁아지고 가독성이 떨어지는 불편함이 있었습니다.
오늘은 Google Antigravity나 VS Code에서 마크다운 파일을 노션(Notion)이나 옵시디언(Obsidian)처럼 실시간 시각화(WYSIWYG) 상태로 직접 편집하고, 상단 툴바 및 메타데이터(Properties) 박스까지 깔끔하게 띄우는 환경 설정 방법을 소개해 드립니다.
🔥 설정 후 주요 변화 (특징)
이 설정을 완료하면 .md 파일을 열었을 때 다음과 같은 스마트한 편집 환경이 제공됩니다:
- 상단 서식 툴바 지원: Bold, Italic, 굵기, 색상, 이미지, 표 생성 등을 클릭 한 번으로 조작
- YAML Frontmatter (Properties) 시각화: 파일 상단의 메타데이터(날짜, 태그, 프로젝트 등)가 노션 스타일의 깔끔한 카드 상자로 렌더링
- 좌측 목차(Outline) 자동 생성: 문서 내 헤딩(#, ##, ###)을 감지하여 클릭 시 해당 위치로 즉시 이동
- 실시간 라이브 렌더링 (WYSIWYG): 텍스트를 입력하는 즉시 결과물이 바로 보여 분할 창이 불필요
🛠️ 3분 만에 끝내는 설정 방법
1단계: 필수 확장 기능(Extension) 설치
- 에디터 좌측의 Extensions 아이콘 (
Ctrl + Shift + X/Cmd + Shift + X)을 클릭합니다. - 검색창에 **
Markdown Editor**를 입력합니다. - Markdown Editor (Vditor 기반 / zaaack 또는 cweijan 제공) 확장을 [Install] 합니다.
2단계: .md 파일의 기본 편집기로 지정하기
확장 프로그램을 설치한 후, 마크다운 파일을 클릭했을 때 항상 이 뷰어로 열리도록 기본값(Default)을 설정해야 합니다.
💡 [방법 A] 우클릭 메뉴로 설정 (가장 간편한 방법)
- 좌측 파일 탐색기에서 아무
.md파일이나 마우스 우클릭합니다. - 메뉴에서
Open With...(한글:연결 프로그램...)를 선택합니다. - 하단의
Configure default editor for '*.md'..."(한글:'*.md'에 대한 기본 편집기 구성...)을 클릭합니다. - 목록에서 **
Markdown Editor**를 선택하면 완료!
💡 [방법 B] settings.json 설정에 직접 추가
설정 파일에 직접 등록하고 싶다면 settings.json에 아래 구문을 추가해 주세요:
"workbench.editorAssociations": {
"*.md": "zaaack.markdown-editor"
}
💡 유용한 실무 팁 (Q&A)
Q. 원본 마크다운 코드(raw text)를 수정하고 싶을 땐 어떻게 하나요?
- 상단 파일 탭을 마우스 우클릭 후 **
Open With...→Text Editor**를 선택하면 익숙한 원본 코드 편집기로 즉시 돌아갈 수 있습니다. 언제든 원하는 모드로 전환 가능합니다!
Q. 옵시디언(Obsidian) 노트와도 호환되나요?
- 네! 옵시디언에서 사용하는 YAML 속성(
date,tags,type등)과 태그(#meeting,#project등)가 그대로 깔끔한 시각화 카드로 표시되므로, 옵시디언 볼트(Vault)를 VS Code/Antigravity와 병행해서 쓰시는 분들께 강력 추천합니다.
🎯 마무리하며
이제 VS Code와 Antigravity에서도 노션이나 옵시디언 부럽지 않은 쾌적한 마크다운 문서 작성 환경을 누려보세요!
Hyungrok 