개발/Visual Studio Code

VS Code 멀티 커서 사용법 총정리|반복되는 코드를 한 번에 수정하는 방법

반응형
VS CODE PRODUCTIVITY

VS Code 멀티 커서 사용법
반복 수정을 한 번에 끝내기

같은 단어 바꾸기, 여러 줄 동시 입력, 세로 선택까지—알아두면 코딩 속도가 확실히 빨라지는 멀티 커서 활용법을 예제로 정리했습니다.

멀티 커서(Multi-cursor)는 한 문서 안에 여러 개의 커서를 만들어 동시에 입력하거나 삭제하는 기능입니다. 반복되는 코드를 일일이 수정하는 대신 한 번의 타이핑으로 여러 위치를 바꿀 수 있습니다.

1. 멀티 커서는 언제 사용할까?

  • 같은 단어를 여러 곳에서 변경 변수명, 클래스명, 태그처럼 반복되는 텍스트를 동시에 수정합니다.
  • 여러 줄 앞뒤에 문자 추가 각 줄 앞에 따옴표나 주석을 붙이고, 줄 끝에 쉼표를 넣을 수 있습니다.
  • 규칙적인 세로 영역 편집 표처럼 정렬된 텍스트에서 같은 열만 선택해 삭제하거나 입력합니다.
  • 반복 코드 빠르게 작성 HTML 속성, SQL 별칭, 로그 문구 등을 여러 줄에 동시에 추가합니다.
멀티 커서와 전체 바꾸기의 차이: 전체 바꾸기는 조건에 맞는 텍스트를 일괄 변환할 때, 멀티 커서는 선택한 위치마다 문맥에 맞게 직접 편집할 때 좋습니다.

2. 멀티 커서를 만드는 5가지 방법

1 원하는 위치를 마우스로 직접 선택

Windows/Linux에서는 Alt, macOS에서는 Option을 누른 채 원하는 위치를 차례로 클릭합니다. 위치가 서로 달라도 자유롭게 커서를 만들 수 있어 가장 직관적입니다.

const name = 'Jin';       // name 뒤 클릭
console.log(name);        // name 뒤 클릭
return name;              // name 뒤 클릭

세 곳에 커서를 만든 뒤 입력하거나 Backspace를 누르면 세 위치가 동시에 편집됩니다.

2 위·아래 줄에 커서 추가

현재 커서를 기준으로 위나 아래에 커서를 계속 추가합니다. 여러 줄의 같은 위치에 내용을 넣을 때 빠릅니다.

기능Windows / LinuxmacOS
아래 줄에 커서 추가Ctrl + Alt + ↓Option + Command + ↓
위 줄에 커서 추가Ctrl + Alt + ↑Option + Command + ↑
단축키가 작동하지 않는다면? Windows의 그래픽 드라이버나 다른 프로그램이 Ctrl + Alt + 방향키를 먼저 사용하고 있을 수 있습니다. VS Code의 키보드 단축키 설정에서 Add Cursor Above/Below를 검색해 다른 키로 지정하세요.

3 같은 단어를 하나씩 선택

단어를 선택하거나 단어 위에 커서를 둔 뒤 Ctrl + D를 누릅니다. 누를 때마다 다음으로 일치하는 단어가 선택됩니다. macOS는 Command + D입니다.

  • 수정할 항목을 눈으로 확인하며 하나씩 추가할 수 있습니다.
  • 필요한 범위만 골라 수정할 때 가장 많이 쓰는 방식입니다.
  • 선택 후 새 이름을 입력하면 모든 선택 영역이 동시에 교체됩니다.

4 다음 일치 항목 건너뛰기

Ctrl + D로 선택하다가 바꾸면 안 되는 항목을 만났다면 Ctrl + K를 누른 다음 Ctrl + D를 누릅니다. macOS는 Command 기준입니다. 현재 항목은 건너뛰고 다음 일치 항목을 선택합니다.

포인트: 키를 동시에 네 개 누르는 것이 아닙니다. Ctrl+K를 먼저 눌렀다 놓고, 이어서 Ctrl+D를 누르는 순차 단축키입니다.

5 일치하는 모든 단어를 한 번에 선택

수정할 단어를 선택한 뒤 Windows/Linux에서 Ctrl + Shift + L, macOS에서 Command + Shift + L을 누릅니다. 현재 문서에서 일치하는 모든 항목에 커서가 생깁니다.

주의: 같은 철자라도 의미가 다른 항목까지 선택될 수 있습니다. 입력하기 전에 선택된 위치를 스크롤하며 확인하고, 범위가 넓거나 코드 구조를 인식해야 하는 변수명 변경은 이름 바꾸기(F2) 기능을 고려하세요.

3. 멀티 커서 필수 단축키

기능Windows / LinuxmacOS
클릭한 위치에 커서 추가Alt + 클릭Option + 클릭
다음 일치 항목 선택Ctrl + DCommand + D
다음 일치 항목 건너뛰기Ctrl + K → Ctrl + DCommand + K → Command + D
모든 일치 항목 선택Ctrl + Shift + LCommand + Shift + L
선택한 각 줄의 끝에 커서Shift + Alt + IShift + Option + I
세로 영역 마우스 선택Shift + Alt + 드래그Shift + Option + 드래그
멀티 커서 해제EscEsc
마지막 커서 작업 취소Ctrl + UCommand + U

