VS Code 필수 단축키 모음: 외우는 문서가 아니라 손이 빨라지는 연습표
VS Code 필수 단축키 모음: 외우는 문서가 아니라 손이 빨라지는 연습표
먼저 결론
VS Code 단축키는 많이 외우는 것이 목표가 아닙니다. 자주 하는 행동에서 마우스를 빼는 것이 목표입니다.
처음부터 50개를 외우려고 하면 대부분 실패합니다. 대신 하루에 3개씩, 실제 작업 흐름 안에서 익혀야 합니다. 파일 열기, 검색, 커서 이동, 멀티 선택, 터미널 전환, 포맷팅처럼 매일 반복하는 동작부터 줄이면 체감 속도가 바로 올라갑니다.
VS Code 공식 문서도 키보드 단축키 편집기와 기본 키바인딩 레퍼런스를 제공합니다. 단축키는 운영체제, 키보드 레이아웃, 확장 프로그램에 따라 달라질 수 있으므로, 최종 기준은 내 VS Code의 Keyboard Shortcuts 화면입니다.
참고: VS Code Keyboard Shortcuts, Default Keyboard Shortcuts Reference
단축키를 익히는 기준
단축키는 기능별로 외우면 금방 잊어버립니다. 작업 흐름별로 묶어야 남습니다.
| 작업 흐름 | 익힐 단축키 | 목표 |
|---|---|---|
| 파일 이동 | Ctrl+P, Ctrl+Tab | 마우스로 파일 찾지 않기 |
| 검색 | Ctrl+F, Ctrl+Shift+F | 현재 파일/전체 프로젝트 검색 분리 |
| 편집 | Ctrl+D, Alt+↑/↓, Ctrl+/ | 반복 수정 속도 올리기 |
| 코드 이해 | F12, Alt+F12, Shift+F12 | 정의/참조 추적 |
| 터미널 | Ctrl+\``, Ctrl+Shift+`` | 화면 전환 줄이기 |
| 명령 실행 | Ctrl+Shift+P | 메뉴를 찾지 않고 명령 실행 |
1단계: 반드시 먼저 익힐 10개
| 단축키 | 기능 | 언제 쓰는가 |
|---|---|---|
Ctrl+P | 파일 빠른 열기 | 파일명을 대충 알고 있을 때 |
Ctrl+Shift+P | 명령 팔레트 | 설정/명령을 메뉴 없이 실행할 때 |
Ctrl+F | 현재 파일 검색 | 파일 안에서 단어 찾기 |
Ctrl+Shift+F | 전체 검색 | 프로젝트 전체에서 사용처 찾기 |
Ctrl+D | 같은 단어 다음 항목 선택 | 같은 이름을 여러 곳 수정 |
Ctrl+/ | 주석 토글 | 임시 비활성화나 설명 추가 |
Alt+↑/↓ | 줄 이동 | 코드를 위아래로 옮김 |
Ctrl+Shift+K | 줄 삭제 | 한 줄 통째로 제거 |
F12 | 정의로 이동 | 함수/변수 선언 확인 |
| `Ctrl+`` | 터미널 토글 | 터미널을 열고 닫음 |
이 10개만 익혀도 작업 흐름이 달라집니다.
2단계: 편집 속도를 올리는 단축키
같은 단어 여러 개 수정
Ctrl+D는 현재 선택한 단어와 같은 다음 항목을 추가 선택합니다.
사용 예:
- 변수명 하나를 선택합니다.
Ctrl+D를 눌러 다음 같은 단어를 선택합니다.- 필요한 만큼 반복합니다.
- 새 이름을 입력하면 선택한 곳이 동시에 바뀝니다.
주의할 점은 모든 같은 단어를 무조건 바꾸는 것이 아니라, 필요한 것만 하나씩 추가한다는 점입니다.
같은 단어 전체 선택
Ctrl+Shift+L은 현재 선택한 단어와 같은 항목을 모두 선택합니다.
이 기능은 빠르지만 위험합니다. 같은 단어가 문서, 주석, 문자열 안에도 있을 수 있습니다. 전체 선택 후에는 반드시 변경 범위를 눈으로 확인하세요.
줄 이동
Alt+↑/↓는 현재 줄을 위아래로 이동합니다.
이 단축키는 코드 리팩터링보다 글쓰기에도 유용합니다. 문단 순서를 바꿀 때 마우스로 드래그하지 않아도 됩니다.
줄 복사
Shift+Alt+↓는 현재 줄을 아래로 복사합니다.
비슷한 설정이나 JSX 요소를 만들 때 좋습니다. 단, 복사 후 이름과 key, id가 중복되지 않았는지 확인해야 합니다.
3단계: 탐색 단축키
빠른 파일 이동
Ctrl+P
파일명을 정확히 몰라도 일부만 입력하면 됩니다.
예:
page mod
이런 식으로 입력해도 page.module.css를 찾을 수 있습니다.
특정 줄로 이동
Ctrl+G
에러 로그에 file.tsx:132처럼 줄 번호가 나왔을 때 바로 이동할 수 있습니다.
정의로 이동
F12
함수, 타입, 컴포넌트가 어디서 정의됐는지 확인할 때 씁니다.
참조 찾기
Shift+F12
함수나 컴포넌트가 어디서 쓰이는지 확인합니다. 삭제나 변경 전에는 이 단축키가 특히 중요합니다.
4단계: 검색 단축키
현재 파일 검색
Ctrl+F
현재 파일 안에서만 찾습니다. 큰 프로젝트에서 가장 먼저 써야 할 검색입니다.
전체 프로젝트 검색
Ctrl+Shift+F
전체 코드베이스에서 검색합니다. 단, 너무 넓게 검색하면 결과가 많아집니다. 검색어를 구체적으로 잡으세요.
예:
headerIcon
boardHeader
mobileBanner
클래스명, 함수명, API 경로처럼 고유한 단어가 좋습니다.
검색 후 바꾸기
현재 파일에서는 Ctrl+H, 전체 프로젝트에서는 검색 패널의 Replace를 사용합니다.
주의:
- 바꾸기 전에 검색 결과를 훑습니다.
- 문자열, 문서, 주석이 섞였는지 봅니다.
- 대량 변경은 커밋을 나누고 진행합니다.
5단계: 터미널과 패널 조작
| 단축키 | 기능 |
|---|---|
| `Ctrl+`` | 통합 터미널 열기/닫기 |
| `Ctrl+Shift+`` | 새 터미널 만들기 |
Ctrl+B | 사이드바 열기/닫기 |
Ctrl+J | 하단 패널 열기/닫기 |
개발 중에는 편집기와 터미널을 계속 오갑니다. 이 전환을 마우스로 하면 생각이 끊깁니다.
실전 루틴 1: 버그 위치 찾기
- 에러 메시지에서 고유 단어를 찾습니다.
Ctrl+Shift+F로 전체 검색합니다.- 파일이 열리면
Ctrl+G로 줄 번호에 갑니다. - 관련 함수에서
F12로 정의를 확인합니다. Shift+F12로 사용처를 확인합니다.
이 루틴은 단축키를 외우기보다 문제 해결 흐름으로 익히는 방식입니다.
실전 루틴 2: CSS 클래스 수정
- 브라우저에서 클래스명 일부를 확인합니다.
- VS Code에서
Ctrl+Shift+F로 검색합니다. - CSS 모듈 파일을 엽니다.
- 수정 후 `Ctrl+``로 터미널을 열어 빌드/린트를 실행합니다.
- 다시 브라우저에서 확인합니다.
이 루틴을 익히면 UI 수정 속도가 크게 빨라집니다.
실전 루틴 3: 같은 구조 여러 줄 편집
예를 들어 여러 줄의 속성명을 바꿔야 할 때:
- 첫 단어를 선택합니다.
Ctrl+D로 필요한 항목만 추가 선택합니다.- 새 이름을 입력합니다.
Esc로 멀티 커서를 종료합니다.- 빌드나 타입 오류를 확인합니다.
멀티 커서는 강력하지만 위험합니다. 처음에는 작은 범위에서만 쓰세요.
단축키 연습표: 5일 루틴
| 날 | 연습 단축키 | 목표 |
|---|---|---|
| 1일차 | Ctrl+P, Ctrl+Shift+P, `Ctrl+`` | 파일/명령/터미널 전환 |
| 2일차 | Ctrl+F, Ctrl+Shift+F, Ctrl+G | 검색과 줄 이동 |
| 3일차 | Ctrl+D, Ctrl+Shift+L, Ctrl+/ | 반복 편집 |
| 4일차 | Alt+↑/↓, Shift+Alt+↓, Ctrl+Shift+K | 줄 단위 편집 |
| 5일차 | F12, Alt+F12, Shift+F12 | 코드 이해 |
하루에 10분씩만 해도 충분합니다. 핵심은 실제 작업 중 일부러 마우스를 멈추고 단축키를 쓰는 것입니다.
자주 하는 실수
1. 단축키 목록만 저장한다
목록은 도움이 되지만 행동을 바꾸지 않습니다. "언제 쓸지"를 같이 적어야 합니다.
2. 한 번에 너무 많이 외운다
처음에는 10개만 익히세요. 특히 Ctrl+P, Ctrl+Shift+F, Ctrl+D, `Ctrl+`` 네 개는 체감이 큽니다.
3. OS 차이를 무시한다
이 글은 Windows 기준입니다. macOS에서는 Ctrl 대신 Cmd가 들어가는 경우가 많습니다. 최종 확인은 VS Code의 Keyboard Shortcuts 화면에서 하세요.
4. 확장 프로그램 충돌을 확인하지 않는다
확장 프로그램이 단축키를 가져갈 수 있습니다. 단축키가 안 먹히면 Ctrl+K Ctrl+S로 Keyboard Shortcuts를 열고 해당 명령을 검색하세요.
나만의 단축키 관리법
- 자주 쓰는 명령을 Command Palette에서 찾습니다.
- 명령 오른쪽의 설정 아이콘으로 단축키를 지정합니다.
- 이미 쓰는 단축키와 충돌하는지 확인합니다.
- 바꾼 단축키는 따로 메모합니다.
VS Code는 단축키 자체보다 "명령 이름"이 중요합니다. 명령 이름을 알면 단축키가 달라도 찾을 수 있습니다.
체크리스트
- 파일 열기를 마우스 대신
Ctrl+P로 하고 있는가 - 전체 검색과 현재 파일 검색을 구분하고 있는가
- 같은 단어 수정에
Ctrl+D를 쓰고 있는가 - 코드 변경 전
Shift+F12로 사용처를 확인하는가 - 터미널 전환을 단축키로 하고 있는가
- 안 먹히는 단축키는 Keyboard Shortcuts에서 확인했는가