지난 몇 달 간 마우스 없이 개발하는 능력을 기르는 데에 많은 노력을 쏟아보았고, 그 결과 지금은 마우스를 거의 사용하지 않고 개발을 하고 있습니다. 아직 갈 길이 멀어 보이지만 - 그래도 지금까지의 여정을 글로 기록해보려 합니다.

이 글이 단축키를 연마해보려는 분들께 도움을, 아니면 최소한 재미라도 드릴 수 있길 바랍니다.

---

마우스를 이용하지 않고 싶다고 생각하게 된 데에는 몇 가지 이유가 있었는데,

• 오른손이 키보드를 떠나 마우스까지 이동하고, 거기서 다시 FPS게임에서 에임을 맞추듯 커서 위치를 정확하게 조정해야 하는 게 꽤나 피로하고 은근히 많은 시간과 집중력을 잡아먹는다고 느껴졌습니다.
• 잠깐이었지만 처음으로 손목이 아파 봤습니다. 가능하면 마우스/트랙패드 사용량을 줄여서 손목 건강을 유지하고 싶어졌습니다.
• 단축키를 잘 사용하면 뭔가 고수 개발자같고 멋있을 것 같았습니다.

개발자로서 Slack, GitHub, Notion, VS Code, iTerm 등 많은 도구들을 이용하기에 이들의 단축키를 모두 마스터해야 진짜 마우스 없는 삶을 살 수 있겠다고 생각했고, 이 중 가장 많은 시간을 보내고 마우스를 이용할 때 가장 많은 부담이 온다고 느껴지는 VS Code 를 먼저 마스터해보기로 했습니다. 나머지 도구들에 대한 내용은 이후 글에서 차차 다뤄보려 합니다.

공식 명칭은 Visual Studio Code 또는 VS Code 이지만, 둘 다 좀 어색한 느낌이 있어서 좀더 익숙하고 일반적으로 쓰이는 vscode 라는 표현을 이용하겠습니다.

vscode 에 유창해지기

에디터를 유창하게 (fluency) 쓸 수 있게 하라.
유창해지는 것의 가장 큰 이점은 더는 에디터 사용법을 생각하지 않아도 된다는 것이다.

- 실용주의 프로그래머 중

vim 을 시도했다가 포기했습니다

에디터 에서 마우스를 이용하지 않겠다고 다짐할 때 처음으로 고려한 후보는 vim 이었습니다. vim 을 이용하고 계신 지인분들께서 하나같이 vim 을 이용하면 코드 생산성이 정말 많이 올라간다고 말해주셨고, 저 역시도 vim 이 그런 역할을 잘 해 줄 수 있는 도구라고 배워왔기에 2주 가량 vim 을 제대로 써 보려고 공부하고 적용해봤습니다.

처음에는 제일 멋있게 vscode 도 없이 터미널에서 바로 vim 만 이용해보려고 했으나, vscode 가 잘 제공해주는 ESLint 나 Prettier 확장프로그램, 저장 시 자동 포매팅, 엔터만 치면 되는 auto import, 그리고 너무나도 중요한 코파일럿 등을 활용할 수 없었으며 주변 동료들과 개발 환경 차이가 너무 커서 협업에도 어려움을 겪을 수 있을 것 같았습니다. (물론 찾아보면 방법이 다 있었을 것 같긴 한데.. 너무 험난한 여정이 예상되어 찾아보지 않았습니다.)

그래서 조금 타협하여 vscode 확장프로그램으로 제공되는 vscode-vim 을 설치해서 이용해보았는데, 며칠 써본 결과 왜인지 렉이 많이 걸렸고 한글 지원이 꽤나 애매하다는 생각이 들었습니다. 또한 숙련도 문제로 실수로 i 를 누르지 않은 상태에서 d u 이런 걸 막 누르다가 엉망이 되는 경우도 종종 겪었습니다.

vim 은 훌륭한 도구가 맞았으나, 이런 과정을 거치고 나서 생각해보니 vscode 기본 단축키도 충분히 강력하고 이것만으로도 제가 달성하고자 하는 목표는 충분히 달성할 수 있을 것 같았습니다.

결국 vim 을 포기하고 vscode 단축키를 잘 마스터하기로 결정했습니다.

커스텀 단축키는 가능한 만들지 않기로 했습니다

keybindings 설정을 하면 커스텀 단축키를 설정할 수 있지만, 저는 맥을 여러 대 이용하기도 하고 협업할 때 가능한 동료들과 단축키 설정이 동일하길 기대했습니다. 단축키는 손에 익어 숨쉬듯이 이용할 기능이기에 가능한 다양한 환경에서 이 역량이 빛을 발할 수 있도록 vscode가 제공하는 기본 단축키만을 습득하려 했습니다.

마우스 이용을 강제로 제한했습니다