4. 실전 활용 예제

활용 1: HTML 클래스명 일부만 바꾸기

BEFORE
<div class="card">상품 A</div>
<div class="card">상품 B</div>
<div class="card">상품 C</div>
AFTER
<div class="product-card">상품 A</div>
<div class="product-card">상품 B</div>
<div class="product-card">상품 C</div>

첫 번째 card를 선택하고 Ctrl+D를 두 번 누른 뒤 product-card를 입력합니다.

활용 2: 여러 줄 끝에 쉼표 추가

BEFORE
user_id
user_name
created_at
updated_at
AFTER
user_id,
user_name,
created_at,
updated_at,

네 줄을 모두 선택하고 Shift+Alt+I를 누르면 각 줄 끝에 커서가 생깁니다. 이제 쉼표를 한 번만 입력하면 됩니다. 마지막 줄의 쉼표가 필요 없다면 Esc로 멀티 커서를 해제한 뒤 마지막 줄만 지웁니다.

활용 3: SQL 컬럼에 테이블 별칭 붙이기

BEFORE
SELECT
  user_id,
  user_name,
  created_at
FROM users
AFTER
SELECT
  u.user_id,
  u.user_name,
  u.created_at
FROM users AS u

세 컬럼 이름 앞을 Alt+클릭으로 선택하거나 커서를 위·아래로 추가한 뒤 u.를 입력합니다. 컬럼이 규칙적으로 정렬되어 있다면 세로 선택도 편리합니다.

활용 4: 여러 줄을 문자열 배열로 바꾸기

BEFORE
apple
banana
orange
AFTER
'apple',
'banana',
'orange',
  1. 세 줄을 선택하고 Shift+Alt+I로 각 줄 끝에 커서를 만듭니다.
  2. ',를 입력합니다.
  3. Home으로 각 줄의 시작으로 이동한 뒤 '를 입력합니다.

활용 5: 세로(박스) 선택

Shift + Alt를 누른 채 마우스를 드래그하면 직사각형 영역을 선택할 수 있습니다. 로그의 고정된 접두사나 표 형태 데이터의 특정 열처럼 위치가 일정한 텍스트를 편집할 때 유용합니다.

팁: 줄마다 길이가 다르거나 탭과 공백이 섞여 있으면 세로 위치가 예상과 다를 수 있습니다. 이때는 포맷을 먼저 맞추거나 Alt+클릭을 사용하세요.

5. 선택 해제와 실수 방지

커서를 모두 하나로 되돌리기

Esc를 누르면 보조 커서가 사라지고 기본 커서 하나만 남습니다.

방금 추가한 커서만 취소하기

Windows/Linux에서 Ctrl + U, macOS에서 Command + U를 사용합니다. 커서를 너무 많이 추가했을 때 유용합니다.

수정 전에 선택 범위 확인하기

  • 상태 표시줄과 화면에서 커서 개수를 눈으로 확인합니다.
  • 전체 선택 후에는 문서 아래쪽까지 예상치 못한 항목이 잡혔는지 살펴봅니다.
  • 큰 변경 직후에는 저장 전에 Ctrl+Z로 되돌릴 수 있는지 기억해 둡니다.
  • 변수·함수 이름은 가능한 경우 언어 구조를 이해하는 F2 이름 바꾸기를 사용합니다.

6. 단축키가 다르게 동작할 때

Ctrl + K를 누른 다음 Ctrl + S를 누르면 키보드 단축키 설정이 열립니다. 아래 명령 이름을 검색하면 현재 키를 확인하거나 변경할 수 있습니다.

Add Cursor Above
Add Cursor Below
Add Selection To Next Find Match
Select All Occurrences of Find Match
Insert Cursor at End of Each Line Selected
Column Selection

설정의 editor.multiCursorModifier 값을 변경하면 멀티 커서 클릭 키를 기본 Alt에서 Windows의 Ctrl, macOS의 Command로 바꿀 수도 있습니다. 이 경우 링크 열기와 정의로 이동에 사용하는 마우스 보조 키도 충돌하지 않도록 함께 바뀝니다.

7. 3분 연습 문제

아래 코드를 VS Code에 붙여 넣고 직접 수정해 보세요.

const itemName = '노트북';
console.log(itemName);
saveItem(itemName);
return itemName;
  1. itemName 위에 커서를 놓고 Ctrl+D를 반복해 네 곳을 선택합니다.
  2. productName을 입력해 동시에 변경합니다.
  3. Esc로 멀티 커서를 해제합니다.
  4. 네 줄을 선택한 뒤 Shift+Alt+I로 각 줄 끝에 커서를 만들어 같은 주석을 입력해 봅니다.
가장 먼저 익힐 조합은 세 가지면 충분합니다.
Alt+클릭, Ctrl+D, Ctrl+Shift+L을 반복해서 사용하다 보면 멀티 커서가 자연스럽게 손에 익습니다.

참고: VS Code 공식 문서 — Multiple selections · Column selection. 단축키는 기본 키 바인딩 기준이며 운영체제와 사용자 설정에 따라 달라질 수 있습니다.

반응형
이 글이 유용했다면 링크를 공유해 보세요.