'디자인'에 해당되는 글 1건
2009. 4. 17. 01:58
[31가지 사용자 경험 시나리오로 배우는] 실전 UX 디자인

실전 UX 디자인

요즘 읽고 있는 책 중 재미있게 보고 있는 책인 [31가지 사용자 경험 시나리오로 배우는] 실전 UX 디자인 입니다. 구석구석 웹페이지의 디자인에서 '실전'적인 이야기들로 책을 꽉 채우고 있어서 재미있게 읽고 있습니다. 책 내용도 훌륭하고, 한국 실정에 맞게 예제들도 넣어 이해가 쉽게 해주는 번역또한 센스 굿!! +_+

대학교 재학 중 'HCI Lab'에 있으면서 인연이 되어 '사용성', 또는 '시나리오', '페르소나' 같은 단어들과 친숙해질 수 있었죠. 담당교수님께서 스웨덴에서 HCI 를 전공하신 분이라, 강의하시는 HCI 수업도 참 재미있게 듣게 되었고 랩원들과 함께 HCI 학회에 가서 다른 사람들과 이야기도 많이 해보고, 참 즐겁게 HCI 라는 학문과 만났던 것 같습니다.  덕분에, UX(User eXperience) 라는 것에도 관심이 많아진 것 같네요.

아무튼 책의 18장 '현명한 글쓰기창' 에 보면 사용자의 실수에 대한 이야기가 나옵니다. 사용자의 실수로 인한 오류메세지는 그 사용자를 자괴감에 빠지게 만들죠. 사용자를 좌절하지 않게 하기 위해서는 사용자의 실수를 미리 막아주라고 충고 하고 있습니다.  이러한 이야기를 하면서 포카요케 라는 단어를 언급하고 있습니다. (물론 9장 '자동완성의 위력과 함정'에서 먼저 언급하고 있습니다)

포카 요케라는 단어가 무엇일까요? 생소한 단어였습니다만, 책에서 포카 요케ポカヨケ, Poka-yoke는 원래 일본어로 '실수를 피하는'이란 뜻이다. 라고 설명을 하고 있어서 이해가 좀 더 쉬웠습니다. 아래는 위키피디아에서 찾은 포카 요케의 설명입니다.

포카 요케(ポカヨケ, Poka-yoke)는 원래 일본어로 '실수를 피하는'이란 뜻이다. 이 용어는 토요타시게오 신고에 의해 품질 관리의 측면에서 실수를 방지하도록 행동을 제한하거나 정확한 동작을 수행하게 끔하도록 강제하는 여러 가지 제한점을 만들어 실패를 방지하는 방법을 말하는 용어가 되었다.

예를 들어 자동차에서 기어를 주차 상태 위치인 “P”로 놓지 않으면 시동이 걸리지 않도록 만들어 운전자가 자동차를 안전하지않은 상태로 놔두고 나가는 것을 방지하도록 한다. 또한 컴퓨터에서는 USB 장치의 플러그를 꼽을 때 뒤집어진 상태로 꼽으려고하면 안돼도록 디자인 되어 있다. 인지 심리학인간과 컴퓨터 상호작용 분야에서도 이를 이용하여 여러 가지 실수를 방지하는 디자인 원리의 하나로 받아들여져서 이용하고 있다.

위키백과의 포카 요케에서 발췌


책에서 포카요케는 실수방지장치 오류탐색기 2종류가 있다고 이야기 하고 있습니다.

  • 실수방지장치 - 사용자가 실수하지 않도록 미리 오류를 막아주는 역할
  • 오류탐색기    -  사용자가 정보를 잘못 입력하는 즉시 바로 오류를 알려주는 역할

Flex 에서도 이러한 역할을 하는 것들이 존재합니다.

만약 회원가입 화면에서 사용자의 이름을 입력 받는다고 할 때에 사용자의 이름을 넣는 TextInput에 숫자가 입력될 필요는 없겠죠? 한글과 영어만 입력되도록, 또는 한국인만을 대상으로 한다면 한글만 입력받아야 하겠습니다. 이러한 것을 실수방지장치라고 부를 수 있겠네요.

상기 사항에 대해서는 입력받는 글자들에 대해 제한을 걸 수 있는 restrict 라는 속성이 있습니다.




