이바닥이 원래 그래
EBADAC - OOPARTS : Out Of Place Articles.
December 28, 2006 at 11:41 am
· Filed under WebDevelopment, WebPlan
StandardMag에 올라온 질문에 대한 답변을 정리해봅니다.
관습적인 인터페이스는 사용자에게 익숙함을 주긴 하지만, 관습에 매몰되어 매너리즘에 빠지게 되는 경우도 많지요.
회원가입페이지 제작시 가장 쉽게 보이는 매너리즘 인터페이스 두가지에 대해 이야기해보렵니다.
1. 3칸으로 나뉘어진 전화번호.
사실 핸드폰 번호 따로 집전화 번호 따로 입력받는 것도 무의미하긴 하지만.(’기분존’같은 서비스도 나온 마당에 말이지요.)
습관적으로 우리는 전화번호 입력 필드를 3칸으로 나누어 놓습니다.
이것은 결코 UX적으로 좋은 인터페이스라 할 수 없습니다.
우선 손이 많이 갑니다.
016 타이핑하고, tab키 누르고, 9447 타이핑하고, tab키 누르고, 8022 타이핑하고.
tab키를 이용할 줄 아는 사용자라면 이정도입니다만, 나이드신 분들은 필드간 이동을 하기 위해 다시 마우스를 잡고 해당 필드를 클릭해야 합니다.
이러다보니 이 불편함을 없애보자고 JavaScript를 써서 앞에 세자리, 입력하면 자동으로 다음 필드로 포커스를 옮겨보기도 하지만, 이러면 원래 tab키 이동이라는 표준 인터페이스에 익숙한 사용자에게는 오히려 잘못된 입력을 유도하게 됩니다.
게다가 이왕 JavaScript를 사용하는 김에 입력값 검사까지 해버립니다. 마지막 필드가 네자리 숫자가 아니면 틀렸다고 한다거나…
그러면 이제는 우리 회사 대표번호는 02-2424-825로 알려져 있는데, 굳이 02-242-4825로 입력해야만 합니다. 신경쓰지 않으면 타이핑 미스 생기지요.
그나마 무슨 이유로든간에 JavaScript 사용이 불가능하면 입력도 먹통이 되는 경우까지 생기기도 하지요.
애초에 그냥 한칸의 입력필드에 022424825로 입력하든, 02)2424-825로 입력하든, 02 2424 825 로 입력하든 사용자 맘대로 입력하게 해도 충분할 일입니다.
일단 그렇게 Form을 submit한 후, 간단한 정규식으로 전화번호를 추출하고, 그것이 전화번호 형식에 맞는지 안맞는지 판단하는 것은 어려운 일이 아니죠. 만약 전화번호가 틀린 포맷이라면 다시 이전 입력Form페이지로 돌리고 에러메시지(’전화번호가 틀렸습니다. 다시 입력해주세요.’)를 보이면 될 일입니다.
이전 페이지로 돌아가는 게 사용자에게 오히려 번거롭지 않냐구요?
전화번호 입력이 틀리는 경우는 거의 없습니다. 눈감고도 입력할 수 있는게 전화번호라구요. 오히려 세칸에 나누어 적고 JavaScript를 따라 널뛰는 조작보다는 훨씬 더 정확하게 입력할 수 있습니다.
물론 JavaScript가 안되는 환경에서도 문제없이 사용할 수 있구요.
2. 우편번호 팝업
도대체 왜 우편번호와 정확한 주소를 수집해가는지 모르겠습니다. 그거 가지고 인구센서스 통계내나요? 우리 사이트의 주 사용자는 서울에 살고 있어.. 같은?
그런 CRM 자료를 제대로 분석해서 사용하는 기획자나 운영자가 있는지는 모르겠습니다. 아마 오히려 접속 IP 위치를 통계내는 쪽이 좀 더 정확할텐데 말이지요.
우편번호나 주소를 수집하는 이유가 상품 배송이나 우편물 발송때문이라고도 하는데, 실제로 이런 서비스를 할 때에는 사용자에게 정확한 배송주소를 다시 물어보는 것이 정석입니다. 대부분의 업체에서도 그렇게 하고 있구요.
어쨌거나 그래서 정확한 우편번호나 주소가 필요하다 치더라도…
그래도 우편번호 팝업 입력은 아닙니다.
그럼 대안이 있을까요?
제가 전에 살던 집주소는…
“서울특별시 서대문구 대현동 56-38번지 5층”
입니다.
아무리 타이핑이 느린 분이더라도, 자기 집 주소를 한 줄에 입력하는 건 “버튼 눌러 팝업 뜨고 동이름 넣고 검색하고 후보들 나오면 목록에서 위아래로 오르내리며 찾아 선택하고 팝업이 닫긴 후 부모창의 다음 필드에서 번지이하 주소를 다시 입력하는 것”보다는 빠릅니다. 물론 훨씬 더 직관적이고 쉽기도 하지요.
주소가 정확한지는 어떻게 아냐구요? 우편번호는 어떻게 하냐구요?
저 위에 쓴 주소를 정규식 돌려서 도/시, 군/구, 읍/동 을 뽑아내는 것은 일도 아니지요. 그리고 그걸로 DB에서 매치되는 우편번호를 찾아내는 것도 어렵지 않지요. 굳이 AJAX같은 것을 쓰지 않더라도, 그냥 Form Submit한 후 서버사이드에서 매치시켜보고, 정확하지 않거나 매치되는 후보가 너무 많다면 다시 이전 페이지로 돌려 재입력 받게 하거나, 매치되는 후보들 중에서 선택하게 하면 됩니다.
JavaScript도 필요없고, 정상적인 사용자들에게 불편함도 없지요.
생각해보면 이런 관습적인 멍청한 인터페이스야 말로 UX의 가장 큰 적입니다. JavaScript나 AJAX가 없어서 사용성이 제한되는 게 아니라, 단지 상상력과 배려심이 없는 기획자 때문이지요. 아, 어쩌면 정규식을 다룰 줄 모르는 개발자 때문일 수도 있긴 하겠습니다.
Permalink
ifree1999 wrote @ December 28th, 2006 at 12:28 pm
좋은글 잘 읽고 갑니다
CDK에서 급하게 본다고 다 못읽었었는데
점심먹고 천천히 다 읽었는데 식사후 휴식시간이 전혀 아깝지가 않네요 
yy wrote @ December 28th, 2006 at 12:42 pm
동감입니다. 주소는 사이트들이 다 그러니 그냥저냥 익숙해지는데, 특히 전화번호나 주민번호는 자동 이동을 해놓은 곳과 안 해놓은 곳이 있기 때문에 계속 스트레스를 받습니다. 본능적으로 탭키를 눌렀다가 다시 고칠때도 짜증, 탭키를 안 누르고 잠시 보고 있었는데 커서가 움직이지 않아서 다시 탭키를 누를때도 짜증.
자동 이동은 정말…-_- 어떤 곳은 되어 있고 어떤 곳은 안 되어 있으니 입력할 때마다 짜증나죠. 그나마 스크립트 이상하게 처리한 곳은 잘못 입력한 상태에서 자동 포커스 이동해버리면 입력칸 클릭해서 백스페이스를 바로 누르는 타이밍 맞추기 신공(….)까지 발휘해야 하니 말이죠.
주소 입력은 확실히 한 번에 쫙 입력할 수 있도록 바뀌었으면 좋겠습니다.
전수근 wrote @ December 28th, 2006 at 2:17 pm
좋은 글과 충고 감사합니다^^
황장군 wrote @ December 28th, 2006 at 2:52 pm
정말 전화번호 칸칸이 나누어 있는거 입력하려면 진짜 귀찮아요..
그리고 우편번호는 개발자가 아니라서 꼭 팝업으로 해야만 하는줄 알았는데 꼭 그런거만은 아니네요…
정말 손쉽게 사용자가 이용할 수 있게 하는 방법이 있는데도 불구하고
단순히 늘상 하던 방식에서 벗어나질 못하는게 아닌가 싶군요..
디토 wrote @ December 28th, 2006 at 3:28 pm
주소도 검색어 추천처럼 나오면 편할 것 같아요.
처음 뵙겠습니다.(_._)
css design korea 글타래 보다 왔습니다.
저도 아무 생각없이 계속 그렇게 썼었는데, 뜨끔하네요..;;
좋은 글 잘 봤습니다.^^
ps. 참, ‘Trackback Address’ 버튼에 버그가^^;
트랙백 주소 마지막에 ‘/trackback/’가 빠진채로 클립보드에 복사되네요.
위 ps에 쓴 버그 이제 보니 아니군요…ㅡㅡㅋ
멍청하면 손발이 고생한다고 ㅎㅎ;;;
어쨌든 정상적으로 출력 안 되긴하네요.
(제가 블로그를 잘 안 쓰다보니 몰라서 그런것일수도;;;)
eouia wrote @ December 28th, 2006 at 6:02 pm
세디// 저건 버튼이 아니라 그냥 링크에요.
당당하게 wrote @ December 30th, 2006 at 1:56 pm
고객 데이터 처리를 많이 하는 개발자입니다!
저는 주로 고객들의 데이터를 가공해서 CRM솔루션에서 사용하는 작업을 하는데, 웹 사이트를 통해서 입력된 주소, 전화번호같은 데이터에 정말 다양한 입력 오류가 많답니다.
핸드폰번호를 분리해서 입력 받거나 우편번호를 검색해서 입력받는것은 저 같은 데이터 처리를 하는 개발자들이 좀 더 편하게 데이터를 관리하기 위해서 한 것이라고 생각합니다. (실제로 많은 도움이 되죠!)
사용자 입장에서는 상당히 불편하죠. (사실, 저도 불편!)
올려주신 고견은 저희 솔루션 개발에도 많은 참고를 하겠습니다.
감사합니다.
이승준 wrote @ December 30th, 2006 at 10:29 pm
CRM 솔루션을 개발하는 개발자입니다.
UI에 대해서 관습적으로 쓰고 있는 것들이 사용자들에게 어떤 불편함이 있는지를 다시 한번 생각하게 해주네요.^^
송영민 wrote @ January 2nd, 2007 at 9:51 am
좋은 글 잘읽었습니다.
UI를 연구하는 디자이너로써 많은 것을 생각하게 해주는 글이였습니다.
감사합니다.
김성호 wrote @ January 2nd, 2007 at 4:48 pm
웹사이트 제작에 있어 정말 많은 고민과 사용자에 대한 관심이 필요하다는걸 새삼스럽게 느꼈습니다.
좋은 글 감사합니다.
1UP wrote @ January 5th, 2007 at 2:30 pm
회원가입할때만큼은 신경을 곤두세웁니다.
불편하다 불편하다 생각했었는데
제대로 짚으셨네요.
조금더 사용자 편의에 신경을 쓴 디자인이 오길 기대합니다.
nc wrote @ January 6th, 2007 at 2:30 pm
2번은 정말 불필요하다고 생각되는 인터페이스이지만
1번은 좀더 좋은 방향으로 갈필요가 있을것같습니다.
칸을 나누는것이 장점인 경우도 있으니깐요..
eouia wrote @ January 6th, 2007 at 8:15 pm
nc//글쎄요, 칸을 나누는 장점이 도대체 뭐죠? 예를 들어 지역번호라든가 핸드폰 종류는 정규식만으로도 충분히 분리해낼 수 있는데요?
nc wrote @ January 6th, 2007 at 11:38 pm
음 개발자입장에서는 무시하고 사용자입장에서 생각해보면..
말씀하신것처럼 오히려 실수(tab키)를 유발할수있어 불편함을 야기시킬수있습니다만.. 그 실수는 입력상의 불편함을 유발하는것이고 입력되는수의 오류를 유발하는 것은 칸이나 그외 “-”와같은 기호를 자동으로 삽입해줄때 줄일수있다고 생각합니다. ( 이 인터페이스는 전화번호뿐아니라 넓게보면 계좌번호, 주민등록번호, 시리얼키와도 비슷하다고 생각합니다. )
웹을 떠나 문서를 보면 말씀하신것처럼 칸이 나뉘어져있는 입력폼들이 있습니다. 문서의 전화번호입력칸을 보면 ㅁ - ㅁ - ㅁ 와같이 분리되어있는 문서가많습니다. (그림이 없지만 어느모습인지는 예상하실수있지요?) 숫자를 작성하는사람에게 “-”기호를 작성하지않게 하는것과 정해진폼대로 숫자를 작성할수있는 편리함(?)이 있습니다. 이것이 편하면 편하지 불편하다고 느끼지는 않을것입니다.
아무래도 웹에서도 이와같이 사용자에게 “-” 기호를 작성하는 불편함을 없애거나 구분이 쉽도록하는 장점때문에 사용했을것이고 현재까지 그 인터페이스를 유지하고있다고 생각합니다.
이 친절함(?)이 크다고 생각되지는 않지만 제생각에는 그래도 분리되어있는 칸이 문서상의 그인터페이스처럼 “-”기호를 생략할수있는것과 명확한 분리가 장점이라고생각합니다. ( 명확한분리는 수치입력오류도 줄일수있다고 생각합니다. )
음 제가생각하는 칸의장점이 표현이 되었는지 모르겠습니다.
그래서 저는 칸을 무조건 없애는것보다 제가생각하는 칸의장점과 칸의 불편함을 없애는 다른 인터페이스가 있지않을까해서 남긴 댓글이었습니다.
eouia wrote @ January 7th, 2007 at 1:05 am
어플리케이션의 경우에는 말씀하신 것처럼 사용자의 입력을 어플리케이션 자체에서 컨트롤 할 수 있습니다. 예를 들자면, 많은 프로그램들에서 사용하는 시리얼키 입력시 자리수 분할이라든가요.
이는 어플리케이션 레벨의 인터페이스로 손쉽게 제작될 수 있으며 그 구현도 어렵지 않습니다.
그러나 웹은 어플리케이션과는 달리 그러한 인터페이스의 구현이 용이하지 않을 뿐더러, 그러한 인터페이스가 바람직하지도 않습니다. 물론 RIA의 개념으로 강제로 그러한 인터페이스를 구현할 수 있습니다. 그러나 대개의 경우 그러한 인터페이스는 사용자의 관습적 경험을 혼동시킬 우려가 있습니다.
무엇보다도, 그 ‘명확한 분리’라는 것은 개발자 중심의 사고일 뿐, 사용자가 신경써야할 부분은 아닙니다.
이 부분에 관해서는 더불어
http://www.alistapart.com/articles/sensibleforms/ 와
http://hyeonseok.com/soojung/web/2006/11/02/301.html
를 참고하시길 바랍니다.
nc wrote @ January 7th, 2007 at 2:05 am
자세한답변 감사합니다 많은부분에 공감하구요..
저역시 불편한 인터페이스라고 생각합니다.
그러나 아직도 이 명확한분리가 개발자중심의 사고만은 아니라고생각합니다. 사용자에게도 분명 좋은점이 있다고 생각합니다. ( 저혼자일지도 모르겠지만요 )
칸을나눈것이 사용자들에게 더욱편리한 입력이 가능하게 함이 시작이었다고 생각하고 보다 나은 입력방식을 생각해보고싶습니다. (구현이 불가능이지않는한) 새롭고 멋진(?) 인터페이스가 어디 쉽게 생겨날수있겠습니까? (물론 JS등을 사용하지않고는 eouia님 생각보다 더이상 좋은 인터페이스는 도저히 생겨날수없겠지만요..)
웹뿐만아니라 UX, UI쪽에 너무 관심이 많아서 그냥 생각을 말씀드려봤는데 귀찮으시지는 않으셨는지 모르겠네요 .. 마지막으로 한번더 감사합니다.