네이버, 다음의 버스 도착 안내의 현재 운행 버스 위치는 왜 오른쪽에 있을까요? 또 서울시와 경기도, t맵와 올레맵도 왜 다들 오른쪽에 있는 걸까요? 아래 그림을 보며 이유를 한번 생각해 보고나서 계속 글을 읽어주세요. 그림: 왼쪽 상단부터 서울버스앱,네이버지도,다음지도,서울시버스정보,경기도버스정보,올레맵,T맵 질문: 왜 버스 운행 정보는 목록의 오른쪽에 위치할까? 1. 버스 운행 정보를 표시하는 가장 최적의, 궁극의 디자인이라서 2. 서울버스 앱을 베껴서 거의 모든 모바일 버스 운행 정보 페이지들이 목록으로 왼쪽에 정류장 명을 정렬하여 보여주고 오른쪽에 노선도와 현 위치의 버스를 보여주고 있습니다. 서울버스 앱이 처음 나왔을때는 이렇게 목록과 그래픽을 섞은 정보디자인이 상당히 참신했습니다. 웹에서는 긴..

예전에 소개해 드렸던 아이폰,아이패드에서 웹페이지를 보다 쉽게 스크롤 할 수 있는 Lazy touch scroll UI 스크립트를 오픈 소스로 github에 올려두었습니다. 모두가 더 게으르게 모바일 웹을 사용하는데 도움이 되었으면 좋겠습니다. :) lazy touch scroll 간단 설명 : 스크린의 좌우 가장자리에 가상의 스크롤바를 만들어서 한 손으로도 쉽게 page up,down을 할 수 있습니다. 터치 휠 기능으로 세밀하게 또는 빠르게 스크롤을 할 수 있으며, 이미지가 잘려보이지 않게 똘똘하게 페이지를 내려줍니다. 개발자님, 함께 더 좋아질 수 있게 도와주세요. https://github.com/taekie/lazy-touch-scroll github에 자바스크립트 소스를 공개하였습니다. 함께 ..

아이폰,아이패드의 터치 스크롤은 정말 직관적입니다. 하지만 자주 쓰면 힘들고 귀찮습니다. 화면이 큰 아이패드에서는 더 힘들어요. 컴퓨터에서는 스페이스바로 페이지 단위로 이동하거나 마우스 휠로 손가락만 까닥하면 스크롤이 되는데 실질적인 이동 거리도 늘어나고 손목이랑 팔의 근육도 사용해야 합니다. 그래서 자주 사용하는 웹페이지에 가상의 스크롤 버튼을 만들기로 했습니다. 우선 두가지 원칙을 정했는데 1. 버튼이 충분히 커서 누르기 쉬울 것 2. 버튼이 컨텐트를 가리거나 눈에 거슬리지 않을 것 서로 모순되어 불가능해 보이는데요. 버튼을 투명하게 하고 고정된 위치에 배치하는 것으로 해결 했습니다. page up,down 버튼 배치 그 다음은 어떻게 버튼을 배치할 것인가인데, 기본적인 page up,down 버튼 ..

누구의 문제인가? 요즘 집에서는 컴퓨터보다 아이패드로 웹서핑하는 경우가 많습니다. 검색을 통해 찾은 블로그를 보는 경우가 많은데 대부분 네이버 블로그 입니다. 사용자가 많아서겠지요. 침대에 누워 빈둥빈둥 블로그를 볼 수 있다는 건 의자에 앉아 pc를 보는 것에 비해 훨씬 편하지만(물론 그전에도 침대에서 노트북으로 봤지만) 네이버 블로그 디자인은 아이패드(아이폰)의 사용행태에 그닥 잘 적합하게 설계되어 있지 않습니다. 블로그 서비스를 제공하는 입장에서 누구를 위해 디자인할지 고민하면 우선 컨텐트를 만들고 트래픽을 가져다 주는 블로거를 고려할 수밖에 없는데요. 네이버 블로그를 운영하지 않고 댓글도 안달고 읽기만 하는 저 같은 사용 행태의 다수의 사용자 입장에서는 좀 불만이 있습니다. 그래서 제 나름의 해결을..

