웹사이트의 우편번호 입력 방식을 개선해보자

예전에 트위터 누군가 올려준 블로그 포스트 하나를 보고 큰 충격을 받았다. '밀피유의 이야기'라는 블로그의 '웹의 사소한 곳도 2011년에 맞도록'이라는 글이다. 혹시 본인의 직업이 웹 기획자, 웹 디자이너 하여간 웹사이트를 기획하거나 운영하거나 만드는 분야에 속하는 분이라면 꼭 한 번 읽어볼 것을 권한다. 이 글에 아래와 같은 대목이 나온다.

그런데 저는 지금도 우편번호 버튼을 누르고 배송지의 동 이름을 입력해 우편번호를 찾고 있는 겁니다. 안 이상합니까?

지금쯤 되면 주말에 출입국관리소를 통해 화성에 갈 수 있지는 않더라도 적어도 우편번호 입력은 주소를 다다닥~ 타이핑하고 있으면 알아서 내가 입력하는 주소를 서버와 주고받아 자동으로 띄워 주고 이메일 입력은 네띠앙이 맨 위에 있는 콤보박스 맨 아래에 있는 ‘직접입력’을 내가 마우스를 두 번 클릭해서 선택하지 않아도 내가 그냥 입력하면 알아서 선택해 주고 아이디와 도메인을 탭 키로 따로 띄워 쓰지 않아도 알아서 분해해 주든지 분해과정을 나한테 보여주지 않을 수도 있습니다. 하지만 그렇지 않았습니다. 13년 전과 똑같이 우편번호는 굳이 버튼을 눌러 새 창을 띄워 동 이름만 정확히 입력해 찾아야 하고 8년 전부터 없어진 집 전화번호를 지금도 물어보며 서비스가 되는지 어떤지 알 수도 없는 네띠앙이나 한미르 이메일 선택 콤보박스가 지금도 달려 있고 아이디와 도메인 영역을 내가 잘 분리해서 입력해야 합니다. 주소는 유효성을 검증하지 않아 만약 내가 잘 못 입력하면 그대로 택배회사까지 전달되어 내 상품은 미아가 되어 버릴 겁니다.

Copyright by 밀피유의 이야기 (굵은 글씨는 본인이 임의로 표시한 것)

이 글을 읽은 한 분이 '웹기획을 하는 입장에서 뜨끔'하다는 댓글을 달았다. 나는 뒤통수를 한 대 맞은 기분이었다. Ajax가 어쩌고, 인터렉션이 어쩌고 설레발치지만 정작 주소 입력하는 방식 하나 바꿔놓지 못했으니까. 전혀 생각도 하지 못했다. 고객에게 회원가입폼의 중요성을 역설하고, '니네가 이렇게 많은 정보를 받으려고 욕심내면 사람들이 회원가입을 포기한다'고 설득에 설득을 했으면서도 정작 주소를 입력하는 방식조차 되돌아볼 생각을 못한 거다.

그래서 어떻게 하면 조금이나마 나은 방법을 써볼 수 있을까 하는 고민을 이제라도 해봐야하지 않을까 해서, 좀 더 정확히는 내가 가진 지식이란게 너무 알량한 수준이라 이 글을 보는 분들 중 현명한 방법을 제안할 수 있다면 우리 그걸로 한 번 해보자 뭐 이런 뜻으로 하는 포스팅. 그러니 이 글은 스스로 내 생각을 전개하는 독백 개념에 가깝다. (다른 분야도 그렇지만) 특히 내 프로그래밍에 관한 내 지식수준은 'PHP가 뭔가요? 먹는 건가요? 우걱우걱' 수준을 겨우 벗어난만큼 개발자가 의견을 주면 좋겠다.

주소를 그냥 입력하면 '주소의 유효성'을 어떻게 체크하지?

주소를 타이핑하면 실시간으로 데이터를 전송해서 우편번호를 찾아줄 수 있을까. 입력하는 정보가 아이디라면 입력함과 동시에 서버와 통신을 통해 유효성을 판단하는 방식은 흔하다. 아이디의 경우 사용자가 입력하는 데이터의 정확성-가령 오타라든가-은 전혀 체크할 필요가 없다. 동일한 아이디가 존재하느냐 아니냐만 판단하면 된다. 문제는 입력하는 정보가 '주소'라는 데 있다.

사람이 알아보는 '유효한' 주소는 기계가 알아보는 '유효한' 주소와 다를 수밖에 없다. 사람은 '서울 송파 삼전동' 정도로만 써도 다들 이게 주소라는 것도 알고, 어디를 가리키는 건지도 안다. 그러나 컴퓨터는? 컴퓨터가 유효성을 체크하는 가장 기초적인 방식은 물론 '대조'다. 가령 '서울특별시 밥먹구'라고 입력했다면 이 정보의 유효성은 간단히 체크가 가능하다. 주소DB에 '서울특별시 밥먹구'는 없을테니까.

그런데, 사용자가 '서울시 강남구 삼성동'이라고 입력한다면? 혹은 '서울 강남 삼성 11-1' 이런 식으로 입력한다면? 우리의 눈으론 쉽게 구별이 가능하다. 맨 앞은 서울특별시, 중간은 강남구, 다음은 삼성동, 그 뒤는 번지수겠지. 그러나 컴퓨터는 이걸 어떻게 구별할까? 시/도나 구 정도라면 가능할지도 모른다. '서울'까지 입력하면 '서울특별시'로 교정하고, '송파'를 입력한 뒤 송파구에 속한 동을 입력하면 '송파'를 '송파구로 교정하고. 근데 동 단위까지 내려가면 이게 가능할까? '삼성'이 삼성동인지, 삼성아파트인지, 삼성빌딩인지, 삼성타워인지 어떻게 알지? 동을 입력한거라고 확신할 수 있나? 더구나 이걸 전국을 대상으로 확대한다면? 이거, 가능할까? 내 지식으론 모르겠다. 형태소 분석 뭐 이런 단계까지 진도를 나가야 할지도.

