iPhone(12)
-
[openUI] Lazy touch scroll 오픈 소스 UI
예전에 소개해 드렸던 아이폰,아이패드에서 웹페이지를 보다 쉽게 스크롤 할 수 있는 Lazy touch scroll UI 스크립트를 오픈 소스로 github에 올려두었습니다. 모두가 더 게으르게 모바일 웹을 사용하는데 도움이 되었으면 좋겠습니다. :) lazy touch scroll 간단 설명 : 스크린의 좌우 가장자리에 가상의 스크롤바를 만들어서 한 손으로도 쉽게 page up,down을 할 수 있습니다. 터치 휠 기능으로 세밀하게 또는 빠르게 스크롤을 할 수 있으며, 이미지가 잘려보이지 않게 똘똘하게 페이지를 내려줍니다. 개발자님, 함께 더 좋아질 수 있게 도와주세요. https://github.com/taekie/lazy-touch-scroll github에 자바스크립트 소스를 공개하였습니다. 함께 ..
-
아이폰,아이패드를 위한 Touch Scroll UI
아이폰,아이패드의 터치 스크롤은 정말 직관적입니다. 하지만 자주 쓰면 힘들고 귀찮습니다. 화면이 큰 아이패드에서는 더 힘들어요. 컴퓨터에서는 스페이스바로 페이지 단위로 이동하거나 마우스 휠로 손가락만 까닥하면 스크롤이 되는데 실질적인 이동 거리도 늘어나고 손목이랑 팔의 근육도 사용해야 합니다. 그래서 자주 사용하는 웹페이지에 가상의 스크롤 버튼을 만들기로 했습니다. 우선 두가지 원칙을 정했는데 1. 버튼이 충분히 커서 누르기 쉬울 것 2. 버튼이 컨텐트를 가리거나 눈에 거슬리지 않을 것 서로 모순되어 불가능해 보이는데요. 버튼을 투명하게 하고 고정된 위치에 배치하는 것으로 해결 했습니다. page up,down 버튼 배치 그 다음은 어떻게 버튼을 배치할 것인가인데, 기본적인 page up,down 버튼 ..
-
아이패드를 위한 네이버 모바일 블로그 리디자인 + 데모
누구의 문제인가? 요즘 집에서는 컴퓨터보다 아이패드로 웹서핑하는 경우가 많습니다. 검색을 통해 찾은 블로그를 보는 경우가 많은데 대부분 네이버 블로그 입니다. 사용자가 많아서겠지요. 침대에 누워 빈둥빈둥 블로그를 볼 수 있다는 건 의자에 앉아 pc를 보는 것에 비해 훨씬 편하지만(물론 그전에도 침대에서 노트북으로 봤지만) 네이버 블로그 디자인은 아이패드(아이폰)의 사용행태에 그닥 잘 적합하게 설계되어 있지 않습니다. 블로그 서비스를 제공하는 입장에서 누구를 위해 디자인할지 고민하면 우선 컨텐트를 만들고 트래픽을 가져다 주는 블로거를 고려할 수밖에 없는데요. 네이버 블로그를 운영하지 않고 댓글도 안달고 읽기만 하는 저 같은 사용 행태의 다수의 사용자 입장에서는 좀 불만이 있습니다. 그래서 제 나름의 해결을..
-
사용자의 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 In..
-
[UI 디테일] Personal Network Service ‘Path’
글을 시작하며 안녕하세요. 오랜만에 글을 작성하게 되었습니다. 요즘 PXD 사람들은 ‘Path’라는 아이폰 어플리케이션에 푹 빠져 지내고 있습니다. 본 포스팅에서는 Path 어플리케이션에 대해서 알아보고 사람들이 이 서비스에 빠져드는 이유가 무엇인지 살펴보도록 하겠습니다. 그렇다면 Path 란 무엇인가? 왜 Path가 등장했는가? 'Path'는 ‘Personal Network Service’ 라고 볼 수 있습니다. 또한 Path는 현재 아이폰 앱 을 중심으로 서비스 되고 있습니다. (현재 웹에서는 이미지 확인밖에 할 수 없으며, 웹 혹은 안드로이드 폰으로 확산될 것으로 예상합니다.) 'Path를 설립한 사람들을 살펴보면, 전 페이스북 시니어 플랫폼 매니저인 Dave Morin, Dustin Miera..
-
모바일 앱 설정 UI 가이드
아이폰은 왜 개별 앱 설정을 settings app에 모아두고 난리야? 아이폰은 앱 사용중 필요한 설정을 settings라는 별도의 앱에 모아두어서 불편하다는 트윗을 보았습니다. 그전에도 많이 들었던 불만이기도 하고요. 안드로이드처럼 개별 앱 설정이 앱 자체 안에 있으면 되지 왜 따로 빼놓은 거야. 요즘 모바일 앱 프로젝트들을 하면서 설정에 대한 고민을 많이 하고 있습니다. 모바일 앱의 설정 UI에 대한 가이드가 필요한 것 같아 정리할 목적으로 블로깅합니다. 결론은 애플이 잘못한게 아니라 앱을 잘 못 만든거에요 :) 설정은 사용 빈도에 따라 환경 설정(preferences)처럼 한번 설정하면(또는 디폴트로 설정되어 있는채로) 거의 변경하지 않는 것들과 사용 컨텍스트에 따라 기능을 변경이 필요한 것들로 나..
-
스타일러스 펜 vs 손가락. 아이패드에서라면?
아이패드의 등장으로 기대를 얻었던 기능 중 하나는 넓어진 화면으로 인한 자유로운 필기 또는 스케치가 아닐까 싶습니다. 떠오르는 즉시, 편리하게, 자유롭게 기록하여 메일로 전송하거나 다른 사람들과 공유하는 등 지금과는 다른 행동 패턴들이 나타날 테니 말이죠. 편리하고 자유로운 기록을 위해 사실 ‘손가락’은 조금 부족한 느낌입니다. 그렇다면 스타일러스 펜이 이런 아쉬운 점들을 채워줄 수 있지 않을까요? 이번 주는 시중에서 판매되는 스타일러스 펜들에 대한 리뷰를 작성해볼까 합니다. 준비물 - 아이패드 - 스타일러스 펜 (pogo, dagi, boxwave 총 3종) * 아이패드에는 무광 필름이 부착되어 있음. 1. Pogo Sketch 메탈 느낌의 포인트 컬러 바디 Soft tip – 스펀지 재질 디자인 ★★..
-
아이폰 앱 시작 아이콘은 어떤 색깔을 제일 많이 사용하고 있을까?
1 | 2 | 3 | 4 5 | 6 | 7 | 8 1. 어느 날 출근 시간에 지하철에서 재미삼아 제가 가진 앱의 시작 아이콘을 색상별로 분류해봤습니다. 1~6 번째 탭은 정보/유틸 관련 앱이고 7~8 번째 탭은 게임 관련 앱입니다. 조사해보니 정보/유틸 관련 앱은 '파랑색'계열이 많고, 게임 관련 앱은 '빨강색' 계열이 많더군요. 과연 이 결과가 우연일지 궁금해졌습니다. 2. 다른 사례로, 500개의 아이폰, 아이패드 App 색상을 조사한 결과도 마찬가지로 '파랑색'이 제일 많았다고 합니다. 두 번째는 '검정색'이라고 합니다. http://teqnolog.wordpress.com/2010/05/19/half-of-all-iphone-apps-are-either-blue-or-black/ 3. 아래에서도 ..
-
작은 차이에서 완성도를 보여주는 아이폰 UI
아이폰의 UI는 작은 부분에서 뛰어난 완성도를 보여주고 있는데, 이러한 예로 '받은 편지함'을 들 수 있습니다. 어떠한 디테일이 이메일의 사용경험을 살렸는지, 구글의 메일 앱과 간략하게 비교해 보겠습니다. 받은 편지함에서는 정보 요소는 크게 수신의 유무와 수신 날짜 그리고 보낸 사람, 메일 제목 및 내용 정도를 가지고 있습니다. 상황에 따라 다르겠지만 보편적으로 정보의 우선 순위를 둔다면 수신의 유무> 보낸 사람> 제목과 내용> 수신 날짜와 시간으로 생각해 볼 수 있습니다. 그렇다면 최우선 순위인 수신의 유무 처리를 어떻게 디자인했는지 요것만 가볍게 살펴보겠습니다. 사용자는 메일함 진입시 미수신 메일을 먼저 확인하고 글을 읽게 됩니다. 따라서 이미 읽었던 메일의 글은 사용자에게 불필요한 부하로 작용합니다..
-
[정보디자인] 모바일검색 suggestion UI
아이폰의 사파리에서는 웹 필드에 텍스트를 입력하면 필드가 강제로 가운데로 이동합니다.(iOS3 이하에서. 폼 입력시 전후 맥락을 함께 살펴보려는 의도였던 것 같습니다) 검색엔진에서 suggestion을 입력창 아래 목록으로 보여주는 방식을 사용하면 이런 이유로 2,3개정도 밖에 보여주지 못합니다. Device-Specific Design 아이폰이 이상한걸 우리가 뭘 어쩌라는거야 식의 다른 검색포탈에 비해 야후는 사용자를 배려하여 디바이스의 제약에서도 최선의 결과를 만들기 위한 노력이 보입니다. 아이폰의 이런 입력폼 특성을 반영하여 검색제안어를 입력창의 위아래에 2컬럼으로 보여주는 인터페이스를 제공합니다. 일반적인 방식보다 훨씬 많은 제안어를 보여주긴 하지만 눈이 스캔하는 영역이 4군데로 나뉘어서 좀 어색..
-
'Nielsen Norman Group'에서 보는 iPad Usability
iPad Usability: First Findings From User Testing -'Nielsen Norman Group' http://www.useit.com/alertbox/ipad.html 사내 메일에서 위의 자료가 공유되어서 문서를 간단히 훑어 보고 생각나는 것을 몇 자 적어봅니다. 자료에서는 인터랙션 디자인의 관점에서 보면 아이패드 UI는 단순히 크기만 커진 아이폰 UI는 아니라고 합니다. 이러한 근거 중의 하나로 아이패드는 화면의 크기가 크기때문에 아이폰에 비해 하단의 탭바 영역의 인지가 쉽지 않다는 점을 지적하고 있습니다. 하지만 이보다 더 큰 차이점은 일반 웹페이지에서 발생한다고 애기하고 있습니다. 특히 아이패드에서 일반 웹페이지는 읽기는 충분하지만 탭하기에는 여전히 손가락은 두껍다..
-
iPhone user interview - iPhone 구매 동기, 장점 및 단점, 재구매 의사를 중심으로
아이폰을 최근에 산 친구를 만났습니다. 이놈의 직업의식 때문에 저도 모르게 친구를 인터뷰 해 보았습니다. 인터뷰의 시간은 대략 40분정도 였으며, 인터뷰 방식은 개방된 공간에서 대화하는 형식으로 이루어졌습니다. 1. 기본정보 성별: 남자 나이: 20대 후반 IT 기기에 대한 친화도: 중상 2. 아이폰 구매 동기 먼저 아이폰을 산 동기에 대해서 물어보았습니다. 이 친구는 여자친구와 통화비가 너무 많이 나오기 때문에, 여자친구와 함께 아이폰으로 기기변경을 했다고 합니다. 스카이프를 사용하면 통화비가 나오지 않는다고 하였습니다. 그 전에 쓰고 있던 폰은 SKY 사의 듀퐁 폰을 사용한다고 하였습니다. '아이폰 기기가격이 비싸지 않은가?' 라고 질문하였는데, 비싼 편이긴 하지만 다른 하이엔드 폰의 가격과 비교해 ..