Markdown 및 Visual Studio Code

Visual Studio Code에서 Markdown 파일을 작업하는 것은 간단하고 직관적이며 즐겁습니다. VS Code의 기본 편집 기능 외에도 생산성을 높이는 데 도움이 되는 몇 가지 Markdown 관련 기능이 있습니다.

참고: Markdown 파일 편집을 시작하는 데 도움이 되도록 Doc Writer 프로필 템플릿을 사용하여 유용한 확장 프로그램(맞춤법 검사기, Markdown 린터)을 설치하고 적절한 설정 값을 구성할 수 있습니다.

Markdown 편집

문서 개요

개요 보기는 파일 탐색기 하단에 별도의 섹션으로 표시됩니다. 확장하면 현재 활성화된 편집기의 기호 트리가 표시됩니다. Markdown 파일의 경우 기호 트리는 Markdown 파일의 헤더 계층 구조입니다.

Markdown Outline view

개요 보기는 문서의 헤더 구조와 개요를 검토하는 데 좋은 방법입니다.

Markdown용 스니펫

VS Code에는 Markdown 작성을 빠르게 하는 데 도움이 되는 유용한 스니펫이 포함되어 있습니다. 여기에는 코드 블록, 이미지 등을 위한 스니펫이 포함됩니다. 편집 중에 ⌃Space (Windows, Linux Ctrl+Space) (제안 트리거)을 눌러 제안되는 Markdown 스니펫 목록을 확인하세요. 명령 팔레트에서 스니펫 삽입을 선택하여 전용 스니펫 선택기를 사용할 수도 있습니다.

팁: 사용자 정의 스니펫을 Markdown에 추가할 수 있습니다. 사용자 정의 스니펫을 참조하여 방법을 알아보세요.

파일에서 헤더로 이동

현재 파일의 헤더로 빠르게 이동하려면 ⇧⌘O (Windows, Linux Ctrl+Shift+O)를 사용하세요.

Jumping to a header in a Markdown file

파일의 모든 헤더를 검색하거나 헤더 이름을 입력하여 원하는 헤더를 찾을 수 있습니다. 원하는 헤더를 찾으면 Enter를 눌러 커서를 이동하세요. 헤더로 이동을 취소하려면 Esc를 누르세요.

작업 영역에서 헤더로 이동

현재 작업 영역의 모든 Markdown 파일에서 헤더를 검색하려면 ⌘T (Windows, Linux Ctrl+T)를 사용하세요.

Jumping to a header across all Markdown files in a workspace

헤더 이름을 입력하여 목록을 필터링하고 원하는 헤더를 찾으세요.

경로 완성

경로 완성은 파일 및 이미지 링크를 만드는 데 도움이 됩니다. 이미지 또는 링크 경로를 입력하면 IntelliSense에서 이러한 경로가 자동으로 표시되며, ⌃Space (Windows, Linux Ctrl+Space)를 사용하여 수동으로 요청할 수도 있습니다.

Path completions in a Markdown link

/로 시작하는 경로는 현재 작업 영역 루트에 대해 확인되며, ./로 시작하거나 접두사가 없는 경로는 현재 파일에 대해 확인됩니다. 경로 제안은 /를 입력할 때 자동으로 표시되거나 ⌃Space (Windows, Linux Ctrl+Space)를 사용하여 수동으로 호출할 수 있습니다.

경로 IntelliSense는 현재 파일 또는 다른 Markdown 파일 내의 헤더에 연결하는 데도 도움이 될 수 있습니다. 경로를 #으로 시작하여 파일의 모든 헤더에 대한 완성 항목을 볼 수 있습니다(설정에 따라 이러한 항목을 보려면 ⌃Space (Windows, Linux Ctrl+Space)를 사용해야 할 수 있습니다).

Header section suggestions in a Markdown link

"markdown.suggest.paths.enabled": false로 경로 IntelliSense를 비활성화할 수 있습니다.

