• 네이버 블랙홀
• 다음 지도앱 음성검색
• 아이폰 웹브라우저 페이지 전환 : adjacent in space
• 맥 키보드 사람답게 사용하기
• 윈도우 키보드 사람답게 사용하기
• 스티브잡스의 위기관리: 통계숫자와 고객경험
• 구글과 애플의 미니멀리즘 베끼기 경쟁
• 아이폰은 사용자 조사를 안해요
• 모바일검색 suggestion UI
• 다음 모바일 초성검색 자동완성
• details matter / 네이버 그린윈도우
• 화장실 UX / 화장지 제발 바깥쪽으로 풀리게 걸자
• 윈도우 7 fitts's law 적용 실패 사례
• Contextual Keyboard / 다음은 검색을 안하나요?
• 나는 UX디자이너인가 UI디자이너인가?
• 웹브라우저
  메타포
  메타포 

동일한 이슈를 다루는 신문사별 논조의 차이를 비교해 볼 수 있어서 네이버의 뉴스캐스트를 좋아합니만 뉴스캐스트의 아이폰앱은 아쉬운점이 많습니다.
뉴스를 보기 위해 기사를 클릭하면 작은 모바일화면에 빽빽히 광고로 도배되어 로딩도 더딘 신문사 웹페이지로 던져져서 참담한 기분이 들어도 뭐 그게 뉴스자체는 신문사에 위임하고 전혀 가공하지 않겠다는 정책때문이라면 어쩔 수 가 없지요. 뉴스캐스트가 하는일은 신문사들의 기사들을 모아주는것이니까요.

하지만 그렇더라도 신문사별 기사를 훑어보는 일을 조금이라도 쉽게 해줄수는 없는지 고민이 필요해보입니다. 모든 신문을 단순히 목록으로 쭉 펼쳐두어서는 원하는 기사를 찾기가 어렵거든요. 긴 목록을 플리킹하는건 전혀 즐겁지가 않아요. 뉴스캐스트의 취지처럼 정보단위가 개별기사가 아닌 신문사라면 네이버 웹페이지의 오픈캐스트의 carousel 형태로 페이징을 할 수 있도록 하는게 나을것 같습니다.

pc에서는 익숙하고 간편한 스크롤 대신에 반응도 더디고 답답한 carousel 형태를 취하고 carousel형태가 적합한 모바일 화면에서는 스크롤 목록 방식을 선택하고 있습니다. 뭔가 반대로 가고 있는것 같아요. 트랜드보다는 환경에 맞는 디자인패턴을 선택할 필요가 있을것 같습니다.

아이폰 뉴스캐스트 앱

pc 오픈캐스트 웹페이지

휴대폰으로 인터넷이 되면서 이제 어디서나 블로그에 올라온 맛집 리뷰를 읽고 근처의 괜찮은 맛집을 찾아보고
전화번호를 찾아 예약을 하고 빠른 길을 비교해 볼 수 있게 되었습니다.

그런데 그렇게 쉽지만은 않더라구요.

한상차림이 아닌 부페식 검색 결과를 그대로 작은 화면에 옮기는것만으로는 실제 모바일 환경에서 사용할때 아쉬운 부분이 많이 있는것 같습니다. 음성인식과 비전인식검색등 새로운 기술이 빠르게 발전하고 있지만 우선 가지고 있는 정보를 어떻게 효율적으로 잘 보여줄 지에 대한 고민이 많이 필요한 것 같고요.

더 게을러지기 전에 동영상 먼저 공유하고 차근차근 회사 블로그에서 모바일 UI 디자인 패턴에 대한 얘기를 진행하겠습니다.

프로토타입은 혼자 쓰려고 만든거라 어느 정도 인터페이스 디자인이 정리 되면 공개하고 서비스를 할만한 여력이 안되면 오픈소스 프로젝트로 돌릴 계획입니다.

저는 사용자 서식(user css)을 이용한 폰트 강제 지정 기능이 없기 때문에 크롬을 사용하지 않고 있습니다. 설정에서 기본 폰트를 지정하더라도  네이버처럼 돋움이나 굴림을 강제 지정한 사이트들에서 엉성한 글꼴을 봐야하는게 너무 괴롭거든요. 눈도 아프고요.

사용자의 기능요청에 대해서 크롬 도움말 그룹에서는 보안 문제때문에 웹킷엔진에 원래부터 있는 user css  기능을 아직 제공하지 않는 답변만 있고 이번 업데이트에도 누락되었는데, extensions 기능을 이용해서 폰트를 강제 지정할 수 있습니다.

