Vimium으로 크롬 웹 브라우저에서 마우스 없이 웹서핑하기

마우스 없이 키보드만으로 웹 브라우징을 가능하게 해주는 크롬 확장 프로그램 Vimium C를 소개합니다. 페이지 스크롤부터 링크 클릭, 텍스트 복사까지 키보드 단축키만으로 해결하는 Vimium의 사용법을 자세히 설명합니다. Vim 경험이 없는 독자도 쉽게 사용할 수 있도록 주요 명령어와 실용적인 팁을 제공합니다.

개요

오늘은 마우스 없이, 키보드로만 웹서핑을 할 수 있게 해주는 크롬 확장 프로그램 Vimium C를 소개하겠습니다.

프로그래밍을 하다 보면 어느 순간 IDE에 익숙해져 점차 키보드로만 많은 작업을 수행하게 됩니다.
저는 Neovim을 주로 사용했기 때문에 애초에 마우스로 클릭할 수 있는 버튼 자체가 없었기도 하구요...

하지만 웹 브라우징은 여전히 마우스에 의존적입니다.
아무리 브라우저 단축키를 많이 알고 있다고 해도 키보드 만으로 웹서핑을 하는데는 한계가 있습니다.
클릭해야 하는 버튼도 많고, 마우스 스크롤과 이런저런 상호작용이 필요한 페이지가 많기 때문이죠.

Tab 키를 사용하는 것도 방법이지만...
네이버같이 복잡한 페이지에서는 원하는 요소에 도달하기까지 수백번의 Tab을 눌러야 합니다.

코드를 짜다 보면 인터넷에서 공식 문서를 찾아보거나, 블로그나 Stack Overflow 같은 사이트를 둘러보는 일이 많죠.

이 때마다 마우스를 집어서 클릭하고... 스크롤하고...
다시 키보드로 돌아와서 코드를 치고... 이 일련의 과정이 너무나도 번거롭고 귀찮습니다.

Vimium은 이런 불편함을 해소해주는 브라우저 확장 프로그램입니다.

웹 브라우저를 마치 Vim처럼, 마우스 없이 키보드로만 조작할 수 있게 해주는 프로그램이죠.

Vimium은 크롬, 파이어폭스, 엣지 등 다양한 브라우저에서 사용 가능한데요.
오늘은 그 중에서도 크롬용 확장 프로그램이자 Vimium의 개선 버전인 Vimitumn C를 소개하려 합니다.
기존 Vimium보다 더 많은 커스터마이징 옵션을 제공합니다.

기본 조작 등 주요 기능은 원본 Vimium과 비슷합니다.
때문에 타 브라우저에서 Vimium을 사용하시더라도 글의 내용 대부분이 동일하게 적용됩니다.

Vim이라는 이름 때문에 진입 장벽이 높아보일 수 있지만, Vimium은 Vim을 사용해본 적이 없어도 충분히 사용이 가능합니다.
Vim의 수천 수만은 단축키와 명령어 중 정말 일부만 사용하면 되는데다, 그마저도 꽤 직관적입니다.

실제로 Vim은 커녕 프로그래밍 지식이 전혀 없는 주변 지인들도 빠르게 적응했습니다.
특히 링크 바로가기 기능이 상당히 편리해서, 이 기능만 사용해도 웹서핑이 훨씬 편해집니다.

Vim에 대한 이해가 있으면 Visual Mode같은 기능을 더 효율적으로 사용할 수 있지만, 이 없이도 충분히 기존보다 훨씬 편리한 웹서핑이 가능합니다.

본 글 역시 Vim에 대한 지식이 없는 분들을 대상으로 작성했습니다.
부담 없이 편하게 읽고, 츄라이해보세요...!

시작하기

설치는 간단합니다.
Chrome 웹스토어에서 Vimium C를 설치 해 주세요.

새로고침 혹은 크롬 재시작이 필요할 수 있습니다.

페이지와 탭 이동

Vimium에서는 hjkl 키로 페이지를 스크롤합니다.

Vim에서 커서 이동에 사용하는 키로, 화살표 키 대신 사용합니다.

처음엔 어색할 수 있지만, 배치 특성 상 손 이동이 없어서 익숙해지면 훨씬 편합니다.

• h: 왼쪽으로 스크롤
• j: 아래로 스크롤
• k: 위로 스크롤
• l: 오른쪽으로 스크롤

더 빠른 이동을 위한 단축키도 있습니다.

• gg: 페이지 최상단으로 이동
• G: 페이지 최하단으로 이동
• d: 페이지 다운
• u: 페이지 업

d 나 u 는 Vim의 <C-d> 나 <C-u>라고 보시면 되겠습니다.

탭과 히스토리 이동(뒤로가기, 앞으로가기)역시 hjkl를 사용합니다.

SHIFT 키와 함께 누르면 됩니다.

• J: 왼쪽 탭으로 이동
• K: 오른쪽 탭으로 이동
• H: 뒤로가기
• L: 앞으로가기

링크 힌트

Vimium의 꽃, 링크 힌트 기능입니다.

