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

한 달에 한 번씩 명사분들의 경험과 좋은 생각을 들으며 공유하는 pxd talks. pxd인 뿐만 아니라 pxd talks에 참여하고자 하는 분들의 신청을 받아 외부 참여도 같이 진행하며 점점 뜻깊은 시간이 되어가고 있습니다. 2012년의 12번째 pxd talks시간은 특히 참여 열기가 뜨거웠습니다. 바로 국제적인 인지도의 이수지 그림책 작가님과 함께 했기 때문인데요. 이수지 작가님은 '책'이라는 매체에 대한 탁월한 이해에서 시작된 현실과 상상의 경계를 나타낸 그림책으로 매우 유명한 작가님입니다. 1. 그림책 작가 이수지 "저는 어린이에게도 어른에게도 각기 다르게 어필할 수 있는 다양한 층을 가진 책이 재미있는 책이라고 생각합니다." - 이수지 작가님의 말 중에서 부드럽고 따뜻한 목소리로 인사해주시며 ..

미국의 5대 신문 중 하나인 USA Today의 디자인 및 브랜드 아이덴티티가 최근에 개편되었습니다. USA Today는 1982년에 창간되어 미국 전역에 발행되는 전국지로서, 이미지를 이용해 정확한 정보 전달을 제공하는 것이 특징이며, 간결한 기사와 대담한 그래픽으로 시선을 끌어 지금은 미국에서 발행부수가 가장 많은 신문 중의 하나로 자리매김 하였습니다. 평소 USA Today를 이용하고 관심있게 지켜 본 유저로서 본 포스팅을 통해, 쇠퇴하던 신문 업계에서 신선한 성공 모델로 불리우며 많은 독자를 매료시킨 비결에 대해 간단히 소개하고자 합니다. 우선 한 번 보시죠. [이전 로고(좌측) / 새 로고(우측)] Windows 8 UI가 연상되는 디자인입니다. 이미지, 절제된 컬러, 그리드를 기반으로 하여 주..

pxd배 AMAZING한 사생대회 투표에 참여해주신 여러분께 감사의 마음으로 스타벅스 카페라떼를 준비했습니다. 투표하신 분들 중 3분을 추첨하였으며 공정한 추첨을 위해 추첨 프로그램을 제작했습니다^-^ 추첨과정은 아래 GIF파일로 공유하오니 확인해 주세요~ - 최근 바쁜 일정으로 뵙기 어려운 사장님이 직접 추첨해 주셨습니다. 행운의 주인공 3분은 바로바로. 1. 서주우유 2. kkk 3. 김돈정 * 이상 3분은 기프티콘을 받을 전화번호를 닉네임과 함께 pxd 페이스북에 메시지로 보내주세요! * pxd 페이스북 바로가기) http://www.facebook.com/pxdstory * 페이스북 계정이 없으신 분은 아래 비밀댓글로 연락처 남겨주시길 바랍니다^-^ 이번주 주말(11/18)까지 연락처가 접수되지 ..

본 내용은 위키피디아의 내용 일부를 토대로 작성되었다. 정의 '증기 기관 시대를 연상시키는 아날로그적 첨단 기계 양식' 1980년대 SF소설의 한 쟝르로서, 기계 미학의 시대 표현 양식이다. 19세기 영국 빅토리아 산업 혁명 시대의 증기 기관 동력을 이용한 기계나 그 시대의 복식과 도구들이, 미래 또는 알 수 없는 연대의 환경으로 등장하는 양식이다. 증기 기관 시대의 메카니즘과 생활 스타일이 (전기, 전자, 디지털 시대로 넘어오지 않고) 현재나 미래에까지 고도로 발달한 상황을 가정한 양식이다. 주로 판타지 세계를 그린 영화, 애니메이션, 게임에서 많이 차용하고 있으며 최근에는 아트, 패션, 디자인, 음악 분야에서도 응용하고 있다. [관련 참고 용어] Cyberpunk 사이버펑크 - 1980년대에 만들어진..

지난주 애플에서 iOS 개발을 맡고 있던 스캇 포스톨 수석 부사장이 경질되었다는 발표가 있었습니다. 포스톨이 맡고 있던 업무는 iOS 를 넘어 다양했는데, 애플은 후임자를 임명하는 대신 그 역할을 여러 사람에게 나눠 줬습니다. 가장 관심이 가는 부분은 HI(human interface) 부문을 조나단 아이브에게 맡긴 것입니다. 조나단 아이브는 이제 하드웨어 디자인 뿐 아니라 소프트웨어 UI 까지 총괄하게 되어 이후 애플 제품은 보다 통합적이고 일관된 UX가 만들어지는데 도움이 될 것으로 기대됩니다. 애플 스큐어모피즘에 관한 기사에서 이 둘의 취향 차이를 읽어보셨다면 이후 애플 UI의 변화도 어느정도 짐작 할 수 있을 것 같습니다. NeXT 시절 부터 스티브잡스와 함께 했던 스캇 포스톨은 추상화되고 미니멀..

