Dropdown 컴포넌트
보통 버튼의 오른쪽에 화살표를 표시하고, 버튼을 클릭하면 (주로) 하단에 나타나는 어떤 항목들의 목록을 보통 드롭다운이라고 부른다.
그리고 일반적으로 자주 사용되는, 이 드롭다운을 사용하는 두가지 컴포넌트가 있다.
셀렉트와 메뉴 컴포넌트다. 오늘은 이 두 가지 컴포넌트의 차이점을 한번 살펴보자.
Case study — Select
- 셀렉트 컴포넌트는 대게 Form에서 사용된다. 따라서 라벨이 붙는 경우가 흔하다.
- 셀렉트 컴포넌트는 드롭다운의 값에 현재 상태를 표시한다.
- 드롭다운 리스트에 나오는 항목은, 선택할 수 있는 옵션들을 표시하며,
리스트 중 하나를 클릭하면 값은 클릭한 옵션이 가리키는 상태로 변한다. - 리스트에서, 현재 선택된 상태는 보통 다른 컬러를 사용하는 등의 강조를 적용한다.
- 리스트에 아이콘이 추가된 경우, 값에도 아이콘이 들어가기도 한다.
- 값을 표시할 공간이 아주 좁은 경우, 값에 아이콘만 표시하기도 한다.
보통 국가 선택 컴포넌트에서, 국기만 나타내는 방식을 가장 흔하게 볼 수 있다.
- 셀렉트는 여러 옵션 중 하나를 선택하는 컴포넌트이므로, 표시할 수 있는 영역이 넓고, 옵션이 일정 갯수 이하라면, 라디오 버튼으로 대체할 수 있다.
Case study — Menu
- 메뉴 컴포넌트는 값 대신 타이틀이 존재한다.
- 셀렉트 컴포넌트와 다르게, 타이틀은 고정된 내용을 표시한다.
- 메뉴 컴포넌트는 타이틀 영역에 아이콘만 표시하는 경우가 빈번하다.
- 드롭다운 리스트에 나타나는 항목은 실행할 수 있는 액션 목록이다.
클릭할 경우, 특정한 액션을 취하게 된다. - 액션은 대게 링크 이동이지만, 모달을 띄우기도 한다.
- 종종, 어떤 액션은 비활성화 되기도 한다.
- 메뉴의 드롭다운 리스트는 depth를 갖기도 한다. 셀렉트의 드롭다운에서는 흔하지 않은 방식이다.
Case study — ETC
하지만 많은 경우, 메뉴도 아니고 셀렉트도 아니지만 드롭다운으로 표현하게 되는 컴포넌트가 생겨나기도 한다.
위 컴포넌트는 셀렉트이지만, 현재 상태가 값 영역에 표시되지 않는다. 여기에는 두 가지 이유가 있을 수 있는데,
첫 번째로는 해당 국가 언어를 몰라도 찾을 수 있어야 하기 때문에, 선택된 값에 따라 달라지는 값 영역을 사용하기보다는 전세계 공통의 고정된 아이콘을 사용하는 방식이 적절하기 때문이다.
두 번째 이유는 선택에 따른 결과가 화면 전반에 확연하게 적용되기 때문이다. 굳이 이 셀렉트에서 “현재 상태"를 보여주지 않아도 사용자는 화면 어느 곳에서나 선택의 결과를 확인할 수 있다.
만약 언어가 더 늘어난다면, 특히 영국 영어와 미국 영어를 구분해야 하는 상황이 온다면, 이러한 결정은 뒤바뀔 수 있다.
첫번째 메뉴인 어노테이션 스위치를 셀렉트로 본다면, 4가지 셀렉트를 하나에 몰아넣은 방식이다. 표현할 수 있는 영역도 좁은데, 선택할 수 있는 옵션의 이름도 길고, 값 영역에 아이콘으로 표현하기도 어렵다면 이런 방식으로 처리할 수도 있다.
이 방식은 어떻게 보면 셀렉트 컴포넌트를 숨겨두는 방식이므로, 보통 설정할 수 있는 옵션이 다양하지만, 접근성이 좀 떨어져도 괜찮은 — 기능에는 영향이 없으나 유저가 바꾸고 싶어할 수도 있는 — 디스플레이 옵션 쪽에서 많이 보인다.
현실
폼이 아니지만 상태를 바꾸는 옵션을 제공해야 할 때, 우리는 이 메뉴와 셀렉트의 사이에서 많은 고민을 하게 된다. 그리고 그 논의의 끝이 둘 중 하나로 명확하게 결론나지 않는 경우도 많다.
리얼클래스를 개발하면서도, 그런 경우가 있었다. 각 수업마다 알림 설정을 할 수 있었는데, 다음과 같은 요구 사항이 있었다.
- 각 수업마다 알림 설정 기능이 반복해서 보여지므로, 시각적인 방해가 크지 않게 아이콘만으로 단순하게 보여주고 싶다.
- 알림의 세 가지 상태: 알림 설정 안 됨, 한번만 알림 설정됨, 반복 알림 설정됨
를 한 눈에 확인할 수 있도록 아이콘에 표시해야 한다. - 알림 설정이 되지 않은 상태에서는 두 가지 알람 중에서 선택할 수 있어야 한다.
- 그런데 반복 알림 설정 시, 옵션이 조금 복잡하기 때문에, 모달을 띄워야 한다.
그래서 이 컴포넌트는, 알람 설정의 상태가 드러나는 Select처럼 보였지만, 반복 알림이라는 메뉴는 Select의 “변경 가능한 상태"처럼 클릭하자마자 상태가 바뀌지 않고, 모달을 띄우는 액션에 가까운, Menu의 특징을 가지고 있었다.
때문에 옵션에 어떤 아이콘을 보여줄 것인가, 에 대한 논쟁이 격렬하게 일어났다.
주로 나왔던 두가지 관점을 정리하면
- 드롭다운 리스트에 “이 옵션을 클릭하면 아이콘이 어떻게 바뀔지", 즉 Select 옵션처럼 아이콘을 함께 보여주자. 이 아이콘은, 알림이 설정 되었을 때 보여지는 것과 동일해야 한다. 즉, 채색된 아이콘을 사용해야 한다.
- 반복알림이라는 옵션을 클릭했을 때 모달이 열리는 액션으로 동작하기 때문에, 이건 Menu에 가깝다. 채색된 아이콘은 바깥의 알림 아이콘과 동일하게 보여, “아이콘을 클릭해야 한다"는 어색한 느낌을 준다. 차라리 무채색 아이콘이 낫다.
긴 논쟁이 이어졌지만, 그 논쟁이 무색하게도 : 아이콘을 빼자. 라고 결론이 났다.
하지만 이 논의 과정에서 서로의 입장을 이해해가며 위와 같은 시각의 차이가 있다는 점을 깨달았고, 이 시각의 차이가 어떤 관점에서 벌어졌는지를 고민하다보니 위와 같은 내용이 도출되었다. 종종 이런 논의를 하게 되면, 머리가 아프면서도 꽤 재밌다.
마무리
이렇게 현실에는 이상적인 두 가지 케이스로 딱 떨어지지 않는 경우가 많고, 이 케이스를 바라보는 관점에 따라 서로 다른 의견이 충돌하기도 한다. 그 결론은 우리의 케이스처럼 그 중간 어디쯤에 위치하는 방식이 될 수도 있다.
예전에 아버지께서는 이런 말씀을 하셨다.
너는 어떤걸 만드니? 프론트엔드? 아 화면? 그런건 컴포넌트만 딱딱 잘 나눠두면 요리조리 조합하는걸로 뚝딱! 할 수 있지 않아?
음, 이제는 확실히, 그렇게 뚝딱! 해결되지만은 않는 일이라는 걸 알겠다.
