체크박스, 라디오버튼, 스위치 - 서비스 기획자의 UI 요소 공부 (2)

서비스 초기 단계에서는 비교적 단순한 기능에 집중하고, 특정 기능을 구현할 수 있는가에 초점을 맞춥니다. 하지만 서비스가 고도화되고 사용자 맞춤 기능들을 추가하는 단계에서 기획자는 사용자의 의향을 효과적으로 취합하는 방법을 고민하게 됩니다. 그럴 때 필요한 것이 '선택 UI 요소(Selection Controls)'입니다.

 

서비스 사용을 위한 설정값을 사용자가 조정하거나, 서비스 제공을 위해 옵션 선택이 필요한 경우 아래 선택 UI 요소들을 어떻게 사용할지 검토해야 합니다.

 

체크박스

체크박스는 여러 개의 옵션을 한 번에 선택할 수 있는 선택 요소입니다. 체크 유무를 통해 Yes or No 두 가지 상태값만 표시할 수 있지만 여러 개의 체크박스를 함께 제공하여 압축적으로 정보를 수집할 수 있습니다. 대부분의 경우 하나의 체크 박스 선택이 다른 체크박스 선택에 영향을 주지 않는 방식이라 상호 포괄적인(mutually inclusive) 선택을 제공하는 UI라고도 합니다.

 

 

체크박스는 옵션의 선택 여부가 다음 단계에서의 액션에 필수적인 요소가 아닌 경우에 주로 사용합니다. 사용자는 여러 개의 옵션을 모두 선택할 수도 있고 그 중 일부 옵션만 선택하거나 아무 옵션도 선택하지 않을 수도 있습니다. 아무 옵션을 선택하지 않은 경우에도 다음 액션을 취하는 데 제약이 없기 때문에 사용자에게 상대적으로 많은 자유를 허용하는 선택 방식이라고 할 수 있죠.

 

 

하나의 옵션에 대한 체크 유무를 확인할 수도 있지만 체크박스는 여러 개의 옵션들을 한 벌로 묶어 제공하는 경우 더 효과적입니다. 유사한 옵션들을 묶어서 제공하면 사용자가 함께 검토할 수 있다는 장점도 있고, 하위의 모든 옵션을 '전체 선택'할 수 있도록 편의 기능을 제공할 수도 있습니다. 아래 이미지처럼 하위 옵션 중 일부만 선택한 경우에는 체크마크 대신 '-' 표시를 사용하기도 합니다.

 

 

체크박스를 응용해서 원 형태의 체크서클을 사용하는 서비스들도 종종 있습니다. 체크 서클의 경우, UI의 형태가 원일뿐 체크박스와 동일한 방식으로 사용자의 선택을 유도하는데요. 다만 이 때는 라디오 버튼을 비롯한 다른 원형 UI 요소들과 명확히 시각적으로 구분되는 것이 좋습니다.

 

카카오뱅크 모바일 앱

 

체크 박스는 아날로그 시대의 서류 양식에도 사용된 선택 요소로, 대부분의 문화권에서 관례적으로 사용되던 UI 요소이기 때문에 사용자가 직관적으로 이해할 수 있다는 장점이 있습니다. 서비스 이용을 위해 학습할 요소를 줄이고 싶다면 체크박스 사용을 추천합니다.

 

일상적으로 쓰이는 체크 박스 - pixabay

 

체크박스 - GOOGLE MATERIAL DESIGN GUIDE

체크박스 - Apple MacOS DESIGN GUIDE

 

라디오버튼

라디오 버튼은 상호 배타적인 (mutually exclusive) 선택, 즉 여러 개의 옵션 중 하나의 옵션만을 선택해야 할 때 사용하는 UI 요소입니다. 선택된 옵션이 있는 상태에서 다른 선택을 하게 되면 기존 옵션이 선택 해제되는 것이 특징이고, 때때로 선택하지 않은 옵션을 비활성화시켜서 하나만 선택할 수 있음을 강조하기도 합니다.

 

 

서비스 이용에 사용자의 선택이 필수적인 경우 주로 사용되고, 대부분 두세 개의 옵션 중 하나를 고르도록 사용됩니다. 옵션의 개수가 너무 많아지면 사용자가 서비스를 사용하는 흐름을 방해할 수도 있으니 라디오 버튼은 핵심 요소에만 사용하고, 그 외의 선택은 체크박스를 통해 해결하는 것도 좋은 방법입니다.

 

쿠팡 이츠 (Coupang Eats) > 치킨 주문 (순살 유무는 라디오버튼, 나머지는 체크박스)

 

체크박스 대신 체크 서클을 사용하는 서비스가 있는 것처럼, 라디오 버튼 역시 유사한 사용성의 다른 UI 요소로 대체되곤 합니다. 예를 들어 애플의 iOS는 라디오버튼 대신 체크마크를 사용한 UI를 추천하죠. 체크마크는 라디오버튼 대비 직관성은 떨어지지만 보다 깔끔한 인상을 줍니다. 어떤 UI 를 사용하는 것이 좋은가는 전체적인 디자인과 타깃 사용자의 IT 리터러시를 고려해 잘 판단하길 바랍니다.

 

좌(Android, 라디오버튼), 우(iOS, 체크마크)

라디오 버튼 - GOOGLE MATERIAL DESIGN GUIDE

 

스위치 (토글)

스위치 또한 On/Off 설정값을 가장 직관적으로 보여주는 UI 요소입니다. On/Off 값만 보여줄 수 있다는 점에서 체크박스와 유사하지만 스위치는 보다 동적인 사용성에 주로 사용됩니다. 체크박스가 특정 옵션에 대한 동의나 선택을 표시하는데 적합하다면, 스위치는 특정 '기능'을 실행할 때 사용하는 것이 가장 적합한 선택 요소입니다.

 

 

동적인 사용성에 적합한 만큼 스위치를 사용자가 사용하면, 서비스 내에 그 설정값이 즉각적으로 반영되는 것이 좋습니다. 하지만 설정값 변경 시 기존 데이터가 삭제되거나 사용성이 크게 변경된다면, 사용자가 유의해야 할 사항을 얼럿으로 노출해주어야 합니다.

 

좌(Android, 머티리얼 디자인 스위치), 우(iOS, 스위치)

 

스위치 - GOOGLE MATERIAL DESIGN GUIDE

스위치 - Apple iOS DESIGN GUIDE