Dropdown

1. 배경 덮개

뒤쪽 화면을 가려 바텀시트의 주목도를 높일 때 사용합니다.
배경 덮개가 나타난 뒤쪽 화면은 바텀시트가 사라지기 전까지 조작할 수 없습니다.

2. 컨테이너

배경 덮개를 제외한 바텀시트의 모든 구성 요소를 담은 영역입니다.
컨테이너 영역을 위 혹은 아래로 밀어 바텀시트를 펼치거나 접을 수 있습니다. 컨테이너 바깥 영역을 누르면 바텀시트가 빠르게 사라집니다. 

3. 핸들

바텀시트를 빠르게 제어하기 위해 누르거나 스와이프할 수 있는 영역입니다.
바텀시트가 펼칠 수 있을 때는 위 방향 ∧ 아이콘을, 접거나 완전히 닫을 수 있을 때는 아래 방향 ∨ 아이콘을 표시합니다.

조작할 수 있는 방향이 명확하지 않은 손잡이 사용

4. 타이틀

바텀시트에 담긴 콘텐츠의 목적이나 기능을 글로 안내합니다.

5. 닫기 버튼

바텀시트를 빠르게 닫을 수 있는 버튼입니다. 타이틀 오른쪽 끝에 배치됩니다. 단, 바텀시트에 핸들이 있을 때는 닫기 버튼을 노출하지 않습니다.

핸들과 닫기 버튼을 동시에 노출

또한, 바텀시트로 고객이 꼭 진행해야 하는 중요한 작업이나 바텀시트를 닫으면  다시 실행하기 어려운 작업을 안내할 때는 닫기 버튼을 생략할 수 있습니다.

다음 단계로 넘어가기 위해 반드시 확인해야 하는 내용을 핸들이나 닫기 버튼이 없는 바텀시트로 노출

6. 디바이더

본문 영역이 길어져 스크롤해야 할 때 타이틀과 본문의 경계를 시각적으로 구분하기 위해 활용할 수 있습니다.
본문이 길지 않거나 타이틀과 본문이 명확히 구분되어 보일 때는 가급적 디바이더를 쓰지 않습니다.

7. 버튼

바텀시트 내용과 관련된 주요 행동을 유도합니다.

사이즈

높이에 따라 S 38, M 44, L 56 총 세 단계로 나뉩니다. 이 중 S 38을 기본 사이즈로 활용합니다.

구조

1. 컨테이너 2. 아이콘 3. 레이블 4. 화살표 아이콘

1. 컨테이너

드롭다운의 모든 구성 요소를 담은 영역입니다.

2. 아이콘

선택할 수 있는 옵션의 특징을 더 이해하기 쉽게 안내할 때 사용합니다. 레이블 왼쪽에 배치합니다.

3. 레이블

드롭다운의 특성이나 옵션을 짧고 간결한 글로 설명합니다. 레이블이 드롭다운 너비보다 길 때는 자동으로 말줄임 처리됩니다.

고객이 옵션을 선택하기 전

선택할 수 있는 옵션 또는 기본값으로 지정된 옵션의 성격을 쉽게 예측할 수 있도록 명확한 레이블을 사용합니다.

어떤 옵션을 선택할 수 있는지 쉽게 예측할 수 있는 레이블 사용

어떤 옵션을 선택할 수 있는지 직관적으로 예측하기 어려운 레이블 사용 사용

고객이 옵션을 선택한 후

여러 옵션 중 하나가 선택되었다는 것을 쉽게 알 수 있도록 해당 옵션의 레이블을 노출합니다.

4. 화살표 아이콘

드롭다운을 리스트를 펼쳐 다양한 옵션을 볼 수 있음을 아래 방향 화살표 아이콘으로 표현합니다. 레이블 오른쪽 끝에 배치합니다.
S 사이즈 드롭다운은 필 아이콘을, M/L 사이즈 드롭다운은 아웃라인 아이콘을 사용합니다.

