사용자를 배려한 회원정보 입력폼

웹사이트에 회원가입을 할 때 빠지지 않는 정보가 바로 전화번호와 생년월일이다. 난 여전히 웹사이트에서 이 두 정보를 받는 이유를 모르겠다. 서비스 공급자의 입장 말고, 회원 입장에서 말이다. 이유야 어찌 됐건 나같은 일개 웹기획자가 아무리 떠들어봐야 별로 달라지는 것은 없을테니, 어차피 받아야할 정보라면 이왕이면 사용자를 덜 불편하게 하는 방법을 생각해보자.

1. 옥션의 경우

예시1) 옥션의 전화번호 입력폼

위 화면은 옥션의 전화번호 입력폼이다. 맨 앞자리 번호는 모두 풀다운 메뉴로 입력하게 되어 있다. 이렇게 할 때의 장점은 사용자가 직접 키보드를 타이핑하는 일을 줄여주고, 더불어 정확한 데이터를 받을 수 있다는 거다. 물론 뒷자리 번호는 검증이 불가능하니 (고작해야 자리수 체크가 할 수 있는 전부다) 전화번호의 정확성이 크게 향상되진 않는다.

그럼 풀다운 메뉴를 사용해 입력할 경우의 단점은 뭘까? 휴대전화는 그나마 별다른 문제가 없다. 010, 011, 016, 017, 018, 019 정도에서 선택하는 거니까. (옥션의 경우엔 이외에도 훨씬 많은 번호가 있다. 0505 같은) 그러나 일반전화의 경우엔 상황이 조금 다르다.

화면예시2) 옥션의 일반전화 지역번호 풀다운 메뉴

위 화면의 문제는 스치듯 봐도 바로 알 수 있다. 지역번호가 너무 많다. 사용자의 지역에 따라 번호를 찾기 위해 스크롤을 한참 움직여야 할 수도 있다. 목록의 아래쪽에 있는 번호를 선택해야 하는 사용자에게도 이 방식이 편리할까?. 키보드 타이핑을 조금 줄여주려는 의도가 과연 효과를 보고 있을까? 글쎄다. 차라리 그냥 인풋박스를 만들어서 직접 입력하게 하는 것이 낫다고 본다. 난생 처음 접하는 숫자도 아니고, 자신의 전화번호다. 타이핑이 이미 익숙할 가능성이 높다.

2. Daum의 경우

Daum

Daum의 전화번호 입력폼은 내 생각과 일치한다. 휴대전화 맨 앞자리 번호를 풀다운 메뉴를 통해 입력을 하고, 유선 전화번호는 사용자가 직접 타이핑을 하도록 되어 있다. 잘 한 번 생각해보자. 어느 것이 더 편리한 입력방식일까.

이제 생일 입력폼을 보자. 연도는 인풋박스로 직접 타이핑을 하고, 월/일은 풀다운 메뉴를 적용했다. 연도의 경우 직접 입력하는 방식이 훨씬 편리하다. 연도를 풀다운 메뉴로 처리하면 맨 위를 올해(2010년)로 설정하는 형태로 구성한다. 당연히 나이가 많을수록 스크롤바를 한참 내려 아래쪽으로 움직이는 수고를 해야 한다. 나이 먹는 것도 서러운데 불편하기까지 하다. 그럼 월/일은 어떨까. 월은 항목이 12개 뿐이니 그나마 덜하지만, 일은 최대 31개의 항목이 있다. 28일쯤 태어난 사람은 스크롤을 한참 내려야 한다. 이런 불편함을 이 화면을 구성한 기획자나 디자이너가 몰랐을리 없다. 불편한데도 왜 이렇게 할까? 이유는 동일한 형식의 데이터를 받기 위해서다.

