태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'ipad'에 해당되는 글 10건

  1. 2012.07.13 [openUI] Lazy touch scroll 오픈 소스 UI (5) by 無異
  2. 2012.04.23 뉴아이패드 레티나 디스플레이 사용 후기 (9) by 無異
  3. 2012.04.13 아이폰,아이패드를 위한 Touch Scroll UI (4) by 無異
  4. 2012.03.08 아이패드를 위한 네이버 모바일 블로그 리디자인 + 데모 (1) by 無異
  5. 2011.07.15 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사 (3) by 이 재용
  6. 2010.10.12 iPad와 Galaxy Tab, 무얼 살까? (2) by 이 재용
  7. 2010.09.13 iPad 3G 와 Kindle 3G 필요한가? (6) by 이 재용
  8. 2010.07.26 스타일러스 펜 vs 손가락. 아이패드에서라면? (7) by 허 유리
  9. 2010.05.16 'Nielsen Norman Group'에서 보는 iPad Usability (1) by 비회원
  10. 2010.03.24 아이폰 웹브라우저 페이지 전환 : adjacent in space 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.23 20:04

뉴아이패드 레티나 디스플레이 사용 후기

지난달, 장수길님이 뉴욕 출장에서 뉴아이패드를 사와서 일주일간 사용해 봤습니다. 전 빠른 성능이나 카메라의 성능 개선보다는 레티나 디스플레이 채용 자체에 관심이 있었습니다. 아이패드2를 웹서핑이나 문서를 보는데 주로 사용하고 있는데, 레티나 디스플레이를 채용한 아이폰 4s를 보다가 아이패드를 보면 글자가 심하게 뿌옇게 보이는게 가장 문제였거든요. 그래서 뉴아이패드의 전반적인 리뷰보다는 레티나 디스플레이 위주의 감상을 적어보겠습니다.

레티나 디스플레이를 채용한 아이패드가 어떤 느낌일지 잘 상상이 안된다면 그냥 책 위에 유리판을 깔아 놓았다고 생각하면 됩니다. 근데 책의 그림이 막 움직여요. 좋은데 뭐라고 말로 표현 할 방법이 없네요. :)  액정을 찍은 사진을 올려도, 기존 해상도의 모니터 화면에서 보면 전달이 안되거든요. 확대한 접사 사진을 봐도 이성적으로 해상도가 높아졌다는거지 그게 어떻게 보일지는 전혀 감도 오지 않고요. 암튼 이해를 돕기 위해서는 아래 사진과 같은 느낌으로 상상을 하면 됩니다.


하지만 처음 뉴아이패드 화면을 봤을때 크게 놀라울 정도는 아닙니다. 회사에서도 대부분 어 이거 새거에요? 뭐가 다른거에요? 하는 반응이었고요. 저도 처음에 이게 해상도가 2배인게 맞나 싶었거든요. 하지만 뉴아이패드를 조금 보다가 아이패드2를 다시 보게 됐을때는 깜짝 놀랍니다. 아이패드2 화면이 쓰레기같이 보이거든요.

직접 봐야지 알아요

사람은 현재에 잘 적응하도록 되어 있습니다. 그리고 현재의 경험을 기준으로 가치 판단을 하고요. 사용자 조사를 할때도 현재 사용중인 제품의 불편한 점이 있어도 대부분 사용자는 잘 인지하지 못 하는 경우가 많습니다. 그래서 사용자 조사를 할 때 무엇이 불편한지 질문을 하기 보다는 관찰을 통해 문제를 찾는 경우가 많습니다. 써보기 전에는 좋은게 좋은 줄도 잘 모르고요. 그런데 개선된 제품을 사용하고 난 이후에는 이전 제품이 너무 불편하다고 돌아가지 못합니다. 마치 행동경제학에서 말하는 가치 함수처럼 얻는 것보다는 잃는 것에 대한 가치를 더 크게 평가하는 비대칭성이 있는 듯 합니다. 그런 성향이 경험에서의 역진방지 기능을 하고 있는 것 같아요. 하라켄야는 욕망의 에듀케이션 이라는 표현을 썼는데요. 디자인도 기능>아름다움>사용성 의 단계로 경험을 학습하면서 수준이 올라가는 것 같습니다. 그래서 여전히 경쟁 제품과 기능이나 스펙의 비교만 하고 있는 회사는 그만큼 자신의 고객 수준을 낮게 보고 있으며 또한 자신의 제품도 수준 낮게 포지셔닝하고 있는것 처럼 보입니다.

출처 Perspect theory wikipedia



아이패드로 보면 눈이 편해요

업무에서 아이패드를 잘 활용하는 부분은 프로젝트에 필요한 참고 pdf 문서를 볼 때 입니다. 많은 페이지를 모니터로 보면 눈이 아려서, 대부분 인쇄 해서 보게되는데요. 페이지가 많으면 인쇄 기다리는 것도 귀찮았는데, 요즘은 바로 아이패드로 보는 경우가 많아졌습니다. 몇몇 프로젝트에서는 참고문서가 천페이지가 넘어가서 프린트 하는 것도 만만치 않았고요. 


업무로 컴퓨터를 보는 시간이 많아지면서 안구건조증에 시달렸는데요. 모니터를 보면 책보다 눈을 잘 덜 깜박인다고 합니다.(먼 산 좀 보세요). 또 자세 차이도 영향이 있다고 합니다. 보통 책을 볼 때 처럼 눈을 아래로 향하는게 아니라 모니터를 보기 위해 시선을 똑바로 하면 눈을 크게 뜨게 되어 안구의 노출 면적이 넓어져 쉽게 건조 해 질 수 있게 때문이라고 합니다. (눈이 작으면 안구건조증 안걸리나요?)


출처 Video Display Terminals (VTD) and Eye Strain

암튼 그래서인지 같은 액정이 라도 아이패드로 책을 보듯이 읽으면 눈의 피로가 조금은 덜한 것 같습니다. 물론 노트북도 그렇게 각도를 조절해서 볼 수 있는데, 가로 화면이다보니 대부분의 세로 포맷의 문서를 보기 어렵습니다. 쪽 맞춤을 하여 전체 페이지로 보면 글자가 작고, 글자를 키우면 매 페이지마다 스크롤을 해야해서 번거럽습니다. 책은 페이지나 레이아웃 상의 위치도 중요한 정보인데(시험 볼때 답은 생각 안나지만 어떤 페이지에 나오는지 위치는 선명하게 기억나는 경우 많잖아요) 스크롤을 하면 도대체 어디를 보고 있는지 알 수가 없거든요. 그래서 보통은 종이에 프린트를 해서 봤습니다.


the new iPad is the new kindle 


킨들로 읽는 걸 좋아하는데요. 하지만 킨들은 소설이나 블로그 처럼 그냥 한번 쭉 읽고 소비하는 류의 독서에 적합한 것 같고 중요한 부분을 다시 찾아서 반복해서 읽거나 하는 공부하려는 책을 읽는데는 적합하지 않더라구요. (eink 특성상 페이지를 넘길때 화면 전체를 반전시켜서 깜빡거리고 페이지 전환도 느립니다.) 킨들 DX가 있긴하지만 킨들은 크기에서부터 페이퍼백 같은 소설용 이고, 교재로 된 책을 제대로 보려면 아이패드 정도의 크기여야 할듯합니다. 화면 비율은 안드로이드 테블릿처럼 동영상에 적합한 와이드보다는 책에 가까운게 좋겠고요. 아이패드는 미국 교재( 텍스트북 7"x10" 18cmx25cm)와 거의 비슷한 크기입니다. 실제 액정은 좀 더 작긴하지만 베젤이 여백정도 크기라서 실제 인쇄 활자와 동일한 크기로 읽을 수 있습니다. 하지만 아이패드로 pdf 책을 본 경우는 많지 않습니다. 글자가 뿌옇게 보여서 눈 아프거든요.
하지만 뉴아이패드는 정말 그냥 책이에요.


종이책 그대로를 볼 수 있는 최초의 전자책 단말

