VS Code 초보자 시리즈 · 커맨드 팔레트 1부

모든 기능을 검색해서
키보드로 빠르게 실행하기

Command Palette의 개념부터 명령 검색, 파일 이동, 심볼 탐색, 설정·터미널·확장 실행까지 하나의 예제 프로젝트로 따라 합니다.

VS Code 메뉴가 너무 많아 원하는 기능을 어디에서 찾아야 할지 막막한가요? 커맨드 팔레트(Command Palette)는 메뉴 위치를 외우지 않고도 명령 이름을 검색해 바로 실행할 수 있는 중앙 실행 창입니다. 이번 글에서는 command-palette-lab 프로젝트를 처음부터 만들면서, 파일 생성부터 설정 변경과 터미널 실행까지 커맨드 팔레트만으로 처리해 봅니다.

1. 커맨드 팔레트란 무엇인가

커맨드 팔레트는 VS Code에서 사용할 수 있는 명령을 한곳에서 검색하고 실행하는 창입니다. 파일 메뉴, 보기 메뉴, 설정 화면, 터미널 메뉴의 위치를 모두 기억하지 않아도 명령 이름 일부만 입력하면 관련 기능을 찾을 수 있습니다.

쉽게 기억하기
커맨드 팔레트는 VS Code의 기능 검색창이자 실행창입니다. 검색 → 선택 → 실행 세 단계만 기억하면 됩니다.

방식	필요한 기억	장점	초보자에게 생기는 문제
메뉴 사용	기능이 들어 있는 메뉴 위치	화면으로 확인하기 쉬움	메뉴가 깊어지면 찾기 어려움
단축키 사용	기능별 키 조합	가장 빠름	모든 단축키를 외우기 어려움
커맨드 팔레트	기능 이름의 일부	메뉴와 단축키를 몰라도 검색 가능	처음에는 영어 명령 이름이 낯설 수 있음

2. 왜 필요하고 언제 사용하는가

기능의 위치를 모를 때

예를 들어 저장 시 자동 포맷을 설정하고 싶은데 설정 화면에서 항목을 찾기 어렵다면, 커맨드 팔레트에서 settings json 또는 format document처럼 관련 키워드를 검색하면 됩니다.

메뉴를 여러 단계 거치고 싶지 않을 때

새 터미널 열기, 화면 다시 불러오기, 언어 모드 변경, 확장 목록 열기 같은 작업을 메뉴로 처리하려면 여러 번 클릭해야 합니다. 커맨드 팔레트에서는 명령을 검색하고 Enter만 누르면 됩니다.

설치한 확장의 명령을 찾을 때

확장 프로그램은 자체 명령을 커맨드 팔레트에 추가할 수 있습니다. 확장 설명에서 명령 이름을 확인한 뒤 팔레트에서 검색하면 별도 버튼을 찾지 않고 실행할 수 있습니다.

3. 열기 방법과 화면 읽기

단축키로 열기

Windows·Linux: Ctrl + Shift + P
macOS: ⇧ + ⌘ + P

메뉴로 열기

View → Command Palette...를 선택합니다. 단축키가 바로 기억나지 않을 때 사용할 수 있습니다.

화면에서 확인할 것

입력창 앞의 >: 명령 검색 모드라는 의미입니다.
명령 이름: 실제로 실행할 기능입니다.
오른쪽 단축키: 해당 명령에 기본 단축키가 있으면 함께 표시됩니다.
recently used: 최근 실행한 명령이 상단에 표시됩니다.

정상 결과 팔레트가 화면 상단에 열리고 입력창에 >가 표시됩니다.

4. 검색 모드와 기호 이해하기

커맨드 팔레트와 Quick Open은 같은 입력창을 여러 모드로 사용합니다. 입력창 앞의 기호를 바꾸면 검색 대상이 달라집니다.

