드롭다운 UI 디자인: 선택 필드, 검색, 라디오 버튼의 선택 기준

드롭다운은 사용자가 값을 선택해야 하지만 모든 선택지를 한눈에 비교할 필요는 없을 때 유용합니다. 익숙하고 살펴보기 어렵지 않은 목록에는 일반 선택 필드를, 원하는 항목을 찾기 어려운 목록에는 검색 가능한 콤보박스를 사용하세요. 선택에 따른 차이를 충분히 비교해야 한다면 라디오 버튼으로 선택지를 드러내는 편이 좋습니다. ‘복제’나 ‘삭제’ 같은 명령을 담은 메뉴는 값을 저장하는 선택 필드와 목적이 다릅니다.

어떤 컨트롤을 사용할지는 목록의 길이뿐 아니라 사용자가 내려야 할 결정에 따라 달라집니다. 직원이 업무용 장비를 신청하면서 배송 방법, 지역, 사무실을 고르는 상황을 생각해 보세요. 양식 전체에 같은 드롭다운을 적용하기 전에 Pixso의 UI 디자인 작업 공간에서 각 결정에 맞는 컨트롤을 비교할 수 있습니다.

일반 선택 필드, 라디오 버튼, 검색형 콤보박스 중 무엇이 적합할까요?

사용자가 선택 전에 알아야 할 내용을 먼저 적어 보세요. 장비 신청서에서 배송 방법은 주문을 언제, 어디서 받는지에 영향을 줍니다. 지역은 익숙한 분류이고, 사무실 목록에는 비슷한 이름이 여러 개 있을 수 있습니다. 이 세 가지 선택에 반드시 같은 컴포넌트를 사용할 필요는 없습니다.

사용자가 내려야 할 결정	우선 검토할 패턴	이 패턴이 유리한 이유
사무실 배송, 자택 배송, 직접 수령 중 선택	짧은 설명을 곁들인 라디오 버튼	목록을 열지 않고도 각 방법의 차이를 비교할 수 있습니다.
조직에서 구분한 지역 중 하나 선택	일반 선택 필드	많은 공간을 차지하지 않으면서 현재 선택한 값을 보여 줍니다.
규모가 큰 사무실 목록에서 특정 사무실 찾기	검색 가능한 콤보박스	긴 목록을 눈으로 훑는 대신 입력으로 후보를 좁힐 수 있습니다.
저장한 장비 신청을 복제하거나 취소	작업 메뉴	양식의 값을 수집하는 것이 아니라 명령을 실행합니다.

선택지가 몇 개 이상이면 드롭다운이 정답이라는 보편적인 기준은 없습니다. 뜻이 불분명한 요금제 이름 여섯 개는 설명이 필요할 수 있고, 익숙한 장소 이름은 목록이 길어도 검색하기 쉬울 수 있습니다. 사용자의 친숙도, 이름의 길이, 비교 필요성, 선택할 때마다 목록을 열어야 하는 부담을 함께 살펴보세요.

WAI-ARIA의 라디오 그룹 패턴은 최대 하나의 항목을 선택하는 상황을 다룹니다. 배송 방법처럼 대안을 계속 보여 줘야 하는 선택에 잘 맞습니다. 세로 공간을 아끼기 위해 중요한 비용이나 소요 시간의 차이를 숨기지는 마세요.

필드의 이름과 선택한 값을 구분하세요

‘지역’은 필드 레이블이고, ‘북부 지역’은 선택할 수 있는 값입니다. ‘지역을 선택하세요’는 선택 전 안내 문구입니다. 이 세 가지를 구분하면 값을 고른 뒤나 양식을 다시 확인할 때도 필드의 의미를 알 수 있습니다.

플레이스홀더만으로 필드 이름을 대신하지 마세요. 값이 입력되면 사라지기 때문입니다. 선택한 사무실 이름인 ‘리버사이드’만 보이면 사무실을 뜻하는지, 수령 장소인지, 계정에 등록된 주소인지 알기 어렵습니다.

기본값은 근거가 있을 때만 설정하세요. 확인된 직원 프로필에 평소 이용하는 사무실이 있다면 미리 표시해 수고를 덜 수 있습니다. 다만 사용자가 그 값을 알아보고 바꿀 수 있어야 합니다. 양식이 채워져 보이게 하려고 목록의 첫 사무실을 자동 선택하면 장비가 엉뚱한 곳으로 배송될 수 있습니다.

선택지는 같은 기준으로 표현하세요. 행동, 장소, 모호한 수식어를 섞기보다 ‘사무실 배송’, ‘자택 배송’, ‘직접 수령’처럼 나란히 비교할 수 있게 씁니다. 이름이 같은 사무실이 있다면 각 선택지에 위치 정보를 덧붙이세요. 아이콘으로 차이를 짐작하게 하는 것보다 짧은 보조 설명 한 줄이 더 유용합니다.

원하는 항목을 더 쉽게 찾을 수 있을 때 검색을 추가하세요