vscode 를 4년간 이용하며 트랙패드를 사용하는 습관이 굳어졌고, 의지만으로는 이 습관을 변경하는 게 쉽지 않았습니다. 항상 습관적으로 트랙패드로 손이 갔습니다. 조금 리서치해본 결과 Disable Mouse 라는 플러그인을 발견하여 설치해서 이용했습니다.

이 플러그인은 vscode에서 마우스 사용을 제한합니다. 모든 상황에서 마우스를 완벽하게 막아주지는 않지만, 최소한 커서 조정이라도 못 하게 해 주기에 제가 강제로 단축키를 공부하고 적용하게 되는 데에 많은 도움을 주었습니다.

최근에는 단축키 사용이 꽤나 유창해져서 이 플러그인보다 더한 강제성을 주고 싶어졌습니다. 요즘은 트랙패드 연결을 아예 끊어버리고 책상 위에 키보드만 둔 채로 개발하는 것을 연습하고 있습니다.

유용한 vscode 단축키들 추천

vscode 에서 단축키를 적극적으로 활용하며 유용하다고 느꼈던 것들을 위주로 이야기해보려 합니다.

모든 단축키는 맥 키보드를 기준으로 하고 있습니다. 같이 습득해보고 싶으시다면, 이 글과 함께 vscode 를 띄워두고 개발하시는 프로젝트에서 직접 입력해보시길 권장드립니다.

커서

• 가장 기본적인 방향키들: option + 좌우방향키, cmd + 좌우방향키, cmd + 상하방향키, fn + 상하방향키
  • 각각 단어 단위 좌우 이동, 현재 줄의 맨 앞 / 맨 뒤로 이동, 현재 파일의 맨 앞 / 맨 뒤로 이동, 현재 뷰의 맨 위 / 맨 아래로 이동입니다.
  • 너무 기본적이지만 또 그만큼 중요해서 데려와 봤습니다.
• option + F5
  • 현재 파일에서 만들었던 다음 변경사항으로 이동합니다.
  • 한 파일 내에서 여기저기 왔다갔다 하면서 수정할 때 빠르게 이동할 수 있습니다.
• F8
  • 현재 열려있는 탭들 중 다음 "problem" (타입에러나 린트 에러 등 빨간줄/노란줄이 떠 있는 곳) 으로 이동합니다.
  • 많은 경우 타입을 수정하면 연관된 곳들이 펑펑펑 빨갛게 터지는데, 해당 위치로 바로 이동해서 고칠 때 편리합니다.
  • 
• F12
  • definition / references 들을 보여주고 이동할 수 있게 도와줍니다. 많은 분들이 이용하시는 cmd + 클릭 과 동일한 기능입니다.
  • 레퍼런스를 타고타고 가는 등의 상황에서 이미 정말 많이 이용하고 계실 것으로 예상합니다.
  • 
• cmd + u
  • 커서 변경을 undo 합니다.
  • 가령 아래 방향키를 누르려다가 실수로 cmd + 아래 방향키 를 눌러서 맨 밑으로 가버린다거나, 아니면 다중선택 열심히 해놨는데 잘못 눌러서 다중선택한 게 날아갈 때가 있는데 이럴 때 복구하기 좋습니다.
• cmd + shift + l
  • 현재 커서가 가리키는 단어를 현재 파일에서 모두 선택합니다.
  • 특정 파일에 존재하는 모든 단어를 바꾸고 싶을 때 유용합니다.
  • 
• ctrl + g
  • 특정 줄과 컬럼으로 이동합니다.
  • 줄번호나 컬럼 번호를 알고 있는 상황에서 해당 줄로 즉시 이동할 수 있습니다.
  • 
• cmd + option + 상하방향키
  • 여러 줄을 선택합니다.
  • 비슷하게 생긴 여러 줄을 한 번에 수정하고 싶을 때 일일이 클릭하는 것보다 훨씬 빠르고 정확합니다.
  • 
• ctrl + shift + 오른쪽 방향키
  • 블럭 단위 선택입니다.
  • 객체 전체를 지우거나 함수 전체를 지우고 싶은 경우가 자주 생기는데, 이럴 때 매우 좋습니다.
  • 
• option + cmd + [ option + cmd + ]
  • 접고 펼칩니다.
  • 내용물이 너무 길어서 접어서 보고 싶을 때 유용합니다. 마우스를 사용하지 않을 거라면, 에디터에서 스크롤하는 것이 쉽지 않기에 함수/객체들을 잘 접어야 코드를 편하게 읽을 수 있습니다.
  • 
• cmd + shift + \
  • 반대쪽 괄호로 이동합니다.
  • 특정 객체나 함수의 맨 앞 / 맨 뒤로 이동할 때 좋습니다.

검색

• 검색 또는 전체검색 상태에서 option + cmd + c, option + cmd + w, option + cmd + r

  • 각각 대소문자 일치여부, 단어 전체 일치 여부, 정규식 모드 를 토글하는 단축키입니다.
  • 아래 사진의 버튼을 클릭하는 것으로도 가능하나, 단축키를 활용하면 마우스 없이 토글을 할 수 있습니다.
  • 