입력 방식	검색 대상	예시	바로 여는 단축키
`>`	VS Code 명령	`>format document`	Ctrl + Shift + P
기호 없음	Workspace 파일	`app.js`	Ctrl + P
`#`	Workspace의 심볼	`#addTodo`	Quick Open에서 직접 입력
`@`	현재 파일의 심볼	`@renderList`	Ctrl + Shift + O
`:`	파일의 특정 줄	`app.js:24`	Ctrl + G
`?`	사용 가능한 Quick Open 모드 도움말	`?`	입력창에서 직접 입력

핵심 구분 명령을 실행할 때는 >, 파일을 열 때는 >를 지우고 파일 이름을 입력합니다.

5. 예제 프로젝트 준비하기

이번 실습에서는 간단한 할 일 목록 프로젝트를 만들고 커맨드 팔레트로 파일 생성, 파일 이동, 언어 모드 확인, 설정 변경, 터미널 실행을 진행합니다.

완성할 프로젝트

command-palette-lab/
├─ index.html
├─ style.css
└─ app.js

빈 폴더 command-palette-lab을 만듭니다.
VS Code에서 File → Open Folder...로 해당 폴더를 엽니다.
Workspace Trust가 표시되면 직접 만든 폴더인지 확인한 뒤 신뢰 여부를 선택합니다.

6. 파일 생성과 이동 실습

6-1. 팔레트에서 새 파일 만들기

커맨드 팔레트를 엽니다.
new file을 입력합니다.
File: New File...을 선택합니다.
Text File을 선택하고 index.html로 저장합니다.
같은 방식으로 style.css와 app.js를 만듭니다.

index.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Command Palette Lab</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>오늘 할 일</h1>
    <button id="add-button">할 일 추가</button>
    <ul id="todo-list"></ul>
  </main>
  <script src="app.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #eff6ff;
  color: #172554;
}

main {
  width: min(560px, calc(100% - 40px));
  margin: 80px auto;
  padding: 28px;
  border-radius: 16px;
  background: #ffffff;
}

app.js

const button = document.querySelector("#add-button");
const list = document.querySelector("#todo-list");
let count = 0;

function addTodo() {
  count += 1;
  const item = document.createElement("li");
  item.textContent = `새 할 일 ${count}`;
  list.appendChild(item);
}

button.addEventListener("click", addTodo);

6-2. Quick Open으로 파일 이동하기

Windows·Linux는 Ctrl + P, macOS는 ⌘ + P를 누릅니다.
app을 입력해 app.js를 엽니다.
다시 Quick Open을 열고 style을 입력해 style.css로 이동합니다.

정상 결과 Explorer에서 파일을 찾지 않아도 이름 일부만 입력해 원하는 파일로 이동할 수 있습니다.

6-3. 현재 파일의 함수로 이동하기

app.js를 엽니다.
Windows·Linux는 Ctrl + Shift + O, macOS는 ⇧ + ⌘ + O를 누릅니다.
addTodo를 선택합니다.

정상 결과 커서가 addTodo 함수 정의 위치로 이동합니다.

7. 설정과 화면 기능 실행하기

7-1. 설정 화면 열기

커맨드 팔레트를 엽니다.
open settings ui를 입력합니다.
Preferences: Open Settings (UI)를 선택합니다.

7-2. JSON 설정 열기

설정 파일을 직접 편집하려면 Preferences: Open User Settings (JSON)을 실행합니다.

{
  "editor.fontSize": 16,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay"
}

7-3. Word Wrap 빠르게 전환하기

커맨드 팔레트에서 View: Toggle Word Wrap를 검색해 실행합니다. 긴 줄이 화면 너비에 맞춰 접히거나 한 줄로 표시됩니다.

7-4. 창 다시 불러오기

확장 설치나 설정 변경 후 화면이 이상하다면 Developer: Reload Window를 실행해 VS Code 창을 다시 불러올 수 있습니다.

8. 터미널과 확장 기능 실행하기

8-1. 새 터미널 열기

커맨드 팔레트에서 new terminal을 검색합니다.
Terminal: Create New Terminal을 실행합니다.
터미널에서 현재 폴더의 파일을 확인합니다.

# macOS / Linux
ls

# Windows PowerShell
dir

