UI 가벼운 이야기 란에 글을 쓰면서, 분에 넘치게 너무 많은 생각들을 혼자 했었다 봅니다. 정말 가벼운 생각을 적어봅니다. 지난 사내 스터디 시간에 UX는 무엇이고 UI는 무엇이냐 UI랩으로 명명되어 있는 우리 팀이 하고 있는것은 무엇이냐. 라는 질문이 화두가 되어 이야기가 오갔습니다. 어떤 분은 사용자경험 디자인:UX 가 인터페이스 디자인:UI를 포함하는 것이다 하셨고 또 어떤분은 경제활동을 위한 산업의 발전 단계에서 나온 새로운 개념으로, 1차, 2차, 3차산업을 거치면서 기존의 자원이나 서비스에 해당하는 것으로 가치를 창출할 수 있는, 그리고 제공할 수 있는 "사용자 경험" 이라고 말씀하셨지요. (한마디로 돈으로 만들수 있는 것이요) 이런 이야기에 이어, UX:사용자 경험 디자인 이라는 개념을 사..

글/ pxd UI.lab 편집/ 김금룡 자판의 수 VS 키캡의 크기 기본적으로 자판 배열에서 고려해야 할 것은 학습성과 효율성 두 가지입니다. 천지인 자판은 효율성은 떨어지지만 학습성이 우수해서 인정을 받고 있습니다. 특히, 버추얼 키패드의 경우 물리적으로 고려할 부분은 자판의 수와 키캡의 크기간의 trade off 입니다. 작은 모바일 기기에서 qwerty(28-30개) 자판을 때려넣으면 입력횟수는 줄어들지만 키자체가 작아(fitt's law) 오타도 늘고 입력이 어려워집니다. 기본적인 3x4(12개)자판은 오조작은 적지만 키입력 회수가 불필요하게 많습니다. 답은 그 중간의 적당한 개수의 키를 사용하는 것입니다. 자소의 빈도 키배열을 만들때 고려할 부분은 자소의 빈도입니다. 자판 키개수보다 입력해야할 ..

1. 팝업 다이얼로그란? 팝업 다이얼로그는 팝업의 형태로 알림, 혹은 확인, 취소 등을 수행하는 장치입니다. PC 환경에서는 팝업 메뉴가 마우스의 오른쪽을 클릭하면 상황에 따라 나오는 컨텍스트 메뉴를 사용되는 용도, 혹은 선택의 목적으로 사용되어 왔습니다. 모바일 환경에서는 주로 확인의 목적, 혹은 선택의 목적으로 사용되고 있습니다. Designing Interface 책에서는 모달 패널과 팝업 메뉴를 다음과 같이 설명하고 있습니다. 모달 패널 (modal panel) 사용자가 현재 상황에 대한 문제를 해결할 때까지 오직 한페이지만 보여준다. 문제 해결과 관련되지 않은 다른 네비게이션은 할 수 없다. 팝업 메뉴 (pop-up menus) 마우스의 오른쪽을 클릭하거나, 패널이나 아이템에서 이와 유사한 행동..

Apple Inc. (Apple Computer) 애플 컴퓨터 이름의 유래에는 여러 가지 이야기가 있는데, 대체로 종합하면, 스티브잡스가 사과 농장에서 일했는데 그래서 사과를 좋아하게 되었거나, 아니면 비틀즈를 좋아했는데 그 음반 회사 이름인 애플 레코드에서 영감을 얻었다고 한다. 회사 이름을 지어야만하는 정해진 시일까지 더 나은 이름을 생각하지 못 하면 그 이름으로 하기로 했고 결국 애플 컴퓨터라고 이름짓게 되었다. 처음 로고 아이디어는 뉴튼과 사과나무였는데 너무 복잡해서 그 다음은 그냥 사과로 했다가 오렌지랑 너무 비슷해 보여서 결국은 한 입 베어 물은 것으로 하기로 했다. (HubPages, MacRumors, Wikipedia) 또 다른 이야기로는, 창립자인 스티브잡스가 가장 좋아하는 과일이 사과..

아이폰, 아이팟 터치의 음악 UI를 아이팟 클레식 버전으로 바꿔주는 어플리 케이션을 보게되었습니다. 웹 서핑을 하다가 처음 이 어플리케이션을 보았을 때는, 누군가 또 장난스런 어플리케이션을 하나 만들었구나 라는 생각 이였지만, 사용후기를 읽는 동안 좀 다른 생각을 해보게 되었습니다. 우선 후기를 읽은 블로거는 이 어플리케이션의 사용성에 대한 대단한 감동을 받은 상태였고, 단순히 '아이팟 터치를 클래식 UI로 사용해보는 재미' 만을 느낀것은 아니더군요. 거의 모든 세대의 아이팟을 사용한 사람이였고, 음악에 관해서 만큼은 스크린 터치보다 휠 터치 방식에 대한 좋은 기억을 가진 사람이였습니다. 음악이나 동영상에서 스크린 터치 방식이 가지는 불편한 것들에 대해 예기하고 있었고, (예를 들면 탐색 바를 움직이는 ..

안드로이드를 내놓는 제조업체들의 고민은 '소비자들이 많은 안드로이드 폰 중에서 자사의 폰을 사야 하는 이유'를 만드는 것입니다. 목표는 '차별화'인데 어떻게 차별화 하느냐가 문제인거죠. 1.고유 identity를 만드는 방법 HTC Sense UI/Espresso UI처럼 대기화면을 포함한 주요 어플리케이션 실행 모델 등에 자사의 identity를 부여하여 가치를 만들어내기. 삼성 터치위즈UI, 소니에릭슨의 Mediascape & Timescape UI 등이 그것이죠. 엘지의 S-class UI는 반응이 신통찮아 조만간 뭔가를 내놓을거라고 기대중이네요. 2.서비스 차별화 안드로이드라는 것 자체가 구글의 서비스전략(클라우드 컴퓨팅) 하에 나온 것이기 때문에 쉬워보이지 않습니다. 앱스토어는 성공모델로 자리잡..

아이폰의 사파리 브라우저는 모바일 스크린에서 제대로 웹을 사용할 수 있는 최초의 브라우저라는데 큰 의미가 있습니다. 폰의 작은 화면에서 웹페이지를 보려면 화면의 확대 축소가 꼭 필요하게 되는데, 아이폰의 사파리는 축소한 경우에도 이미지와 폰트를 깔끔하고 읽기좋게 렌더링하여 보여줍니다. 직관적인 핀치 제스쳐나 더블탭을 이용한 자동 폭맞춤은 확대축소 조작의 번거로움을 없애주고요. 폭맞춤 상태에서 스크롤을 하면 옆으로 삐져나가지 않고 상하로만 움직이도록 보정해주는 특허도 작지만 실제 경험적으로는 상당히 편리하고요 carousel 방식의 사파리의 페이지 관리 사용 효율보다는 간결하고 학습이 쉽도록 하는 애플의 UI 철학에 공감은 하면서도 폰에서 웹브라우징을 많이하다보니 사파리의 페이지(탭 또는 창) 관리 방식은..

내가 거쳐갔던 브라우저들. 의도했든 아니든 당시의 인터넷 환경을 반영하고 있는것 같습니다. 섬들을 항해하다 처음 개인용 컴퓨터(맥)에서 사용한 브라우저는 네스케잎의 네비게이터였습니다. 모뎀으로 ppp인지 인터넷연결을 하고, 상대적으로 무거운 프로그램이어서 스플래쉬 화면을 보면서 자 이제 시작해 볼까 하는 기분으로 로딩을 기다렸습니다. 새로운 홈페이지의 url이 잡지에 실리던 시절이었으니까 인터넷은 섬같았습니다. 페이지 로딩시의 에니메이션도 망망대해에서 밤하늘의 별을 가이드 삼아 항해하는 모습이었고 가끔 별똥별이 떨어졌지요. 별들을 탐험하다 pc를 사용하면서 부터는 별 대안 없이 윈도우에 내장된 internet explorer를 사용했습니다. OS에 내장된 형태라 실행이 빨랐죠. 로고에 위성 띠가 보이듯 ..

여기저기 리뷰도 많고, 말도 많은 프로그램이라 트라이얼버전을 깔고 사용해 봤습니다. 벌써 저희 블로그에도 2건이나 관련 글이 올라와 있네요. Workflow? / 프로토타잎? 아무것도 모른체 사용해본 결과 제가 바랬던, '편하게 웤플로우 만들기' 에는 유용하지 않은것 같습니다. 프로토 타잎을 만들어 클라이언트나 유저들에게 테스트 하고 피드백을 받는 용도로는 쉽고 유용할 듯합니다. (범용화된 파일포멧으로 Export 할 수 없기 때문에, 프로그램이 일반화 되던지, 랩탑을 들고다녀야 하지만요.) 스크립트를 사용하지 않고도 꽤나 완성도 있는 (인터랙션,모션) 프로토타잎을 만들 수 있습니다. 프로토타입에 쓸만하게 트라이얼 버전에 포함되어있는 예제 파일 입니다. 3D 인터랙티브 모션이 적용되어있습니다. (왼쪽) ..

함 가보는거야!! 그까이꺼! 팀으로 작업을 하다보면,손발이 맞을 때까지 걸리는 시간이, 때로는 실제 작업시간보다 더 걸리는 경우도 있지요^^* 특히 일관된 컨셉의 Workflow를 여러명이 그리는 것은, 결코 쉬운일이 아니었습니다. 그래도 다른 분들의 시행착오를 좀 줄이시라고 모바일 Application을 세명이서 그렸던 협업 사례를 기록으로 남겨 봅니다. 다음 프로세스는 Goodwill / 금룡 / UXdragon 요 세명이서 여러번의 시행착오 끝에 얻어낸 그나마 썩 꽤 효율적이라고 여겨지는 Workflow 협업 방식입니다. 다른 사람들은 어떻게 하나 궁금하네..ㅎㅎ Day 1. index부터 만들어라! 하나의 모바일 App.을 그리는 데 초반부터 효율적으로 착착 나눠서 일하기를 기대하는 것은 어렵지요..

리서치를 할때 어떤 포커스를 가지고 리서치를 하시나요? 프로젝트마다 다르기는 하지만, 저는 과거와 현재를 비교하는 것을 좋아합니다. 과거에서 현재까지의 변화를 보면 미래를 어느정도 예측할 수 있기 때문이죠. 하지만, 막상 과거정보를 찾으려고 하면 최신 정보를 찾는 것 보다 힘든 경우가 더 많습니다. 이럴 때 사용하면 유용한 사이트 하나를 소개하려고 합니다. http://www.oldapps.com/ 올드앱스닷컴은 PC 어플리케이션의 오래된 버젼을 모아서 제공해주는 사이트입니다. 실제 파일을 다운로드 할 수 있고, 스크린 샷도 함께 제공합니다.(맥용 어플리케이션도 제공합니다.) 올드앱스닷컴에서 제공하는 iTunes 모습입니다. iTunes의 경우 버젼별로 꽤 방대한 양을 제공해 주고 있고, 릴리즈 날짜를 ..

Mental Models by 인디 영 pxd에서 주로 수행하고 있는 사용자 리서치에 기반한 디자인 과정에 매우 seamless(!)하게 적용될 수 있는, 이미 우리가 하고 있다고 할 수도 있지만 그보다는 좀 더 디테일하게 과정이 분절된 방법이라고 할 수 있습니다. 아직 제가 책을 읽는 과정이어서 차차로 연재해야 할 것 같습니다. 여기서 말하는 멘탈 모델이란 기존에 우리가 알고 있던 정의(사용자가 이해하고 있는 '시스템의 구조적인 작동방식'에 대한 추상화된 인지적 모델 - 현재 제가 이해하고 있는 정의입니다 ^^;)과는 좀 차이가 있습니다. 한마디로 특정 주제(제품? 서비스?)에 대한 사용자 행동의 친화도(affinity diagram-연관성있는 것끼리 그룹핑한 구조)를 멘탈 모델이라 정의하고 있습니다...