지금까지 시장에 나온 전자책은 킨들처럼 텍스트 위주의 전자책 포맷과 인터랙션북 으로 크게 나누어 볼 수 있는데요, 전자는 epub처럼 정해진 페이지가 없이 사용자의 폰트 크기 선택에 따라 유동적으로 페이지가 나눠지는 형태가 대부분이고 인쇄물 그대로를 보여주는 pdf 형태는 시장에서 큰 비중을 차지 하지는 않았습니다. pc외에는 적합한 리더가 나와 있지 않은데 pc는 책을 읽기에 적합하지는 않으니까요.
인터랙션북에 해당하는 아이패드용 잡지들은 아직 갈피를 잡지 못하고 있는 것 같습니다. 인쇄물의 한계를 넘어서 멀티미디어를 강화하는것이 목표인 것 같은데 컨텐트보다는 인터랙션에만 집착하는 듯이 보입니다. 내용을 보려면 이것 저것 눌러야하는게 많고 또 뭔가 팝업을 띄워서 닫아줘야하고 이쪽으로 스와이핑했다가 저쪽으로 스크롤하고 쓸데없는 인터랙션 과잉으로 편집된 잡지가 많습니다. 내용만 어른 용이지 형식면에서는 유아용 인터랙션북 수준에서 벗어나지 못 하고 있습니다. 그런 잉여로운 편집을 할 바에는 그냥 인쇄판을 그대로 싣는게 좋지 않을까 생각한게 한 두번이 아닌데요. 하지만 생각해보면 인쇄판을 그대로 옮기면 화면의 해상도가 낮아서 가독성에 문제가 생기는 하드웨어적인 한계 때문에 별도의 편집판을 만들 수 밖에 없는 것 같습니다.
하지만 뉴아이패드에서는 인쇄용 편집을 그대로 아이패드에 옮겨도 잘 볼 수 있습니다. 학교 시장에서도 애플의 ibooks textbooks 와 같은 멀티미디어가 강화된(인터랙션을 늘리는 것이 아니라) 교재를 만들고 있는데요. 그런 것들은 고등학교 이하에서의 접근일 것 같고, 대학교재나 이미 출판된 어마한 양의 양질의 서적은 epub같은 포맷보다는 페이지 정보가 살아있는 pdf 형태로 판매 되지 않을까 싶습니다. 

참고로 현재 pdf 책을 보는데 가장 좋은 앱은 GoodReader입니다. 원본이  14"(A4)나 12"(textbook)인 pdf를 10.1" 화면에서 보면 글자가 작아서 읽기가 어려운데 crop기능이 내장되어 여백을 잘라내면 읽을 만한 크기가 됩니다.


지금까지 보지 못했던 색을 볼 수 있어요

처음 뉴아이패드의 사진을 보면 채도가 강하고 색상이 왜곡된 느낌이 듭니다. 뉴 아이패드에 적용된 액정은 기존 2보다 색역이 넓어졌는데 우리 눈은 지금 쓰는 모니터에 익숙해졌 있기 때문인데요.
아래 color gamut 비교 그림을 보면 노란색으로 표시된 뉴아이패드는 거의 sRGB영역을 커버하는 것처럼 보입니다. 아래쪽 보라색과 붉은 쪽 재현 영역이 더 넓어졌습니다. 암튼 그래서인지 애플의 홈페이지는 진분홍의 꽃을 띄워놓은 뉴아이패드로 장식하고 있습니다. 아래 왼쪽이 2 오른쪽이 3인데요. 물론 사진에서 보이는 차이는 왜곡된 것입니다. 뉴아이패드에서 보이는 색을 지금 보는 모니터에서는 표현하지 못합니다. 




출처 Apple’s new iPad display; what does 44% more color get you?
 



웹페이지의 뿌연 이미지가 단점
 
뉴아이패드에서 웹을 볼때도 칼같이 선명한 글자때문에 상당히 만족스럽습니다. 하지만 상대적으로 글자 외의 이미지들이 다 뿌옇게 보이게 되어 거슬립니다. 해상도가 커졌는데 거기에 맞는 이미지는 제공되지 않으니까 강제로 크기를 키우거든요. 사파리는 이미지를 렌더링할때 보여지는 크기가 다르면 보간법을 이용한 리샘플링 알고리즘을 사용하여 anti aliasing이 됩니다. 이미지를 축소할 때는 굉장히 미려하게 보이지만 확대해서 오버샘플링 되는 경우에 픽셀 아이콘은 오히려 뿌옇게 보입니다.
css3의 media query를 이용해서 레티나 디스플레이의 경우에 고해상도 이미지로 대치할 수 있긴 한데요.(window8 metro UI에서는 더 다양한 단말에 대응하기 위해서140%,180% 이미지를 제공하도록 가이드하고 있습니다) 아마 뉴아이패드를 지원해주는 홈페이지가 많이 늘어나지는 않을테니까 고해상도 모니터가 대중화되기 전에는 뿌연 이미지들을 계속 봐야하지 않을까 싶습니다. 레티나 디스플레이 아이폰에서는 액정이 작아서 어차피 작게 보이니 크게 신경쓰이지는 않았는데 뉴아이패드에서는 많이 거슬립니다.
아래 그림은 원본을 레티나디스플레이로 자체적으로 렌더링된(2배 크게 키워진) 이미지와 nearest neighbor 방식으로(그냥 한 픽셀을 2x2로 모자이크처럼 변환) 크게 만든 이미지를 비교한 것입니다. 이런 픽셀 아이콘은 단순한 방식이 더 선명하게 보입니다. 사진은 자세히 보면 모자이크처럼 보이니까 보간법이 더 괜찮아 보이기도 하고요. 이미지가 비트맵 형태인지 사진인지를 분석해서 최적화된 업샘플링 알고리즘을 적용할 수 있게 되어야 할 것 같습니다.


결론

미국은 킨들 이후에 출판 시장이 완전히 바뀌고 있습니다. 아이팟이 음악 시장을 바꾼 것처럼 적절한 시점에 사용자의 니즈를 만족시키는 제대로된 하드웨어 하나가 컨텐트 시장을 변화시켜나가게 됩니다. 킨들이 페이퍼백을 대체하는 이북 단말이라면 그외의 전문 서적이나 잡지들을 대체할 수 있는 최초의 전자책 단말이라는 점에서 뉴아이패드의 의미가 크다고 생각합니다.
책가방이 없어서 두꺼운 교재 안고 다니는 우리나라 여대생의 패션에도 변화가 찾아 올 것으로 예상되고요.

그래서 결론은 white 32GB 입니다.

