콘텐츠로 건너뛰기

[생산성] 코딩실력 늘려주는 마우스 제스처 프로그램 스트로크잇(StrokeIt) | 코드 뒤로/ 앞으로 가기, 크롬 탭이동

왼손은 그냥 놀면 되고, 오른손은 마우스에 그대로 있되, 마우스 제스처를 사용..
어떤 쪽이 ..미지의 코드 구조를 머리에 그리는데, 인터럽트 없이 집중도를 높여?

[잉여타임즈]  헤드폰 끼고 코드 보고 있는 마혜자로 예상되는 여 개발자 - 외부의 공격을 최소화 시키기 위한 해드폰 필수, 세로 모니터 🐶꿀
[잉여타임즈] 헤드폰 끼고 코드 보고 있는 마혜자로 예상되는 여 개발자 – 외부의 공격을 최소화 시키기 위한 헤드폰 필수, 세로 모니터 🐶꿀 [출처=bootcamp.berkeley.edu]

코드를 작성하다 보면, 로직을 효율적이고 오류 없이 작성하는 능력이 중요 한 듯 싶습니다.

하지만, 이에 못지않게 중요한 것은, 아래의 경우에서 빠르게 코드의 구조 및 로직를 파악하고, 내 것으로 만드는 능력도 중요하다고 생각합니다.

  • 방대한 코드의 큰 프로젝트의 경우
  • 내가 작성하지 않은 베이스 코드 혹은 프레임웍이 있는 경우
  • 내가 작성 했지만, 오래되 기억이 나지 않는 경우

만약, 코드가 한눈에 읽히지 않는 객체지향 코드라면, 더욱이 이해하는데 어려움이 있을 수 있습니다.

[잉여타임즈] 물음표 [출처=www.freepik.com]
[잉여타임즈] 물음표 [출처=www.freepik.com]

필자는 코드 구조를 파악하는데, Main문 혹은 이벤트 핸들러를 엔트리 포인트 삼아 코드를 따라가며 구조를 익히곤 합니다.

이런 행위의 편의를 위해, 대부분의 컴파일러 에디터(VS코드, 이클립스 같은)는 클래스나 함수를 탐색하는 기능을 지원합니다. 이것은 이름에 Ctrl(컨트럴)키와 함께 마우스 좌 클릭하면, 코드 내부를 탐색 할 수 있게 합니다.

필자는 Ctrl(컨트럴) + 마우스 좌 클릭 동작에 스트로크잇(StrokeIt, 마우스 제스처)을 접목해 사용 중입니다.

어찌하여, 스트로크잇을 쓰면, 코딩 실력이 늘어나는 지와 사용방법 이야기 해보려 합니다.


코드 탐색절차

일반적인 탐색과 마우스 제스처를 사용한 코드 탐색 절차를 비교해 보겠습니다.


일반적인, 코드 탐색절차

아래가 어떤 동작을 하는지 그림이 그려 지시나요?

순서동작왼손오른손
1클래스 탐색(키보드) Ctrl(마우스) 좌 클릭
2함수 탐색(키보드) Ctrl(마우스) 좌 클릭
3코드 뒤로 가기(키보드) Alt(키보드) 왼쪽 방향 키
4코드 앞으로 가기(키보드) Alt(키보드) 오른쪽 방향 키
[잉여타임즈] 일반적인 키보드, 마우스의 코드 탐색 절차 – VS 코드 예시

2 뎁스로 클래스와 함수를 탐색 했고, 클래스로 뒤로 갔다가, 함수로 앞으로 갔습니다.

함수 탐색에서 코드 뒤로가기로(2 → 3) 변경하면서, 오른손의 마우스는 키보드로 이동했습니다. 그리고, 왼손은 Ctrl에서 Alt 로 변경해 눌렀습니다.


마우스 제스처를 이용한, 코드 탐색절차

아래와 같이 바꾸면 어떨까요?

