드롭다운

정의

드롭다운은 여러 선택지를 평소에는 접어 두었다가, 필요할 때만 목록으로 펼쳐 하나를 고르게 하는 입력입니다. 화면에는 트리거라 부르는 버튼 하나만 놓여 있다가, 사용자가 그것을 누르면 옵션 목록이 아래로 열립니다. 목록에서 항목 하나를 고르면 목록은 다시 닫히고, 트리거에는 방금 고른 값이 채워져 남습니다. 이렇게 선택지를 필요할 때만 드러내기 때문에, 옵션이 많아도 화면을 넓게 차지하지 않고 깔끔하게 정리할 수 있는 것이 드롭다운의 가장 큰 장점입니다. 즉 화면의 공간과 선택지의 수를 맞바꾸는 도구인 셈이라, 언제 접어 두고 언제 펼쳐 둘지를 판단하는 감각이 중요합니다.

왜 중요한가

드롭다운은 선택지가 많을 때 화면 공간을 아끼는 효율적인 도구입니다. 국가나 카테고리처럼 항목이 열 개, 스무 개씩 되는 경우 이를 라디오로 모두 펼쳐 두면 화면이 옵션만으로 가득 차 버립니다. 드롭다운은 이 목록을 트리거 하나로 접어 두어 화면을 단정하게 유지합니다. 다만 접혀 있다는 특성 때문에 사용자는 열기 전까지 어떤 값들이 있는지 알 수 없고, 원하는 항목을 찾으려면 목록을 열어 훑어야 하는 수고가 듭니다. 그래서 선택지가 적거나 서로 비교하며 골라야 할 때는 오히려 드롭다운이 불편할 수 있습니다. 결국 공간을 아끼는 이득과 한 번 더 열어야 하는 수고를 저울질해, 상황에 맞게 다른 입력과 나누어 쓰는 판단이 필요합니다.

흔한 실수

• 선택지가 두세 개뿐인데도 드롭다운을 쓰는 경우입니다. 항목이 몇 개 안 되면 라디오로 한눈에 펼쳐 보여 주는 편이 낫습니다. 굳이 열고 닫는 동작을 시키면 사용자에게 불필요한 한 단계를 더 요구하는 셈입니다.
• 지금 선택된 값이나 열림과 닫힘 상태를 명확히 보여 주지 않는 것입니다. 트리거에 고른 값이 남지 않거나 화살표 표시가 없으면, 사용자는 이것이 눌러서 여는 목록인지조차 알아채기 어렵습니다.
• 옵션이 수십 개인데 검색 없이 긴 목록만 펼쳐 두는 것입니다. 사용자는 원하는 항목을 찾으려고 한참을 스크롤해야 하고, 그 사이 지쳐서 아무거나 대충 고르거나 이탈하게 됩니다.

실무 팁

• 옵션이 다섯 개 이상으로 많아질 때 드롭다운을 쓰세요. 항목이 적으면 라디오가 더 빠르고, 많을수록 접어 두는 드롭다운이 공간을 아껴 화면을 단정하게 유지해 줍니다.
• 트리거에는 현재 선택된 값을 항상 남기고, 열림과 닫힘을 화살표로 표시하세요. 위아래로 바뀌는 화살표만 있어도 사용자는 이것이 여닫을 수 있는 목록임을 즉시 이해합니다.
• 옵션이 아주 많으면 목록 위에 검색 입력을 붙이세요. 수십 개를 일일이 스크롤하며 찾는 대신 몇 글자만 입력해 좁힐 수 있어, 원하는 항목에 훨씬 빨리 닿을 수 있습니다. 국가 목록처럼 항목이 정해져 있고 긴 경우에 이 검색 한 줄이 특히 큰 차이를 만듭니다.

관련 개념