다른 파일의 헤더에 링크 만들기

다른 Markdown 문서의 헤더에 링크해야 하는데 전체 파일 경로를 기억하거나 입력하고 싶지 않으신가요? 작업 영역 헤더 완성 기능을 사용해 보세요! 시작하려면 Markdown 링크에 ##을 입력하여 현재 작업 영역의 모든 Markdown 헤더 목록을 확인하세요.

Suggestions for all Markdown headers in the current workspace

이러한 완성 항목 중 하나를 수락하면 다른 파일에 있는 경우에도 해당 헤더에 대한 전체 링크가 삽입됩니다.

Adding a link to the selected header in another file

작업 영역 헤더 완성 항목의 표시 여부/시기를 markdown.suggest.paths.includeWorkspaceHeaderCompletions 설정으로 구성할 수 있습니다. 유효한 설정 값은 다음과 같습니다.

onDoubleHash (기본값)—##을 입력한 후에만 작업 영역 헤더 완성 항목이 표시됩니다.
onSingleOrDoubleHash—# 또는 ##을 입력한 후에 작업 영역 헤더 완성 항목이 표시됩니다.
never—작업 영역 헤더 완성 항목을 표시하지 않습니다.

현재 작업 영역의 모든 헤더를 찾는 것은 비용이 많이 들 수 있으므로, 특히 Markdown 파일이 많은 작업 영역에서는 처음 요청할 때 약간의 지연이 있을 수 있습니다.

이미지 및 파일 링크 삽입

경로 완성 외에도 VS Code는 Markdown 문서에 이미지 및 파일 링크를 삽입하는 몇 가지 다른 방법을 지원합니다.

VS Code 탐색기 또는 운영 체제에서 Markdown 편집기로 파일을 끌어다 놓기할 수 있습니다. VS Code 탐색기에서 Markdown 코드로 파일을 끌어다 놓은 다음 Shift를 누른 상태로 파일에 놓기 시작하세요. 미리 보기 커서는 놓을 때 삽입될 위치를 보여줍니다.

Inserting a Markdown link by dragging and dropping from the explorer

키보드를 선호하는 경우 파일 또는 이미지 데이터를 Markdown 편집기로 복사하여 붙여넣기할 수도 있습니다. 파일을 붙여넣거나 파일 링크, URL을 붙여넣을 때 Markdown 링크를 삽입하거나 링크를 일반 텍스트로 포함하도록 선택할 수 있습니다.

Inserting a Markdown link by pasting a link in the editor

또는 Markdown: 작업 영역에서 이미지 삽입 명령을 사용하여 이미지를 삽입하고 Markdown: 작업 영역에 파일 링크 삽입 명령을 사용하여 파일 링크를 삽입할 수 있습니다.

삽입된 이미지는 Markdown 이미지 구문 ![](path/to/image.png)를 사용합니다. 링크는 일반 Markdown 링크 [](path/to/file.md)를 삽입합니다.

기본적으로 VS Code는 작업 영역 외부에서 드롭되거나 붙여넣어진 이미지를 자동으로 작업 영역으로 복사합니다. markdown.copyFiles.destination 설정은 새 이미지 파일이 생성될 위치를 제어합니다. 이 설정은 현재 Markdown 문서와 일치하는 glob을 이미지 대상에 매핑합니다. 이미지 대상에는 간단한 변수도 사용할 수 있습니다. 사용 가능한 변수에 대한 자세한 내용은 markdown.copyFiles.destination 설정 설명을 참조하세요.

예를 들어, 작업 영역의 /docs 아래의 모든 Markdown 파일이 현재 파일에 대한 images 디렉터리에 새 미디어 파일을 넣기를 원하면 다음과 같이 작성할 수 있습니다.

"markdown.copyFiles.destination": {
  "/docs/**/*": "images/${documentBaseName}/"
}

이제 /docs/api/readme.md에 새 파일이 붙여넣어지면 이미지 파일은 /docs/api/images/readme/image.png에 생성됩니다.