[잉여타임즈] 스트로크잇(StrokeIt) - 마우스 제스처를 이용한 비주얼 스튜디오 2022 탐색
[잉여타임즈] 스트로크잇(StrokeIt) – 마우스 제스처를 이용한 비주얼 스튜디오 2022 탐색

함수 탐색에서 코드 뒤로가기로(2 → 3) 변경하면서, 왼손은 그냥 놀면 되고, 오른손은 마우스에 그대로 있되, 마우스 제스처를 사용합니다.

순서동작왼손오른손
1클래스 탐색(키보드) Ctrl(마우스) 좌 클릭
2함수 탐색(키보드) Ctrl(마우스) 좌 클릭
3코드 뒤로 가기(마우스) 우 드래그
제스처 ←
4코드 앞으로 가기(마우스) 우 드래그
제스처 →
[잉여타임즈] 마우스 제스처를 이용한 키보드, 마우스 코드 탐색 절차 – VS 코드 예시
[잉여타임즈] 오케이 ? [출처=learn-german-easily.com]
[잉여타임즈] 오케이 ? [출처=learn-german-easily.com]

위의 일반적인 코드 탐색 절차와 지금을 비교해 봅시다.

어떤 쪽이 방대한 혹은 미지의 코드 구조를 머리에 그리는데, 인터럽트 없이 코드 집중도를 높이는데 좋을까요?

지금이 더 도움 되리라 필자와 뜻을 함께 하신다면, 아래와 같이 스트로크잇(StrokeIt) 프로그램을 통해 마우스 제스처 코드 탐색이 가능합니다.


스트로크 잇(StrokeIt)

다운로드 및 설치

공식 사이트에서 다운로드 받아 설치 합니다. Home을 설치하더라도 사용상 제약은 없습니다.


기본이 영문판이고, 한글판도 있기는 합니다. 태생이 영문인 프로그램은 한글판이더라도 발번역이 있는터라, 필자는 그냥 영문판으로 설치 했습니다.

[잉여타임즈] 스트로크 잇(StrokeIt) - 다운로드
[잉여타임즈] 스트로크 잇(StrokeIt) – 다운로드

윈도우즈 우측 하단에 마우스 커서 모양으로 표시가 됩니다.

[잉여타임즈] 스트로크 잇(StrokeIt) - 끄고 켜기
[잉여타임즈] 스트로크 잇(StrokeIt) – 끄고 켜기

마우스 우 클릭으로 제스처 기능을 켜고 끌 수 있는데, 빨간색이 꺼진 상태이고 흰색이 켜진 상태 입니다.

스트로크 잇이 켜진 상태라면, 마우스 우 드래그 이벤트는 모두 스트로크 잇이 가져가게 되는데, Ctrl(컨트럴)을 누른상태에서 우 드래그를 하면, 스트로크 잇의 영향을 받지 않습니다.


제스처 명령을 만들기 앞서,

윈도우즈 우측 하단에서 스트로크 잇을 켜면, 디아블로부터 포함해서 많은 기본 Application 들이 등록되어 있습니다.

일단, 내가 알지 못하는 제스처들이니 모두 지우는 것을 추천 합니다. 제스처 및 단축키 충돌이 발생 할 수 있습니다.

[Global Actions] Disabled Apps 두 개만 보이게 만들면 되겠습니다. Global Action은 프로그램과 상관없이 공통적으로 적용하는 명령을 정의합니다.

필자의 설정은 아래와 같습니다. 집 컴퓨터라 심플한 구성이긴 합니다.

[잉여타임즈] 스트로크 잇(StrokeIt) - Application, Action, Command
[잉여타임즈] 스트로크 잇(StrokeIt) – Application, Action, Command

