태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'touch scroll'에 해당되는 글 2건

  1. 2012.07.13 [openUI] Lazy touch scroll 오픈 소스 UI (5) by 無異
  2. 2012.04.13 아이폰,아이패드를 위한 Touch Scroll UI (4) by 無異
2012.07.13 11:23

[openUI] Lazy touch scroll 오픈 소스 UI


예전에 소개해 드렸던 아이폰,아이패드에서 웹페이지를 보다 쉽게 스크롤 할 수 있는 Lazy touch scroll UI 스크립트를 오픈 소스로 github에 올려두었습니다. 모두가 더 게으르게 모바일 웹을 사용하는데 도움이 되었으면 좋겠습니다. :)

lazy touch scroll 간단 설명 : 스크린의 좌우 가장자리에 가상의 스크롤바를 만들어서 한 손으로도 쉽게 page up,down을 할 수 있습니다. 터치 휠 기능으로 세밀하게 또는 빠르게 스크롤을 할 수 있으며, 이미지가 잘려보이지 않게 똘똘하게 페이지를 내려줍니다.
 



개발자님, 함께 더 좋아질 수 있게 도와주세요.

https://github.com/taekie/lazy-touch-scroll
github에 자바스크립트 소스를 공개하였습니다. 함께 잘 다듬고, 안드로이드 같은 다른 플랫폼에서도 동작할 수 있도록 도와주세요. 



개인 사용자는 북마클릿을 만들어 사용할 수 있습니다. 

따라하기 동영상 



북마클릿 만들기
1. 아래 코드를 선택 복사합니다.
2. 현재 페이지를 LazyScroll 이란 이름으로 북마크 합니다.
3. 북마크를 편집합니다. 기존 주소를 지우고 복사한 코드를 붙여넣습니다. 
javascript:function%20touchscroll()%7Bvar%20d=document,z=d.createElement('scr'+'ipt'),b=d.body;try%7Bif(!b)throw(0);d.title='(touch)'+d.title;z.setAttribute('src','http://informationredesign.com/lab/lazy_touch_scroll.js');b.appendChild(z);%7Dcatch(e)%7Balert('Please%20wait%20until%20the%20page%20has%20loaded.');%7D%7Dtouchscroll();void(0)


웹 서비스 운영자 & 설치형 블로그 사용자는 사이트에 한 번 시험 적용해 보세요. 
 

아래 코드를 블로그 스킨 html 아래쪽에 추가해주면 iOS 단말에만 추가적으로 터치 스크롤 스크립트가 추가됩니다. 테스트 후 실제 적용 시에는 스크립트 파일을 서버에 복사해서 사용하시면 됩니다.
<script>
if (navigator.userAgent.match(/iPhone|iPod|iPad/)) { 
d=document,z=d.createElement('script'),b=d.body;
z.setAttribute('src','http://informationredesign.com/lab/lazy_touch_scroll.js');
b.appendChild(z);} 
</script>
지금 보시는 pxd 블로그에도 적용되어 있습니다. 아이패드로 pxd 블로그를 보면 쉽게 page up,down을 할 수 있어요. 아이폰으로 보면 모바일페이지로 넘어가니 하단의 [pc화면] 으로 전환해보면 테스트 해 볼 수 있습니다.

이 기능이 적용 되면 좋을 만한 사이트를 알려주세요. 함께 떼로 요청하면 들어 줄지도 모르잖아요 :) 개인적으로 블로그,웹툰,모바일 뉴스 사이트에 적용되면 좋겠습니다. 밀어서 스크롤하는거 너무 귀찮거든요. 안 귀찮으셨어요?


[참고##redesign##]

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


Trackback 0 Comment 5
Ad Test...
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
Ad Test...