검색 필드를 넣으면 무엇을 입력할 수 있는지, 어떤 정보와 대조하는지, 결과를 어떤 순서로 보여 줄지, 목록에 없는 텍스트도 허용할지 결정해야 합니다. 장비 신청서의 사무실 필드에서는 등록된 사무실만 선택할 수 있습니다. ‘리버’를 입력하면 후보가 좁혀질 뿐, 새로운 배송지가 만들어지는 것은 아닙니다.

WAI-ARIA의 콤보박스 패턴은 직접 입력할 수 있는 컨트롤과 목록에서 선택만 하는 컨트롤을 구분하고, 여러 자동 완성 방식도 설명합니다. 필요한 동작을 명확히 정하세요. 아래쪽 화살표가 있다는 것만으로는 직접 입력할 수 있는지, 정해진 목록에서만 선택해야 하는지 알 수 없습니다.

이 예제에서는 사무실 이름과 화면에 표시된 도시 이름을 검색 대상으로 사용합니다. 결과의 표현도 표시된 정보와 일치시켜야 합니다. 목록에 ‘리버사이드 — 브리스톨’이 표시된다면 ‘브리스톨’ 검색 결과에서 이 사무실이 나타나는 이유를 이해할 수 있어야 합니다. 모든 약어가 검색될 것이라고 막연히 가정하지 말고 별칭을 지원할지 정하세요.

각 선택지에는 구분에 필요한 정보를 보여 주되, 사무실 정보의 모든 항목을 넣지는 마세요. 사무실 이름과 도시만으로 구별할 수 있다면 전체 주소는 오히려 목록을 훑기 어렵게 만듭니다. 사무실을 고른 뒤 필드 아래에 배송 주소를 표시하면 직원이 목적지를 확인할 수 있습니다.

검색이 완료됐지만 일치하는 항목이 없다면 입력한 검색어를 유지하고 검색 범위를 넓히는 방법을 안내하세요. 사무실 목록을 불러올 수 없는 상황을 ‘검색된 사무실이 없습니다’라고 표시해서는 안 됩니다. 실시간 결과를 조회하는 필드라면 비동기 검색 필드 UX 가이드에서 응답 지연과 입력 중인 텍스트·확정된 항목의 차이를 살펴볼 수 있습니다. 다만 그에 앞서 이 작업에 검색이 실제로 도움이 되는지부터 판단해야 합니다.

값을 선택하는 동작과 명령을 실행하는 동작을 구분하세요

지역 선택 필드는 목록을 닫은 뒤에도 선택한 지역을 계속 보여 줘야 합니다. 반면 ‘작업’ 버튼은 기존 신청에 영향을 주는 명령 목록을 엽니다. 두 패턴의 시각적 스타일을 맞추는 것은 괜찮지만, 같은 인터랙션으로 취급해서는 안 됩니다.

예를 들어 ‘북부 지역’을 선택하면 필드의 값이 바뀝니다. 작업 메뉴에서 ‘신청 취소’를 선택하면 결과가 따르는 별도의 절차가 시작됩니다. 장소 목록의 맨 아래에 ‘신청 취소’를 넣으면 사용자가 이를 부담 없이 고를 수 있는 또 하나의 장소처럼 받아들일 수 있습니다.

WAI-ARIA의 메뉴 버튼 패턴은 메뉴를 여는 버튼의 펼침 상태와 키보드 진입 방식 등을 설명합니다. 필수 입력 필드에 메뉴의 의미와 동작을 그대로 적용하지 말고 실제 기능에 맞는 패턴을 선택하세요.

여러 항목을 선택할 수 있다면 설계할 문제도 달라집니다. 직원이 액세서리를 여러 개 고를 때는 단일 선택 드롭다운을 장바구니처럼 바꾸기보다 체크박스 그룹이 더 명확할 수 있습니다. 긴 목록에 다중 선택 컨트롤이 필요하다면 선택한 항목, 해제 방법, 선택 개수를 이해하기 쉽게 보여 주세요. 단일 선택 디자인에 체크 표시만 추가하면 다중 선택으로 바뀐다고 생각해서는 안 됩니다.

닫힌 필드만큼 펼친 목록도 세심하게 설계하세요

닫힌 필드가 깔끔해 보여도 펼친 목록은 사용하기 어려울 수 있습니다. 화면 아래쪽에 필드가 있을 때, 사무실 이름이 길 때, 화면 폭이 좁을 때를 각각 확인하세요. 목록이 필드와 시각적으로 연결돼 보이면서도 사용 가능한 화면 영역을 벗어나지 않아야 합니다.

목록이 길다면 최대 높이를 정하고 스크롤을 적용하세요. 다음 항목의 일부를 보여 주거나 다른 분명한 단서를 제공해 처음 몇 개가 목록의 끝처럼 보이지 않게 합니다. 한 번에 항목 하나만 보이는 지나치게 작은 스크롤 영역은 피하세요.