스트로크 잇에서 하나의 제스처 동작을 만들기 위해 등록해야 할 3가지가 있는데요. Application, Action, Command 입니다.

  • Application : 프로그램
    프로그램 파일명을이나, 윈도우 타이틀, 클랙스 등으로 설정 가능합니다.
  • Action : 마우스 제스처
    좌에서 우, 우에서 좌, 알파벳 모양 등등 설정 가능합니다.
  • Command : 명령
    단축키, 윈도우 메세지 등등 이 될 수 있습니다.


1. Application(어플리케이션) 등록

이제 Application을 등록해 볼텐데요, Application은 프로그램으로 프로그램 파일명이나, 윈도우 타이틀, 클래스 이름이 될 수 있습니다.

VS 코드를 예로 들어보겠습니다. File에서 New Application 누릅니다.

[잉여타임즈] 스트로크 잇(StrokeIt) - Application 추가
[잉여타임즈] 스트로크 잇(StrokeIt) – Application 추가

등록한 Apllication을 F2를 눌러 원하는 이름으로 수정합니다.

그리고 Application을 등록하는데, VS 코드 단축 아이콘 속성에 있는 파일 이름을 적으면 되겠습니다.

[잉여타임즈] 스트로크 잇(StrokeIt) - Application 추가 - Code.exe
[잉여타임즈] 스트로크 잇(StrokeIt) – Application 추가 – Code.exe


2. Action(액션) 등록

액션은 마우스 제스처를 뜻하는데요, 좌에서 우, 우에서 좌, 알파벳 모양 등등 설정 가능합니다.

Application에 마우스 우 클릭 해서, Action을 등록 합니다.

제스처는 VS코드의 코드 뒤로가기를 등록 할 것이기 때문에 Left로 합니다.

[잉여타임즈] 스트로크 잇(StrokeIt) – Action 추가 – Left


제스처의 종류는 기본 정의된 것들이 있고, 커스텀 제스처를 학습 시키는 기능도 있긴 합니다. 대충 감이 오시죠 ?

[잉여타임즈] 스트로크 잇(StrokeIt) - Action 종류
[잉여타임즈] 스트로크 잇(StrokeIt) – Action 종류


3. Command(커맨드) 등록

Command는 단축키, 윈도우 메세지 등등 이 될 수 있습니다.

VS코드의 코드 뒤로가기 단축키는 Alt + Left 입니다. 등록합니다.

중요한 것(4)에서 Hotkey를 입력한 뒤에 (5)바탕화면에 마우스 우클릭을 한번 해줘야 Hotkey가 저장됩니다.

[잉여타임즈] 스트로크 잇(StrokeIt) - Command 추가 - Hotkey - ALT + LEFT(VS 코드 뒤로가기 단축키)
[잉여타임즈] 스트로크 잇(StrokeIt) – Command 추가 – Hotkey – ALT + LEFT(VS 코드 뒤로가기 단축키)

이제 한번 마우스 제스처 테스트 해볼까요? 잘 되나요?😀


프로그램 단축키 모음

뒤로 가기, 앞으로 가기입니다.

프로그램뒤로 가기앞으로 가기
VS 코드ALT + LEFTALT + RIGHT
VS 2022CTRL + –CTRL + SHIFT + –
크롬 탭 이동CTRL + SHIFT + TABCTRL + TAB
[잉여타임즈] 프로그램 별 뒤로 가기, 앞으로 가기 단축키 모음

기타 입니다.

프로그램단축키
공통– 페이지 상단 이동 : CTRL + HOME
– 페이지 하단 이동 : CTRL + END
크롬– 현재 탭 닫기 : CTRL + W
[잉여타임즈] 기타 단축키

크롬과 연동하면 이런것도 됩니다.😁

[잉여타임즈] 스트로크 잇(StrokeIt) - 마우스 제스처를 이용한 크롬 브라우징, 카라 컴백
[잉여타임즈] 스트로크 잇(StrokeIt) – 이런 것도 됩니다😁, 마우스 제스처를 이용한 크롬 브라우징, 카라 컴백


함께보면 좋을 글


[잉여타임즈] surplstimes@gmail.com