또한 TextInput 컴포넌트를 상속해서 만든 PromptingTextInput 같은 유용한 컴포넌트 있습니다. 오픈소스 컴포넌트들을 모아놓은 FlexLib 에 있는 컴포넌트 중에 하나 입니다. 사용자가 입력하기 전에 프롬프트를 통해 무엇을 입력해야 되는지 입력할 수 있습니다. 개인적으로 매우 좋아하는 컴포넌트 입니다.





그리고 오류탐색기로는 Validator 가 있습니다. 사용자의 잘못된 입력을 메세지로 알려주는 방식입니다. JavaScript 에 익숙한 분들은 각 컴포넌트에 값이 비어있는지 확인하여 Alert을 출력하는 식으로 작성하는 경우도 많은데, 보다 직관적으로 유효성을 컴포넌트에 표시해주는 Validator가 상당히 더 좋은 방법임에 틀림 없습니다.이러한 Validator를 상속받아 새로운 Validator 를 작성하는 것은 제가 이전에 쓴 포스트인 [Flex] 주민등록번호 Validator 를 참고하시면 되겠습니다.

책의 15장 '불량 제로 실수방지장치'에 나오는 스프링노트의 회원가입페이지의 예제를 보면 아래와 같은 이미지가 있습니다.


사용하고자 하는 아이디를 입력 시 아이디로 쓰이기에 적합한지 알려주고 있습니다.  Flex에서는 Validator를 사용하면 비슷한 효과를 얻을 수 있습니다만, 사용자가 입력하는 도중에는 Validator가 작동하지 않습니다. 마우스를 오버해야지만 툴팁이 화면에 나타나게 되는데, 이를 제어할 방법은 없습니다.
이런 상황이 생기는 이유를 알기 위해 Validator 와 UIComponent 와의 동작방식에 대해 알아보도록 합시다.

Validator 에서 입력받은 데이터를 검증하여 ValidationResultEvent 를 발생시키게 되는데 이 때 Validator에 등록해 놓은 UIComponentvalidationResultHandler(event:ValidationResultEvent)로 리스너를 등록해놓아 결과를 전달해줍니다.
이 메소드가 받는 ValidationResultEvent에는 에러메세지가 들어있는데, 이를 UIComponent에서는 _errorString 이라는 변수에 담고 ToolTipManager의 mx_internal로 선언되어 있는 registerErrorString(target:DisplayObject, errorString:String) 메소드를 이용하여 에러메세지를 등록합니다. ToolTipManager에 에러메세지를 등록하게 되면 ToolTipManager에서 해당 컴포넌트에 MOUSE_OVER, MOUSE_OUT 이벤트 핸들러를 등록해놨다가,  해당 UIComponent에 마우스 오버시 에러메세지가 적힌 툴팁이 출력되게 됩니다.


이로인해 마우스를 해당 컴포넌트에 올려놓지 않으면 툴팁이 보이지 않는다는 문제가 생기게 됩니다. 해당 문제점은 어도비의 Bug and Issue Management System(이슈트래킹 시스템)이슈로 등록이 되어 있는 상태입니다. 꼭 해당 속성이 생겼으면 좋겠네요. (투표 많이 해주세요~)
해당 문제를 해결하기 위해 세계 각국의 Flex 개발자들이 내놓은 방안 중에는, CustomToolTipManagerImpl 를 작성하여 직접 속성을 추가한 분들도 계시고 간단하게 다음과 같이 해결한 분들도 계십니다.



하지만 저는 테스트 해보니 제가 원하는 동작은 되질 않네요 =ㅁ=;; 아마도 ToolTipManager 에서 해당 컴포넌트를 찾아 이전과 다른지 비교하는 구분에서 단순히 MOUSER_OVER 이벤트로는 정상적인 교체가 이루어 지지 않는 듯 합니다.

Validator 를 사용하지 않고, Flex 에서 유효성을 검사하는데 좋은 방법에 대해서는 Aral balkan의 블로그에 Better form validation in Flex 라는 포스트를 참고하시면 좋겠습니다. 글의 요지는 TextInput에 값이 비어있을때 경고메세지를 담은 ToolTip을 직접 화면에 생성해주는 식이네요. 참 좋은 아이디어 같습니다.

또 다른 Flex에서의 포카요케가 있다면 트랙백으로 남겨주시면 감사하겠습니다. ;)

ps. 왠지 쓸 때 없는 글을 쓴듯한.. ^^;;




prev"" #1 next