체크박스 vs 토글스위치 vs 토글토큰
체크박스와 토글스위치의 7 사례 및 토글 토큰에 대하여
(출처 : [Checkbox vs Toggle Switch]와 [Why Toggle Tokens Are a Better Alternative to Checkboxes] 기사를 번역 및 가공한 콘텐츠입니다.)
체크박스 vs 토글스위치
입력 폼은 사용자의 입력을 쉽게 수집하기 위해 몇 가지 컨트롤을 제공합니다.
입력 폼을 디자인하는 동안, 올바른 위치에 컴포넌트를 배치하고, 컨트롤 컴포넌트를 제대로 사용하는 것은 어려운 일입니다.
체크박스는 '선택되지 않음', '선택' 및 '중간'의 세 가지 상태가 있습니다.
마지막 '중간'인 상태는 상위 항목과 그에 따른 하위 항목의 그룹이 있을 때 하위 항목에서 체크박스가 선택된 상태와 선택되지 않은 상태가 혼재해 있을 때 사용됩니다.
토글스위치는 조명의 스위치처럼 켜거나 끌 수 있는 물리적 스위치와 비슷합니다.
토글스위치는 '선택'과 '실행'의 두 가지 상태가 있습니다.
반면에 체크박스는 옵션을 '선택'하는 것이며 토글스위치와는 다른 제어가 필요합니다.
체크 박스와 토글스위치 제어 사이를 결정할 때는 기능 대신 컨텍스트에 초점을 두는 것이 좋습니다.
아래는 입력 폼을 디자인하면서 이 두 컨트롤 사이를 결정하기 위한 가이드라인과 사용 사례를 몇 가지 들어봤습니다.
사례 1. 즉각적으로 대응해야 할 때
다음과 같은 경우 토글스위치를 사용하면 좋습니다.
- 적용된 설정에 대한 즉각적인 응답이 필요할 경우
- '켜기 / 끄기' 또는 '표시하기 / 숨기기' 기능일 경우
- 사용자의 검토나 확인이 필요 없는 즉각적인 조치를 수행할 경우 (입력 폼의 최종 제출이 필요 없음)
즉각적인 응답이 필요한 옵션은 토글스위치를 사용하는 것이 가장 좋습니다.사례 2. 설정에 대한 확인
다음과 같은 경우 체크박스를 사용하면 좋습니다.
- 설정을 저장이나 제출하기 전에 사용자가 확인하고 검토해야 할 때
- 체크박스가 반영된 결과가 제출, 확인, 다음, 적용과 같은 액션을 필요로 할 때
- 변경 사항을 적용하려면 추가 단계를 수행해야 할 때
체크박스는 설정을 적용하기 위해 추가적인 작업을 필요로 합니다.
사례 3. 다중 선택
다음과 같은 경우 체크박스를 사용하면 좋습니다.
- 여러 옵션을 사용할 수 있으며 사용자가 하나 이상의 옵션을 선택해야 할 때
- 여러 토글을 사용하면 각 토글 버튼을 클릭 후 결과가 표시되기를 기다려야 합니다.
리스트에서 여러 옵션을 선택하게 하려면 체크박스를 사용하는 것이 좋습니다.사례 4. 중간 상태
다음과 같은 경우 체크박스를 사용하면 좋습니다.
- 여러 하위 옵션이 상위 옵션 아래에 그룹화된 경우 중간 선택 상태가 필요합니다.
- 중간 상태는 목록에서 여러 하위 옵션(전체 선택 아님)이 선택되었음을 나타냅니다.
중간 상태는 체크박스일 경우에 잘 표시됩니다.사례 5. 명확한 시각적 상태
다음과 같은 경우 체크박스를 사용하면 좋습니다.
- 토글스위치의 켜짐 / 꺼짐 상태는 상태를 나타내는지 또는 액션을 컨트롤하는 것인지 이해하기 어렵습니다.
(하단 예시에서 자동 입력 폼이 활성화된 것인지, 활성화되는 기능을 사용함을 물어보는지)
- 명확한 선택 또는 선택되지 않은 상태를 제공할 경우
때때로 토글스위치는 상태인지 액션을 컨트롤하는 것인지 명확하게 알 수 없습니다.사례 6. 여러 항목
다음과 같은 경우 체크박스를 사용하면 좋습니다.
- 사용자가 항목 리스트에서 옵션을 선택해야 할 경우
목록에서 관련 항목을 선택하게 하려면 체크박스를 사용하는 것이 좋습니다.다음과 같은 경우 토글스위치를 사용하면 좋습니다.
- 관련 항목들이 아니라 독립적인 기능이나 동작일 경우, 세팅을 변경할 경우
독립 항목 선택을 위해 토글스위치를 사용합니다.
사례 7. 단일 항목
다음과 같은 경우 체크박스를 사용하면 좋습니다.
- 단일 선택지인 예 / 아니오 선택만 제공할 때
- 예 또는 아니오 하나의 옵션만 나타내 주려 하며 그 의미가 분명할 때
단일 예 / 아니오 옵션을 체크박스로 사용할 수 있습니다.다음과 같은 경우 토글스위치를 사용하면 좋습니다.
- 옵션 값이 하나만 표시되며 온 / 오프 유형의 결정에 온과 오프 두 가지 옵션을 모두 제공하려고 할 때
체크박스 vs 토글토큰
리스트에서 옵션을 선택하는 디자인을 만들기 위해 대부분의 디자이너는 체크박스를 사용합니다.
그러나 체크박스의 긴 목록은 사용자에게 위협적인 것처럼 보이며 폼을 채우는 것을 포기하게 할 수 있습니다.
뿐만 아니라 체크박스는 공간을 많이 차지하고 작은 클릭 영역을 제공하며 시각적 요소의 수를 늘리기 때문에 효율적으로 사용하기 쉽지 않습니다.
옵션 선택을 위한 더 좋은 구성 요소는 토글토큰입니다.
토글토큰은 화면 공간을 절약하므로 더 많은 컨텐츠를 수용할 수 있으며 사용자는 체크박스만큼 많이 스크롤할 필요가 없습니다. 체크박스에는 세로 스태킹이 필요하지만 토글토큰을 사용하면 세로 및 가로 스태킹이 모두 가능합니다. 이것은 사용자에게 덜 위협적인 컴팩트 한 화면 배치를 만듭니다.
간소한 화면을 위해 체크박스를 여러 열로 정렬할 수도 있습니다.
하지만 체크박스와 텍스트 레이블의 너비가 여럿 결합된 형태는 모바일에 적합하지 않습니다.
모바일뿐 아니라 데스크탑에서도 체크박스를 사용한다면 넓은 공간이 체크박스에 할애되기 때문에 이상적이지 않습니다.
토글토큰이 공간을 덜 차지한다는 장점 외에도 토글토큰에는 레이블이나 체크박스, 체크 라벨이 필요하지 않아서 결과적으로 화면에 사용자가 시각적으로 집중할 수 있게 됩니다.
서로 다른 요소 간의 시각적 소음을 최소화하면 옵션에 집중할 수 있습니다.
또한 체크박스는 선택 영역이 토글토큰보다 상대적으로 작아서 문제가 발생할 수 있습니다.
토글토큰은 더 큰 선택영역을 제공하므로 사용자가 잘못 선택할 가능성을 줄이면서 선택할 수 있고, 그에 따른 반응도 체크에서만 출력되는 체크박스와 다르게 전체 영역의 컬러로 더 정확하게 피드백을 줄 수 있습니다.
이러한 모든 이점으로 인해 사용자들이 옵션을 선택할 때 토글토큰은 체크박스보다 더 좋은 사용성 경험을 이끌어 낼 수 있습니다.
그러나 체크박스가 더 나은 경우 예외가 있습니다.
특히나 옵션에 긴 텍스트 레이블이 여러 줄로 묶인 경우라면 체크박스를 사용해야 합니다.
체크박스 레이블은 가로로 제한되지 않으며 더 많은 텍스트를 위한 충분한 공간을 허용합니다.
반면 토글토큰은 모양에 의해 제한되며 옵션 레이블이 단일 텍스트 행인 경우에만 사용해야 합니다.
“토글토큰”이라는 이름은 “체크박스”라는 이름만큼 직관적입니다.
이는 토큰 모양과 토글 기능에서 비롯된 것입니다.
다음에 옵션 선택에 체크박스를 사용할 생각이라면 토글토큰을 대신 고려해보세요.
화면 공간을 절약하고 인터페이스를 단순화하며 사용자가 입력 폼을 포기하지 못하게 합니다.
감사합니다.