f키를 누르면 화면에 있는 모든 클릭가능한 요소에 고유한 문자가 표시되는데요.
노란색 바탕에 있는 문자를 그대로 단축키처럼 입력하면 해당 링크로 이동합니다.

새 탭에서 열고 싶다면 F를 누르거나, 나타난 이동 단축키(문자열)을 Shift키와 함께 누르면 됩니다.

탭을 닫을 때는 그냥 x를 누르면 됩니다.

링크 이동 외에도 버튼 클릭, 입력 창 이동, 이미지 클릭 등 대부분의 상호작용을 이 f키 하나로 할 수 있습니다.

빨간색 글자로 표시된 글자는 focus를 이동할 수 있는 요소입니다.
사이트 안에 스크롤이 가능한 사이드바가 있는 경우, 이곳으로 focus를 이동하고 j/k로 스크롤을 조작할 수 있습니다.
gF를 누르면 다시 가장 상위 페이지로 focus를 이동할 수 있구요.

Vomnibar와 주소 이동

Vomnibar는 Vimium의 주소창으로, 크롬 주소창과 비슷하지만 더 많은 기능을 제공합니다.

탭 탐색, 검색 히스토리, 즐겨찾기(북마크) 탐색을 하나의 주소창에서 할 수 있습니다.

o/O를 눌러서 주소나 검색어를 입력하면 됩니다.
o를 사용하면 현재 탭에서, O를 사용하면 새 탭에서 여는 방식이죠.

좀더 특정 기능에 집중하고 싶다면 아래 선택지도 있습니다.

• b/B: 즐겨찾기(북마크) 탐색
• ge/gE: 주소창 편집
• t/T: 탭 탐색

웹 페이지 검색과 텍스트 조작

페이지 내 검색은 Vim과 동일합니다.

/ 를 누르고 검색어를 입력하면 일치하는 첫 번째 결과로 이동합니다.
n을 눌러 다음 결과로, N을 눌러 이전 결과로 이동할 수 있습니다.

현재 웹페이지의 URL을 복사하고 싶다면 yy를 누르면 됩니다.

페이지 내 텍스트를 복사하고 싶다면 드래그를 한 다음 y를 누르면 됩니다.

마우스가 없는데 어떻게 드래그를 하냐구요?
이 때 Visual Mode를 사용하면 됩니다.

Visual Mode는 일종의 드래그 모드라고 생각하시면 편합니다.
드래그하듯이 텍스트 영역을 선택할 수 있는 모드거든요.

Visual Mode에 진입하는 방법에는 간단하게 두 가지가 있습니다.

1. / 를 눌러 검색어를 입력하고, 해당 위치에서 v를 눌러 Visual Mode로 진입
2. yv를 눌러 링크 힌트를 사용하면 해당 위치에서 자동적으로 Visual Mode로 진입

이렇게 진입한 Visual Mode에서 hjkl을 사용하면 상하좌우로 한 글자씩, 영역을 늘리거나 줄여가며 선택이 가능합니다.
선택 영역을 잘 조정한 후 y를 누르면 선택한 영역이 복사됩니다.

더 많은 영역을 편하게 선택하기 위한 명령어도 있습니다.

• w: 단어 단위로 앞으로 이동
• b: 단어 단위로 뒤로 이동
• 0: 줄의 맨 앞으로 이동
• $: 줄의 맨 뒤로 이동

모든 이동 명령어는 숫자를 붙여서 이동 범위를 지정할 수도 있습니다.

단어 3개만큼 앞으로 이동하려면 3w를, 5개 만큼 뒤로 이동하려면 5b를 입력하면 되고요.
오른쪽으로 5글자만큼 이동하려면 5l을, 아래로 3줄만큼 이동하려면 3j를 입력하면 됩니다.
직관적이죠.

Visual Mode에서 V를 누르면 Visual Line Mode로 진입합니다.
이 모드에서는 줄 단위로 텍스트 선택이 가능합니다.
Bullet Point나 문단 단위로 선택할 때 유용합니다.

한 가지 유의할 점이, Visual Mode는 진입 시에 선택한 시작 위치가 고정되어 있습니다.
시작 위치를 기준으로 이동하면서 선택 영역을 조정할 수 있지만, 시작 위치를 변경할 순 없습니다.

이럴땐 Visual Mode가 켜져 있는 상태에서 c를 눌러서 Caret Mode로 진입하면 됩니다.

Caret Mode에서는 글자 단위로 커서 이동이 가능합니다.
Vim에 익숙하시다면 Vim의 Normal Mode와 유사하다고 보시면 됩니다.

역시 마찬가지로 hjkl로 이동하고 w/b 로 단어 단위로 이동할 수 있습니다.
0을 누르면 줄의 맨 앞으로, $를 누르면 줄의 맨 뒤로 이동합니다.

Visual Mode에서 Caret Mode로 변경해서 원하는 시작 위치로 이동한 후, 다시 Visual Mode로 진입해 원하는 영역을 선택하면 됩니다.