스니펫과 유사한 방식으로 변수를 변환하는 간단한 정규식까지 사용할 수 있습니다. 예를 들어, 이 변환은 미디어 파일을 만들 때 문서 파일 이름의 첫 글자만 사용합니다.

"markdown.copyFiles.destination": {
  "/docs/**/*": "images/${documentBaseName/(.).*/$1/}/"
}

새 파일이 /docs/api/readme.md에 붙여넣어지면 이미지는 이제 /docs/api/images/r/image.png 아래에 생성됩니다.

이미지 대체 텍스트 생성

AI를 사용하여 Markdown 파일의 이미지 대체 텍스트를 생성하거나 업데이트할 수 있습니다. 대체 텍스트를 생성하려면

VS Code 환경에 Copilot이 설정되어 있는지 확인하세요. Copilot은 무료로 사용할 수 있습니다.
Markdown 파일을 엽니다.
이미지 링크에 커서를 놓습니다.
코드 액션(전구) 아이콘을 선택하고 대체 텍스트 생성을 선택합니다.
이미 대체 텍스트가 있는 경우 코드 액션을 선택하고 대체 텍스트 수정을 선택합니다.

스마트 선택

스마트 선택을 통해 Markdown 문서에서 선택 영역을 빠르게 확장하고 축소할 수 있습니다. 이를 사용하여 코드 블록이나 테이블과 같은 전체 블록 요소를 빠르게 선택하거나 Markdown 파일의 헤더 섹션 전체 내용을 선택할 수 있습니다.

스마트 선택은 다음 명령을 사용합니다.

확장: ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)
축소: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left)

선택은 다음 항목에 적용되며 전통적인 계층적 패턴을 따릅니다.

헤더
목록
블록 인용
구분된 코드 블록
HTML 코드 블록
단락

Smart select within a Markdown document expands from a block element, to the block element containing it, to the rest of the content under a header, to the header itself

링크 유효성 검사

링크 유효성 검사는 Markdown 코드의 로컬 링크가 유효한지 확인합니다. 이를 통해 이름이 변경된 헤더를 연결하거나 더 이상 디스크에 존재하지 않는 파일을 연결하는 등 일반적인 실수를 잡을 수 있습니다.

A warning shown in the editor when linking to a file that does not exist

링크 유효성 검사는 기본적으로 꺼져 있습니다. 이 기능을 활성화하려면 "markdown.validate.enabled": true로 설정하세요. 그러면 VS Code는 헤더, 이미지 및 기타 로컬 파일에 대한 Markdown 링크를 분석합니다. 잘못된 링크는 경고 또는 오류로 보고됩니다. 모든 링크 유효성 검사는 로컬에서 수행되며 외부 http(s) 링크는 확인하지 않습니다.

링크 유효성 검사를 사용자 지정하는 데 사용할 수 있는 몇 가지 설정이 있습니다.