8-2. 확장 보기 열기

View: Show Extensions를 실행하면 Extensions 뷰가 열립니다. 포매터를 설치한 뒤 커맨드 팔레트에서 Format Document With...를 검색하면 사용할 포매터를 선택할 수 있습니다.

8-3. 표시 언어 확인하기

Configure Display Language를 실행하면 VS Code의 표시 언어를 선택할 수 있습니다. 언어 팩이 없다면 Marketplace 설치 안내가 나타날 수 있습니다.

9. 자주 쓰는 명령 10개

검색어	명령	사용 상황
`new file`	File: New File...	새 파일 생성
`settings ui`	Preferences: Open Settings (UI)	설정 화면 열기
`settings json`	Preferences: Open User Settings (JSON)	사용자 설정 직접 편집
`new terminal`	Terminal: Create New Terminal	통합 터미널 열기
`format document`	Format Document	현재 문서 포맷
`language mode`	Change Language Mode	파일 언어 인식 변경
`reload window`	Developer: Reload Window	화면·확장 상태 새로고침
`extensions`	View: Show Extensions	확장 관리 화면 열기
`keyboard shortcuts`	Preferences: Open Keyboard Shortcuts	단축키 검색·변경
`toggle sidebar`	View: Toggle Primary Side Bar Visibility	사이드바 표시 전환

10. 자주 하는 실수와 복구 방법

문제	원인	복구 방법
명령 대신 파일 목록이 보임	입력창 앞의 `>`가 없음	`>`를 입력하거나 커맨드 팔레트 단축키로 다시 열기
검색 결과가 안 나옴	명령 이름을 너무 길고 정확하게 입력	핵심 단어 한두 개만 입력해 fuzzy 검색 활용
원하는 명령이 회색으로 비활성화됨	현재 파일·폴더·선택 영역 등 실행 조건 불충족	필요한 파일이나 뷰를 먼저 열고 다시 실행
확장 명령이 보이지 않음	확장 미설치·비활성화·현재 Workspace에서 비활성	Extensions 뷰에서 설치 및 활성 상태 확인
단축키가 문서와 다름	운영체제 또는 키보드 레이아웃 차이	명령 오른쪽에 표시되는 현재 단축키 확인
명령 실행 후 화면이 이상함	레이아웃 변경 또는 확장 상태 문제	Developer: Reload Window 또는 View: Reset View Locations 실행
최근 명령만 계속 선택됨	최근 사용 기록이 상단에 표시됨	검색어를 입력해 결과를 좁히거나 방향키로 다른 명령 선택

11. 직접 따라 하기와 연습 과제

15분 종합 실습

커맨드 팔레트에서 File: New File...을 실행해 파일 세 개를 만듭니다.
Quick Open으로 app.js와 style.css를 번갈아 엽니다.
app.js에서 현재 파일 심볼 검색으로 addTodo 함수로 이동합니다.
Settings UI와 User Settings JSON을 각각 엽니다.
View: Toggle Word Wrap을 실행해 결과를 비교합니다.
Terminal: Create New Terminal로 터미널을 엽니다.
View: Show Extensions로 확장 화면을 엽니다.
Developer: Reload Window를 실행하고 프로젝트가 그대로 열리는지 확인합니다.

연습 과제

?를 입력해 사용할 수 있는 Quick Open 모드를 확인하세요.
#로 Workspace 전체에서 addTodo 심볼을 검색하세요.
Keyboard Shortcuts 편집기를 커맨드 팔레트로 열고 자주 쓰는 명령의 단축키를 확인하세요.
명령 이름을 완전히 입력하지 않고 fmt doc, new term처럼 줄여 검색해 보세요.

12. 핵심 정리와 다음 편 예고

커맨드 팔레트는 VS Code의 명령을 검색하고 실행하는 중앙 도구입니다.
>는 명령, 기호 없음은 파일, @와 #는 심볼 검색에 사용합니다.
메뉴 위치와 모든 단축키를 외우지 않아도 기능 이름 일부만 알면 됩니다.
명령이 비활성화되면 현재 파일·선택 영역·Workspace 등 실행 조건을 확인합니다.

