다음 뉴스에는 기사를 자동 요약해 보여주는 기능이 있습니다. 예전에 야후가 summly 를 인수하면서 이런 뉴스 요약 서비스가 여러가지 의미로 화제가 되었었죠.다음 뉴스 자동 요약의 품질은 초기에는 만족스러웠던 기억이 나는데요. 오히려 최근들어 기사 앞 문장만 그대로 따오는 경우가 많아서 좀 의문이 들긴 합니다. (두괄식으로 기사를 잘 써서인지) 그럼에도 저처럼 바쁘고 게으른 사람에게는 상당히 유용한 기능입니다.다음 뉴스 자동요약 기능 버튼 누르기도 귀찮아요. 그냥 펼쳐 보여주세요.그런데 사용이 그리 편하지 않습니다. 처음에는 클릭하는 방식이었는데 번거럽다는 의견이 있었는지 그나마 현재는 마우스오버만 하면 보여집니다. 이런 기능을 쓰는 사람들 속성을 잘 모르는 것 같아요. 게을러서 버튼에 마우스 옮기는 ..

버스 노선도 Redesign 과정과 결론이전 글에서는 해외의 사례들을 살펴봤는데요. 이번 글에서는 각 사례에서 적용 또는 참고할 수 있는 부분들을 활용하여 우리나라의 버스 노선도를 리디자인한 과정을 정리해봤습니다. 요즘에 버스 노선도를 보면 빨간 화살표 모양의 스티커를 종종 볼 수 있습니다. 놀랍게도 이는 담당 시청이 아닌 한 대학생 청년이 시작한 일이었는데요. 평소 버스 노선도에 현 위치와 방향 표시가 안 돼 있는 상황에 문제점을 느끼고 있었고, 이를 개선하기 위해 직접 스티커를 붙이고 다녔습니다. 기존의 노선도는 해당 정류장을 이용하는 사람들을 고려하지 않고 다 같은 디자인, 즉 정류장 명만 줄줄 써있는 노선도를 사용해서 문제가 됐는데 어떻게 보면 이 학생이 이 정류장을 이용객들을 위한 정류장 맞춤 ..

해외 버스 노선도 사례와 특징 이번 겨울 저는 pxd의 인턴으로서 입사하게 되었습니다. 인턴 생활을 하면서 버스 노선도 리디자인 프로젝트를 진행하게 되었는데요. 이번 글에서는 이 프로젝트의 리서치부분을 소개하려고 합니다. 이 프로젝트는 얼마 전 새로운 지역에 갔다가 집에 오는 길에 버스를 타려고 정류장에 있는 버스 노선도를 보며 내가 타야될 버스를 찾으면서 시작되었습니다. 그런데 항상 느끼는 점이지만 버스 진행 방향이 헛갈리고, 현재 정류장이 어디인지조차 찾기 힘들 정도로 노선도를 보기가 어렵다는 걸 다시 한번 느끼게 되었습니다. 또한 비슷한 경로를 가진 버스를 찾기 위해선 노선도를 하나하나 다 읽어봐야 하고, 이를 비교해서 볼 수 없다는 것이 불편하여 결국 스마트폰으로 검색을 하게 되었습니다. 이는 저..

이전에 시간표 리디자인 에 대한 글을 쓰면서 pxd LeanUX lab에서는 학회 시간표를 좀 더 잘 만들어 볼 수 있지 않을까 고민하고 있다고 말씀드렸는데요. 이번 HCI 2015 에 맞춰서 진행되는 모습을 미리 보여드리려고 합니다. 아직은 다듬어야 할 부분이 많지만 저희가 생각한 가치가 사용자에게 정말 의미가 있는지 알아보는 유일한 방법은 조금이라도 빨리 직접 피드백을 받아보는 것이니까요. TableTalks 간단히 설명하면 학회(또는 행사) 시간표의 각각의 셀(발표) 하나 하나에 게시판이 제공되는 서비스 입니다. 컨퍼런스에서 발표가 끝나고 QnA 시간이 있긴 하지만 시간이 한정되어 있고 또 뭔가 궁금한 점은 있는데 질문이 바로 잘 정리가 안되어서 머뭇거리다가 질문 기회를 잃는 경우가 많은 것 같았습..

예전에 소개해 드렸던 아이폰,아이패드에서 웹페이지를 보다 쉽게 스크롤 할 수 있는 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 의 데모 페이지를 열어두었습니다. 특징은 1. 썸네일 방식과 미리보기(큰 이미지)를 결합한 UI를 사용합니다. 특정 이미지를 찾아내려는 것 보다는 빠르게 검토해 보려는 사용 패턴에는 썸네일과 원본 이미지를 왔다갔다하는 번거러운 pogosticking 이 빈번합니다. 썸네일과 함께 적당히 큰 원본 이미지를 한꺼번에 보여줘서 빠르게 훑어볼 수 있도록 하였습니다. 개인적으로는 이런 행태의 이미지 검색을 더 많이 하고 있습니다. 2. 그리드 방식이 아닌 타일 방식의 이미지 정렬을 사용합니다. 이미지간의 여백을 줄여 시선의 움직임을 최소화하여 눈의 피로를 줄이도록 하였습니다. 3. auto paging을 사용합니다. 다음 페이지 버튼을 누르지 않고..

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

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

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

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