현재 선택한 값과 살펴보는 중인 항목을 구분하세요. 사용자가 목록을 열고 다른 사무실을 확인한 다음 닫을 때 어떤 값이 남는지 알 수 있어야 합니다. 항목 사이를 이동하는 것만으로 값이 바뀌는지, 명시적으로 확정해야 바뀌는지를 선택 방식에 맞춰 정해야 합니다.

긴 이름도 서로 구분할 수 있어야 합니다. 숨겨진 뒷부분만 다른 두 항목이 모두 ‘북관 — 서비스…’로 표시되면 선택에 도움이 되지 않습니다. 줄바꿈을 허용하거나 차이를 드러내는 부분을 보조 줄로 표시하세요. 특히 터치 기기에서는 마우스를 올렸을 때만 나타나는 툴팁에 유일한 구분 정보를 넣지 마세요.

모바일에서는 기본 선택 컨트롤이 운영체제의 익숙한 선택 화면을 제공할 수 있습니다. 직접 구현한 검색형 선택기는 키보드와 결과 목록을 위한 공간이 더 필요할 수 있습니다. 화면 키보드 위에 들어가지도 않는 작은 데스크톱 팝업을 설계하기 전에 개발자와 실제 구현 방식을 비교하세요.

앞선 선택에 따라 달라지는 항목은 관계를 설명하세요

장비 신청서에서는 지역에 따라 배송 가능한 사무실이 달라집니다. 따라서 지역을 바꾸면 이미 선택한 사무실에도 영향을 줄 수 있습니다. 불가능한 조합을 그대로 두거나 설명 없이 값을 지우지 말고 그 관계를 드러내야 합니다.

‘리버사이드 — 브리스톨’을 선택한 뒤 해당 사무실이 없는 지역으로 바꿨다고 가정해 보세요. 새 지역은 유지하고, 맞지 않는 사무실 값은 지운 뒤 ‘선택한 지역의 사무실을 골라 주세요’처럼 짧게 안내합니다. 사용자가 계속 진행하려 할 때 해당 필드를 확인하도록 유도하세요. 배송 주소가 완성된 것처럼 성공 메시지를 표시해서는 안 됩니다.

조직에서 다른 지역의 사무실로도 배송할 수 있다면 애초에 필드를 그렇게 제한할 이유가 없습니다. 컴포넌트의 동작은 실제 업무 규칙을 따라야 합니다. 종속 드롭다운 예제를 깔끔하게 만들기 위해 존재하지 않는 지역 제한을 만들어서는 안 됩니다.

사무실 배송을 직접 수령으로 바꾸는 경우에는 또 다른 연관 관계가 생깁니다. 어떤 필드가 계속 필요한지, 다시 배송으로 돌아왔을 때 어떤 값을 유지할지, 배송 요약의 어느 부분을 갱신할지 정하세요. 제출 전에 결과를 쉬운 문장으로 요약해 직원이 선택 내용을 확인할 수 있게 합니다.

Pixso에서 양식의 선택 방식을 비교해 보세요

장비 신청서를 세 가지 컨트롤로 구성해 보세요. 배송 방법은 선택지를 드러내고, 지역은 일반 선택 필드로, 사무실은 검색형 선택기로 만듭니다. 필드 레이블, 글꼴, 간격, 보조 설명은 일관되게 유지해 동작의 차이가 불필요한 시각적 불일치로 이어지지 않게 하세요.

Pixso의 재사용 가능한 컴포넌트와 Auto Layout을 활용하면 닫힘, 펼침, 선택 완료, 오류 상태를 비교하는 동안 필드 구조를 일정하게 유지할 수 있습니다. 팝업의 선택지에도 같은 장비 신청 사례를 사용하세요. 실제 사무실 이름을 ‘옵션 1’, ‘옵션 2’로 바꾸면 줄바꿈과 이름 구분처럼 이 디자인이 해결해야 할 문제가 드러나지 않습니다.

다른 사람에게 특정 사무실로 노트북을 보내도록 한 뒤 직접 수령으로 바꾸고, 다시 사무실 배송으로 돌아오게 해 보세요. 컨트롤이 목적지를 찾는 데 도움이 되는지, 어떤 값이 유지됐는지 이해하는지 관찰합니다. 드롭다운이 세련돼 보이는지 묻는 것보다 양식이 명확한지 확인하기 좋은 과제입니다.

각 컴포넌트 옆에는 선택한 키보드 동작과 확정 규칙을 적어 두세요. 기본 선택 컨트롤, 입력 가능한 콤보박스, 작업 메뉴에 하나의 임의적인 키보드 규칙을 공통 적용해서는 안 됩니다. 프로토타입으로 의도한 결과를 보여 줄 수 있지만, 구현된 컨트롤은 브라우저, 키보드, 보조 기술로 별도 테스트해야 합니다.

실제로 사용자가 골라야 할 항목을 넣고 Pixso에서 양식 컨트롤을 비교해 보세요.