personalized web 확장을 받아서 설치하고

설정에서 다음 룰을 추가해주면 됩니다.

match urls : ^http://

add css: body,div,a,* {FONT-FAMILY: "Nanum Gothic","나눔고딕","Malgun Gothic","맑은고딕" !important; line-height:130%;}

나눔고딕이나 맑은 고딕 원하는 폰트를 앞에 두면 됩니다. !important 키워드를 사용하면 사이트 자체의 css를 무시하고 강제 지정됩니다. 줄 간격이 답답하면 line-height를 조정합니다.

돋움 강제 지정 사이트 vs. 사용자 나눔고딕 지정

정보제공자의 의도한대로 잘 보여주는것 보다 사용자의 선택이 우선되어야 한다고 생각합니다. extension을 이용해서 사용자의 요구에 따른 확장을 하는것도 중요하지만 웹 컨텐트의 대부분인 텍스트를 담는 그릇인 폰트정도는 사용자가 선택 할 수 있게 기본 기능으로 제공해줘야 하는게 아닌가 싶습니다.

사이트들도 디자인대로 사용자에게 잘 보여지는것도 중요하지만 쓸데없이 강제 하지 않았으면 좋겠습니다. 네이버가 나눔고딕을 배포하면서도 자기 사이트에 바로 적용하지 못하는건 나름 사정이 있겠지요. 근데 구글 코리아. 구글은 안그런데 구글코리아만 링크에 밑줄 긋지 말라고 설정해놔도 멋대로 찍찍 그어놔서 보니까 border를 설정해놨더라구요. 밑줄이 글자랑 붙지 않는 꼼수는 좋은데 밑줄 자체를 보기 싫은 사람은 어쩌라구요.

-------

추가 오른쪽클릭방지 해제

add javascript 필드에 아래 추가

function r(d){d.oncontextmenu=null;d.onselectstart=null;d.ondragstart=null;d.onkeydown=null;d.onmousedown=null;}function unify(w){try{r(w.document);}catch(e){}try{r(w.document.body);}catch(e){}try{var divs=w.document.getElementsByTagName("div");for(var i=0;i<divs.length;i++){try{r(divs[i]);}catch(e){}}}catch(e){}for(var i=0;i<w.frames.length;i++){try{unify(w.frames[i].window);}catch(e){}}}unify(self); 

키워드가 잘 생각나지 않거나 타이핑하기 귀찮을때 검색엔진의 키워드 추천 기능은 정말 유용하다. 구글이나 다음은 suggest라는 이름으로 네이버는 자동완성이란 이름으로 서비스를 제공한다.

네이버는 기본적으로 unix shell의 tab complete을 모델로 한것 같다. 실제로 tab키로 채워지는것은 방향키만을 사용하는 구글이나 다음과는 다르다.

하지만 보통 자동완성 autocomplete 이라고 하면  tab이나 방향키같은 명시적인 채움명령없이 "자동"으로  채워지는 방식을 말한다.  영어같은 경우는 in-line complete으로 입력라인에 바로 나머지 부분을 채워주며 채워진 부분을 선택하여 두어 혹시 의도하지 않은것이라도 쉽게 수정할 수 있도록한다. 하지만 자소를 조합하는 우리말에는 적용할 수 없다. 대안으로 아이폰 autocorrect 같은 버블 방식을 생각할 수 있다.

 
자동완성은 의도하지 않은 값을 제안하거나 잘못된 완성을 쉽게 바꿀 수 없으면 오히려 엄청 불편해진다. 검색엔지의 키워드 서제스쳔에서는 어떨까? 정말 자동으로 키워드가 완성되는게 편할까? 편하다.
http://www.informationredesign.com/autocomplete/

지하철 플래폼내의 안내판이 신형 lcd로 교체되고 하단에 열차운행 정보그래픽이 항상 제공되고 있습니다. 열차가 언제쯤 도착할지 가름할 수 있어서 참 좋습니다.

다만 열차의 행선지는 메인화면에 여러 정보가 로테이션 되다 한번정도 표시되고 있어 내가 탈 열차인지 확인하려면 한참을 기다려야 해서 좀 답답합니다.(짧은 구간으로 아무 열차나 타도 되는 경우는 아무 문제 없지만요)


지하철 도착 안내