이 글을 웹에서 보고 계시다면 페이지의 맨 아래에 페이지 번호가 쭉 나열된 걸 보실 수 있을텐데요. 이런 UI 요소를 pagination 이라고 합니다. 블로그 글 목록이나 검색 처럼 자료의 양이 많으면 한 번에 표현하기 어려운데요. 페이지 단위의 청크로 나눠 보여주고 쉽게 원하는 부분으로 이동할 수 있도록 하는 UI 패턴입니다. 좀 더 많은 pagination 디자인 유형은 스매슁매거진 기사에 잘 정리가 되어 있습니다. http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/ 익숙하지만 나쁜 UI 이렇게 페이지 숫자들과 이전,다음이 나열되어 있는 형태는 상당히 많이 쓰이는 익숙한 UI인데요. 관습적..

아이가 토마스 기차 놀이만 하더니 요즘 로보카 폴리와 디즈니 카2를 보고나서는 자동차도 가지고 놀고 있습니다. 놀이매트에 자동차 길이 그려 있어서 같이 자동차 경주를 하자고 했는데 별로 흥미가 없더라구요. 아이는 재미없어했지만 저는 장난감 자동차 가지고 놀면서 실제 로드뷰가 보이면 재밌겠다 싶은 생각이 들었습니다. 그래서 만들어봤습니다. 원리는 단순합니다. 아이패드의 지도 위에 자동차 장난감이 놓여있는 위치와 방향을 로드뷰로 보내서 보여주는 거지요. 장난감 바퀴 부분에 컬러 점토를 붙여서 3개의 접점을 만들었습니다. 점토가 굳어도 약간 수분이 남아있는 상태에는 전도체 역할을 합니다. (동영상을 찍을 당시는 점토가 너무 굳어버려서 약간 인식이 잘 안되었습니다) 자동차도 쇠로 되어 있어서 손으로 쥐고 있으면..

