메뉴에서 2차적으로 나오는 서브 메뉴를 표시할 때, 대충 만들면 생각보다 큰 낭패를 당하게 됩니다. 저희 블로그에서도 이 문제를 여러 차례 지적했었는데요, 공군 가기 힘들어(Global Navigation Bar 디자인)에서, 메뉴 경로를 너무 좁게 만들었다가 망신 당한 공군 웹페이지를 보여 드리고 그 근본 원인을 알려드렸구요, 피츠를 알려주는 퀴즈 (A Quiz Designed to Give You Fitts)에서는 이 문제를 해결하기 위해, 맥과 윈도즈가 어떻게 다르게 접근하였는가를 설명했습니다. 지난 3월 6일 발표되어 많은 인기를 끌고 있는 Ben Kamens님의 아마존 메가 드롭다운 분석(BREAKING DOWN AMAZON'S MEGA DROPDOWN)은 메뉴 UI에서 꼭 알아야할 이 문제를 ..

pxd library에는 보석같은 책들이 곳곳에 숨어있다. 어느날 PM의 역할에 대해서 고민하던중 이 책을 library에서 접하게 되었다. 이 책의 주인공 '보 스캠베클러' 감독은 20년간 234승, 승률 85%라는 대 기록을 세운 미시간대학교 풋볼팀의 전설적인 감독이다. 이 책을 읽고 나서 느꼈던 교훈은 명료했다. 나에게는 초심으로 돌아가서, UX를 하게 된 열정에 대해서 다시금 생각하게 된 계기가 되었다. 또한 나 스스로에게 엄격한 사람이 될 수 있도록 노력해야겠다는 생각이 들었다. (물론 풋볼팀의 감독과 실무 중심의 PM의 상황에 동일하게 적용하기 어려운 부분도 있다.) 이 책을 읽게되면 각자 느끼는 바가 다를것이다. 좋은 리더가 되기 원한다면 꼭 읽어보기를 권한다. 또한 예전에 Kyoung ho..

지난 번 인터랙션을 이용한 홍보 영상에 이어, 오늘은 미디어아트 영상을 공유하려합니다. 여전히 프로젝션과 스크린 안팎에 묶여있는 작품들이 많지만.. 언젠가는 이 제한선을 깨부수는 작품이 나오길 바라며~ 가벼운 마음으로 한번 보실까요? 1. Pool Party from : Red Paper Heart music : Talamak - Toro Y Moi 출처 http://redpaperheart.com/work/poolparty Interactive Media art 2. Augmented Shadow_2010 form : 문준용 출처 http://joonmoon.net/Augmented-Shadow Interactive Media Canvas 3. IRIS_2012 Interactive Media Can..

지난 1월 30일, HCI korea 2013에서 pxd 동료들과 함께 아이데이션 워크샵을 진행했었는데요. 간단한 후기와 현장 사진들 그리고 장표를 공유합니다. 워크샵에 대한 목적과 구성은 아래와 같습니다. 최근 pxd에서는 실무에서 다수의 Ideation Workshop을 진행하였습니다. 이 중 결과가 좋았던 수평∙수직 사고기법을 활용한 Intensive Workshop 노하우를 공유하려고 합니다. 이 방법은 창의력 사고 기법의 권위자 에드워드 드 보노 박사의 수평적 사고 기법과 IDEO의 브레인스토밍 프로세스를 기반으로 하고 있으며, pxd만의 방식으로 응용 및 발전시켰습니다. 이 방법으로 단시간에 참가자들의 발상 범위를 넓히고 산출된 아이디어를 의미있는 수준으로 올릴 수 있습니다. 워크샵의 구성은 ..

'심리학 산책'은 UX 디자이너를 위해 심리학 책들을 총 10회에 걸쳐서 소개하는 연재입니다. 연재 의도와 전체 책 목록은 아래 글을 참고하세요. [연재 소개] UX 디자이너가 읽어야할 심리학 책 10가지 보이지 않는 고릴라 우리의 일상과 인생을 바꾸는 비밀의 실체 - 크리스토퍼 차브리스,대니얼 사이먼스 지음 / 김명철 옮김 The Invisible Gorilla And Other Ways Our Intuitions Deceive Us - by Christopher Chabris and Daniel Simons 이 책을 아직 읽지 않은 분들은 먼저 실험 하나를 직접 체험해 보세요. 바로 여기서 간단하게 참여할 수 있습니다. 이 실험은 주의력에 대한 실험입니다. 실험은 동영상을 보면서 진행됩니다. 동영상이..

지난 2월 14일에는 심리학 산책의 첫 번째 독서 토론회가 열렸습니다. 참가자는 블로그에 도서 연재를 해주시는 마음경험님 외 pxd 사내 직원들을 포함한 총 17명으로, 저의 예상인 5~7명을 훌쩍 넘는 열광적인(?) 반응이었습니다. 독서 토론회는 총 4개의 세션으로 나누어 - SESSION 1 : 도서 리뷰 - SESSION 2 : 느낌, 흥미로운 점 및 질문거리 공유 - SESSION 3 : 공통되거나 흥미로운 주제 2-3가지를 선정하여 질의 응답과 논의 - SESSION 4 : 정리 를 하는 방식으로 진행되었습니다. 본 포스팅에서는 토론회 현장 모습과 주요 내용을 소개하고자 합니다. 첫 독서 토론회의 책은 블로그에도 소개되었던 입니다. 한 달 전부터 pxd 인들에게 참여 신청을 받고, 주기적으로 책..

2012년의 기록의 담은 pxd의 ANNUAL STORY 가 완성되었습니다. 보통의 ANNUAL REPORT란 기업의 1년동안의 연차 보고서로 결산기가 끝난 다음 해당 1년간의 실적, 기말 시점에서의 재정상태등을 망라한 보고서 일반적으로 통용되는 애뉴얼 리포트의 뜻은 위와 같지만, pxd의 주주분들(?)에게 보고할 것도 아니고, 이미 pxd의 훌륭한 회사 소개서가 있기때문에 어떤 애뉴얼 리포트를 만들어야 하는지, 누구에게 무엇을 보여줄 것인가부터 고민을 시작했고, 결론적으로 pxd의 대표적인 홍보 수단이자 기록물인 블로그를 기반으로 하되, 블로그가 미처 담지 못하는 뒷이야기와 책이라는 매체가 갖는 물성을 살려 2012년 한해를 돌이켜 보는 ANNUAL STORY를 제작하였습니다. 2012 pxd ANNU..

지난 번에 기하학 도형을 이용한 모션그래픽에 이어, 이번에는 인터랙션을 이용한 홍보 영상을 모아 보았습니다. [인터랙션]_Promotion video / Video sketch 이번에는 UI 인터랙션에 관한 영상을 공유할까 합니다. 프로모션 비디오, 데모, 및 비디오 스케치 영상입니다. 머리가 복잡할 때 리프레쉬 겸 가볍게 즐기면서 보셨으면 하는 바램입니다.^^ video sketch 1. Spatially aware devices from : Ishac Bertran / http://www.ishback.com/ 출처 http://blog.ishback.com/?p=1025 promo video 2. Reader from : Marcus Eckert promo video for Zinio's updat..

1탄 기본적인 전통 UI 용어와 2탄 최근 웹에서 많이 사용되는 UI 용어에 이어, 이번에도 웹과 앱에서 많이 사용하는 UI 용어를 좀 더 알아보도록 하겠습니다. 관련 글 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 1. 라이트 박스(Light Box) 팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라..

pxd 사무실에는 회의실 복도를 따라 책장이 있습니다. 책의 이미지들에 영감을 받아 바로 모니터상에 스케치를 하는 경우가 많은 GUI디자이너들에게, 복도 책장은 물리적, 심리적으로 멀게 느껴졌습니다. 그래서 새로 구매한 책을 비롯해 몇가지 유용한 책들을 추려 GUX센터 자리에서 볼 수 있도록 'GUI디자이너들을 위한 이동식 책장'을 장만했습니다. 이미지출처 : http://www.ply.co.kr/product/shelves/04_c2.php - 초기 - 처음엔 단순히 그래픽 도서를 추려 책장에 꽂고 리스트를 만들어 붙여 놓았는데 예상했던 문제점들이 나타났습니다. ㄱ. 도서 이탈 ㄴ. 도서 분실 ㄷ. 대출자를 알 수 없는 대출 ㄹ. 도서 이용 후 정돈이 안 되는 점 ㅁ. 정돈을 하려 해도 이탈된 도서가 ..

안녕하세요? 피엑스디 블로그에 여러 번에 걸쳐서 영감을 주는 다양한 모션 그래픽, 인터랙션, 미디어 아트 및 기타 동영상을 1-2주에 한 번씩 소개하려고 합니다. 머리 복잡할 때, 아이디어 필요할 때, 가볍게 봐 주셨으면 하는 바램입니다. ^^ 첫번째 주제는 모션 그래픽입니다. 기하학 도형을 이용한 모션그래픽 '기하학 도형을 이용한 모션그래픽'으로 영상 블로깅을 시작해볼까 합니다. 도형은 시각적으로 단순하기 때문에 움직임을 보기가 가장 좋은 경우가 많습니다. 1. Tiny Story from : Sebas & Clim animation : sebasandclim.com music : aimar-molero.com 출처 http://www.sebasandclim.com/Tiny-Story 2. The Ca..

글을 시작하며... 이번 포스팅에서도 1탄-기본적인 전통 용어-에 이어 UI디테일 용어를 소개해보려고 합니다. 각 제조사의 가이드라인, 서적, 사전을 찾아보면 유사한 의미인데도 다르게 불리는 경우가 많습니다. 어떻게 불리느냐보다는 유사한 점과 다른 점을 비교 분석하며 자신만의 것으로 만드는 과정이 중요하다고 봅니다. 관련 글 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 1. 증분 탐색 (Incremental Search) Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고..