아무 생각없는 인터페이스

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가 없어서 사용성이 제한되는 게 아니라, 단지 상상력과 배려심이 없는 기획자 때문이지요. 아, 어쩌면 정규식을 다룰 줄 모르는 개발자 때문일 수도 있긴 하겠습니다.