markdown.validate.fileLinks.enabled - 로컬 파일 링크 유효성 검사 활성화/비활성화: [link](/path/to/file.md)
markdown.validate.fragmentLinks.enabled - 현재 파일의 헤더 링크 유효성 검사 활성화/비활성화: [link](#_some-header)
markdown.validate.fileLinks.markdownFragmentLinks - 다른 Markdown 파일의 헤더 링크 유효성 검사 활성화/비활성화: [link](other-file.md#some-header)
markdown.validate.referenceLinks.enabled - 참조 링크 유효성 검사 활성화/비활성화: [link][ref].
markdown.validate.ignoredLinks - 유효성 검사를 건너뛸 링크 glob 목록입니다. Markdown이 게시될 때 디스크에 존재하지 않지만 존재하는 파일에 링크하는 경우 유용합니다.

헤더 및 링크에 대한 모든 참조 찾기

모든 참조 찾기 (⇧⌥F12 (Windows, Linux Shift+Alt+F12)) 명령을 사용하여 현재 작업 영역에서 Markdown 헤더 또는 링크가 참조되는 모든 위치를 찾으세요.

Jumping to a header in a Markdown file

모든 참조 찾기는 다음 항목에 대해 지원됩니다.

헤더: # My Header. #my-header에 대한 모든 링크를 표시합니다.
외부 링크: [text](http://example.com). http://example.com에 대한 모든 링크를 표시합니다.
내부 링크: [text](./path/to/file.md). ./path/to/file.md에 대한 모든 링크를 표시합니다.
링크의 조각: [text](./path/to/file.md#my-header). ./path/to/file.md의 #my-header에 대한 모든 링크를 표시합니다.

헤더 및 링크 이름 바꾸기

Markdown 헤더를 변경할 때 실수로 링크를 깨뜨리는 데 지치셨나요? 대신 기호 이름 바꾸기 (F2)를 사용해 보세요. 새 헤더 이름을 입력하고 Enter를 누르면 VS Code가 헤더를 업데이트하고 해당 헤더에 대한 모든 링크를 자동으로 업데이트합니다.

Renaming a Markdown header to update all links to it

다음 항목에 대해 F2를 사용할 수도 있습니다.

헤더: # My Header. #my-header에 대한 모든 링크를 업데이트합니다.
외부 링크: [text](http://example.com/page). http://example.com/page를 링크하는 모든 위치를 업데이트합니다.
내부 링크: [text](./path/to/file.md). ./path/to/file.md 파일을 이름 바꾸고 해당 링크도 업데이트합니다.
링크의 조각: [text](./path/to/file.md#my-header). ./path/to/file.md의 헤더를 이름 바꾸고 해당 링크도 업데이트합니다.

파일 이동 또는 이름 바꾸기 시 자동 링크 업데이트

자동 Markdown 링크 업데이트를 통해 VS Code는 링크된 파일이 이동되거나 이름이 변경될 때 Markdown 링크를 자동으로 업데이트합니다. 이 기능은 markdown.updateLinksOnFileMove.enabled 설정을 사용하여 활성화할 수 있습니다. 유효한 설정 값은 다음과 같습니다.

never (기본값) — 링크를 자동으로 업데이트하려고 시도하지 않습니다.
prompt — 링크를 업데이트하기 전에 확인합니다.
always — 확인 없이 자동으로 링크를 업데이트합니다.

자동 링크 업데이트는 Markdown 파일, 이미지 및 디렉터리의 이름 바꾸기를 감지합니다. markdown.updateLinksOnFileMove.include를 사용하여 추가 파일 형식에 대해 활성화할 수 있습니다.

Markdown 미리 보기

VS Code는 기본적으로 Markdown 파일을 지원합니다. Markdown 텍스트를 작성하고 파일 확장자를 .md로 저장하면 코드와 Markdown 파일의 미리 보기 간에 편집기의 시각화를 전환할 수 있습니다. 물론 기존 Markdown 파일을 열고 작업할 수도 있습니다. 보기를 전환하려면 편집기에서 ⇧⌘V (Windows, Linux Ctrl+Shift+V)를 누르세요. 편집 중인 파일과 함께 미리 보기를 나란히(⌘K V (Windows, Linux Ctrl+K V)) 볼 수 있으며 편집하는 동안 실시간으로 변경 사항이 반영되는 것을 볼 수 있습니다.

간단한 파일의 예시입니다.

Markdown Preview

팁: 편집기 탭을 마우스 오른쪽 버튼으로 클릭하고 미리 보기 열기(⇧⌘V (Windows, Linux Ctrl+Shift+V))를 선택하거나 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))를 사용하여 Markdown: 미리 보기를 옆에 열기 명령(⌘K V (Windows, Linux Ctrl+K V))을 실행할 수도 있습니다.

동적 미리 보기 및 미리 보기 잠금

기본적으로 Markdown 미리 보기는 현재 활성 Markdown 파일을 미리 보기 위해 자동으로 업데이트됩니다.

The preview automatically switching to preview the current Markdown document

Markdown: 미리 보기 잠금 전환 명령을 사용하여 Markdown 미리 보기를 잠가 현재 Markdown 문서에 고정할 수 있습니다. 잠긴 미리 보기는 제목에 [미리 보기]로 표시됩니다.

A locked Markdown preview

참고: Markdown: 미리 보기 잠금 전환 명령은 Markdown 미리 보기가 활성 탭인 경우에만 사용할 수 있습니다.

편집기 및 미리 보기 동기화

VS Code는 Markdown 편집기와 미리 보기 창을 자동으로 동기화합니다. Markdown 미리 보기를 스크롤하면 편집기가 미리 보기의 뷰포트에 맞춰 스크롤됩니다. Markdown 편집기를 스크롤하면 미리 보기가 해당 뷰포트에 맞춰 스크롤됩니다.

Markdown Preview editor selection scroll sync

"markdown.preview.scrollPreviewWithEditor" 및 markdown.preview.scrollEditorWithPreview 설정을 사용하여 스크롤 동기화를 비활성화할 수 있습니다.

편집기에서 현재 선택된 줄은 Markdown 미리 보기에서 왼쪽 여백의 밝은 회색 막대로 표시됩니다.

Markdown Preview editor line marker

또한 Markdown 미리 보기의 요소를 두 번 클릭하면 파일에 대한 편집기가 자동으로 열리고 클릭한 요소에 가장 가까운 줄로 스크롤됩니다.

Markdown Preview double click switches to editor

수학 공식 렌더링

VS Code의 내장 Markdown 미리 보기는 KaTeX를 사용하여 수학 방정식을 렌더링합니다.

$Markdown Preview rendering of math formulas with KaTeX$

인라인 수학 방정식은 단일 달러 기호로 묶습니다.

Inline math: $x^2$

이중 달러 기호로 수학 방정식 블록을 만들 수 있습니다.

Math block:

$$
\displaystyle
\left( \sum_{k=1}^n a_k b_k \right)^2
\leq
\left( \sum_{k=1}^n a_k^2 \right)
\left( \sum_{k=1}^n b_k^2 \right)
$$

"markdown.math.enabled": false로 설정하여 Markdown 파일에서 수학 공식 렌더링을 비활성화할 수 있습니다.

Markdown 미리 보기 확장

확장 프로그램은 사용자 지정 스타일과 스크립트를 Markdown 미리 보기에 제공하여 모양을 변경하고 새 기능을 추가할 수 있습니다. 다음은 미리 보기를 사용자 지정하는 확장 프로그램의 예입니다.

사용자 CSS 사용

"markdown.styles": [] 설정을 사용하여 Markdown 미리 보기에서 사용자 CSS를 사용할 수도 있습니다. 이 설정은 Markdown 미리 보기에 로드할 스타일시트의 URL 목록입니다. 이러한 스타일시트는 https URL이거나 현재 작업 영역의 로컬 파일에 대한 상대 경로일 수 있습니다.

예를 들어, 현재 작업 영역의 루트에 Style.css라는 스타일시트를 로드하려면 파일 > 기본 설정 > 설정을 사용하여 작업 영역 settings.json 파일을 열고 이 업데이트를 수행하세요.

// Place your settings in this file to overwrite default and user settings.
{
  "markdown.styles": ["Style.css"]
}

줄 끝 공백을 유지하여 줄 바꿈 만들기

하드 줄 바꿈을 만들기 위해 Markdown은 줄 끝에 두 개 이상의 공백이 필요합니다. 사용자 또는 작업 영역 설정에 따라 VS Code가 줄 끝 공백을 제거하도록 구성될 수 있습니다. Markdown 파일에만 줄 끝 공백을 유지하려면 settings.json에 다음 줄을 추가할 수 있습니다.

{
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

Markdown 미리 보기 보안

보안상의 이유로 VS Code는 Markdown 미리 보기에 표시되는 콘텐츠를 제한합니다. 여기에는 스크립트 실행 비활성화 및 https를 통한 리소스 로드만 허용하는 것이 포함됩니다.

Markdown 미리 보기가 페이지의 콘텐츠를 차단하면 미리 보기 창 오른쪽 상단에 경고 팝업이 표시됩니다.

Markdown security alert

이 팝업을 클릭하거나 모든 Markdown 파일에서 Markdown: 미리 보기 보안 설정 변경 명령을 실행하여 Markdown 미리 보기에서 허용되는 콘텐츠를 변경할 수 있습니다.

Markdown security selector

Markdown 미리 보기 보안 설정은 작업 영역의 모든 파일에 적용됩니다.

각 보안 수준에 대한 자세한 내용은 다음과 같습니다.

엄격

기본 설정입니다. 신뢰할 수 있는 콘텐츠만 로드하고 스크립트 실행을 비활성화합니다. http 이미지를 차단합니다.

매우 좋은 이유로 변경해야 하고 작업 영역의 모든 Markdown 파일을 신뢰하는 경우가 아니라면 엄격 보안을 활성화된 상태로 유지하는 것이 좋습니다.

안전하지 않은 콘텐츠 허용

스크립트는 비활성화하지만 http를 통해 콘텐츠를 로드할 수 있습니다.

비활성화

미리 보기 창의 추가 보안을 비활성화합니다. 이를 통해 스크립트 실행이 가능하며 http를 통해 콘텐츠를 로드할 수도 있습니다.

Doc Writer 프로필 템플릿

프로필을 사용하면 현재 프로젝트 또는 작업에 따라 확장 프로그램, 설정 및 UI 레이아웃을 빠르게 전환할 수 있습니다. Markdown 편집을 시작하는 데 도움이 되도록 유용한 확장 프로그램과 설정이 포함된 큐레이션된 프로필인 Doc Writer 프로필 템플릿을 사용할 수 있습니다. 프로필 템플릿을 그대로 사용하거나 시작점으로 삼아 자체 워크플로에 맞게 더 사용자 정의할 수 있습니다.

프로필 > 프로필 만들기... 드롭다운을 통해 프로필 템플릿을 선택합니다.

프로필 템플릿을 선택하면 설정 및 확장 프로그램을 검토하고 새 프로필에 포함하고 싶지 않은 개별 항목을 제거할 수 있습니다. 템플릿을 기반으로 새 프로필을 만든 후 설정, 확장 프로그램 또는 UI에 대한 변경 사항은 프로필에 유지됩니다.

Markdown 확장

VS Code에서 기본적으로 제공하는 기능 외에도 더 많은 기능을 위해 확장 프로그램을 설치할 수 있습니다.

팁: 확장 프로그램 타일을 선택하여 설명과 리뷰를 읽고 어떤 확장 프로그램이 가장 적합한지 결정하세요. Marketplace에서 더 많은 정보를 확인하세요.

다음 단계

자세한 내용은 계속 읽어보세요.

CSS, SCSS 및 Less - CSS를 편집하고 싶으신가요? VS Code는 CSS, SCSS 및 Less 편집을 위한 훌륭한 지원을 제공합니다.

자주 묻는 질문

맞춤법 검사가 있나요?

VS Code와 함께 설치되지는 않지만 맞춤법 검사 확장 프로그램이 있습니다. VS Code Marketplace에서 워크플로에 도움이 되는 유용한 확장 프로그램을 찾아보세요.

VS Code는 GitHub Flavored Markdown을 지원하나요?

아니요, VS Code는 markdown-it 라이브러리를 사용하여 CommonMark Markdown 사양을 대상으로 합니다. GitHub는 CommonMark 사양을 향해 나아가고 있으며, 이에 대한 내용은 이 업데이트에서 확인할 수 있습니다.

12/10/2025