저는 twtkr(http://twtkr.olleh.com/)을 사용하고 있습니다. 일일히 클릭해서 사진 보는게 귀찮아서요. 오늘 twitter(http://twitter.com/) 를 오랫만에 보니 웹에서는 트윗에 포함된 url을 단순화 하여 보여주고 있더라구요. 아이폰에서 사용하는 서드파트 클라이언트인 tweetbot에서는 이전 부터 지원하고 있는 익숙한 기능이지만 메이저 웹서비스에서도 적용하고 있다는게 반가웠습니다. URL information priority http://www.dailymail.co.uk/sciencetech/article-1220286/Sir-Tim-Berners-Lee-admits-forward-slashes-web-address-mistake.html 라는 url을 나눠보면 ..

얼마 전에 네이버 이미지 검색 결과 디자인이 개편되었습니다. 네이버 이미지검색 개편 http://naver_diary.blog.me/150113580452 기존 방식에 비해 세가지 뷰가 추가 되었습니다. 텍스트 설명을 없애고 이미지에 집중하도록 한 "썸네일만 보기" 와 타일형태로 여백을 없앤 "크게보기" , 새창으로 이동하지 않고 별도의 프레임에서 더 크게 보는 "미리보기"가 새롭게 추가 되었습니다. 네이버 썸네일만 보기 정보요소의 중요도와 대비 처음 슬쩍 봤을 때 기본 화면인 "썸네일만 보기"는 텍스트 부가정보를 없애고 마우스 오버하였을때 썸네일이 확대되면서 부가 정보를 보여준다는 점에서 구글 이미지 검색 개편의 영향(이라고 쓰고...)을 받은 것 같았습니다. 검색을 하는 의도에 따라 다르겠지만 저는 ..

요즘 굉장히 많은 스마트폰 용 날씨 앱이 나오고 있습니다. 그런데 전 그런거 다 필요 없고 아침에 우산을 챙겨 갈지 말지 알려 주는 앱이 있으면 좋겠어요. 아침에 나갈때 tv 날씨 예보를 보고 오늘 비오니까 우산 챙겨가라고 알려주는 엄마처럼요. 보통때는 날씨 신경 안 쓰거든요. 있더라구요. 비오면 push로 알려주는. 다만 분기마다 돈을 받고 있습니다. 푸시 서버를 운영하려면 돈이 드니까 그렇겠죠. 개인적으로는 2007년 부터 비오는 날 아침에 우산 준비하라고 스스로에게 문자 보내는 스크립트를 만들어서 쓰고 있는데 상당히 유용합니다. 이제 여러분에게도 비오는 날 우산 준비하라고 문자 날려 드리겠습니다. 공짜로. 제가 아니라 구글이요. 1. 구글 캘린더는 일정을 문자로 알려주는 것 알고 계신가요? 무료로?..

검색엔진 뭐 사용하세요? 네이버,다음,구글? 네이버가 좋아요? 구글이 좋아요? 이런 질문은 아빠가 좋아? 엄마가 좋아? 같은 질문과 별반 다르지 않습니다. 둘은 지향하는 바가 다르기 때문에 필요에 따라 보완적인 관계에 있지 무엇이 더 좋고 나쁘다고 하기 어렵거든요. 그런데 다시 뒤집어 생각하면 둘 다 부족하다는 의미입니다. 이전 글에서 이어지는 내용입니다. http://story.pxd.co.kr/327 일로써 인터넷 자료 조사를 많이 하기도 하고 약간의 검색 중독 때문에 검색엔진 사용이 극단적으로 많은 편에 속하는데요. 검색에 할애하는 시간이 많다보니 그만큼 네이버,구글의 검색 결과에 만족스럽지 못한 부분이 많이 걸려서 결국 개인적으로 매쉬업을 이용해검색서비스를 만들어 사용하고 있습니다. 최근 몇 년 ..

네이버 tv가이드 http://tvguide.naver.com/ 가 어제 리뉴얼을 했습니다. 기능면에서는 많이 좋아졌는데 눈이 편하지는 않네요. 깔끔하긴하지만 가장 중요한 방송명은 눈에 잘 들어오지 않습니다. Information Hierarchy 하나의 셀 안에는 방송시간,방송명, 부가정보 픽토그램 세가지 정보가 있습니다. 이중에서 가장 정보 중요도가 높은건 방송명 입니다. 부가정보는 사실 없어도 그만입니다만 현재 디자인에서는 부가정보에 더 시선이 갑니다. 텍스트보다 이미지가 주목성이 높은데다가 강조색까지 사용하고 있으니까요. 형태적으로 셀에서 가장 먼저 시선이 가는 부분은 세로 시간선입니다. 방송명이 이 시간선과 정렬이 되어 있지 않고 방송시간을 훑고 지나가야 볼 수 있어서 잘 읽히지 않습니다. 간단..

얼마전(이미 지난해) 개편한 다음은 통합웹이란 이름으로 출처별 구분을 하나로 묶어 보여주기 시작했습니다. 다음보다 앞서 네이버 모바일은 작은 모바일 화면에서 출처별로 결과를 나열하는게 비효율적이라고 퓨전웹이란 이름으로 검색결과를 묶어서 보여주었고요. 반면 구글 코리아는 검색결과 UI를 현지화 하여 본사와는 다르게 유형별 검색결과를 모아서 보여주는 시도를 하고 있습니다. 구글코리아는 네이버와 다음처럼 유형별로 나눠 보여주려고하고 반대로 네이버와 다음은 구글처럼 한번에 보여주는 재밌는 상황입니다. 과연 어떻게 검색 결과를 보여주는 것이 좋을까요? 통합검색 네이버에서 세계최초로 선보였다고 하는 통합검색 은 정보의 유형이나 출처등에 따라 나누어진 컬렉션별 검색(vertical search) 결과를 한페이지에 모..