태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


2012.04.13 23:13

아이폰,아이패드를 위한 Touch Scroll UI

아이폰,아이패드의 터치 스크롤은 정말 직관적입니다. 하지만 자주 쓰면 힘들고 귀찮습니다. 화면이 큰 아이패드에서는 더 힘들어요. 컴퓨터에서는 스페이스바로 페이지 단위로 이동하거나 마우스 휠로 손가락만 까닥하면 스크롤이 되는데 실질적인 이동 거리도 늘어나고 손목이랑 팔의 근육도 사용해야 합니다.

그래서 자주 사용하는 웹페이지에 가상의 스크롤 버튼을 만들기로 했습니다.
우선 두가지 원칙을 정했는데


1. 버튼이 충분히 커서 누르기 쉬울 것
2. 버튼이 컨텐트를 가리거나 눈에 거슬리지 않을 것

서로 모순되어 불가능해 보이는데요. 버튼을 투명하게 하고 고정된 위치에 배치하는 것으로 해결 했습니다.


page up,down 버튼 배치


그 다음은 어떻게 버튼을 배치할 것인가인데, 기본적인 page up,down 버튼 영역을 기존 앱들이 하는 방식을 참고하여 생각해봤습니다.


1.은 만화보기 앱 같은데서 사용하는데요. 웹페이지의 경우 하단의 컨텐트 링크를 클릭할 수 없게 되고, 또 상하가 따로 떨어져 있어 사용이 불편하기 때문에 배제하였습니다. 스크롤을 내리다 다시 올려보는 경우가 많거든요.

2. 대부분 페이지의 좌우 영역에 여백을 두고 있으니까 괜찮은 선택입니다. 하지만 한 손으로 쥐고 볼 때 사용이 불편하기 때문에 탈락.

3. 사실 킨들을 사용하고 있어서  처음 부터  이런 구조를 생각하고 있었습니다. 왼손이나 오른손 한 손으로 쥐고 있어도 쉽게 위 아래로 스크롤 할 수 있습니다. 빈도가 높은 page down의 영역을 더 크게 하고요.
그리고 아주 작게 페이지의 끝으로 바로 이동하는 영역을 두었습니다. 

Touch Scroll Wheel


페이지 단위 스크롤이 쉬워지고 나니 이제는 또 한 손으로 미세하게 스크롤을 조절하고 싶어졌습니다. page down을 했는데 이미지가 중간에 걸리게 잘리면 다시 조금 올려서 이미지를 보는 경우가 많았거든요. 손을 떼서 다시 밀어 올리려니 귀찮았습니다.
그래서 터치 영역을 터치패드의 스크롤 휠처럼 사용할 수 있도록 했습니다. 탭하면 페이지 이동 버튼으로 동작하고 터치 한 채로 밀면 스크롤 휠로 동작하는 거죠. 한 손으로 쥐고 엄지로 조작하는 경우가 일반적이라 작은 조작으로도 많이 움직이게 했습니다. 5배 정도로 하니까 적당히 빠르고 또 적당히 세밀한 이동도 가능해졌습니다.

Fast Direct Scroll


스크롤도 되니 이제는 또 원하는 위치로 더 빨리 이동하고 싶어졌습니다. 스크롤바의 thumb을 잡고 바로 이동 하듯이요. pdf 뷰어 앱 중에 thumb이 있는 스크롤바를 제공하는 것이 있는데, 스크롤바가 표시되면 눈에 거슬리니까 화면을 탭해서 스크롤바를 보이거나 가리게 모드를 전환합니다. 이런 방식은 귀찮고 아름답지 않습니다.
애플의 비디오 scrubber bar(seek bar)에서 사용하는 썸을 잡고 움직이다가 아래로 내려서 움직이면 미세조정이 되는 패턴을 반대로 차용했습니다. 테두리 부분을 touch and swipe 하면 상대적인 휠 스크롤이 되다가 손가락을 안쪽으로 옮기면 전체 페이지의 절대적인 위치로 바로 이동합니다. 스크린에서의 손가락 위치가 스크롤 바의 썸처럼 전체 페이지 길이 중에서 현재 페이지 위치가 됩니다.


Image Aware Pgdn


