Select
옵션 목록에서 값을 골라 Form에 제출할 때 사용하는 컴포넌트입니다.
Field
Select를 Field 내부에서 사용하여 Select Field로 활용할 수 있습니다.
Anatomy
Select는 Trigger와 Content 두 부분으로 구성됩니다. Content 안에는 Item이 놓이고, 관련 있는 Item은 Group으로 묶습니다. Group 사이에는 Divider가 표시됩니다.
- Trigger: 현재 선택값 또는 Placeholder를 표시하고, 누르면 Content를 엽니다. Suffix Icon에는 Content가 열려 있는지를 나타내는 Chevron이 표시됩니다. Prefix Icon은 선택적으로 둘 수 있습니다.
- Content: Trigger에 이어져 표시되는 패널로, 옵션 목록을 펼쳐 보여줍니다. 너비는 Trigger에 맞춰집니다.
- Item: Content 안의 옵션 하나입니다. Item Label, Item Description, Prefix Icon으로 내용을 표현하고, Indicator로 선택 상태를 나타냅니다.
- Group: Content 안에서 관련 있는 Item을 묶는 단위입니다. Group Label로 제목을 붙일 수 있습니다.
- Divider: Group 사이에 자동으로 표시되는 구분선입니다. Item 사이에는 표시되지 않습니다.
이 문서에서 옵션은 목록에 둘 선택지 자체를, Item은 그 옵션을 Content에 그리는 UI 요소를, 선택값은 사용자가 고른 결과로 Form에 제출되는 데이터를 가리킵니다.
Properties
Size
Select는 Large, Medium 두 가지 Size를 제공합니다.
- Large: 모바일·데스크톱 어디서나 사용할 수 있습니다.
- Medium: Breakpoint
lg이상(데스크톱)에서만 사용합니다. 정밀한 선택이 가능한 마우스 입력 환경에서 Select를 더 작게 쓰고 싶을 때 고릅니다.
Responsive
Breakpoint에 따라 Select의 Size를 전환할 수 있습니다. lg 이상에서는 Medium, lg 미만에서는 Large를 사용해, 같은 Form이 모바일과 데스크톱 양쪽에서 자연스럽게 동작하도록 구성합니다.
State
Select의 상태는 Content의 열림 여부, 그리고 Trigger와 Item 각각의 State로 나뉩니다. Content가 열리면 Trigger의 Suffix Icon에 표시된 Chevron이 180° 회전합니다.
Trigger State
- Enabled: 기본 상태입니다. 사용자가 선택할 수 있습니다.
- Pressed: Trigger를 누르고 있는 동안의 상태입니다.
- Error: Form 검증 실패 시의 상태입니다. Trigger 테두리가 Critical Tone으로 강조됩니다.
- Error Pressed: Error 상태에서 Trigger를 누르고 있는 동안의 상태입니다.
- Disabled: 비활성 상태입니다. 사용자가 상호작용할 수 없습니다.
- Read Only: 값을 보여주지만 변경할 수 없는 상태입니다.
Item State
- Enabled: 기본 상태입니다.
- Pressed: Item을 누르고 있는 동안의 상태입니다.
- Selected: 현재 선택된 Item입니다. Indicator에 Checkmark가 표시됩니다.
- Disabled: 비활성 상태입니다. 선택할 수 없습니다.
Selection Mode
Select는 값을 하나만 고르는 단일 선택이 기본이며, 여러 값을 고르는 다중 선택도 지원합니다.
- 단일 선택: 선택값을 하나만 유지합니다. 이미 고른 옵션을 다시 골라도 선택이 해제되지 않고 값이 그대로 유지됩니다.
- 다중 선택: 선택값을 여러 개 유지합니다. 이미 고른 옵션을 다시 고르면 선택이 해제됩니다.
단일 선택은 선택을 해제할 수 없으므로, "없음"이 답이 될 수 있는 필드라면 그 답을 뜻하는 옵션을 목록에 두어야 합니다. 단일 선택에서 "없음"을 답으로 받기를 참고하세요.
Has Prefix Icon
Trigger와 Item 좌측에는 각각 Prefix Icon을 표시할 수 있습니다. Trigger의 Prefix Icon은 어떤 종류의 값을 고르는 자리인지 아이콘으로 함께 알리고 싶을 때 사용합니다.
Trigger에 실제로 표시되는 Prefix Icon은 선택값의 개수에 따라 정해집니다.
- 1개 선택: 선택된 Item의 Prefix Icon을 Trigger에 표시합니다. Trigger에 지정한 Prefix Icon이 있어도 덮어씁니다. 선택된 Item에 Prefix Icon이 없으면 Trigger에 지정한 Prefix Icon을 그대로 표시합니다.
- 2개 이상 선택: 다중 선택에서만 해당하며, 선택된 Item의 Prefix Icon과 무관하게 Trigger에 지정한 Prefix Icon을 표시합니다.
두 경우 모두 표시할 Prefix Icon이 정해지지 않으면 Trigger는 Prefix Icon 없이 표시됩니다.
Interaction
- Trigger를 누르면: Content가 Trigger 아래쪽에 표시됩니다. 화면 하단에 공간이 부족하면 위쪽으로 자동 전환됩니다.
- Content가 열리면: 선택된 Item이 Content 아래쪽에 있어도, 그 Item이 보이는 위치로 스크롤된 상태에서 열립니다.
- Item을 누르면: Trigger에 선택값이 표시됩니다. 단일 선택에서는 Content가 닫히고, 다중 선택에서는 열린 채로 남아 여러 값을 이어서 고를 수 있습니다.
- Content 바깥을 누르면: Content가 닫힙니다. 이미 선택되어 있던 값은 그대로 유지됩니다.
Content Height
Content의 높이는 최대 480px과 Trigger 주변에 남은 화면 공간 중 더 작은 값으로 정해지고, 옵션이 그보다 많으면 Content 안에서 스크롤됩니다. 옵션이 많은 Select는 Content 안에서 스크롤되는 상태를 가정하고 설계합니다.
Guidelines
Field의 Label과 함께 사용하기
Select는 항상 Field의 Label과 함께 사용합니다. Field의 Label이 없으면 값을 선택한 이후에 그 값이 무엇을 나타내는지 알 수 없습니다.
Trigger의 Placeholder로 Field의 Label을 대체할 수 없습니다. Placeholder는 값을 선택하면 사라지기 때문입니다.
단일 선택에서 "없음"을 답으로 받기
단일 선택 Select는 이미 고른 옵션을 다시 골라도 선택이 해제되지 않습니다. 따라서 "없음"이 하나의 답이 될 수 있는 필드라면, 그 답을 뜻하는 옵션을 목록 안에 두어야 합니다. 이런 옵션을 아래에서는 "없음" 옵션이라고 부릅니다.
필드의 성격에 따라 세 가지로 나뉩니다.
- "없음"이 답이 될 수 있는 필드: "없음" 옵션을 목록에 둡니다.
- 하나를 반드시 골라야 하는 필드: "없음" 옵션을 두지 않고, 아무것도 고르지 않은 상태로는 제출할 수 없게 합니다. (예: 전화번호의 국가 코드)
- 고르지 않은 상태가 있을 수 없는 필드: "없음" 옵션을 두지 않고 기본값을 미리 선택해 둡니다. (예: 정렬 기준)
"없음" 옵션을 고르면 값을 선택한 것으로 처리합니다. Trigger에 그 Item Label을 표시하고, 필수 필드에서도 검증을 통과시킵니다. 필수 필드에 "없음" 옵션을 두면 사용자가 질문을 건너뛴 것인지, 없다고 답한 것인지 구분할 수 있습니다.
"없음" 옵션의 Item Label은 질문의 핵심을 그대로 담아 작성합니다. 예를 들어 Field의 Label이 "선호하는 기내식"인 Select에서는 "해당 없음" 대신 "선호하는 기내식 없음"이라고 씁니다. 이 옵션은 다른 옵션과 성격이 다르므로 목록 맨 앞 또는 뒤에 별도 Group으로 둡니다.
다중 선택 사용하기
다중 선택에서는 이미 고른 옵션을 다시 고르면 해제되므로, 선택을 되돌리는 옵션을 따로 둘 필요가 없습니다. 다만 다중 선택에 걸린 제약 조건은 화면에 드러나지 않으므로 다음을 지켜 사용합니다.
- 고를 수 있는 개수를 안내하기: 옵션을 몇 개까지 고를 수 있는지 Select의 생김새만으로는 알기 어렵습니다. Field의 Helper Text에 "최대 3개 선택"처럼 명시합니다.
- 필수 여부를 표시하기: 최소 1개 이상 골라야 하는 필수 필드라면 Field의 Requirement Mark 등을 활용하여 표시합니다. 이때 아무것도 고르지 않은 상태로는 Form 제출에 실패해야 하며, Field의 Error Message를 통해 필수 응답이 필요함을 안내합니다.
- 다른 옵션의 선택 상태를 바꾸는 옵션을 두지 않기: "전체 선택"이나 나머지를 해제하는 "없음"처럼 옵션 하나가 나머지의 선택 상태를 바꾸는 동작은 예측하기 어렵습니다.
- 전체 선택이 자주 쓰이는 필드라면 Checkbox의 부모-자식 Checkbox를 활용합니다.
- '답변을 건너뛴 것'과 '없다고 답한 것'을 구분해야 한다면, 별도 입력 요소를 앞에 두는 것을 고려합니다. 예를 들어 Label이 "하자 있음"인 Checkbox를 먼저 보여주고, 체크한 경우에만 Field의 Label이 "하자 종류"인 다중 선택 Select를 노출합니다. 단일 선택에서 같은 문제를 다루는 방법은 단일 선택에서 "없음"을 답으로 받기를 참고하세요.
다중 선택 시 선택값 표시하기
Trigger는 한 줄이므로, 고른 값을 이어 붙인 길이가 Trigger 너비를 넘으면 뒤쪽 값이 말줄임됩니다. 선택값이 많아지거나 Item Label이 길어지면 몇 개를 골랐는지조차 알기 어려워지므로, 선택값을 모두 보여줄 수 있을 때와 그렇지 않을 때를 나누어 정합니다.
선택값을 모두 보여줄 수 있을 때
선택값을 구분자로 잇습니다. 구분자와 접속사는 언어마다 다르므로 문자를 직접 지정하지 말고 CLDR의 목록 표기 규칙(List Patterns)을 따릅니다.
Trigger는 무엇을 골랐는지 보여주는 자리입니다. 고른 값들이 서로 어떤 관계로 쓰이는지는 필드마다 다르므로, 그 관계에 따라 구분자만 쓸지 접속사까지 쓸지 정합니다.
- 구분자만 쓰기: 값이 그대로 제출되는 Form 필드는 값 사이에 결합 관계가 없으므로 구분자만으로 충분합니다.
- 접속사로 관계 드러내기: 고른 값이 조건으로 결합되어 결과가 달라진다면, 접속사를 써서 값들이 어떻게 결합되는지 드러냅니다.
| 언어 | 둘 중 하나만 해당해도 됨 | 둘 다 해당해야 함 |
|---|---|---|
| 한국어 | 빨간색 또는 파란색 | 빨간색 및 파란색 |
| 영어 | Red or Blue | Red and Blue |
접속사가 결합 방식을 드러내는 정도는 언어마다 다릅니다. 위 두 경우에 같은 접속사를 쓰거나, 접속사를 아예 쓰지 않는 언어도 있습니다. 따라서 접속사만으로 결합 방식을 전달하지 말고, 값들이 어떻게 결합되는지를 Field의 Helper Text에 함께 적습니다.
선택값을 모두 보여줄 수 없을 때
선택값을 개수로 요약합니다. 두 가지 형태 중 목록의 성격에 맞는 쪽을 고릅니다.
- 대표 값과 나머지 개수: 가장 먼저 고른 값을 남기고, 그 값을 뺀 나머지 개수를 표시합니다. 세 개를 골라 맨 처음 고른 하나를 보여준다면 표시하는 숫자는 2입니다. 무엇을 골랐는지 단서가 남으므로 값마다 뜻이 뚜렷이 다른 목록에 적합합니다.
- 전체 개수: 값을 보여주지 않고 고른 전체 개수를 표시합니다. 값들이 서로 동등해서 하나만 보여주는 것이 도움이 되지 않는 목록이나, 너비가 좁아 대표 값을 보여주기 어려운 목록에 적합합니다.
| 언어 | 대표 값과 나머지 개수 | 전체 개수 |
|---|---|---|
| 한국어 | 강남구 외 2곳 | 3곳 선택됨 |
| 영어 | Gangnam-gu and 2 others | 3 selected |
이 요약 형태는 CLDR 목록 표기 규칙이 다루는 범위가 아닙니다.
개수 표기는 언어별 문법을 따릅니다. 한국어는 세는 대상에 따라 단위가 달라지고, 영어는 개수에 따라 단수와 복수에 다른 단어를 사용할 수 있습니다. International Design 문서의 "숫자와 단위의 순서"를 참고하세요.
- 한국어: "외"는 앞의 값을 뺀 개수를, "등"은 앞의 값을 포함한 전체 개수를 뜻합니다. 세 곳을 골랐을 때 "강남구 등 2곳"이라고 쓰면 전체가 두 곳이라는 뜻이 되어 잘못된 정보가 됩니다.
- 영어: "+2"처럼 기호로 줄이는 표기를 사용할 수 있으나, 모든 언어에 적용 가능한 것은 아닙니다.
옵션 순서 정하기
목록의 순서는 사용자가 옵션을 훑는 흐름에 맞춥니다. 사용 빈도, 크기, 시간처럼 그 목록이 이미 가지고 있는 기준 하나를 골라 일관되게 정렬합니다.
나머지와 성격이나 정렬 기준이 다른 옵션은 Group으로 묶어 경계를 드러냅니다.
Item Label 작성하기
Item Label은 사용자가 한눈에 구분할 수 있도록 명사형으로 작성하고, Item 간에 일관된 어휘·길이·톤을 유지합니다.
Item Label은 Content 안에서는 잘리지 않고 줄바꿈되지만, Trigger에서는 한 줄로 표시되어 너비를 넘으면 말줄임됩니다. Content에서는 다 보이던 Item Label이 Trigger에서는 잘릴 수 있으므로, Trigger 너비에 의도한 Item Label이 말줄임 없이 표시되는지 확인합니다.
Item Label이 한 줄에 담기지 않으면 Item Label 자체를 줄이는 것을 먼저 고려합니다. 부연 설명이 필요하면 Item Description에 적습니다. Item Description은 Trigger에 표시되지 않습니다.
Placeholder 작성하기
선택값이 없을 때 Trigger에 표시되는 Placeholder는 어떤 종류의 값을 고르는지 한눈에 알 수 있도록 작성합니다.
Field의 Label이 있는 경우, Placeholder에 그 Label을 그대로 반복하지 않습니다.
선택 컴포넌트 고르기
옵션마다 필요한 정보의 양, 옵션 개수, Item Label 길이에 따라 컴포넌트를 고릅니다. 아래 순서대로 판단합니다.
- 옵션마다 이미지, 여러 줄 설명, Footer 레이아웃처럼 풍부한 정보가 필요하면 Select Box를 사용합니다. 카드 형태로 항상 펼쳐져 있어 옵션을 나란히 비교하며 고를 수 있습니다.
- 옵션이 5개 이상이거나, 한 줄짜리 Item Description으로 충분하면 Select를 사용합니다. 목록을 접어 두어 공간을 절약할 수 있으며, Group으로 묶어 구조화할 수 있습니다.
- 옵션이 2~4개이고 Item Description이 필요 없으면 Item Label 길이로 나눕니다.
- 짧으면 Chip을 사용합니다. 가로로 나열해 가볍게 고를 수 있습니다.
- 길면 Radio Group 또는 Checkbox를 사용합니다. 모든 옵션이 한눈에 보여 선택이 빠릅니다. 셋 사이의 자세한 기준은 Radio vs. Checkbox vs. Chip Group을 참고하세요.
옵션이 매우 많아 스크롤만으로 탐색하기 어렵다면 검색형 선택(Combobox) 패턴을 고려합니다. SEED는 아직 Combobox를 제공하지 않습니다.
Select vs. Menu
Menu는 동작을 실행하는 명령 목록이고, Select는 Form에 제출할 값을 고르는 입력 요소입니다.
| Select | Menu | |
|---|---|---|
| 목적 | Form에 제출할 값 고르기 | 동작 실행하기 |
| 반영 시점 | 고른 뒤 저장 또는 제출해야 반영됨 | Item을 누르면 즉시 실행됨 |
| Field 조합 | Field와 함께 Select Field로 사용 | Field 조합 없음 |
Specification
Select
base
size=large
- 뷰포트 너비와 관계없이 사용할 수 있습니다.
size=medium
- Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
Select Trigger
base
size=large
- 뷰포트 너비와 관계없이 사용할 수 있습니다.
size=medium
- Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
Select Item
base
size=large
- 뷰포트 너비와 관계없이 사용할 수 있습니다.
size=medium
- Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
Last updated on