'Validator'에 해당되는 글 2건
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
2008.07.02 18:11
회원가입 같은 페이지를 만들다보면 입력받을 값들이 상당히 많습니다.
이러한 값들이 실제 유효한 값인지 아닌지 판별하기가 좀 짜증나는 면이 있죠. 예전에 PHP로 회원가입 폼을 만들다보면 유효성 체크를 하기 위해서 JavaScript 로 각 필드의 값들을 체크하곤 했었습니다. (JavaScript 의 도움 없이 하려면 이 값들을 서버로 넘겨서(회원가입처리하는 php페이지) 서버에서 검증을 한 뒤에 하나라도 문제가 있으면 다시 그 화면을 표시해야되는 상당히 짜증나는 문제가 발생합니다. 그래서 클라이언트에서 해당 값들의 유효성을 체크하기 위해 JavaScript 를 이용했죠.)

물론 Flex에서도 비슷하게 해당 값(TextInput의 text 값)을 <mx:Script/> 안에서 체크하면 됩니다만, 코드를 매번 만들어야(복사해야)되니 짜증도 나고요.. ㅎ 상당히 귀찮은 면이 있었습니다. 그러나 다행이도 Flex 에서는 Validator 라는 것을 지원합니다.

유저가 유저 인터페이스에 입력하는 데이터는, 어플리케이션에 있어 적절한 내용의 경우도 있으나, 그렇지 않은 것도 있습니다. Flex 에서는, 오브젝트의 필드값이 특정의 조건에 적합하는 것을 감지하기 위해서 validator를 사용합니다. 예를 들어, 유저가 유효한 전화번호를 입력한 것을 확인하거나 string이 설정된 최소치 이상인 것이나, 우편 번호 필드에 올바른 자리수의 숫자가 포함되어 있는 것을 확인하거나 하기 위해서, validator 를 사용할 수 있습니다.

출처 : flexdocs.kr


이 Validator 는 아래와 같이 하위 Validator가 존재합니다. :
 
총 10개의 하위 Validator 가 존재하는데, Flex를 한국에서 만들지는 않아서 주민등록번호 Validator 는 존재하지 않습니다. ;) 없으면 어떻게 할까요? 그냥 체크안할 수도 없고 말이죠. 뭐 별수 있습니까? 그래서 만들었습니다!. 요즘은 회원가입시에 주민등록번호를 받지 않는 곳이 늘고 있습니다만, custom Validator를 어떻게 만들어야되는지 알아보기 위해, 흔히 만들어 보셨을 주민등록번호 Validator를 만들어 보았습니다. 주민등록번호의 유효성 체크 부분은 Flex Component 카페마요네즈라는 분이 올려주신 주민등록번호 체크 function이라는 글의 코드를 가져다가 썼습니다. (주민등록번호가 영어로는 RRN 이라더군요. RRNValidatort 라고 하면 어려울 것 같아 JuminBunhoValidator 이라고 이름지었습니다. (웃음) )

 

위의 주민등록번호 Validator를 이용하여 예제를 만들어보았습니다. 예제코드는  Flex  Reference에 Validator의 예제를 빌려왔습니다. ;)


한번 자신의 주민등록번호를 넣고 테스트해보세요. (저장되지 않으니 안심하시고... )


신고
Creative Commons License
Creative Commons License
Favicon of http://hangunsworld.com BlogIcon Han Sanghun | 2008.07.03 09:10 신고 | PERMALINK | EDIT/DEL | REPLY
웹개발자라면 누구나 한번쯤 만들어 봤을 주민번호 유효성 검사 툴이군요 ^^
전 주민번호 요구하는 사이트는 일단 가입을 보류하는데... 우리나라도 외국처럼 주민번호나 개인 정보를 입력하지 않고서도 자유롭게 인터넷을 사용할 수 있는 환경이 빨리 조성되었으면 좋겟어요.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.03 09:43 신고 | PERMALINK | EDIT/DEL
간단하게 e-mail 과 비밀번호 정도로 가입해도 좋을텐데요 ;)
아니면 open ID가 활성화 된다던지 ㅎㅎ
점점 편한쪽으로 바뀌어가길 기대하고 있습니다.
방문 감사합니다.
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.07.03 13:50 신고 | PERMALINK | EDIT/DEL | REPLY
잘봤어요~~ ㅎㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.03 14:12 신고 | PERMALINK | EDIT/DEL
방문 감사합니다. ;)
Favicon of http://lostsin.tistory.com BlogIcon 시난 | 2008.07.03 18:18 신고 | PERMALINK | EDIT/DEL | REPLY
잘 봤습니다. ^^
[0-9]{6}-(1|2|3|4)[0-9]{6}
이거 한 번 써보세요.. !!!
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.03 18:28 신고 | PERMALINK | EDIT/DEL
아하~ 형식을 체크하는군요! ;)
생일부분을 체크하려면 /[0-9]{2}[0-1][0-9][0-3][0-9]-(1|2|3|4)[0-9]{6}/
요렇게 하면 될까요? ㅎㅎ
Favicon of http://hangunsworld.com BlogIcon Han Sanghun | 2008.07.07 00:20 신고 | PERMALINK | EDIT/DEL
역시 정규식을 잘 쓰면 코딩이 상당히 간결해 지는군요. 정규식도 공부해야 하는건가... 쩝
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.07 09:42 신고 | PERMALINK | EDIT/DEL
정규식이 상당히 파워풀~ 하더군요. ㅎㅎ
어디 좋은 책 없나 살펴봐야겠습니다. ㅎ
Favicon of http://jmoonyoung.tistory.com BlogIcon 무녕이 | 2008.09.04 18:11 신고 | PERMALINK | EDIT/DEL | REPLY
잘봤습니다. 상당히 도움이 될 것 같습니다. 정규식 공부하기 좋은 책 나중에 알게되면 추천해주세요 ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.09.04 18:44 신고 | PERMALINK | EDIT/DEL
정규식은 책이 안보이네요 ^^;
브라이언 | 2008.09.26 12:27 신고 | PERMALINK | EDIT/DEL | REPLY
정규식은 AS3 한글 라이브독만 보셔도 충분해요..
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.09.26 13:21 신고 | PERMALINK | EDIT/DEL
그런가요~? ㅎ
전 책이 더 좋아서 ㅎㅎ
Favicon of http://chanik.com BlogIcon chaniks | 2008.09.29 14:48 신고 | PERMALINK | EDIT/DEL | REPLY
O'reilly 에 Mastering Regular Expression이란 책이 있습니다.
한글판도 있는지는 잘..

근데, 정규표현식도 너무 복잡해지면, 오히려 가독성이 떨어지는..
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.09.29 19:19 신고 | PERMALINK | EDIT/DEL
오홋.. 찾아봐야겠군요!
연월태생 | 2008.10.09 16:53 신고 | PERMALINK | EDIT/DEL | REPLY
구경하고 갑니다.ㅎㅎ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.10.13 09:59 신고 | PERMALINK | EDIT/DEL
방문 감사합니다!
덧글남겨주시는 걸 보니 센스 굿! ㅎㅎ
수크레 | 2010.02.04 20:47 신고 | PERMALINK | EDIT/DEL | REPLY
저는 저나름데로 되게 간단하게 구현했는데 정말 간결하고 멋지시네요
잘보고갑니다.~
채영사랑 | 2010.05.18 10:51 신고 | PERMALINK | EDIT/DEL | REPLY
와우....감사합니다..^^;
근디..궁금한게.....메세지가 한글로 나오게 할려면..어떻게 해야하나요
?
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 next