그래도 뭔가 좀 아쉬워요.
지금 이 블로그를 PC에서 읽고 있다면 글을 내릴 때 키보드의 페이지 다운(또는 스페이스바) 사용하나요? 아니면 마우스 휠을 사용하나요? 
전 게을러서 스페이스바를 주로 사용했는데 요즘은 마우스 휠을 더 자주 사용하더라구요. 톡 톡 키보드 누르는 게 더 편한데 왜 휠을 사용할까 생각해봤는데요. 요즘 블로그에 사진이 많아서 그냥 페이지 다운을 하면 사진이 중간에 잘려서 사진 전체가 보이게 스크롤을 다시 올리더라고요. 아하! 
그런 단순 반복적인 작업을 사람이 하면 안되지요. 페이지 다운 하다 중간에 이미지가 걸리는지를 확인하여 이미지가 모두 보이게 스크롤 위치를 조절하도록 했습니다.

일반적인 페이지 다운에서도 텍스트 글 줄이 중간에 걸릴 수 있기 때문에 정확히 window height 만큼을 내리지 않고  조금 위를 더 보여주도록 하고 있는데요. 간혹 이런 고려를 하지 않고 맨 마지막 줄이 중간에 걸려 글자의 윗쪽 반만 보이고 페이지 다운을 하면 글자의 아랫쪽 반만 보여서 결국 읽을 수 없게 만드는 몰상식한 앱도 있더라구요. 텍스트뿐 아니라 이미지도 잘리지 않게 고려해주면 편합니다.







[참고##redesign##]









신고

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


Trackback 0 Comment 4
  1. 이 재용 2012.04.15 23:07 신고 address edit & del reply

    [Review] 편리한 UI가 돋보이는 Maven Web Browser(메이븐 웹 브라우저) http://blog.naver.com/PostView.nhn?blogId=verminone&logNo=30103869814

  2. 無異 2012.04.16 12:15 신고 address edit & del reply

    @hanjin 정보 고맙습니다. 씽크패드 trackpoint는 저도 좋아하는데요. 우선 포인터의 위치가 키보드 사이에 있어서 타이핑하는 손을 움직이지 않고 바로 게으르게 포인팅을 할 수 있어서 좋습니다. :) 그런데 maven처럼 물리적인 트랙포인트를 GUI로 옮긴 조이스틱 방식은 몇가지 문제가 있어서 몇번 써보고 안쓰고 있습니다.

    기본 드래그 스크롤에 비해 쉽고 빠르게 이동은 가능 하지만 정확성은 떨어집니다. 물리적인 트랙포인트는 힘을 빼기만 하면 원하는 위치에 바로 멈추는데 GUI에서는 터치를 떼어야 하거든요. 별거 아닌것 같지만 상당한 차이가 있습니다. 힘을 빼는게 아니라 손을 떼라고 힘들게 근육을 움직여야하잖아요. :) 원하는 위치를 지나친 경우에는 스틱을 원점을 지나 다시 반대 방향으로 움직여줘야하고요. 얼만큼 스크롤 되었는가가 액션의 이동거리가 아니라 밀고 있는 시간 변수에 따르고 있어서 실제로는 빨리 이동하지도 못하고 원하는 위치까지 움직였는지를 눈으로 확인하고 멈추야하기때문에 인지적인 부담이 더 큽니다. 스크롤 UI에서 GUI 빨콩(조이스틱)은 적합하지 않은 것 같아요 :)

  3. 계유림 2013.02.22 07:14 신고 address edit & del reply

    제 사랑하는 사람이 자주 들르는 유머사이트는 더블클릭으로 페이지의 최상단, 최하단으로 이동할 수 있는데 정말 편리하더라구요. 사실 뭔가를 집중해서 읽는 도중에는 스크롤을 하고 있다는 생각을 못하다가, 다른 컨텐츠로 넘어가려고 하는데 그게 페이지 내부에 있을 때 문제가 되곤 하니까요. ^^;

  4. 브라이언 2013.06.05 13:42 신고 address edit & del reply

    대박입니다.... 애타게 찾고 있었는데, 이렇게 해결해주셨네요. 감사합니다. 잘 사용하겠습니다.
    메이븐 빨콩이나 드래그류의 스크롤은 화면이 좀 늘어져서 싫었는데, 이것은 터치로 빠릿빠릿하게 스크롤되니까, 매우 편리하네요. 시디아도 뒤져봤었는데, 이런 스크롤을 도와주는 브라우저는 없었거든요. 감사합니다,

Ad Test...