[참고##Review##] 

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


Trackback 0 Comment 9
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...
2012.03.08 12:25

아이패드를 위한 네이버 모바일 블로그 리디자인 + 데모


누구의 문제인가?

요즘 집에서는 컴퓨터보다 아이패드로 웹서핑하는 경우가 많습니다. 검색을 통해 찾은 블로그를 보는 경우가 많은데 대부분 네이버 블로그 입니다. 사용자가 많아서겠지요. 침대에 누워 빈둥빈둥 블로그를 볼 수 있다는 건 의자에 앉아 pc를 보는 것에 비해 훨씬 편하지만(물론 그전에도 침대에서 노트북으로 봤지만) 네이버 블로그 디자인은 아이패드(아이폰)의 사용행태에 그닥 잘 적합하게 설계되어 있지 않습니다.

블로그 서비스를 제공하는 입장에서 누구를 위해 디자인할지 고민하면 우선 컨텐트를 만들고 트래픽을 가져다 주는 블로거를 고려할 수밖에 없는데요. 네이버 블로그를 운영하지 않고 댓글도 안달고 읽기만 하는 저 같은 사용 행태의 다수의 사용자 입장에서는 좀 불만이 있습니다. 그래서 제 나름의 해결을 공유하려고 합니다.




무엇이 문제인가?


1. readability.
 
네이버 블로그나 티스토리는 현재 아이패드(태블릿)용 페이지는 제공하지 않고 일반 웹페이지를 그대로 보여줍니다. (초기에 네이버 블로그는 모바일 페이지로 리다이렉팅했다가 원본을 보여주는 것으로 바뀐 것 같습니다.) 폭을 고정한 레이아웃이라 더블탭으로 폭 맞춤 확대를 한 상태에서도 글자가 작아 읽을 수가 없습니다. 침대에서 뒹굴거리며 여유있게 읽기에 적합한 크기가 아닙니다. 

모바일 블로그는 그나마 작게,크게 두가지 크기를 지원하며 각각 13px,16px 네요. 해상도 독립적인 pt 아닌 px 단위를 사용는데, 컴퓨터 모니터가 보통 96dpi(윈도우기준) 정도인데 비해 아이패드의 스크린은 130dpi, 아이폰은 160dpi(320x480기준) 라서 컴퓨터에서 보는 글씨보다 작게됩니다. pt로 환산하면 큰 폰트 마저도 대략 8pt (아이폰에서는 7pt) 정도로 보통 리포트가 10-12pt 인데 비해 많이 작습니다. 

게다가 큰 폰트를 선택했을때는 폰트 크기만 키우고 줄높이(line-height) 속성은 그대로여서 줄 간 여백이 거의 없이 글줄이 바짝 붙어 눈을 피곤하게 합니다. 이런 부분은 좀 화가 납니다. 거의 이천만명 정도가 네이버 모바일 블로그를 봤을텐데 디자인이나 개발, 검증의 문제를 따지기 전에 IT 관련 임원은 무조건 타이포그라피 수업을 받아야하는게 아닌가 생각해요. 정말로.


요즘의 블로그 편집기는 작성자의 자유롭고 개성적인 표현이 가능하도록 워드프로세서와 같은 강력한 문단,글자 편집 기능을 제공하고 있습니다. 읽는 사람의 입장에서는 제발 그런 권한을 좀 뺏았으면 좋겠습니다. 가운데 정렬, 심지어 오른쪽 정렬하는건 글을 읽지 말라는 것 같거든요.  

요즘 flipboard 같은 매거진형 aggregator를 많이 쓰는데 무엇보다 글자를 읽기 편해서 입니다. pc환경에서는 모르겠지만 모바일 버전에서는 작성자가 지정한 폰트 설정을 좀 제한하더라도 블로그를 읽는 사람이 좀 보기 편하게 보여주어야 한다고 생각합니다.

ios의 한글 폰트 applegothic은 못 생기기로 유명하여 웹폰트를 사용하여 나눔고딕으로 대치하면 좀 보기 좋습니다. 
 

2. bouncing rate.

네이버 이웃 처럼 즐겨찾기한 블로그를 주기적으로 방문하는 것 보다는 아이 데리고 놀러갈 데나 먹을 곳를 키워드로 검색해서 블로그를 주로 읽습니다. 여기 pxdstory 블로그도 검색을 통한 접근이 70% 정도고 나머지가 재방문입니다. 그러니까 실제 방문자 수는 아마 80% 이상이 검색을 통해 처음 이 블로그를 접할 것 같습니다. 검색된 글만 읽고 닫는 경우도 있지만 내용이 괜찮으면 다른 글도 읽어보게 됩니다. 관심사가 비슷하면 다른 글도 도움이 될 확율이 높으니까요. 

그래서 본문에 이어 바로 글 목록을 보여주면 나갈지 좀 더 머물지 판단에 도움이 됩니다. 현재는 본문에 이어 이전,다음글의 제목 링크가 보이긴 하는데 블로그 글을 순차적으로 읽는 경우가 없어서 별로 도움이 되지 않습니다. 즐겨찾기한 블로그라서 대부분의 글을 모두 읽는 경우라도 목록에서 가장 관심이 가는 글부터 골라 읽지 그냥 순서대로 읽는 경우는 드물거든요. 대부분의 사용자가 prolog처럼 블로그의 성격을 한 눈에 볼 수 있는 블로그의 첫페이지를 거치지 않고 검색을 통해 블로그 본문으로 바로 이동합니다. 모든 페이지가 랜딩페이지가 되므로 전체 블로그의 성격을 보여줄 수 있는 요소가 노출되도록 하는게 좋습니다.

목록 버튼이 있긴하지만 현재 보고 있는 페이지와 상관없이 목록의 가장 처음으로 매번 이동하기 때문에 근본적으로 목록을 훑어보면서 원하는 글만 골라 보기에는 자연스럽지 않고 번거로운 구조입니다. 목록 페이지로 직접 이동을 할 수 없으니 처음부터(오래된) 글 부터 보기는 불가능합니다.
보통 이전 버튼을 눌러 왔다 갔다 pogo-sticking 을 하게되는데 본문에 글 목록이 연이어 나오는게 일반적인 글읽기의 흐름에 더 자연스럽습니다. 
 pagination 안티패턴

모바일 티스토리는 본문을 다 읽고 나면 이어서 다음 검색 실시간 이슈 목록을 노출하고 있는데요. 간절한 마음은 전해지지만 좀.. 안스럽습니다. 


3. repetitive strain injury.

터치를 이용한 스크롤은 아이들도 바로 따라할 수 있을 만큼 직관적입니다. 배우기도 쉽고 원하는 위치로 정확히 이동하기도 편리하고 다 좋긴한데 귀찮고 힘듭니다. 폰에서는 손가락만 좀 튕기면 되지만 아이패드는 화면이 크다보니 동작이 커지거든요.
이게 ios 문제지 블로그 문제냐고요? 네. 게으른 제 문제입니다. 
큰 화면 스크롤하는게 귀찮아서 리디자인 된 블로그에는 자체적으로 스크롤바 기능을 만들어 넣었습니다. 이 부분은 별도로 포스팅하려고 합니다.


리디자인

네이버 모바일 블로그에 없는 기능은 없습니다. 다 할 수 있습니다. 하지만 그 기능들이 내가 사용하는 행태나 작업 흐름에 적합하게 구조화되어 있지 않습니다. 기능을 뽑아 나열하기 전에 누가, 왜 ,어떻게 사용하는지 사용 흐름을 이해하는 것이 필요합니다. 물론 사람마다 제각기 사용 하는 방식이 다르니까 누구에 맞춰서 디자인을 해야하는가가 진짜 문제이긴 하지만요. 저와 같이 사용하는 사용자는 무시하는 것도 퍼소나를 활용하는 좋은 방법이거든요.

암튼 그래서 전 제가 사용하는 행태에 맞추어 리디자인된 블로그를 이용합니다. 아이폰에서도 아이패드에서도 사실 pc에서도 이렇게 블로그를 봅니다. 사실 제가 보고 싶은 건 블로거가 만든 블로그가 아니라 내용만 쏙 뽑아낸 RSS 리더인지도 모르겠습니다.


데모 사이트

* 사이트 개편으로 현재는 동작하지 않습니다.
http://lab.pxd.co.kr/lazyblog/naver_blog.php?blogId=majosady

아이폰 아이패드로 접속하면 됩니다. 블로그 주소를 넣어주면 변환하여 보여줍니다. 
 


주.

- 실제 이용시에는

1. 블로그 페이지에서 북마클릿을 이용하여 변환하고 있습니다.
2. 자주 가는 블로그는 변환된 주소를 북마크 해두고 있습니다.
3. 바로 변환된 주소를 링크한 검색 엔진을 사용합니다. 검색엔진 리디자인

- uxcampseoul 2010 날로먹는UI디자인방법론 33p 이후 케이스스터디 '네이버 블로그 리디자인' 으로 발표한 내용인데 너무 오래되어서 아이패드용이라고 이름 붙였습니다. :) 처음부터 아이폰,아이패드에 대응하도록 만들어졌거든요.

- ios 5.1이 배포되어서 한글 폰트에 대한 불만은 조금 해소되었습니다.