새로운 디바이스가 출시되거나 OS가 버전업되면 GUI가 어떻게 바뀌었는지 살펴 보아야 한다. 눈에 보이는 변화 말고도 스크린이펙트에서부터 리스트 높이의 변화 등을 꼼꼼하게 보려고 애쓴다. '나도 한 번 템플릿을 만들어 봐?' 라고 머리 속에서만 열정을 불태울 뿐, 결국 PSD템플릿을 무료로 다운받을 수 있도록 사이트에 올려 놓은 대인배들을 찾게 된다. 매번 필요할 때마다 찾는 수고를 덜고자 윤서현 주임과 함께 템플렛 PSD Freebie들을 모아 보았다. 사용할 때 출처를 밝혀야 하거나, PSD파일에 레이어들이 합쳐져 있을 수도 있으니 참고하길 바란다. 리스트를 지속적으로 추가해가며 업데이트 할 계획이다. :Device iPhone5 Device PSD Format http://www.psdgraphic..

pxd 웹사이트를 개편했습니다. 사실 UX 에이전시가 자신의 웹사이트를 디자인하는 것은 쉽지 않은 일입니다. 만족스러운 UX 회사 홈페이지를 찾기도 힘들지만, 스스로도 만족하는 경우가 거의 없기 때문이죠. 어쩌면 불가능해 보이기도 하고요. 어쨌든, 아직 완성되지는 않았지만 창립 기념일을 맞아 공개합니다. www.pxd.co.kr 많은 고객사와 일을 하다보니 내부적인 일에 조금 소홀해져서 많이 늦어졌습니다. 그동안의 우여곡절 스토리는 따로 블로깅으로 남기기로 하고요 웹사이트 개편 내용을 잠시 소개드리기로 하겠습니다. 그동안의 피엑스디 홈페이지는 플래시 기반의 웹사이트였는데, 이를 새로운 web 트렌드인 RWD(Responsive Web Design, 반응형 웹디자인)를 적용하여 개편하였습니다. 기존의 플래..

본 내용은 위키피디아의 내용 일부를 토대로 작성되었습니다. 1. 정의 Parallax Scrolling : 모니터상에서 화면이 (상하좌우)스크롤될 때, 배경 이미지들과 오브젝트 이미지들간 시차가 발생하여 스크롤되도록 하는 기법. Parallax : 시차, 관찰 위치에 의한 대상물의 변위 [관련 참고 용어] Belt Scrolling 화면상의 특정 오브젝트를 조작하여 그 오브젝트 움직임의 양과 방향에 따라 화면이 스크롤되도록 하는 기법. 게이머의 컨트롤에 의해 주인공 캐릭터(오브젝트)가 상하좌우 돌아다니면 그 방향의 새로운 배경과 오브젝트들이 스크롤되어 나타나 주어진 임무를 수행하는 아케이드게임에서 많이 사용하는 방식이다. 플래쉬 사이트에서 사용자가 조작하는 마우스 포인터의 움직임에 따라 화면이 스크롤되어..

메타포는 잘 사용하면 사람들이 쉽게 인터페이스를 익힐 수 있지만, 잘못 (혹은 과도하게) 사용하면 사용성도 떨어뜨리면서 학습성마저 해칠 수 있다. (자세한 장단점 비교는 스큐어모피즘 참고) 90년대에는 유명 회사들도 이런 황당 시도를 많이 했는데, 덕분에 많은 UI 디자이너들이 배웠다. 기억나는 3대 황당 메타포 실패 사례 소개. 1. IBM Real Thing Series 1997 1997년부터 1998년까지 IBM에서는 일련의 Real 시리즈를 내놓았는데 Real Phone, Real CD 등이 있었다. Real Phone:http://hallofshame.gp.co.at/phone.htm IBM측의 소개를 보자. welcome to the future; one without distracting w..

10월 26일 새벽 Windows OS의 새 버전인 Windows 8이 전 세계에 동시 출시되었습니다. 그 동안 Preview버전을 통해서 미리 맛을 볼 수 있었는데요, 사용하면서 느낀 점들을 공유하고, UI부분이 얼마나 달라졌는지 살펴보고자 합니다. 글을 들어가기 전에... - 이 글의 모든 내용은 Preview 버전을 바탕으로 작성되었으므로, 정식배포버전과는 차이가 있을 수 있습니다. - 글에서 Modern UI App이라고 명칭한 것은 공식적으로는 Windows Store App이라고 부릅니다. 그렇지만 글의 내용에 의미가 더 맞는 것 같아서 이 글에서는 Modern UI App이라고 표현했습니다. 1. Modern UI 기존 Windows 시리즈와 비교해서 가장 크게 바뀐 부분이죠. 이전에는 Me..

스큐어모피즘에 대한 이야기는 이미 pxd블로그(http://story.pxd.co.kr/577)에서 다룬 바 있다. 본 내용은 위키피디아(http://en.wikipedia.org/wiki/Skeuomorph)의 내용을 기반으로 인터넷에 흩어진 기사들을 참고하여 필자의 의견을 덧붙인 글이다. 1. 용어 정의 : Skeuomorphism(스큐어모피즘) 또는 Skeuomorph(스큐어모프) 그리스어로 Skeuos는 Vessel(용기) or Tool(도구), morphe는 Shape(형태)을 의미한다. '어떤 도구의 형태,형식'이라는 뜻으로 '스큐어모피즘'을 의역해 보면 '원래 도구의 형태를 그대로 따라가는 양식' 정도의 풀이가 가능하겠다. 쓰임새 또는 재료에 따라 자연스럽게 발전한 도구의 형태와 요소들이, ..