'UI'에 해당되는 글 1건
2009.04.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. 왠지 쓸 때 없는 글을 쓴듯한.. ^^;;




신고
Creative Commons License
Creative Commons License
Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 | 2009.04.17 09:26 신고 | PERMALINK | EDIT/DEL | REPLY
제목만 보고 포카 요케란 단어를 어디선가 들어본것 같은데..라고 생각했는데
책에 있는 내용이군요. 마침 그부분까지 보고 있습니다. ^^
그리고 위에 올려주신 샘플을 끄적거리다가 알게 된 새로운 사실..ㅠㅠ
티스토리에서는 키보드로 네비게이션이 가능한 코드가 있더군요.
Q, A, S, Z, X, C가 각각 다른 액션을 담당하고 있는데
이게 html 폼에 입력이 되는 경우에는 이벤트를 처리하지 않는데
swf폼에 입력하는 항목은 이벤트가 처리가 되네요. ㄷㄷ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.17 10:18 신고 | PERMALINK | EDIT/DEL
티스토리에 swf 파일 올리면 wmode 가 transparent 로 들어가서 문제가 되었던 듯 합니다.
파폭에서 한글입력이 안되어서 window 로 바꿨더니 swf 안에서 Q, A 같은 네비게이션 작동 안하네요 ㅎ
Favicon of http://okgosu.tistory.com BlogIcon okgosu | 2009.04.17 11:23 신고 | PERMALINK | EDIT/DEL | REPLY
인터렉션 디자인도 아직 못읽었는데...빨랑 봐야겠네요...^^

with okgosu (-..-)a
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.18 22:02 신고 | PERMALINK | EDIT/DEL
인터렉션 디자인은 회사 도서로 신청했는데 5월이나 되야 올듯 하네요 ㅎㅎ
위키북스에서 나온 UX 디자인 커뮤니케이션도 같이 샀는데 이제 읽어야될듯 ㅎ
Favicon of http://randorno.tistory.com BlogIcon 란도르노 | 2009.04.17 15:24 신고 | PERMALINK | EDIT/DEL | REPLY
프로젝트 중 맞닥뜨린 버그가 아직 해결이 안됐네요.
restrict를 이용해서 영문만 타이핑 가능하도록 제한을 둔 상태에서 영문을 작성한 후
한/영 변환키를 누르고 한글을 입력하면 백스페이스를 누른 것 같이
입력된 텍스트가 지워지는 버그가 있습니다.
결국 alwaysShowSelection으로 우회하기 신공를 시전해서 넘겼었지요.. ㅠ_ㅠ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.18 22:03 신고 | PERMALINK | EDIT/DEL
저도 같은 버그를 겪어봤는데, 문제시 되지 않아서 그냥 넘어갔던 기억이 ^^;
버그 보고를 해야겠네요 ㅎㅎ
Favicon of http://hhjae84.tistory.com BlogIcon 모지씨 | 2009.04.20 06:10 신고 | PERMALINK | EDIT/DEL | REPLY
두번째 줄에 구석수석이란 오타를 보고...
잠시 구석이가 수석인가...멍때렸다는 -,.-
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.21 16:00 신고 | PERMALINK | EDIT/DEL
오타났네 ㅋ =ㅁ= ㅋㅋ
수정했음. 감사!!
Favicon of http://jidolstar.com/blog BlogIcon 지돌스타 | 2009.04.21 15:04 신고 | PERMALINK | EDIT/DEL | REPLY
아~ 글 멋쪄라
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.21 16:00 신고 | PERMALINK | EDIT/DEL
형님이 더 멋지십니다. ㅎ
박스농사 | 2009.04.30 10:38 신고 | PERMALINK | EDIT/DEL | REPLY
아~ 글 멋짐
Favicon of http://cafe.naver.com/codestudy BlogIcon 이정칠 | 2009.04.30 12:17 신고 | PERMALINK | EDIT/DEL | REPLY
UX에 대해 무척 관심이 많은 1인 ^^
이미 예상되는 유저의 실수을 사전에 미리 차단해주는 배려가
요즘 개발자들이 고려해야할 필수 사항이죠 ^^

언제 시간되면 읽어봐야겠습니다.
감사합니다.
무명소녀 | 2009.07.02 10:06 신고 | PERMALINK | EDIT/DEL | REPLY
포카요케는 예전에 통계학강의 들을 때 품질관리 과목 들을때 나왔던 거였는디... (올해는 결혼땜시 1년 휴학 --ㅋ)
오랜만에 다시 보네. ㅎㅎ 나도 이책 한번 봐야겠다. 전산과 이수할때 4학년 과목에 있었는데. HCI 과목 넘 재밌음.
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 next