태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2010/03/14 22:03

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


크롬플러스를 사용하다 보니, 우연히 마우스 제스쳐(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의 경우 스크롤의 기능으로 거의 안착이 되었기 때문에 웹사이트의 제스쳐는 좀 더 다양한 고민이 필요한듯 합니다. 웹사이트 상에서의 다양한 마우스 제스쳐의 경험을 모바일웹의 경험으로 옮길 수 있다면, 모바일웹에서의 좀 더 풍부한 사용 경험을 제공할 수 있으리라 기대해봅니다.

[참고##제스쳐##]
저작자 표시 비영리

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 4
  1. ㅇㅇ 2010/04/10 17:20 address edit & del reply

    개인적으로 가장 좋은 방법은 익스플로러에서 마우스 액션을 제공하는 방향으로 나아갔으면 합니다. 마우스액션의 사용자가 적어서 불편하다는 함의가 이뤄지지 않는 이상 개선될 여지는 줄어들것 같네요...

    • uxdragon 2010/05/22 12:06 address edit & del

      저도 그렇게 됐으면 좋겠네요. ^^

  2. 반끄 2010/05/21 18:59 address edit & del reply

    방식의 통일은 좋은 방법은 아닌 듯 하네요. 저 같은 경우는 기본으로 제공하는 형식이 아닌
    딱 두개 (최대화/닫기) 만 사용하고, 그 조차 제가 마우스를 움직이기 편한 제스쳐 형태로 바꾸어 사용하고 있습니다. 그런데 그것을 인위적으로 통합하면, '어디서나' 같은 제스쳐는 쓸 수 있겠지만, 더 편리한 방법의 개발은 막힌다고 봅니다. 우리나라에서 위피 의무화가 위피 발전을 이끌었지만, 결국 독이되었죠. 한때 청와대 차원에서 핸드폰 문자입력방식 통일 이야기가 나왔을때도 기가 찼었는데, 툴바까지 통일한다면 너무 획일적이지 않을까 싶네요. 툴바를 가볍게 만드는 것 역시 개발자들의 숙제이고, 가벼운 툴바를 찾는 것도 사용자의 선택입니다.
    일전에 스마트폰에 새로운 문자입력방식을 설치한 지인을 보았습니다. 흔하디 흔한 천지인방식이나 엘지/스카이 방식이 아닌, 전혀 새로운 방식이더군요. 더 빠른지는 모르겠지만 최소한 신선하고 재미있기는 했습니다.

    • uxdragon 2010/05/22 12:10 address edit & del

      여기에서 제가 말한 통일화는 고정 통일화가 아닌 유동 통일화입니다.
      통일화 하더라도, 사용자가 자동으로 바꿀 수 있는 옵션과 제스쳐를 끌 수 있는 옵션정도는 제공해야겠지요.
      그리고 돌이켜 생각해보니 통일화 주장이 조금 성급한 주장이었던것 같기도 하네요. ^^; 감사합니다.