(이 글을 읽는 사람이라면 '누가 주소를 저렇게 입력하느냐'고 묻지는 않으리라 본다.)

기존 우편번호 입력방식의 장점

밀피유 님도 언급했다시피 이렇게 입력할 경우 핵심은 주소의 유효성이다. 최소한 읍/면/동을 타이핑하게 해서 우편번호를 검색하는 방식은 사용자가 아예 존재하지 않는 주소를 타이핑하는 것은 효과적으로 막는다. 물론 사용자 본인이 강남구 신사동에 살면서 은평구 신사동을 택해 주소를 적는 오류까지 수정하지는 못한다. (이런 오류를 수정하는 건 다른 차원의 접근이 필요하리라 본다. 가령 사용자가 지금까지 주로 배송/입력한 주소와 비교해서 '동 이하 번지수는 똑같은데 '구'단위만 다른 것을 판단해 '이거 맞느냐'고 재확인을 하는 방식? 그러나 이 경우에도 첫 주문이라면 얘기는 또 다르다.) 만약 동까지 정확한 주소를 적었는데, 번지수를 잘못 적은 경우라면 체크가 가능하다. 지금도 일부 사이트는 주소 유효성을 번지수 혹은 아파트 동 단위까지 체크한다. (물론 딱히 사용자를 위해서가 아니라, 잘못된 번지수로 통지서가 발송되는 걸 막기 위한 서비스 제공자의 '배려'다.)

기존 방식의 또 다른 장점은 우리가 흔히 간과하는 부분에 있다. 누구나 타이핑이 능숙한 것은 결코 아니다. 나는 내가 사는 주소를 타이핑하는 데에 10초면 거뜬하고, 그 과정에서 오타가 나는 횟수도 적겠지만, 타이핑에 익숙하지 않은 사람도 많다. 주소 전체를 타이핑하는 방식의 결정적인 단점이 이거다. 직접 입력하는 글자수가 늘어난만큼 타이핑이 서툰 사람의 괴로움도 늘어난다.

그럼에도 불구하고 밀피유 님의 지적을 생각해볼 필요가 있는 것은

그럼에도 밀피유 님의 제안을 곱씹어볼 필요는 있다. 일단 지금의 주소입력방식에서 가장 불편한 것은 팝업창 방식이다. 우편번호를 찾는 팝업창은 명백히 사용자의 작업 흐름을 끊어놓는다. 특히 우편번호 입력칸을 클릭해도 아무런 반응이 없도록 설계한 방식은 그 중 백미라 할만하다. 하다못해 우편번호 입력칸을 클릭하면 바로 팝업창을 띄워주는 것도 아니고, 꼭 '우편번호 찾기'라는 버튼을 클릭해야만 작동하게 만든 사이트도 수두룩하다. 

주소 전체를 사용자가 입력하게 해서 '알아서' 우편번호를 찾거나 주소의 유효성을 검사하는 방식은 내 머리론 답이 안나온다. 이 방법을 제외하고 내가 생각할 수 있는 방안은 아래와 같다.

위 화면은 실제로 내가 지금 기획중인 사이트에 사용할 화면이다. 오늘 오후에 급히 만든 관계로 여기서 좀 더 개선할 필요가 있다. 일단 팝업창은 사용하지 않았다. 레이어도 사용하지 않았다. 이 페이지에 접속하면 위쪽엔 '읍/면/동 입력'이라 적힌 입력창이 보이고, 아래엔 아무런 내용이 채워지지 않은 입력칸이 몇 개 보인다. (이것도 '찾기' 버튼을 클릭한 다음 펼치는 형태로 할까 했는데, 그렇게 하면 오히려 사용자가 당황할 여지가 있어서 그렇게 하진 않았다.) '읍/면/동 입력'이라 적힌 입력칸을 채우고 '찾기' 버튼을 클릭하면 아래에 주소 목록이 뜬다. 우편번호는 보여주지 않는다. 사실 배송을 위해서건 뭘 위해서건 우편번호를 사용자에게 노출할 필요는 없다. 배송을 위해서라면 송장에만 적히면 그만이다. 사용자는 우편번호를 알아보려는게 아니라, 주소를 입력하려는 거다. 많은 사이트가 우편번호까지 굳이 보여주는 친절함을 베푸는데, 안그래도 된다. 사용자가 목록에서 하나를 택하면 동까지 채워주고(이 때 동을 표시하는 입력칸은 색을 달리해서 구분한다), 아래에 나머지 주소를 적도록 유도한다.

그러나 이 방식도 팝업창을 사용하지 않았을 뿐, 나머진 똑같다. 결국 사용자는 '읍/면/동'을 입력하고 조회한 결과를 선택해 나머지 주소를 채워야 한다. 오후에 급하게 주소 입력화면을 만들어놓고, 밀피유 님의 제안을 구체화할 방법을 한 번 생각해보려는 의도였는데 글을 적다보니 도저히 답이 떠오르지 않는다. 이 글을 읽는 분들이 빈 곳을 채워주었으면 하는 바람이다.