[참고##리디자인##]



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


Trackback 0 Comment 1
Ad Test...
2011.07.15 18:29

사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사

UI 디자이너에게 표준을 지키는 일은 중요하다.
그러나 지난 번 글(UI 디자이너는 표준을 지켜야 하는가?)에서 밝혔듯이 표준을 지키는 일이 그리 쉽지는 않다. 하지만 많은 사람들이 이미 따르는 표준이라면 그 중요성은 배가된다. 특히 자신이 개발하고 있는 플랫폼의 표준을 익히고 따르는 것이 매우 중요하다. 이해를 돕기 위하여 4회에 걸쳐서 Mac OS 표준, Windows OS 표준, 그리고 ISO(International Standard Organization) 표준의 역사에 대해서 알아보기로 한다.

1. 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사
2. 마침내 혼란을 극복한 Windows7 - Windows User Experience Interaction Guidelines의 역사
3. 그들만의 리그, 우울한 ISO UI 표준 - ISO 13407 & ISO 9241의 역사
4. 왜 어떤 가이드라인은 실패하는가? - 말보다 행동이 중요하다

참고 UI 디자이너는 표준을 지켜야 하는가? (http://story.pxd.co.kr/317)
안드로이드 UI/GUI 가이드라인 (http://story.pxd.co.kr/162)
Windows 7 Design Principles (http://story.pxd.co.kr/13)



1. 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사

UI 개발자에게 표준을 따르는 일은 매우 중요하다. 특히 운영체계(Operating System)의 표준을 따르지 않으면 사용자에게 많은 혼란을 일으키기 때문에 치명적인 불편을 안겨줄 수 있다. 그렇기에 각 OS에서 제공하는 가이드라인을 숙지하는 것이 꼭 필요한 일이다.

하지만 이 Apple의 가이드라인은 여느 OS의 가이드라인과는 다른 위치를 차지하고 있다. UI에 관해 변변한 서적이 없던 시절, 유일하게 교과서적으로 이론을 배울 수 있을 뿐만 아니라 실무적으로 필요한 지식과 팁을 한 번에 배울 수 있는 서적이었기 때문이다. 하지만, 이제 볼 수 있는 책이 많아진 오늘날에도, Apple이 차지하고 있는 UI의 독보적 탁월함에 동의하는 사람이라면, 설령 자신이 Mac OS에서 UI를 개발하지 않더라도, UI 디자이너라면 언젠가는 한 번 꼭 보아야할 책이라고 생각하여 소개한다. (Apple의 기업 문화나 UCD와의 관계에 관해서는 Apple 디자인 성공의 비밀과 UCD)참고.

Apple은 자신의 OS에 대한 가이드라인을 Addison-Wesley와 함께 1985년부터 출판하고 있다. 맥 OS의 역사와 함께 Apple 가이드라인의 역사를 살펴보고자 한다.


1985년 Human Interface Guidelines: The Apple Desktop Interface

Human Interface Guidelines: The Apple Desktop Interface

1984년 1월 24일 애플의 OS인 System 1.0 이 출시되고, 1985년 4월에 System 2.0 이 출시된다. 처음 1985년에 출판된 가이드라인은 찾을 수가 없고 pxd 도서관에 소장하고 있는 것은1987년 11월 판이다. 1987년 11월이면 System Version 3.3 이고, 책에 언급하고 있는대로 Finder Version 5.5를 기준으로 설명하고 있는 책이 되겠다. 다행히 책 뒷면에 보면 원래 책 디자인을 커버만 다르게 한 것이고, 내용은 동일하다고 설명하고 있다.

책의 서문을 보면 매우 감동적이다.

서문에서 데스크탑 소프트웨어의 장점이 '일관성'을 유지해서 사용자가 쉽게 학습할 수 있게 하는 것이 최대 장점이므로 이 가이드라인을 통해서 일관성을 유지하도록하고, 예외적으로 이 가이드라인을 따르지 않으면서도 좋은 소프트웨어들이 있긴 하지만, 충분한 이유가 있을 때만 그러한 예외를 추종하도록 강조하고 있다.

제1장 '철학' 부분에서 애플은 사용자를 어떻게 보는가에 대해 설명한다
People aren't trying to use computers - they're trying to get their jobs done.
그러나 사람들의 일이란 얼마나 창조적이고 예술적인가에 대해 충분히 설명하고 있다.

1장에서 애플이 제시하는 10가지 디자인 원칙을 옮겨보면,
Mataphors from the real world
Direct manipulation
See-and-point (instead of remember-and-type)
Consistency
WYSIWYG (What you see is what you get)
User Control (not computer)
Feedback and dialog
Forgiveness
Perceived stability
Aesthetic integrity

Principles of graphic communication 부분에서는, Visual Consistency, Simplicity, Clarity 등을 별도로 제시하고 있다. 흥미로운 것은 '프로그래머'를위한 철학도 있는데, Modelessness, Event loop(언제나 사용자 이벤트를 받아들여라), Reversible actions, Screen(화면을 중시해라), Plain language가 들어있다. 아마도 당시에는 이런 부분들에 대한 정책은 프로그래머들이 정한 듯 하다. (물론 plain language를 위하여 전문 writer를 고용하라는 말도 들어있다)

또 1장에서는 User testing과 장애인에 대한 고려 사항에 대해서도 설명하고 있다.

2장부터는 각 화면 요소와 구성을 하나씩 설명한다. 특히 흥미로운 부분은 다이알로그 박스에 들어있는 Cancel-Ok 버튼 순서에 관한 설명인데, 이 부분은 설명이 기니까 별도의 기사로 쓸 계획이다.


1992년 Macintosh Human Interface Guidelines

Macintosh Human Interface Guidelines

1987년과 1992년 사이에 애플에서는 'Inside Macintosh' 시리즈를 통하여 각 부분 부분별로 Guideline에 대하여 설명하여 왔던 것 같다. 그리고 Human Interface Notes라는 것도 출판했다고 하는데 전혀 찾을 수가 없다. 사람들에게 가장 대중적으로 읽히고, 또 오늘날 Guideline계의 교과서라고 할 수 있는 Macintosh Human Interface Guidelines는 1992년에 처음 출판되었다. (아마존에서는 2판 판매)

이 책은 맥의 중흥기랄수 있는 System 7 (1991년 5월 출시)을 대상으로 하고 있다. System 7은 그 중간에 PowerPC 칩 적용으로 맥이 본격적으로 많은 사람들의 사랑을 받게된 시기이기도 하다.

 

서문에서 디자인 원칙으로
Mataphors
Direct manipulation
See-and-point
Consistency
WYSIWYG (What you see is what you get)
User Control
Feedback and dialog
Forgiveness
Perceived stability
Aesthetic integrity
Modelessness

이렇게 11가지를 설명하고 있다. 이전의 10개에 프로그래머용 철학 중 Modelessness를 추가하여 11가지가 된 셈이다.

글 서두에 거의 유일한 '실무 교과서'였다고 했듯이, 책의 전반부(Part One)는 다양한 원칙, 팁, 프로세스 등으로 가득차있다. 사용자 관찰 10단계, 복잡성 대처법, 인터페이스 확장법, 시장 요구 대응법 등을 포괄하고 있다. 특히 80% 솔루션에 대한 이야기가 처음 등장한다. 사용자의 80%만 만족시키려고 하면, 매우 단순한 제품이 나온다는 뜻이다. 나머지 20%까지 만족시키려는 순간 망한다는 말이다. 1992년에도 그들은 이걸 알고 있었다.

Part Two에서는 인터페이스의 다양한 요소들에 대해 설명한다. 앞의 책에 비해 언어 부분이 추가되었으며, 여러 리소스들을 부록에 포함시키고 있다. (당시로서는 매우 소중한 리스트였다)


2000년 Apple Human Interface Guidelines

Apple Human Interface Guidelines

2001년 3월 24일 정식 출시된 Mac OS X는 오랜 동안 클래식 맥 OS의 불안정함을 깬 역작이라고 할 수 있다. 초기 골수 사용자들로부터 반대도 많았다고 들었지만 한단계 도약이었음에 틀림이 없다. 디자인면에서는 이전부터 하드웨어에서 사용하던 반투명 디자인을 화면에 옮겨 'Aqua'를 시도하였던 것으로 유명하다. 알파와 베타 버전이 나오던 기간에 이를 위한 가이드라인은 여러 가지 이름으로 불렸다. 2000년 1월 20일에 나온 'Aqua Layout Guidelines'는 'Adopting the Aqua Interface', 'Inside Mac OS X: Aqua Human Interface Guidelines', 등을 거쳐 결국 지금의 이름인 'Apple Human Interface Guidelines'가 되었다.

이 때부터 책으로 나오지 않았기 때문에 온라인에서 언제나 접할 수 있는 장점이 있는 반면 예전 버전은 쉽게 찾을 수 없는 아쉬움이 있다. Pxd 도서관에는 2003년에 만들어진 (OS X 10.3 정식 발표 이전에 배포한)가이드라인 출력물을 보관하고 있다(사진).

 

이 책에서는 11개의 디자인 원칙으로
Mataphors
See-and-point
Direct manipulation
User Control
Feedback and Communication
Consistency
WYSIWYG (What you see is what you get)
Forgiveness
Perceived stability
Aesthetic integrity
Modelessness

등 같은 항목을 약간의 용어를 달리하고, 순서를 달리하고, 설명 분량을 줄여서 기술하고 있다. 또한 더 간략해지긴 했지만, 각종 방법들에 관해 설명한다.

이 시기 책에서 처음 'Experience' 라는 말을 사용한다. 'The Macintosh Experience' 에 대해 설명하면서, 포장, 설치 등에서 일관된 경험을 요구하고 있다. 이 버전부터 (이전 버전에서 열을 내어 설명하던) OK-Cancel 로직 부분이 대거 빠지게 된다. (그림 속에 아주 간단히 나타내는 정도) 그리고 재미있던 어펜딕스들이 대거 빠져 나갔다.


2006년 Apple Human Interface Guidelines

Pxd에서 보유중인 2006년 10월 3일자 가이드라인에는,'좋은 소프트웨어의 특징(Characteristics of Great Software)'라는 부분이 추가되었는데, High Performance, Ease of Use, Attractive Appearance, Reliability, Adaptability, Interoperability, Mobility가 그것이다.

 

또한 이 책에서는 12개의 디자인 원칙으로
Mataphors
Reflect the User's Mental Model
Explicit and Implied Actions
Direct manipulation
User Control
Feedback and Communication
Consistency
WYSIWYG (What you see is what you get)
Forgiveness
Perceived stability
Aesthetic integrity
Modelessness
를 제시하고 있다.

Macintosh Experience 파트에서 '포장'이나 '인스톨'부분은 다 뒤로 돌려 버리고, 그냥 소프트웨어적인 부분 설명하는 것을 맨 앞에 두었다.

Pxd에서 보유중인 2008년 1월 15일자 가이드라인에는, 2007년 10월 26일에 출시된 레오파드 Mac OS X v10.5 업데이트 내용을 반영하였으며, 이 즈음부터 책(PDF) 표지에 파란색 글씨로 'User Experience'라는 말이 들어갔다.


2011년 Apple Human Interface Guidelines

Apple Human Interface Guidelines

마지막으로 현재(2011년 7월) 인터넷 (애플 개발자 라이브러리)에서 다운로드 받을 수 있는 버전은 2011년 5월 31일 판이다. 트랙패드에서의 동작 인식에 관한 것이 추가되었다. 이전 책에서 사용자 입력에서 마우스, 트랙볼, 스타일러스 펜만 언급하였다면 트랙패드가 하나의 부분으로 추가되어, 핀치나 three finger swipe, four finger swipe 등에 대해 설명하고 있다.

Metaphors, Mental Model(Familiarity, Simplicity, Availability, Discoverability), Explicit and Implied Actions, Direct Manipulation, See and Point, User Control, Feedback and Communication, Consistency, WYSIWYG (What You See Is What You Get), Forgiveness, Perceived Stability, Aesthetic Integrity

이상으로 간단(?)하게 Apple Human Interface Guideline의 역사를 살펴보았는데, 예전 책을 들쳐보며 차이점을 찾은 것은... 사실 당장은 최영완님의 OK-Cancel에 관한 글을 읽다가 시작한 일인데, 개인적으로 재미있어서라기 보다는 누군가 한 번쯤 해 두면 다른 사람들이 편리하게 사용할 수 있을 것 같아서이다.

다음 글에서는 '2. 마침내 혼란을 극복한 Windows 7 – Windows User Experience Interaction Guidelines의 역사'에 대해서 살펴볼 것이다.

 

참고

iOS(iPhone,iPad,iPod)에 관심이 없더라도 꼭 보길 권한다.
iOS Human Interface Guidelines (Web) - 2014.01.11 수정함
iOS Human Interface Guidelines (PDF)


[참고##가이드라인##]



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


Trackback 0 Comment 3
Ad Test...
2010.10.12 22:54

iPad와 Galaxy Tab, 무얼 살까?

디지털타임즈의 크기비교기사로 가기 11월-패드 대전
KT의 아이덴터티탭(Identity Tab,속칭 올레패드,K-pad)가 9월 출시되었다고 뉴스에 나왔고, 애플(Apple)의 아이패드(iPad)가 전파인증을 받았다는 뉴스가 나온 것처럼 11월 출시가 임박한 느낌이다. 이에 삼성(Samsung)이 SKT를 통해 내 놓을 갤럭시탭(Galaxy Tab,속칭 에스패드)도 국내 출시가 임박했다고 한다. 다만 뉴스와 달리 KT의 K-Pad(ESP-E201K)는 쇼홈페이지(http://www.show.co.kr/index.asp?code=WAD0000)에서 여전히 '9월출시예정'이라고 되어 있는 것으로 보아 아직 시중에 안 나온 듯한 것으로 보면, 7인치 탭을 포기한 LG전자의 옵티머스탭(Optimus Tab)을 제외하고 모든 탭(10여종)이 11월 중에 동시에 출시되어 이른바 '패드 전쟁'은 11월에 개시될 것으로 보인다.

가격,요금제,기능 및 사양 등의 비교는 이미 뉴스를 통해 많이 나왔기 때문에, 이 글에서는 사용경험 중심으로 갤럭시탭과 아이패드를 비교해 보려고 한다. 11월에 누가 먼저 출시할지는 모르겠으나, 구입 의사를 갖고 있는 사람들에게 약간의 판단 정보를 제공할 수 있을 것으로 생각한다.

좀 크지만, 세련되고 아이들에게 좋은 아이패드
우선 아이패드는 10인치로 들고 다니기에 약간은 부담스러운 크기이다. '이동'이라면 들고 집에서 나오는 이동과, 집안에서의 이동을 나누어 생각해 볼 수 있는데, 사실 두 가지 모두 부담스럽다. 화면의 크기가 크기 때문에 본격적으로 넷북이나 타블릿PC를 대신할 수 있을 거라 생각하지만, ActiveX+Flash+IE 중심의 국내 웹 환경 때문에 웹 서핑 및 결제 등도 자유롭지 않고, 가상 키패드를 이용하여 무언가를 입력하는 것도 자유롭지 않다.

그러나 아이패드의 장점은 무엇보다도 아이폰-아이포드-아이패드로 이어지는 일관되면서도 세련된 UI를 들 수 있다. 아울러 오류없는 터치와 부드러운 반응 속도 등까지, 써보지 않은 사람은 절대 모를 절대적인 만족감이 있다. 또한 아이폰에서 제공하던 많은 어플리케이션이 그대로 제공된다. 특히 아이패드에 맞게 시원하게 만들어진 어플리케이션들은 패드 사용의 즐거움을 만끽하게 해 준다. 위룰(We Rule)이나 갓핑거(God Finger)등을 아이패드에서 해 보면 정말 그렇다.

특별히 결제나 복잡한 일을 하려하지 않는다면 소파에 누워 웹서핑을 즐기는 것도 매우 만족스럽다. 다행히도 최근에는 많은 웹사이트들이 적어도 사이트를 보는 것만은 아이패드(사파리)에서도 가능하게 지원해주고 있다. 소파에 누워 할 수 있는 또 다른 즐거움은 Air Video. 별다른 변환없이 대부분의 PC 동영상을 쉽게 볼 수 있게 해 준다. 누워서 만화를 보기에도 적당한 크기와 비율이다.

하지만 무엇보다 큰 아이패드의 장점은 아이들용 어플리케이션이 풍부하다는 것이다. 아직까지 한글 컨텐트가 많지는 않지만 이것은 아이패드가 한국에 출시되면 현재 준비중인 수많은 어린이용 컨텐트들이 동시에 출시될거라 생각하고 있다. 특히 Interactive 동화 부분에서 현재 있는 아기돼지 삼형제뿡뿡뿡 동물나라외에도 많은 출판사에서 준비하고 있다고 한다.(Everything falls down) 다만 아이패드를 '흔드는' 동작은 아이들에게 시켜보면 다소 불안정하고, 고가의 기기임을 감안할 때 부모들의 가슴도 불안하게 만들 수 있다. 또 3세 6세 자녀가 있다면 서로 가지고 놀겠다고 싸우는 상황을 봐야한다.

실제로 몇 달간 아이패드를 써 본 바에 의하면, 이동용 보다는 가정에 두고 사용하기 적합하고, 어른들 보다는 아이들용에 더 적합하다는 느낌이다. 혹은 큰 가방을 들고 다니는 대학생들의 학습 보조 도구? (<-이 부분은 미국쪽에서 많이 출시되었으나 한국에서 경험해 볼 수가 없어서 아쉽다.)

미투제품이지만 한국 어른들이 들고 다니면서 쓰기 적당한 갤럭시탭
반면 갤럭시탭은 7인치로 들고 다니기에 적당하다. 성인의 경우 한 손으로 쥘 수 있고, 디자인자체도 그립을 고려하여 만들어졌다. 두 번째 제품이라는 오명은 어쩔 수 없이 계속 가지고 가야겠지만, 그래도 첫 느낌은 '어 제법 잘 만들었네'라는 것이었다.

물론 안드로이드 마켓이 아직은 iOS에 비해 턱없이 부족하고, 쓸만한 유료앱이 많지 않다는 단점이 있다. 외형을 동시 비교 시켰을 때 중학교 정도의 남자 아이들은 절대적으로 갤럭시탭을 선호할 것 같은데 얘들에게는 게임기처럼 보이나보다. 그러나 마켓의 게임 카테고리는 완전히 막혀 있어서 할 수 있는 게임이 없다. 아이패드를 따라한 제품이란 인상을 지울 수가 없어서 '자부심'에도 별로 기여하지 않는다.

아이들용 기기로는 크기가 작고, 특히 멀티미디어 기기(DMB, PMP) 대용이 아니라, 본격적인 학습용 기기로 쓰기에 7인치는 너무 작다. 문고판 책은 적당하지만 사전만해도 어색한 크기가 나온다. 하물며 중/고/대 교재는 좀 힘들지 않을까?

문고판 크기는 책에 유리, 와이드는 동영상에 유리
그러나 장점도 많다. 우선 크기가 작아서 들고 다니기 쉽다. 지하철에서 한 손으로 들고 책이나 만화책을 볼 수 있다. 크기도 아이패드 보다는 책이나 만화를 보기에 적당하다. 특히 한국 서점(교보문고와 텍스토어)에서 다양한 책,신문,잡지 등을 구매할 수 있다. DMB를 볼 수 있다는 것도 장점일 수 있겠다. 다만 지하철에서 보기엔 좀 화면이 크고, 화질도 별로 좋지 않다. 안테나를 길게 뽑아야 한다는 점도 약간 어색한 부분. 화면이 크면 좋겠지라고 생각할 수도 있는데 지하철에선 오히려 마이너스다. 동영상을 특별한 엔코딩 없이 넣어서 볼 수 있다. 자막까지. 이 부분은 많은 사람들이 경험해보겠지만 엄청난 장점이다. 화질도 매우 우수하고, 가로세로 비율이 와이드라 요즘 동영상에 (아이패드보다) 더 적합하다. (iOS 4.2면 아이패드에서도 VLC로 엔코딩 없이 볼 수 있다고 한다)

웹 서핑이야말로 최대의 장점이 아닐까. 결제는 여전히 힘들지만 플래시 사이트가 '거의' 완벽하게 돌아간다. 야후 꾸러기나 다음 키즈짱 같이 매우 헤비하게 만든 플래시 동영상을 제외하곤. 하지만 이들 사이트는 사실 Windows PC의 크롬이나 사파리에서도 돌아가지 않으므로, 그 쪽이 더 특이하다고 칠 수 있다.

물론 선호가 갈릴 수 있겠으나, 대기 화면에 위젯은 편리하다. 오브젝트를 숏컷으로 만들 수 있고, 큰 위젯으로 바로 정보를 확인할 수도 있다. 본격적인 멀티태스킹이 가능하다는 것도 안드로이드 OS를 채용한 장점. 최근 구글이 제공한 안드로이드용 가상키패드는 PC의 Qwerty자판을 그대로 옮겨 놓은 아이패드의 버추얼키패드보다 더 편리하다. 대부분의 카 네비게이션이 7인치라는 사실을 감안하면, 아이나비의 네비게이션이 실렸을 때 매우 자연스럽고 강력해진다. 아이패드도 불가능한 것은 아니나, 옆자리에 앉은 사람이 보면서 읽어주는 '수동형' 네비게이션 같은 상황이 여러번 펼쳐졌던 기억이 있다. 책을 읽어 주는 기능도 매우 자연스러워서 운전 중에 사용할 수 있지 않을까 생각한다. 두산동아, 시사 YBM의 영한 사전 등이 제공되는 것도 장점인데 인터페이스가 좀 좋았으면 하는 아쉬움이 있다.

둘 다 책을 장시간 보면 눈 아프다
화면은 갤럭시탭 쪽이 좀 더 '쨍'하다. 슈퍼 아몰레드를 탑재했다고 하는데, 아마 우리나라 사람들(특히 대기업 임원들)이 더 좋아할 것으로 보인다. 아이패드 쪽이 좀 더 부드러워 보인다.

그러나 두 기계 모두 책을 장시간 보기엔 무리가 있을 듯 하다. 아무래도 그 목적이라면 킨들(Kindle)같은 E-Ink + 비터치 기기를 써야 한다. (지난 글 참조:iPad 3G 와 Kindle 3G 필요한가?) 특히 갤럭시탭이 한 손으로 잡을 수 있다고는 하지만, 터치 영역을 안 누른채 가장자리(베젤-테두리)만 엄지 손가락으로 누르기는 매우 어렵다. 이 부분을 인터페이스로 개선해야 할 것으로 보인다.

아이패드는 아이들, 갤럭시탭은 어른들?
결론적으로, 아이패드는 집에서 아이들 용으로 더 적합하고, 갤럭시탭은 어른들이 들고 다니면서 쓰기에 더 적합한 기기가 아닐까 한다. 아이패드는 최초의 제품이라는 자부심과 그에 걸맞는 유려한 인터페이스가 특징이라면, 갤럭시탭은 한국 사람들에게 필요한 기능을 많이 갖추고 있다.

%갤럭시탭 관련 내용은 언론에 발표된 것을 기준으로 하였습니다.
http://www.dt.co.kr/contents.htm?article_no=2010101102019922734031
http://www.dt.co.kr/contents.htm?article_no=2010100702011132718002


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


Trackback 0 Comment 2
Ad Test...
2010.09.13 21:21

iPad 3G 와 Kindle 3G 필요한가?

아이패드를 처음 샀을 때는 WiFi 면 됐지하고 생각하고 별 고민 안 하다가 3G를 추가로 사 보게 되었는데, 처음 생각과는 달리 iPad 3G가 꽤 유용하다.

어차피 1. 집에서 아이들 놀이용이 많고, 2. 아내가 노트북을 쓸 때 내가 인터넷을 쓰거나 게임을 하고, 3. 컴퓨터 켜기 귀찮은데 간단하게 인터넷 보고 싶을 때 사용하는 것이 주이지만, SKT에서 제공하는 단말기기용 USIM을 꽂으면 추가 요금 없이도 데이터 한도 내에서 3G를 사용할 수 있기 때문에 가족들이 자동차로 여행할 때 인터넷 보기도 좋고, 큰(!) 네비게이션으로 쓸 수도 있고, 게임기로 쓸 수도 있다.

별 고민없이 Kindle도 3G를 구입하였다.

킨들은 전세계 거의 모든 나라에서 (한국 포함) 무료로 3G를 사용할 수 있다. 미국 아마존에서 직배송 하므로 한국에서 출시된 거나 마찬가지라고 할 수 있는데, 따라서 USIM 이나 이동통신사와의 복잡한 절차없이 바로, 포장을 열자마자 3G가 되는 경험은 참 신기했다.

그런데 킨들의 3G는 (구입 4일째인 아직까지는) 별로 유용하지 않다.

1. 물론 3G가 되면 WiFi 없는 곳에서 책을 다운로드 받는다든지 하는 것이 가능하겠지만, 집이나 회사에 있을 때 몇 권 받아두면 꽤 오래 읽을 수 있으니까 굳이 필요하지 않을 것 같다.

2. 킨들에도 브라우저가 있긴 하지만 이걸로 인터넷 서핑을 하는 것은 불가능에 가깝다.

3. 3G는 $50 이나 비싸다.

4. 3G가 아닌 모델은 밧데리가 3주간다는데 3G모델은 열흘정도밖에 안된다고 한다. (와이파이 아예 꺼 놓고 필요한때만 키면 더 오래 갈 듯. 다만, 현재의 킨들은 3G만 끄는 기능은 없다)

5. 3G가 항상 공짜는 아니라는 점이다. 미국 아닌 곳에서 뉴스,잡지,블로그 구독하면 일주일에 $4.99 내야한다. 이거... 정확히 뭘 말하는지 모르겠어서 살짝 무섭다. 또한 개인적인 도큐멘트를 USB가 아닌 email 을 통해서 보낼 때, 메가바이트당 $.99 내야한다. 이것도 살짝 무섭다. 물론 Wifi에서만 도큐멘트를 받게하는 방법이 있긴 한데... 이야기하려는건... 잘 알아서 쓰면 별 문제 아니겠으나, 이런 종류로 신경 쓰고 싶지 않은 나같은 경우는, 모든 조건을 자세히 파악하려하기 보다는 그냥 무서우니까 안 쓰겠다는 쪽이다.

6. 책을 읽다가 아... 이 부분 메모하고 싶다. 이러면 자체 어플이 있지만, 이 부분 트윗하고 싶다. 이럴 때 3G가 편할 것 같다. 그러나 이 사소한 욕구때문에 3G를 사고 싶지는 않다는게... (또한 자기가 한 트윗은 http://amzn.com/k/1VCLTSXH8YI04 #Kindle 이런 식으로 링크로 달리기 때문에... 정작 킨들에선 못 본다는 것...)

7. 필자 같은 경우는 집에선 iPad Kindle App., 출퇴근이나 잠자기 전에는 Kindle device, 가방없이 외출했을 때는 Nexus One Kindle App.을 사용하는데, 킨들에 공통적으로 'Sync to Furthest Page Read'라는 기능이 있어 이거 참 편리하다... 3G 가 되면 전철역에서 읽은 부분도 표시되겠군... 했지만... 이상하게도 이 기능 어줍잖다. 정확히 못 찾아 준다. 내가 덮을 때 너무 확 덮어 버려서 싱크를 못 하고 꺼지나? 이런 생각도 들지만... 그건 지가 알아서 할 일이고...

결국 킨들 3G는 괜히 마음만 불편하고, 별 도움되는 기능이 없다... 는 것이 필자의 소감. (물론 더 써보면 다를 수 있겠지만)

물론 3G와 관련없는 추가적인 불편함도 있다.

1. 화면 껌벅거림과 늦은 속도... 괴롭다.

2. 그림이 너무 흐리다. 도표가 많은 전공서적은 그림 내용을 볼 수 있는 방법이 없다. (확대하는 기능 있을 것 같은데... 못 찾은 건가?)

3. 한글 폰트... 정말 최악이다. 원리가 뭔지 궁금하다. 무슨 음모가 있는 것 아닐까 생각할 정도.
( taekie 말에 따르면,

    "내장 폰트는 좌절입니다. 제대로 읽으려면 pdf로 변환해야합니다.
     us letter사이즈에 나눔고딕 22pt로 pdf로 변환하니까 딱 좋네요" )

4. 터치 기기에 익숙해져서인지... 터치 안 되는 것이 너무 답답.

5. 아래로 화살표가다가 맨 아래까지 가면, 그 다음에 페이지 넘어가는 것이 정상 아닌가?? 내참...
   (아님 위로 쭈욱 올리면 아래로 다시 돌든지... 둘 중에 하나는 해야지...)

여기까지 쓰면 Kindle 매우 싫어하는 사람 같지만, 실은 정반대이다.

매우 좋다. 특히 같이 산 LED Light가 있는 킨들 커버도 정말 좋다. 쓰면서 무릎을 치게 된다. 처음 화면을 켰을 때, 화면에 스티커 붙여 놓은 줄 알고 떼려고 했단다.

킨들 아직 못 보신 분이 있다면 이렇게 자랑질하고 싶다. - 당신이 전혀 모르는 새로운 세상이 오고 있다. 물론 e-Ink니 e-Paper니 하면 상상할 순 있겠지. 하지만 직접 보지 않았다면 말하지 마라...

(처참한 한글폰트와 독서등 케이스- 밧데리는 킨들의 것을 빼서 쓰는데 연결 아이디어가 참신하다)

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


Trackback 0 Comment 6
Ad Test...
2010.07.26 23:30

스타일러스 펜 vs 손가락. 아이패드에서라면?


아이패드의 등장으로 기대를 얻었던 기능 중 하나는 넓어진 화면으로 인한 자유로운 필기 또는 스케치 아닐까 싶습니다. 떠오르는 즉시, 편리하게, 자유롭게 기록하여 메일로 전송하거나 다른 사람들과 공유하는 등 지금과는 다른 행동 패턴들이 나타날 테니 말이죠.

편리하고 자유로운 기록을 위해 사실 손가락은 조금 부족한 느낌입니다. 그렇다면 스타일러스 펜이 이런 아쉬운 점들을 채워줄 수 있지 않을까요? 이번 주는 시중에서 판매되는 스타일러스 펜들에 대한 리뷰작성해볼까 합니다.

 

준비물
- 아이패드
- 스타일러스 펜 (pogo, dagi, boxwave 총 3종) 
* 아이패드에는 무광 필름이 부착되어 있음.

  

1. Pogo Sketch

메탈 느낌의 포인트 컬러 바디

Soft tip – 스펀지 재질

 

디자인 ★★★★★

필기감 ★★★☆☆

휴대성 ★★★☆

         


1 | 2
3 | 4

Pogo는 패키지가 가장 먼저 눈에 들어왔던 녀석입니다. 일반 펜보다는 조금 얄쌍('얄팍'이 올바른 표현임)한 굵기인데 오히려 스타일러스 펜으로써의 그립감은 더욱 충족되는 듯 합니다. 다만 문제가 되는 것은 스펀지 재질의 tip부분입니다. 접촉만으로는 인식이 되지 않으니 자연스레 꾹꾹 눌러쓰게 되고 결국 액정에 닿는 부분이 넓어져 정교한 필기를 하기에는 어려운 편입니다. 오랫동안 필기를 하게 되는 경우, 손이 쉽게 피로해지고 스펀지 모양이 눌려버리기 때문에 매번 손으로 모양을 잡아주어야 합니다. (사진3,4) (물론 원상복귀가 되기는 하지만요…)

    손으로 필기한 글씨


    pogo로 필기한 글씨


필기한 글씨로 비교해 보면,
손가락 보다는 훨씬 안정적으로 빠르게 필기되는 것을 느낄 수 있었습니다. 또한 좀 더 세밀하게 필기되는 덕에 글씨들이 더 작아지는 효과 또한 스타일러스 펜의 장점이라고 할 수 있겠네요.  





 

2. BOXWAVE


무광 블랙 바디
soft tip - rubber 재질

디자인 ★★★★☆

필기감 ★★★★

휴대성 ★★★★☆



1 | 2
3 | 4

Box wave의 외관 디자인에서는 그다지 눈에 띌만한 요소는 없는 것 같습니다. 그러나 패키지를 개봉하여 tip을 확인하는 순간, 이거다!! 싶은 생각이 들더군요. 탄성 있는 rubber재질이라 필기감이 좋고 인식력도 높아 pogo보다는 힘이 훨씬 덜 들었습니다. 다만 계속 필기를 하다보니, pogo의 얄쌍한 굵기가 그리워지기는 했습니다. 펜 끝부분에는 이어잭 부분에 꽂아 휴대할 수 있도록 작은 부속품(?)이 달려있습니다. 이어잭에 연결된 채로 필기를 할 수 있으려면 끈의 길이가 더 길어야 할테지만 그래도 개인적으로는 세가지 펜 중 가장 높은 점수를 주고 싶습니다.

    손으로 필기한 글씨

    Box wave로 필기한 글씨 


필기 결과는 Box wave도 마찬가지입니다.
pogo 보다도 손에 가해지는 부담이 적었고, 안정적으로 빠른 필기가 가능했습니다. 글씨체가 나아지는 것은 물론이거니와 비슷한 결과물이라고 해도 들이는 수고가 훨씬 줄어드는 느낌입니다.




 

 

3. DAGI 


무광 블랙 바디
hard tip - plastic 재질

디자인
★★☆☆☆

필기감☆☆☆☆

휴대성 ★★☆☆☆



1 | 2
3 | 4

Dagi는 무언가 전문가스러운(?) 외관 디자인이 특징입니다. 투명 tip이 가장 큰 포인트인데, 보통의 스타일러스 펜들이 tip부분 굵기 때문에 시작점을 짐작으로 해야 한다는 단점을 보완하고자 한 것 같습니다. 반투명한 원판의 중앙에 빨간색 점이 찍혀있고 이 점이 인식되어 필기가 되는데, 문제는 이 점마저도 정확하게 인식하지는 않다는 것이죠. (사진3,4) 게다가 이 빨간색 점이 액정과 닿기 위해서는 펜과 액정의 각도를 90도로 유지해야 하는 문제가 있습니다. 오랜시간 필기를 하기에는 부적합한 각도입니다.

    
손으로 필기한 글씨

     Dagi로 필기한 글씨



필기 결과는 조금 난해합니다. 오히려 손으로 쓴 것보다도 이상한 글씨가 나옵니다. 시간도 오래 걸릴 뿐더러 필기 자체가 어려워지는 느낌입니다.



스타일러스 펜을 사용하다 보니 생각지도 못했던 문제점을 발견했습니다. 바로 필기를 하면서 발생하는 손바닥과 액정의 접촉이 문제가 되더군요. 노트 관련 어플 중에는 손바닥과 펜이 동시에 접촉했을 때, 아예 노트가 되지 않는 경우가 많았습니다.

제가 알고 있는 어플 중에는 유일하게 penultimate 만이 손목접촉 방지 기능을 지원하고 있었는데요, 아직은 손바닥 때문에 작은 점이 묻어나는 등, 완벽하게 지원되지는 않고 있습니다.
필기 중 손목 접촉과 펜의 구분이 이루어지지 않는 점은 분명히 해결되어야 할 과제인 듯 합니다. 조만간 이 과제가 해결된 어플로 빠르게 스타일러스 펜을 이용해 볼 날을 기대해 봅니다.
 

스타일러스 펜 총평
- 스타일러스 펜 사용 시, 손보다 빠르고 안정적으로 세밀한 필기가 가능합니다.
  (전체적으로 손가락으로 썼을 때 보다는 글씨가 작아지는 편입니다.)
- 펜의 속도를 100% 따라가며 인식하지는 못합니다. (약 95% 정도)
- 손목과 동시에 접촉하는 경우, 필기가 되지 않는 경우가 많으니 주의가 필요합니다.
- 빠르고 안정적인 필기가 목적이라면 스타일러스 펜 사용을 권해드립니다.

 


 

[참고##review##]

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


Trackback 0 Comment 7
Ad Test...
2010.05.16 19:42

'Nielsen Norman Group'에서 보는 iPad Usability


iPad Usability: First Findings From User Testing -'Nielsen Norman Group'
http://www.useit.com/alertbox/ipad.html

사내 메일에서 위의 자료가 공유되어서 
문서를 간단히
훑어 보고 생각나는 것을 몇 자 적어봅니다.

자료에서는 인터랙션 디자인의 관점에서 보면 아이패드 UI는 단순히 크기만 커진 아이폰 UI는 아니라고 합니다. 이러한 근거 중의 하나로 아이패드는 화면의 크기가 크기때문에 아이폰에 비해 하단의 탭바 영역의 인지가 쉽지 않다는 점을 지적하고 있습니다.

 하지만 이보다 더 큰 차이점은 일반 웹페이지에서 발생한다고 애기하고 있습니다. 특히 아이패드에서 일반 웹페이지는
읽기는 충분하지만 탭하기에는 여전히 손가락은 두껍다고 하면서 아이패드 사용자를 위해 좀 더 탭하기 쉬운 터치 존을 제공하자고 합니다.

위의 인사이트는 아
이패드 경험이 없는(단, 1명은 1주일정도 사용) 아이폰 사용자 7명을 대상으로 UT를 한 분석 결과이며, 전체적으로 데스크탑(web)에서 무분별하게 사용되었던 UI가 되살아나는 것을 경계하고 있습니다. 가령 클릭시 그 결과를 예측하기 힘든 이미지맵 등을 예로 들면서요. 그래서 심미성 또는 레이아웃의 자유를 어느정도 제한하더라도 초기 플랫폼에서 UI가이드를 잘 정착시키기를 바라는 것 같습니다. 

이에 따라 NN그룹에서 구체적으로 제안하는 것은 다음과 같습니다.

  -사용자가 인지하기 용이한 개인에 맞춰진 인터랙티브 영역 제공
  -GUI 또한 기존 OS 스타일을 준수
  -기본적으로 사용되는 네비게이션용의
 '이전 키'나 '홈 키' '검색' 등등을 모든 앱에서 제공

어떻게 보면, 안드로이드 OS의 기본 네비게이션이 하단의 Hard key로 제공하고 있는 것도 이러한 맥락에서 나온 걸지도 모르겠습니다. 

하지만 역시 사용성을 위해서 어느 레벨까지 가이드를 두어야 할지는 고민이 될 것 같습니다. 화면이 커진만큼 맥락이 많이 바뀌었기 때문이죠. 예를 들면, 아이페드의 메일 App처럼 프레임을 좌우로 나눠 쓰는 경우에는 아이폰처럼 하단보다는 우측 상단의 옵션 메뉴를 두는 것이 더 맞는 경우니깐요. 결국 확실한 것은 컨텐츠의 Context를 아이패드의 UI에서 좀 더 살릴 수 여지가 높은 만큼, 이에 비례하여 사용성의 저해 요소도 같이 커질 수 밖에 없다는 점이네요.  


<아이패드의 mail, 우측상단에 옵션 메뉴를 배치하였다>


하지만, NN그룹에서 공유된 문서에서 가장 기억나는 점은 아래의 내용인 것 같습니다.

"기존의 웹(데스크탑)에서 사용자가 느끼는 인상은 'busy' 였다. 하지만 아이폰 App에서는 '아름답다'라는 인상이 지배적이다. 이제 컴퓨터는 '비즈니스 컴퓨터'에서 '레저 컴퓨터' 변화해야 한다."

레저 컴퓨터에 대해서는 관점에 따라 다양하게 해석될 수 있겠지만, 애플이 현재 그 흐름을 잘 실천하고 있음은 자명한 사실인듯 합니다. 따라서 동급의 플랫폼 또는 컨텐츠에서 네러티브의 '아름다움' 극대화할 수 있는 전략이 중요해질 수 밖에 없는데요. 아무래도 이에 대한 연구가 UX/UI 디자이너가 해야할 소명이자 과제이지 않을까요?




 




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


Trackback 1 Comment 1
Ad Test...
2010.03.24 13:06

아이폰 웹브라우저 페이지 전환 : adjacent in space

 

아이폰의 사파리 브라우저는 모바일 스크린에서 제대로 웹을 사용할 수 있는 최초의 브라우저라는데 큰 의미가 있습니다. 폰의 작은 화면에서 웹페이지를 보려면 화면의 확대 축소가 꼭 필요하게 되는데, 아이폰의 사파리는 축소한 경우에도 이미지와 폰트를 깔끔하고 읽기좋게 렌더링하여 보여줍니다. 직관적인 핀치 제스쳐나 더블탭을 이용한 자동 폭맞춤은 확대축소 조작의 번거로움을 없애주고요. 폭맞춤 상태에서 스크롤을 하면 옆으로 삐져나가지 않고 상하로만 움직이도록 보정해주는 특허도 작지만 실제 경험적으로는 상당히 편리하고요

 

carousel 방식의 사파리의 페이지 관리

사용 효율보다는 간결하고 학습이 쉽도록 하는 애플의 UI 철학에 공감은 하면서도 폰에서 웹브라우징을 많이하다보니 사파리의 페이지(탭 또는 창) 관리 방식은 불편합니다. 하단 툴바 오른쪽의 페이지버튼을 누르면 화면이 줌아웃되면서 현재 열려있는 페이지들을 선택하는 모드가 됩니다. 이런 UI 디자인 패턴을 carousel 이라고 하는데 여러 요소를 보여주어야 하나 공간이 부족한 경우에 회전목마처럼 돌려가면서 보도록 하는 것이지요. 다른 페이지를 선택하기위해서는 한페이지씩 원하는 페이지가 나올때까지 넘기고 나서 다시 한번 tap해주어야 합니다.

검색에서 새창을 열도록 하면 다시 검색 결과 페이지로 돌아오기 위해서 이렇게 페이지 전환을 하는 경우가 빈번해서 많이 답답합니다.


 

 

오페라 미니의 페이지 전환 방식

https://www.youtube.com/watch?v=OpTCS3g-cBY&feature=player_embedded

 

이번에 아이폰용으로 발표된 오페라 미니는 페이지가 중첩되기는 하지만 한 화면에 보여서 따로 페이지를 넘기지 않아도 됩니다. 물론 썸네일 화면이 작고 제목이나 url을 표시못하는 트레이드오프는 있지만 사실 페이지를 선택하는데는 꼭 이미지가 크지 않아도 구분이 가능하거든요. 

또 오페라 미니는 전체 화면을 축소한 썸네일이 아니라 북마크에서 보이는것처럼 좌상단의 일부를 캡쳐하여 보여줍니다. 화면이 너무 작아져서 구분이 안될 수 있는 문제를 피하는거죠. 또 대부분 페이지가 좌상단에 로고를 넣거나 하여 아이덴티티 영역으로 사용하고 있기때문에 구분하는데 도움이 될것 같습니다.

새로운 페이지를 여는것도 사파리가 페이지버튼을 누른 후에 반대편에 새로운 페이지 버튼이 생기는것에 비해 바로 접근이 쉬운 위치에 생깁니다.

 

iPad의 페이지 관리

 

http://www.apple.com/ipad/features/safari.html

 

이번에 출시되는 ipad에서는 사파리의 페이지 관리가 그리드 형태로 바뀌어서 한번에 선택할 수 있게 되었습니다.

다만 새 페이지 열기가 맨 마지막에 표시되어 페이지 열린 수에 따라 항상 변하게 되는데 ipad에서는 툴바가 상단에 있어서 새페이지를 열기 위해서는 상단에 있는 페이지 버튼을 누르고 손을 많이 움직여줘야 하더라고요. 손목만 까딱하면 되는 마우스와는 달리 팔을 움직여야 하는 터치 태블릿에서는 새로운 스트레스증후군 http://en.wikipedia.org/wiki/Repetitive_strain_injury 이 나타날 수도 있을 것 같아요.

 

추가: 아이패드를 사용해보니까 아이폰에 비해서 편해지긴했지만 이 탭선택 모드로 들어가고 나오는것 자체가 짜증나더라구요. 예상대로 탭선택 버튼이 상단에(멀리) 작은 버튼으로 있어서 선택이 쉽지 않습니다. 탭선택 모드가 된 후에는 아래쪽에서 탭 썸네일을 선택해야해서 움직임이 많고요.


adjacent in space rather than stacked in time


edward tufte http://www.edwardtufte.com/ 는 항상 정보를 공간에 펼쳐놓는 것이 시간에 쌓아놓는 것 보다 좋다고 얘기합니다.

책에서는 정보요소간의 관계를 비교하고 컨텍스트를 이해하는데 있어 하나씩 하나씩 보기보다는 한꺼번에 보여주는것이 좋다는 의미로 쓰였지만 정보디자인 차원 말고도 불필요한 인터랙션을 줄여준다는 점에서 고려해볼 필요가 있습니다.

반복된 조작이 필요한 곳에서 이 원칙만 지켜지면 사용을 좀 더 편하게 할 수 있습니다. 그런데 의외로 꼭 필요하지 않은 경우에도 그냥 트렌드처럼 잘못된 디자인 패턴을 사용하는 경우가 많은 것 같습니다.

꼭 필요한 경우가 아닌데도 정보를 stacked in time 방식으로 잘못 사용된 경우가 또 어떤게 있을까요?

[참고##정보디자인##]


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


Trackback 0 Comment 0
Ad Test...