main-logo

마우스 없이 코딩하기

마우스를 사용하지 않고 키보드로만 코딩하기

profile
김현기
2022년 03월 24일 · 0 분 소요

들어가며

코딩할 때 키보드와 마우스는 필수인데요 가끔은 오른손이 마우스로 가는 행위 자체가 힘들고 되게 번거롭다고 느낀 적이 있었습니다.. 마우스를 사용하지 않고 코딩을 하려면 어떤 도구들의 도움을 받을 수 있는지 소개해 드리려 합니다.

vscode vim key settings

image1.png
vscode marketplace

vim은 단순히 설명하면 vscode와 같은 텍스트 편집기입니다. 다양한 운영체제에서 손쉽게 사용할 수 있는 편집기인데요 vim은 편집, 이동이 분리되어 있어 손쉽게 마우스를 사용하지 않고도 이동하거나 편집할 수 있습니다. 초반에는 익숙하지 않은 시스템 때문에 허들이 꽤나 있는 편인데요 아래 게임을 통해 초반에 익숙해지는 데 도움을 많이 받을 수 있습니다.

또한 터미널에서 git을 사용하시는 분들은 커밋 작성이나 수정 시에 vim으로 지정해서 열 수 있기 때문에 익숙해지면 많은 도움을 받을 수 있습니다.

vim-adventures

chrome extension vimium

image2.jpeg
vimium

1번에서 소개한 vim 기반 키맵으로 이동 및 검색 링크 클릭 등을 할 수 있으며, 위 확장팩 설명에서 보실 수 있듯이 간단한 단축키로 원하는 구글링 링크로 이동할 수 있습니다.

snap

image3.png
snap

등록하고 싶은 프로그램을 단축키로 설정할 수 있습니다. 주로 크롬이나 vscode 터미널 피그마 등을 등록해놓고 알트 탭과 적절히 사용해서 빠르게 내가 원하는 창으로 이동할 수 있게 해줍니다.

spectacle

image4.png
spectacle

단축키 조합을 통해 원하는 창 크기로 쉽게 분할할 수 있습니다. vscode 나 피그마, 크롬을 동시에 봐야 하는 상황이 있다면 반으로 쪼개거나, 크게 보고 싶을 때는 전체 창 모드로 빠르게 전환할 수 있습니다.

karabiner-elements

image5.png
karabiner-elements

키보드 키 설정(맵핑)을 원하는 키로 변경할 수 있습니다. vim을 사용하면 편집 모드에서 이동 모드로 넘어가려면 esc 키를 눌러서 편집모드를 빠져나가야 하는데요 esc의 위치가 왼손을 움직여야 해서 조금 불편했습니다. karabiner-elements를 이용해서 caps-lock을 esc 키로 할당해서 사용하면 되는데 이처럼 잘 안 쓰는 키를 원하는 키로 맵핑할 수 있습니다.

vscode 단축키 사용하기

vscode에서 다양한 단축키 사용 및 키 조합으로 기본적인 작업을 수월하게 할 수 있습니다. 제가 주로 사용하는 단축키 위주로 소개해드리겠습니다.

  1. cmd + b: 사이드바 열고 닫기
  2. cmd + j: vscode 터미널 열고 닫기
  3. cmd + shift + e: 사이드바로 이동(이동 후 파일 선택 가능)

  4. cmd + shift + ]: 열려있는 창 오른쪽 탭으로 이동
  5. cmd + shift + [: 열려있는 창 왼쪽 탭으로 이동
  6. cmd + w: 현재창 닫기
  7. ctr + cmd + 방향키: 현재 선택한 탭 화면 오른쪽으로 분할하기 + 합치기
  8. cmd + k 후에 shift + enter: 현재 탭 고정하기

마치며

마우스 없이 코딩할 때 도움을 받을 수 있는 툴들을 소개해 드렸습니다. vim의 키 조합을 배우시려는 분들은 처음에는 답답하고 중도에 포기하실 가능성이 매우 큽니다.(저도 2번 도전했다가 실패했습니다.) 하지만 초반 허들만 넘으시면 정말 편하고 빠르게 코딩할 수 있는 장점이 있습니다. 힘들더라도 꼭 한번 도전해 보시는걸 추천드립니다.

읽어주셔서 감사합니다.