많은 분이 애용하는 부산대학교 인공지능 연구실에서 만든 한국어 맞춤법/문법 검사기, 저도 잘 사용하고 있습니다. 사전을 기반으로 한 단순한 맞춤법 교정이 아니라 문법 규칙과 의미 분석, 오류 통계를 통해서 문맥상의 오류나 번역 투의 문체 오류까지도 잡아내어 바른 표현을 알려줍니다. 강력한 검사 기능과 더불어 충실한 도움말을 제공하여 바른 우리말 사용을 배우는 데 많은 도움을 얻고 있습니다. 이 글을 쓰면서도 맞춤법 검사기를 이용했습니다. 하지만 UI 측면에서는 아쉬운 부분이 있습니다. 개선 사항을 수정해서 스스로는 만족스럽게 사용하고 있는데요. 이런 UI 개선점을 반영해 주셔서 다른 사용자도 같이 더 편하게 쓸 수 있으면 하는 바람으로 블로깅 합니다. 한국어 맞춤법/문법 검사기에 제안한 UI를 실제로 반..

맥락 없는 디자인사용자와 사용 맥락을 이해하는 것은 UX뿐 아니라 모든 디자인에서 꼭 필요한 과정입니다. 정보를 시각화한 정보디자인의 경우 정보가 여러 겹으로 부호화되어 있어 글처럼 차례로 읽히지 않습니다. 정보 밀도가 높아 다양한 방식으로 읽힐 수 있는 건 좋지만, 사용 맥락에 따라 정보를 쉽게 찾아가도록 흐름을 만들어주어야 합니다. 네가 뭘 좋아할지 몰라서 다 넣어 보면 항상 실패합니다. 맥락을 모르고 이야기하는 사람과 대화하면 답답합니다. 그림1 - 개인이 현 위치 스티커를 붙여 놓은 현행 서울 버스 노선도일상에서 매일 만나는 정보디자인인 버스 정류장의 노선도는 이런 맥락 없는 디자인으로 우리를 피곤하게 합니다. 같은 버스 노선도라도 정류장에서 볼 때, 버스를 타고 가면서 볼 때, 인터넷으로 찾아볼..

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

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

한글날을 맞이해서 구글단모음 키보드를 개선한 한글 키보드 디자인을 소개합니다. 아래에 사용해 볼 수 있는 프로토타입을 만들어 놓았으니 귀찮으신 분들은 아래쪽만 보시면 됩니다. 좋은 키보드 디자인은 배우기 쉽고 효율적으로 빨리 칠 수 있고 또 피로가 적어야 합니다.:) 키보드를 익숙하게 쓰는 것은 머리가 기억하는게 아니라 근육이 기억(muscle memory)하는 것이라서 조작 방식이 달라지면 다시 배워야 합니다. PC에서 두벌식 자판을 잘 쓰고 있었어도 스마트폰에서 처음 두벌식자판을 엄지로 쳐보려고 하면 정확한 키 위치로 잘 움직여지지 않습니다. 머리가 기억한 위치로 손가락을 움직이는게 아니라 오른손 검지가, 왼손 약지가 각각의 열개의 손가락 근육이 어디로 움직일지를 기억하고 있었던거니까요. 기왕 다시 ..

한글날을 맞이하여 한글키보드와 관련해 사내 메일로 주고 받았던 주제들을 모아서 정리해보려고 합니다. 우선 한글 터치 키보드 디자인에 대한 얘기입니다. 터치스크린을 채용한 폰이 나오면서부터 10키에서 벗어난 새로운 한글 자판의 배열을 고민하기 시작했습니다. 자판의 여러 시안을 만들어보긴 했는데 문제는 어떤게 좋은지 평가하기가 어려웠습니다. 매번 사람들에게 테스트 해보게 할 수 도 없고, 한 두번 사용해서는 제대로된 평가를 할 수 없으니까요. 익숙한 자판이 더 편하니까 충분히 숙달 되기 전에는 비교가 어렵습니다. 그래서 자판의 효율을 간단히 평가할 수 있도록 키의 배열과 빈도를 시각화 할 수 있는 heatmap 생성 툴을 만들었습니다. 한글 자소 빈도 휴대폰 자판의 경우 새로운 방식의 한글 자판을 소개할 때..

지난주에 저희는 HCI2014 학회에 참가하였습니다. (글 쓰다가 내버려둔지 한참 됐네요. :) 학회 참가 기간 동안 몇가지 시간표들을 접하였는데요. 표의 열과 행에 빽빽하게 숫자를 나열한 익숙한 형태였지만 시간표를 활용하는 실제 사용 맥락에서는 정보를 이해하기 쉽지 않았습니다. pxd에서는 이런 경우에 사내 전체 메일로 정보디자인 퀴즈를 내고 의견을 나누곤(주로 싸웁니다) 하는데, 업무가 바빴는지 참여가 저조했습니다. 그래서 이번에는 블로그를 통해 정보디자인에 관심있는 디자이너, 학생분들과 함께 고민해보려고합니다. 우선 제가 고민했던 부분을 공유합니다. 1. 리프트권 종류가 왜 이렇게 많아? 작년 학회 참가자들에게서 하이원 슬로프가 좋다는 얘기를 많이 들어와서, 저는 학회보다 스노우보드 타는데 더 관심..

LeanUX Lab에서는 요즘 날씨앱을 만들고 있습니다. 앱스토어에 별도의 날씨 카테고리가 있을 정도로 날씨앱은 굉장히 많습니다. 만들기 쉽거든요. 시장에서 경쟁도 심하고 더 이상 새로울 것도 없는 날씨앱을 만들기로 한 건 아직 세상에 딱 맘에 드는 날씨앱이 없었기 때문입니다. P랩의 모토는 make a dent in the universe 입니다. (스티브잡스가 한 말이기도 하고 37signals의 rework 책의 한 챕터 제목이기도 합니다) 날씨앱이 세상을 바꾸지는 못하지만 우주에 작은 흠을 낼 정도의 세상에 없던 궁극의 날씨앱을 만들 수는 있을 것 같거든요. 날씨앱을 만들기로 하고 다른 프로젝트와 마찬가지로 먼저 경쟁자 분석과 사용자 조사를 함께 진행했습니다. 현재 날씨앱이 어떤 유형이 있는지 어..

네이버, 다음의 버스 도착 안내의 현재 운행 버스 위치는 왜 오른쪽에 있을까요? 또 서울시와 경기도, 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를 보는 것에 비해 훨씬 편하지만(물론 그전에도 침대에서 노트북으로 봤지만) 네이버 블로그 디자인은 아이패드(아이폰)의 사용행태에 그닥 잘 적합하게 설계되어 있지 않습니다. 블로그 서비스를 제공하는 입장에서 누구를 위해 디자인할지 고민하면 우선 컨텐트를 만들고 트래픽을 가져다 주는 블로거를 고려할 수밖에 없는데요. 네이버 블로그를 운영하지 않고 댓글도 안달고 읽기만 하는 저 같은 사용 행태의 다수의 사용자 입장에서는 좀 불만이 있습니다. 그래서 제 나름의 해결을..