[UI/UX] 2. Drop down과 Select
드롭다운과 셀렉트 UI는 같은 걸까?
으아 정말 오랜만에 글을 올린다.
최근 모빌리티 스타트업에 온보딩한 지 2주 차!
실무도 파악해야 하고, 프로덕트가 잘되길 바라는 마음으로 한곳에 집중하다 보니 글 올리는 텀이 길어진다. 오늘은 컨디션도 좋아서 재택근무 후 글감을 만지작거려 본다.
나는 현재 스타트업에서 Design system 구축을 담당하여 진행하고 있다.
단순 나열되어 있는 컴포넌트들을 카테고리화하여 제대로 정리하려고 애쓰고 있는데,
Mobile 프로덕트라서 컴포넌트 네이밍하기가 굉장히 난해하다는 생각이 들었다.
그러나 모바일이 있기 전부터 우리는 뚱뚱한 PC(데스크톱)를 가지고 있지 않았는가?
(헷갈리고 여러 가지로 혼재되어 있는 Component 용어들 속에서 헤엄치는 나를 발견..)
그렇기 때문에 여러 이름으로 혼재된 모바일 컴포넌트 용어의 경우에는 HTML 초기 시절부터 쓰던 이름으로 정리하고, 기능과 용도에 알맞은 이름으로 구분했다.
현재 Input field 파트를 정리하고 있는데,
인풋 필드는 말 그대로 입력 값을 받는 영역이다.
그 안에는 Text field, Text area, Check box, Toggle button 등 다양한 데이터를 입력받는 Component들이 존재하는데 그중 Drop down 컴포넌트를 정리하다가 의문이 생겼다.
기존에는 Select로 이름 되어 있어서 Drop down으로 바꿨다가 더 정확하게 파고들고 싶어졌다.
그럴 때에는?
Google it!
(나의 동료를 귀찮게 만들기 전에 우리 구 선생에게 물어보는 것을 생활화합시다.)
1. Drop down이란?
Drop down Menu는 원래 '메뉴용'입니다. 실제로 입력받기 위한 양식과 함께 사용하기 위한 것이 아니라 옵션 목록을 표시하기 위한 것입니다.
예시가 없으면 또 서운하겠죠?
출처: WWIT 메인 화면 카테고리이렇게 마우스오버 시 혹은 클릭 시에 나타나는 List가 Drop down list가 되겠네요.
2. Select란?
그렇다면 Select field는 무엇이란 말인가?
Select Field는 양식에 따라 채워진 데이터 목록에서 선택한 항목을 필드에 표시하기 위한 것입니다.
Select field에는 더 많은 기능이 있습니다. Text label, Helper text 등 Drop down에는 없는 요소가 포함될 수 있습니다.
1. Container
- Select field의 배경 영역이 되는 부분입니다.
2. Text label area
- Select ui와 관련된 텍스트 라벨을 포함할 수 있습니다.
3. Icon area
- 여러 선택 사항이 있다는 것을 암시하는 아이콘입니다.
4. Option list
- 사용자가 선택할 수 있는 옵션 목록이 나타납니다.
글을 마치며...
내가 언제까지 주니어일 수는 없다.
시간이 흐르고 연차가 쌓이면서 내 밑에 후배가 들어왔을 때 모르는 것보다 아는 것이 훨씬 많은 그런 사수가 되고 싶다! 현재 경력직이라고 하기엔 애매하지만 2년 차로 이직하면서 함께 입사한 생신입 한 분이 계신데, 이것저것 모르는 것이 많으셔서 내가 생신입 때 도움 받았던 꿀 tip들을 전수해드리고 있다.
(혹시 궁금하신가요...? 그러면 하트 or 댓글... 반응 보고... 그럼 PD분들 모두 파이팅)
(최근 탑티어 회사에서 인터뷰 제안을 주셨다. 홍보성일 수도, 아니면 인력풀을 위한 미래 자원 정도로 생각한 걸 수도 있지만 더 더 열심히 나를 갈고닦아야겠다는 생각이 펼쳐졌다.
>> 나와 같은 프린이분들 한 우물 파면 뭐라도 나오지 않을까요? 모르는 것이 있을 때마다 기록하는 것을 생활화하면 결국 나의 자산이 됩니다. 남을 가르치려고 할 때 공부 능률이 훨씬 올라가고 기억에도 잘 남아요!
이제 정말 의자에서 퇴근하자. 수영 가야지!........)
[참고문헌]
