웹사이트 마우스 제스쳐 비교 (크롬플러스, 네이버툴바, 파이어폭스)

크롬플러스를 사용하다 보니, 우연히 마우스 제스쳐(mouse gesture) 기능이 있다는 사실을 알았습니다. 크롬플러스는 마우스 제스쳐 기능을 기본으로 제공하고 있더군요. 크롬플러스의 마우스 제스쳐 기능을 보다보니 문득 다른 브라우저(혹은 툴바)의 마우스 제스쳐는 어떻게 제공하고 있는지 궁금해지더군요. 그래서 크롬플러스, 네이버툴바, 파이어폭스(fire gesture)의 마우스 제스쳐를 조사해 보았습니다.

[그림 1] 크롬플러스 마우스 제스쳐 설정

[그림2] 네이버 툴바 마우스 제스쳐 설정

[그림3] 파이어폭스 Fire Gesture 설정

크롬플러스에서 마우스 제스쳐 기능은 기본으로 제공하는 기능이기 때문에 별 무리없이 사용할 수 있습니다. 그러나 네이버 툴바의 마우스 제스쳐 기능은 네이버 툴바를 깔아야하는 제약사항이 있습니다.(인터넷 익스플로어와 파이어폭스에서 설치가능) 파이어폭스는 Gesture를 제공하는 여러가지 플러그인이 있으며, 그중 Fire Gesture를 선택적으로 깔아보았습니다. 결국 크롬플러스를 제외한 다른 브라우저및 툴바는 이중으로 설치해야 한다는 부담감이 있습니다. (네이버 툴바의 경우 툴바를 설치하는 것 만으로도 부담으로 작용하겠지요.)  

[표4] 크롬플러스, 네이버툴바, 파이어폭스(Fire Gesture)의 마우스 제스쳐 비교 차트

클릭하시면 더 큰 화면으로 보실 수 있습니다.

크롬플러스, 네이버툴바, 파이어폭스(Fire Gesture)의 마우스 제스쳐 비교 차트는 [표4] 와 같습니다. 

사용하고 있는 마우스 제스쳐의 유형을 뽑아보면,

1. 상,하,좌,우 한 방향으로 이동 (ex. up) 

2. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 (ex.up-left)

3. 상,하,좌,우 한 방향으로 이동 후 다시 돌아옴 (ex. up-down)

4. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 (ex. down-right-up)

5. 상,하,좌,우 한 방향으로 이동후 다시 돌아온 후 다시 반대로 이동 (ex, down-up-down)

6. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 - 계단을 그리는 형태로 단순화 할 수 있습니다. (ex. right-down-right-down)

7. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 - 사각형을 그리는 제스쳐로 단순화 할 수 있습니다. (ex. left-down-right-up-left)

8. 다른 키와 접목하여 이동 (ex. wheel+up, ctrl+마우스동작)

와 같은 방식으로 나누어 볼 수 있습니다. 그 외에도 대각선 방향으로 움직이는 유형, 모양을 그리는 유형(삼각형, 사각형, 동그라미), 철자를 그리는 유형 (via MIRiyA☆) 이 있을 수 있습니다.

크롬플러스, 네이버 툴바, 파이어폭스(Fire Gesture)의 마우스 제스쳐 기능을 더 자세히 살펴보자면,

up, down의 경우 현재 페이지의 맨위, 맨 아래로 스크롤 하는 기능으로 주로 사용하고 있습니다. 파이어폭스(Fire Gesture)의 경우 새탭에 링크열기 기능으로 쓰고 있습니다. left, right의 경우는 모든 경우가 이전페이지, 다음페이지 이동으로 사용하고 있습니다. 네이버툴바의 경우 up, down의 길이에 따라서 up,down을 길게 수행할 경우 페이지의 맨위, 맨 아래로 스크롤하게 하였으며, up,down 을 짧게 수행할 경우 현재 페이지의 위, 아래로 조금씩 스크롤하게 되어있습니다.

up-left, up-right 의 경우 크롬플러스와 파이어폭스(Fire Gesture)는 이전 탭, 다음 탭으로 이동하게 되어있으나 네이버툴바의 경우 빈 페이지, 빈 탭으로 새창열기로 제공하고 있습니다.

down-left 의 경우 크롬플러스는 풀스크린보기 (f11과 같은기능) 로 사용하고 있으며, 네이버툴바는 새로고침 (f5와 같은기능), 파이어폭스는 다른이름으로 저장의 각기 다른기능으로 제공하고 있습니다. down-right 의 경우 크롬플러스, 네이버툴바, 파이어폭스(Fire Gesture) 모두 현재 탭 닫기로 제공하고 있습니다.

left-up, left-down의 경우 크롬플러스는 줌인, 줌아웃으로 사용하고 있으며, 파이어폭스(Fire Gesture)는 상단으로 스크롤, 하단으로 스크롤로 제공하고 있습니다.

right-up, right-down의 경우 크롬플러스는 새탭, new IE 탭을 여는데 사용하고 있으며, 파이어폭스(Fire Gesture)는 선택한 문장내 모든연결 열기, 선택한 문장을 다음으로 검색으로 사용하고 있습니다.

파이어폭스(Fire Gesture)는 마우스 제스쳐로 거의 모든 기능을 수행할 수 있도록 하고있습니다. 대신 이 모든 제스쳐를 외워서 사용하기 위해서는 많은 시간이 필요하겠지요. (마우스 제스쳐가 거의 게임에서 필살기쓰는 수준입니다.) 또한 이 스크롤 규칙들은 Default 값이며, 사용자가 자신이 원하는대로 스크롤 규칙들을 바꿀 수 있습니다.

그 외의 기능으로, 네이버툴바와, 파이어폭스(Fire Gesture)는 마우스 제스쳐 시에 선의 색상과 굵기를 조정할 수 있게 되어있습니다.

글을 마치며

1. 웹사이트 마우스 제스쳐의 현실적인 방식의 통일화가 필요합니다. 하나의 제스쳐를 잘 사용하고 다른 환경에 처하게 되면 새로 제스쳐를 익혀야 한다는 부담감으로 작용하겠지요. 이 논의를 하기전에 웹사이트에서 마우스 제스쳐가  과연 필요한가? 혹은 쓰기편한가? 에 대한 논의가 이루어져야 할 것 같습니다. 적어도 제가 마우스 제스쳐를 경험해 본 결과 다소 학습이 필요하다는 단점이 있으나, 단순한 제스쳐의 경우 단축키보다는 쓰기 편하더군요. 결국 마우스 제스쳐는 단축키를 익히기에 버거운 유저에게 쉽게 다가갈 수 있을듯 합니다. 하지만 그러기에는 설치의 장벽, 사용법을 익히기 위한 장벽들을 넘어야 하겠습니다.

[그림5] SKY Phone의 제스쳐 인식 기능

2. 웹사이트뿐 아니라 모바일웹에도 제스쳐 기능이 도입되면 어떨까요? 모바일은 터치 기술의 도입으로 다양한 제스쳐가 가능해졌습니다. 스카이의 터치폰의 경우 제스쳐인식 기술을 통해 음악재생관련 기능을 수행합니다. 물론 기본적인 상,하 Flick의 경우 스크롤의 기능으로 거의 안착이 되었기 때문에 웹사이트의 제스쳐는 좀 더 다양한 고민이 필요한듯 합니다. 웹사이트 상에서의 다양한 마우스 제스쳐의 경험을 모바일웹의 경험으로 옮길 수 있다면, 모바일웹에서의 좀 더 풍부한 사용 경험을 제공할 수 있으리라 기대해봅니다.

[참고##제스쳐##]