연도의 경우엔 인풋박스로 처리해도 모든 사람이 '1970'의 형식으로 입력한다. 70년에 태어났다고 '70'이라고 입력하는 사용자는 없다. 그럼 월/일은? 사람마다 다르다. 어떤 이는 '01'로 입력하고, 어떤 이는 '1'로 입력한다. 이런 상황을 막기 위한 가장 손쉬운 해결책이 풀다운 메뉴다. 그럼 정말로 풀다운 메뉴 외에는 방법이 없을까? 있다. '웹 폼 디자인'에서 간단한 해결책을 제시했다. 사용자가 '1'이라고 입력하면 DB에 저장할 때 임의로 앞에 '0'을 붙여 저장하도록 하면 된다. 0에서 9까지의 숫자는 무조건 앞에 '0'을 붙여서 저장하면 사용자가 어떤 방식으로 입력을 하든 상관 없이 일정한 형식을 유지할 수 있다. 사용자에게 'YYYYMMDD 형식으로 입력하세요'라고 안내를 하거나, '01월 01일'이라고 입력예시를 보여줄 필요도 없다.

3. 정보 수신 여부 옵션

이외에도 회원 가입을 할 때 빠지지 않는 녀석이 하나 더 있다. 이메일 수신 여부, 문자 수신 여부 같은 녀석들이다.

화면예시3) Hmall

위 화면은 Hmall의 회원가입폼이다. 기본값이 모두 '예'로 되어 있다. 많은 사용자가 회원가입을 할 때 정보 수신 항목을 자세히 살펴보지 않고 바로 '가입' 버튼을 클릭하고, 한 번 설정하면 메일함에 광고 메일이 잔뜩 쌓여도 회원정보를 잘 수정하지 않는다는 점을 교묘히 이용한 -아주 흔한- 사례다. 이런 식으로 광고 메일 수신자 늘려서 살림살이 좀 나아지셨나?

서비스 공급자 관점에서 만드는 이런 입력폼은 결코 사용자를 행복하게 만들 수 없다. 보다 사용자를 배려하는 형태로 하려면 어떻게 해야 할까. 간단하다. 모두 체크박스로 바꾸면 된다.

화면예시4) 라디오버튼을 모두 체크박스로 바꾼 화면

라디오버튼은 두 가지 이상의 옵션 중 하나를 선택할 때 사용한다. 체크박스는 그와 달리 여러 옵션을 동시에 선택할 때 사용한다. 바로 위의 경우처럼. 수신 의지가 있는 사용자라면 체크박스에 체크를 해서 확실한 의사를 밝히고, 수신 의지가 없거나 잘 모르는 사용자라면 그냥 평소 하던대로 바로 가입 버튼을 클릭하면 된다. 물론 체크박스로 바꾸면 서비스 공급자는 체크박스의 기본값을 '체크해둔 상태'로 바꾸고 싶어 몸이 근질근질할터다. 그래도 참아야 한다. 사용자를 기만해서 광고 메일 수신자를 아무리 늘린다해도 살림살이는 나아지지 않는다.

난 미성년자를 받을 수 없는 성인 전용 사이트가 아니면 회원의 생년월일을 받을 이유가 없다고 본다. "생일 쿠폰 주려고 그러지~" 할 수도 있겠다. 고맙다. 근데 생일 쿠폰을 위해서 생년월일을 필수 정보로 할 이유는 없잖은가. 연락처도 마찬가지다. 쇼핑몰이라해도 실제로 주문을 할 때가 아니면 연락처 정보를 받을 이유가 없다. 받아서 뭐하게? 안부전화 해주는 것도 아니잖아. 비밀번호 잊어버렸을 때 본인확인을 위해서라고 답할 사람 많은줄 안다. 우리, 조금 솔직해지자. 본인확인 방법, 전화번호 말고도 있다.

그러나 나같은 듣보잡 웹기획자의 말을 듣고 이런 정보를 받지 않을 서비스 공급자는 드물다. 그러니 때려죽여도 받을거라면 이왕이면 좀 편리하게, 사용자의 관점에서 구성해보자. 그리고 제발 받은 정보 관리 좀 잘 하자. 그렇게 악착같이 개인정보 받아놓고 걸핏하면 유출 사고 터뜨리지 말고. 관리할 자신 없으면 받지를 말던가!

이 책, 강력 추천 도서다. 웹 어쩌고 하는 일을 하는 사람이라면 기획자든 개발자든 디자이너든 무조건 읽어라.

웹 폼 디자인 - 루크 로블르스키 지음, 김성은.민은식 옮김/인사이트