Visual Mode와 Caret Mode의 이동은 대부분 Vim Motions를 따르고 있는데요.
Vim에 익숙하신 분들에겐 숨 쉬듯 자연스러운 명령어들이지만, 처음 다루시는 분들에게는 양이 많고 복잡하게 느껴질 수 있습니다.

모든 내용을 알아보기보다는, 아래 세 가지 정도만 조금 연습해보시면 복잡한 페이지에서도 텍스트 선택을 막힘없이 할 수 있으실거라 생각합니다.

1. yv로 Visual Mode에서 시작 위치를 정하고, c로 Caret Mode에 진입 한 뒤 시작 위치를 hjkl로 조정시키기
2. v로 Visual Mode에 진입한 뒤 w와 hjkl로 원하는 영역 선택하기
3. V로 Visual Line Mode에 진입한 뒤 j 와 k로 원하는 영역 선택하기

기타 기능

그 외에도 Vimium에는 더 많은 기능과 단축키들이 있는데요.
모든 단축키와 그 기능은 ?키를 눌러서 확인이 가능합니다.

단축키를 까먹었거나, 새로 알고싶은 기능이 있을 때 참고하시면 좋습니다.

탭을 뮤트하거나, url을 계층 단위로 이동하거나, Vim의 Mark 기능처럼 페이지 내부 혹은 웹페이지를 점프하듯 이동하는 등 다양한 기능이 있습니다.

그 외에도 옵션 페이지를 활용하면 주요 단축키를 변경하거나, 마우스 hover나 focus 기능을 추가할 수도 있습니다.
어떤 분은 단축키랑 링크 힌트 설정을 변경해서 한 손 만으로 웹서핑을 할 수 있도록 설정하기도 하더라고요...

필요하시다면 Vimium C Wiki를 참고하셔서 본인만의 설정을 만들어보세요.

Trouble Shooting

어떻게 Vimium을 끌 수 있나요?

웹 게임이나 에디터처럼 사이트 내부적으로 키보드 입력을 사용하거나 웹사이트 특수 단축키가 달려있는 경우가 있습니다.
이럴땐 Vimium의 단축키로 인해 사이트 이용이 제한 될 수 있습니다.

대표적인 예시로 Vim Adventures가 있습니다.
기초 Vim 명령어를 익힐 수 있는 웹 게임인데요. 당연히 Vimium과 충돌이 날 수밖에 없습니다.

이 경우 i 를 눌러서 Insert Mode에 진입하는 것이 가장 간단합니다.
ESC를 눌러서 돌아가기 전까지 Vimium의 다른 단축키가 비활성화 됩니다.

자주 방문하는 사이트라면 해당 사이트 이용 시 Vimium이 비활성화 되도록 설정하는 것도 방법입니다.

Vimium C 확장 프로그램 아이콘을 누르면 해당 사이트에서 사용하지 않을 단축키 목록 설정이 가능합니다.
모든 단축키를 비활성화 하려면 빈 칸으로 두고 "Save Changes" 버튼을 누르면 됩니다.

크롬 특수 페이지나 새 탭 화면에서 동작하지 않는 경우

보안상의 이유로 크롬 내부 페이지(chrome://)에서는 확장 프로그램이 동작하지 않습니다.

새 탭을 열었을 때 나오는 화면도 마찬가지입니다.

다른 페이지는 그렇다 쳐도, 새 탭 페이지는 자주 사용하다보니 불편할 수 있는데요.

새 탭 페이지를 Vimium이 작동할 수 있는 일반적인 페이지로 변경하는 것도 하나의 방법입니다.

혹은 Advanced Options에서

• Run on chrome://*/* pages (need #extensions-on-chrome-urls)
• Run on Chrome's native New Tab Page (need #extensions-on-chrome-urls)

이 두 옵션을 활성화 한 뒤, chrome://flags에 들어가셔서 필요한 옵션들을 활성화 해주시면 됩니다.

몇몇 웹 페이지에서 동작하지 않는 경우

iframe이나 복잡한 자바스크립트, 특이한 네비게이션 바 등이 있는 경우 Vimium으로 웹 서핑이 불편할 때가 있습니다.

gf를 사용한 프레임 이동으로 해결이 안되는 경우... 저는 그냥 마우스를 씁니다.
키보드에 마우스 이동을 매핑해놔서 그냥 그걸 사용해버립니다.

LinkHints.activate 설정을 만져주거나, hover 관련 설정을 많이 해두면 해결이 될 수도 있을것 같은데요.

이런 사이트들을 자주 사용하지 않다보니 따로 파고들지 않았는데요, 혹여 설정 방법을 잘 아신다면 댓글로 노하우를 공유해주세요.

마치며

매번 서론과 결론으로 글을 감싸곤 하는데, 이번엔 정말 딱히 할 말이 없네요...

설마 아직도 안 다운 받으신 건 아니겠죠...?

마우스 휠로 스크롤을 넘기며 지금 부분을 읽고 있지도 않으실거구요...

도움이 되었길 바랍니다.

감사합니다.