다음 편 예고 — 커맨드 팔레트 2부 실무 활용편
다음 편에서는 최근 명령을 빠르게 재실행하는 방법, 키보드 단축키 지정, 여러 명령을 하나의 단축키로 실행하는 방법, 확장 명령 관리와 상황별 검색 패턴을 다룹니다.

공식 참고 자료

'개발 > Visual Studio Code' 카테고리의 다른 글

VS Code 커맨드 팔레트 3부｜Tasks와 runCommands로 반복 작업 자동화 (1)	2026.08.02
VS Code 커맨드 팔레트 2부｜파일·심볼·줄 이동과 단축키 지정 (0)	2026.08.01
VS Code 설정 동기화 2부｜충돌 해결·백업 복원·PC 관리 완벽 가이드 (0)	2026.07.30
VS Code Workspace Trust 2부｜신뢰 폴더와 제한 모드 안전하게 관리하기 (0)	2026.07.29
VS Code Workspace Trust 초보자 가이드: 낯선 프로젝트 안전하게 열기 (0)	2026.07.28

VS Code 커맨드 팔레트 초보자 가이드｜모든 기능을 키보드로 빠르게 실행하기

모든 기능을 검색해서
키보드로 빠르게 실행하기

1. 커맨드 팔레트란 무엇인가

2. 왜 필요하고 언제 사용하는가

기능의 위치를 모를 때

메뉴를 여러 단계 거치고 싶지 않을 때

설치한 확장의 명령을 찾을 때

3. 열기 방법과 화면 읽기

단축키로 열기

메뉴로 열기

화면에서 확인할 것

4. 검색 모드와 기호 이해하기

5. 예제 프로젝트 준비하기

6. 파일 생성과 이동 실습

6-1. 팔레트에서 새 파일 만들기

6-2. Quick Open으로 파일 이동하기

6-3. 현재 파일의 함수로 이동하기

7. 설정과 화면 기능 실행하기

7-1. 설정 화면 열기

7-2. JSON 설정 열기

7-3. Word Wrap 빠르게 전환하기

7-4. 창 다시 불러오기

8. 터미널과 확장 기능 실행하기

8-1. 새 터미널 열기

8-2. 확장 보기 열기

8-3. 표시 언어 확인하기

9. 자주 쓰는 명령 10개

10. 자주 하는 실수와 복구 방법

11. 직접 따라 하기와 연습 과제

15분 종합 실습

연습 과제

12. 핵심 정리와 다음 편 예고

공식 참고 자료

'개발 > Visual Studio Code' 카테고리의 다른 글

티스토리툴바

1. 커맨드 팔레트란 무엇인가

2. 왜 필요하고 언제 사용하는가

기능의 위치를 모를 때

메뉴를 여러 단계 거치고 싶지 않을 때

설치한 확장의 명령을 찾을 때

3. 열기 방법과 화면 읽기

단축키로 열기

메뉴로 열기

화면에서 확인할 것

4. 검색 모드와 기호 이해하기

5. 예제 프로젝트 준비하기

6. 파일 생성과 이동 실습

6-1. 팔레트에서 새 파일 만들기

6-2. Quick Open으로 파일 이동하기

6-3. 현재 파일의 함수로 이동하기

7. 설정과 화면 기능 실행하기

7-1. 설정 화면 열기

7-2. JSON 설정 열기

7-3. Word Wrap 빠르게 전환하기

7-4. 창 다시 불러오기

8. 터미널과 확장 기능 실행하기

8-1. 새 터미널 열기

8-2. 확장 보기 열기

8-3. 표시 언어 확인하기

9. 자주 쓰는 명령 10개

10. 자주 하는 실수와 복구 방법

11. 직접 따라 하기와 연습 과제

15분 종합 실습

연습 과제

12. 핵심 정리와 다음 편 예고

공식 참고 자료

'개발 > Visual Studio Code' 카테고리의 다른 글

같은 카테고리의 글

티스토리툴바