상태

드롭다운의 사용 가능 여부를 명확히 구분하여 표현합니다.

1. 보통 상태

드롭다운으로 옵션을 선택할 수 있거나, 하나의 옵션이 선택된 상태입니다.

2. 비활성 상태

드롭다운을 사용할 수 없는 상태입니다.

구조

높이에 따라 S 38, M 44, L 56 총 세 단계로 나뉩니다. 이 중 S 38을 기본 사이즈로 활용합니다.

1. 바텀시트 2. 옵션 3. 체크 아이콘

1. 바텀시트

드롭다운 옵션 리스트의 모든 구성 요소를 담은 영역입니다. 노출되는 옵션 개수에 맞춰 높이를 설정합니다.

바텀시트의 높이를 선택할 수 있는 옵션 개수에 맞게 설정

바텀시트의 높이를 필요 이상으로 높게 설정

옵션이 7개보다 많을 때는 바텀시트의 높이가 고정되며 스크롤 기능이 활성화됩니다.
이때, 화면을 스크롤 하면 선택할 수 있는 옵션이 더 있다는 것을 예상하도록 마지막 옵션은 일부만 노출합니다.

스크롤을 하면 더 많은 옵션이 노출됨을 알 수 있도록 마지막 옵션의 일부만 노출

2. 옵션

선택할 수 있는 모든 옵션을 표시합니다. 옵션의 높이는 Android DP 기준 M48 / L56 총 두 단계로 나누어집니다.
각 옵션의 레이블은 한 줄로 노출되며, 바텀시트 너비보다 길 때는 자동으로 말줄임 처리됩니다.

모든 옵션은 서로 동등한 위계로 구성해야 하며 일부 옵션을 그룹화하거나 강조하지 않도록 유의합니다.

동등한 위계로 구성하지 않고 상하위 개념으로 그룹화한 옵션을 제시

상태

옵션의 선택 가능 여부나 고객의 행동에 따른 옵션의 선택 상태를 표현합니다.

1. 보통 상태

옵션이 선택되기 전 상태입니다.

2. 선택 상태

옵션이 선택된 상태입니다.

3. 비활성 상태

옵션을 일시적으로 선택할 수 없는 상태입니다.

동작

드롭다운을 누르면 배경 덮개와 함께 드롭다운 옵션 리스트가 나타납니다.
하나의 옵션이 선택되면 드롭다운 옵션 리스트가 사라지고, 해당 옵션의 레이블이 드롭다운에 노출됩니다.

맥락에 따른 적절한 컴포넌트 활용

단일 선택이 가능한 옵션을 제시할 때는 드롭다운과 라디오 버튼을 활용할 수 있습니다.
이중, 드롭다운은 특히 복잡성이 높은 화면이나, 팝업과 같이 공간적인 제약이 많은 상황에서 다양한 옵션을 제시할 때 활용하기 용이합니다.

고객이 자주 사용하는 옵션이나 기본적으로 권장하는 옵션이 있을 때도 드롭다운을 활용하면 고객의 선택 과정을 간소화하고 의사결정이 빨라지도록 도울 수 있습니다.

상품의 수량을 수정할 수 있도록 옵션을 제시할 때 드롭다운을 활용하면 고객이 선택할 수 있는 최소/최댓값을 더 쉽게 파악할 수 있고 옵션도 더 빠르게 수정할 수 있습니다.

단, 고객에게 익숙하지 않은 다양한 옵션을 제시해야 할 때는 옵션을 한눈에 비교하고 선택할 수 있도록 라디오 버튼을 활용하는 것이 좋습니다.

고객이 직접 입력할 수 있는 옵션을 제공할 때

제시된 옵션 중에 고객이 원하는 항목이 없거나, 선택한 옵션과 관련한 정보를 작성해야 할 때, 드롭다운 근처에 입력 필드를 함께 노출하면 고객이 원하는 정보를 직접 입력할 수 있습니다.