• 검색 상태에서 방향키 위아래

  • 이전에 검색했던 것을 다시 검색합니다.
  • 의외로 키가 매우 간단해서, 기억하고 있으면 언젠가 필요해질 때 적용하기 좋습니다.

• 전체검색 후 F4

  • 일반 검색에서는 검색 결과로 커서를 보내려면 그냥 엔터를 치면 되는데, 전체검색에서는 엔터를 쳐도 커서가 이동하지 않습니다.
  • 전체검색 상태에서는 F4 를 활용해야 검색 결과로 이동합니다.
  • 

• cmd + p

  • 파일을 검색하여 해당 파일로 이동합니다.
  • 원하는 파일로 빠르게 이동할 수 있습니다.
  • 

• cmd + t

  • 현재 워크스페이스 내의 특정 심볼로 이동합니다.
  • 특정 모듈을 찾을 때 보통 파일을 찾고 파일 안에서 모듈을 찾거나 / 전체 검색을 한 다음 타고타고 들어가곤 하는데, cmd + t 를 활용하면 워크스페이스 내에 있는 모듈 정의로 즉시 이동할 수 있습니다.
  • 

탭과 섹션

• option + cmd + t
  • 현재 탭을 제외한 모든 탭을 닫습니다.
  • 정신없이 개발하다 보면 종종 vscode 탭이 지저분하게 쌓여버리곤 하는데, 현재 탭을 제외하고 모두 닫아서 청소할 수 있습니다.
• cmd + shift + .
  • 브레드크럼을 열어 주변 파일을 열 수 있게 도와줍니다.
  • .tsx 파일을 켠 상황에서 바로 옆 형제 위치에 있는 .css 파일을 열고 싶은 등의 상황에서 마우스 없이 파일을 꽤 빠르게 열 수 있습니다.
  • 
• option + cmd + 좌우방향키
  • 왼쪽/오른쪽 탭으로 이동합니다.
  • 두 개 이상의 파일을 자주 왔다갔다하면서 건드려야 하는 기능 (가령 .tsx 와 .css) 을 개발할 때, 두 파일을 탭에 띄워두고 왔다갔다하면 편리합니다.
• cmd + \
  • 에디터를 좌우 섹션으로 분할하여, 현재 파일을 새 섹션에서 엽니다.
  • 두 개 이상의 파일을 왔다갔다할 때 탭으로 구분하는 대신 섹션으로 구분하여 한눈에 보면서 개발하고 싶다면 좋은 선택지입니다.
  • 이 경우 섹션 사이를 왔다갔다 할 때는 cmd + 숫자 를 입력하면 됩니다.

터미널

• ctrl + 백틱
  • 터미널을 열고닫습니다.
  • 원래는 터미널을 열고닫는 기능이지만, 저는 터미널을 포커스하는 역할로 주로 이용합니다.
  • 돌아갈 때는 ctrl + 1 을 하면 에디터 첫 번째 탭으로 돌아갑니다.

기타

• cmd + b
  • 왼쪽 사이드바를 열고닫습니다.
  • 사이드바가 은근 공간을 많이 잡아먹어서, 거슬릴 때 빠르게 닫을 수 있습니다.
• cmd + shift + e
  • 사이드바를 explorer 탭으로 전환합니다.
  • cmd + shift + f 를 해서 전체검색을 한 다음, 다시 파일 목록을 보기 위해 원해 상태로 돌아가고 싶을 때 이용합니다.
• cmd + i
  • 타입스크립트를 사용한다면, 입력할 수 있는 값 목록을 보여줍니다.
  • 자동완성을 활용하여 객체 키값이나 리터럴을 매우 빠르게 입력할 수 있습니다.
  • 
• F2
  • 심볼의 이름을 변경하고, 사용처도 자동으로 변경해줍니다.
  • 변수명을 변경하는 등의 상황에서 직접 변경하는 것보다 이 단축키를 활용하는 게 무조건 좋습니다. 정확히 영향이 가는 곳들만 정확하게 변경해줘서 휴먼 에러가 발생할 가능성이 차단됩니다.
  • 

결론

이렇게 개인적으로 유용하다고 느끼고 많이 사용하고 있는 단축키들을 리스트업해봤는데요, 써놓고 보니 양이 상당한 것 같습니다. 단순 암기로는 습득하기가 너무나도 어려운 것들이기에 손이 기억할 수 있도록 많은 연습과 노력 (그리고 어느 정도의 강제성) 을 통해 습득해야 하는 것 같습니다. 저 역시도 앞서 언급했듯 마우스를 강제로 제한해버리고 나서야 겨우 익숙해지고 있는 것 같습니다.

이 글이 vscode 단축키를 공부하려는 누군가에게 도움이 되길 바라며 글 마칩니다. 감사합니다 :)