드롭다운의 문제점

드롭다운. Dropdown. 

당장 이 블로그의 글쓰기 화면 상단에도 드롭다운이 있다. 글이 등록될 카테고리를 선택하는 역할. 웹페이지가 생긴 이후 아주 오랜 시간 동안 많은 인풋 UI에서 기본형으로 사용하고 있는데, 무슨 문제가 있다는 것일까?

원문링크: https://designsmarts.co/the-problem-with-dropdowns/

The problem with dropdown fields (and what you should use instead)

이 글에서는 드롭다운의 장점과 단점에 대해 이야기하고 그 대안을 제시한다. 그리고 재밌는 얘기를 하나 하는데, 바로 드롭다운의 이름에 대해서다. 난 우리만 이름을 여러 가지로 부르고 영어권에서는 안 그런줄 알았더니, 얘들도 똑같더라.

드롭다운을 사람들이 부르는 여러 사례:

• 드롭다운
• 드롭다운 박스(우리도 이걸로 많이 쓴다)
• 드롭다운 메뉴
• 드롭다운 요소(element)
• 드롭다운 필드
• 셀렉터
• 셀렉트 박스(이거 국내에서도 참 많이 쓰는 듯)
• 셀렉트 메뉴
• 셀렉트 인풋
• 셀렉트 요소(element)

W3G 스펙에 따르면 "select element'가 정식 이름이라고 한다. 원문의 저자도 이 이름으로 부르는 경우가 가장 적다고. 우리는 당연히 이렇게 부르는 사람이 없는데, 그 이유는 아마 element라는 단어 때문이지 않을까. 이건 워낙 다양하게 번역이 될 수 있어서 그냥 번역어가 없다고 봐도 될 것 같다. element는 그냥 element다.

드롭다운 예시

더 심한 경우는 드롭다운을 진짜로 메뉴로 사용하는 경우이다. 주 내비게이션으로 드롭다운 UI를 쓰는 경우는 거의 없지만, 특히 Footer의 '연관 사이트' 같은 항목에는 정말 많이 쓴다. 

드롭다운이 어때서?

드롭다운은 사용자의 입력을 받는 아주 좋은 방법처럼 보인다. 선택 항목 수의 제한도 없고, 단촐하고, 웹의 기본 UI이고, 모바일에서도 잘 작동한다. 하지만 마치 스위스 아미 나이프처럼, 많은 역할을 할 수 있지만 동시에 그 중 정말 잘 수행하는 건 몇 안된다. 캠핑에서는 나무를 자를 때 스위스 아미 나이프를 쓸지 몰라도, 집에서라면 톱을 쓰겠지.

드롭다운의 장단점

드롭다운의 장점:

• 공간을 절약한다. 드롭다운은 아주 작은 공간을 써야만 할 때 좋다. 아주 작은 공간에 아주 많은 정보를 넣을 수 있다.
• 표준 입력방식(inputs)이다. 오류가 생길 가능성도 적고, 접근성도 좋다.
• 입력내용이 예측 가능하다. 사용자가 직접 타이핑하면 오타를 내기도 하고 전혀 엉뚱한 걸 입력하기도 한다. 하지만 미리 선택값을 정해두면 그럴 일이 없다.
• 유연하다. 선택값이 몇 개인지 확정되지 않더라도 드롭다운을 쓰면 끝. 나중에 디자인을 수정할 필요도 없다.

드롭다운의 단점:

드롭다운은 사용하기 어렵다

영국 정부가 연구를 진행하면서 생년월일을 선택할 때 드롭다운을 썼더니, "사람들이 자신의 생년을 찾는 데 아주 어려워했다"고 한다. 이거 동의한다. 생년월일 같은 선택값이 많은 입력 필드를 드롭다운으로 쓰면 타이핑 안해서 좋은 게 아니라 아래위로 스크롤하느라 진이 빠진다.

사용자가 빠뜨리기도 한다

드롭다운이 필수 항목일 때에도 사용자가 그걸 빠뜨리고 지나치기도 한다. Benjamin Healey의 연구에 따르면, 드롭다운을 쓰면 항목을 답하지 않거나 응답시간을 늘리는 경우가 많다고.

왜일까? 크기 때문일 가능성이 있다. 작은 크기는 분명 장점이지만 동시에 중요해 보이지 않게 만들기도 한다. 또 다른 이유는 드롭다운은 이미 채워진 것처럼 보이기 쉽다. 비어 있는 입력폼을 보면 채워야겠다는 생각이 쉽게 들지만 드롭다운은 뭔가 채워져 있으니 -비록 그게 '선택하세요'라도- 그냥 지나치기 쉽다는 얘기.

선택값을 잘 안보이게 한다

드롭다운은 공간을 적게 차지하면서 동시에 각각의 선택 가능한 옵션을 살펴보기 어렵게 한다. 또한 글자 수가 많을 경우 모바일에서는 다 보이지도 않는다.

사용자의 움직임을 늦춘다

ConversionXL의 사용성 테스트에 따르면, 드롭다운은 라디오 버튼에 비해  사용자의 속도를 확 떨어뜨린다. 라디오 버튼을 쓰면 무려 2.5초나 빨라졌다고 한다.

상황에 따라 올바른 입력폼 선택하기

스위치 / 토글

선택값이 두 개면 스위치나 토글을 써라.

라디오 버튼

라디오 버튼은 거의 대부분의 경우 드롭다운을 대체할 수 있다. 라디오 버튼의 장점은 사용자가 뭘 더 할 필요도 없이 선택값이 한 눈에 보인다는 것.

텍스트 필드

생일이나 신용카드 번호 등을 입력할 때는 직접 타이핑하게 하자.

직접 만든 방법들

드롭다운 UI를 차용하되, 새롭게 디자인하는 것을 말한다. Google Flights의 경우가 좋은 예시다.

드롭다운을 잘 쓰려면

때로는 드롭다운을 쓰는 게 가장 이치에 맞다. 공간이 제한적이거나 별로 중요하지 않은 경우에 흔히 쓴다. 가장 흔한 예시는 목록 정렬이다.

드롭다운을 잘 활용하고 사용성 문제점을 피할 방법을 알아보자.

레이블 잘 활용하기

드롭다운과 기본 선택값에 레이블을 잘 쓰자. 드롭다운 외부에 레이블을 붙이면 실수를 바로잡는 데 도움이 되고, 드롭다운 내부에 그걸 반복해서 쓰면 스크린 리더 사용자(시각장애인)에게 도움이 된다.

선택값을 예측가능한 순서로 나열하기

선택값을 사용자가 많이 선택할 순서대로 배치하고 싶기 마련이지만, 예측 불가능한 순서로 선택값이 나열되면 사용자를 방해한다. 알파벳순(가나다순)으로 하거나 예측 가능한 패턴으로 하자.

짧게 쓰기

선택값을 너무 길게 설명하듯 쓰면 다 표현되지 않고 잘린다.

옮긴이의 기준은

나는 드롭다운을 쓸 것인지 라디오 버튼을 쓸 것인지 결정할 때, 선택값 5개를 기준으로 한다. 글자 수가 작다면 6개 정도도 괜찮다. 5개 또는 6개 미만이면 라디오 버튼을 쓴다. 그 이상이면 드롭다운을 쓴다. 6개가 넘으면 한 눈에 잘 안들어올 뿐 아니라 선택값이 너무 많아 보여서 사용자에게 부담을 주리라 생각해서다.

결국 어떤 UI 요소든 이게 최고라고 정해진 것은 없다. 각 상황에 맞게 선택하는 게 최선이다.