라디오 버튼, 체크박스, 스위치, 헷갈리신다면?

토글의 종류와 사용방법

Feb 3. 2025

토글의 종류

Apple의 Human Interface Guideline에서는 라디오 버튼, 체크박스, 스위치 3가지의 컴포넌트를 토글(Toggles)의 종류로 정의하고 있습니다. 토글은 사용자가 '켜기'와 '끄기'와 같은 상반된 상태 중에서 선택할 수 있게 하며, 각 상태를 표시하기 위해 두 가지의 모양을 사용합니다.

➊ Switch (스위치)

➋ Checkbox (체크박스)

➌ Radio Button (라디오 버튼)

본 글에서는 이들의 역할과 차이점은 무엇인지에 대해 집중적으로 알아보겠습니다. 이에 앞서 종류별 토글의 사용방법에 대해 먼저 살펴보겠습니다.

스위치

스위치는 특정 기능이나 설정의 켜기(On) / 끄기(Off) 상태를 즉시 전환하는 컴포넌트입니다. 한 번에 하나의 설정을 켜거나 끌 때 사용되며, 물리적인 전등 스위치처럼 동작하여 시각적으로 현재 상태를 명확히 보여줍니다.

➊ Track (트랙, 배경)

➋ Handle (핸들)

➌ Icon (아이콘, 선택사항)

트랙은 스위치의 배경 부분을 말하며, 스위치가 이동하는 경로 역할을 합니다. On / Off 상태에 따라 색상이 변경되는 경우가 많으며, 스위치가 활성화되었는지 비활성화되었는지 시각적으로 구분하는 역할을 합니다. 핸들은 사용자가 드래그하거나 클릭할 수 있는 움직이는 버튼 부분을 말하며, 체크모양 및 O, X와 같은 아이콘을 Handle에 포함시킬 수 있습니다.

아이콘은 스위치의 선택을 시각적으로 강조하는데 사용될 수 있지만, 이해에 도움이 되도록 명확해야 하며 모호하지 않아야 합니다. 달이나 편집 아이콘과 같이 모호하거나 비이진적(두 반대 성질에 의해 특징지어지는 상태가 아닌) 아이콘은 지양해야합니다.

사용자가 스위치를 켜면 경우에 따라 핸들 크기가 변경되기도 하며, 해당 동작이 즉시 적용됩니다.

스위치는 스위치가 제어하는 내용을 설명하는 레이블과 항상 쌍을 이루어야 합니다. 레이블은 짧고 직관적으로 작성해야하며, 레이블 텍스트를 스위치 내부에 추가해서는 안됩니다.

체크박스

체크박스는 하나 이상의 옵션을 선택하거나 해제할 수 있는 컴포넌트입니다. 리스트에서 여러 옵션을 선택할 수 있는 경우 스위치나 라디오 버튼 대신 체크박스를 사용합니다. (라디오 버튼은 기본적으로 그룹 내에서 하나의 옵션만 선택 가능하도록 설계됩니다. 라디오 버튼은 '이 중 하나를 선택하세요'라는 의미를 지니며, 체크박스는 '여러 개를 선택할 수 있다'라는 기대를 제공합니다.)

➊ Container (컨테이너)

➋ Icon (아이콘)

체크박스 상위의 부모 체크박스는 모든 항목을 쉽게 선택하거나 해제할 수 있도록 도와줍니다. 리스트에 여러 개의 옵션이 포함된 경우 스위치 대신 체크박스를 사용해야합니다. 체크박스는 항목들이 관련 있음을 암시하며 시각적인 공간을 덜 차지하기 때문입니다.

부모 체크박스가 체크되면, 모든 자식 체크박스도 체크됩니다.

부모 체크박스가 선택 해제되면, 모든 자식 체크박스도 선택 해제됩니다.

일부 자식 체크박스가 체크되어 있지만 모든 자식 체크박스가 체크되어 있지 않으면 부모 체크박스는 불확정 체크박스가 됩니다. 불확정 체크박스를 선택하면 모든 자식 항목이 체크됩니다.

라디오 버튼

라디오 버튼은 여러 옵션 중 단 하나의 옵션만 선택할 수 있도록 설계된 컴포넌트입니다. 그룹 내에서 단일 선택만 가능하며, 보통 여러 개의 서로 배타적인(중복 선택 불가) 옵션을 제공할 때 사용됩니다. 기존에 선택된 옵션이 있으면 새로운 선택 시 자동으로 변경됩니다.

➊ Selected Icon (선택 아이콘)

➋ Adjacent label text (인접 레이블 텍스트)

➌ Unselected Icon (미선택 아이콘)

라디오 버튼을 중첩하거나, 여러 옵션을 선택하게 하는 것은 지양합니다.

화면 공간을 절약하는 것이 중요할 때는 라디오 버튼 대신 드롭다운 메뉴를 고려할 수 있습니다. 그러나 드롭다운 메뉴는 클릭 수와 인지적인 측면에서 추가 단계가 필요합니다.

라디오 버튼은 수직으로 나열되어야 하며, 항상 하나의 옵션이 선택되어 있어야 합니다. 가로 배열의 경우 사용자가 옵션 간 구분을 직관적으로 인지하기 어려우며, 옵션 수가 많은 경우 가로 옵션이 화면에 비좁게 배치되어 가독성이 떨어질 수 있습니다. 일반적인 세로 배열의 일관성을 해치고 반응형 레이아웃에서도 문제가 될 수 있습니다.

세 줄 요약

위 내용이 길기에 언제 어떤 토글을 사용해야하는지 간략하게 정리하였습니다.

➊ Switch (스위치)

사용 : 이진 상태에서 상태 변경이 필요한 경우 사용

특징 : 명확한 두 가지 상태만 제공되며, 그 사이를 전환

예시 : 다크 모드를 켜거나 끌 때, 자동 업데이트를 켜거나 끌 때 등

➋ Checkbox (체크박스)

사용 : 여러 항목을 선택해야할 때 사용

특징 : 각 항목은 독립적이며 여러항목을 동시 선택 가능

예시 : 관심있는 카테고리 선택 등

➌ Radio Button (라디오 버튼)

사용 : 여러 옵션 중 단 하나의 선택만 필요할 때 사용

특징 : 하나의 옵션만 선택 가능하며 다른 옵션 선택 시 기존 옵션 해제, 옵션이 많은 경우 드롭다운 사용 가능

예시 : 결제 방식 선택, 성별 선택, 언어 선택 등

상태 변경 시, 스위치 대신 라디오 버튼을 사용하면 안되나요?

스위치는 이진 상태를 간단히 On/Off 전환을 하는데 사용되는 반면, 라디오 버튼 및 체크박스는 선택을 위한 요소이므로 목적이 다릅니다. 스위치 대신 라디오 버튼이나 체크박스를 사용하면 사용자가 해당 UI 요소가 단순한 이진 상태 전환을 위해 존재한다고 인지하지 못할 수 있으며, On / Off의 명확한 피드백을 제공하지 못해 혼란을 야기할 수 있습니다.

다중 선택 시, 체크박스 대신 라디오 버튼을 쓰면 안되나요?

라디오 버튼은 다중 선택을 허용하지 않도록 설계되었으며, 새 옵션 선택 시 기존에 선택한 옵션이 자동으로 해제됩니다. 사용자는 일반적으로 라디오 버튼의 형태를 보았을 때 단일 선택만 가능하다고 인지하므로 혼란을 야기할 수 있습니다.

다중 선택 시, 체크박스 대신 스위치를 쓰면 안되나요?

여러 개의 약관 동의와 같이 이진적인 항목에 대해 체크박스 대신 스위치를 써도 되지 않을까 하는 생각이 들기도 합니다. 하지만 단일 기능의 상태전환을 나타내는 스위치는 그 의미를 명확히 전달하지 못할 수 있습니다. 체크박스는 단일 기능의 상태전환이 아닌 복수 선택이라는 상황에 의미적으로 더욱 적합하며, '약관에 동의합니다'와 같은 텍스트와 결합되어 명확한 선택여부와 사용자의 의도를 명확히 전달할 수 있습니다. 또한 큰 터치 영역을 가진 스위치는 다중 선택 상황에 있어 부적절한 인터랙션을 유발할 수 있습니다.

마치며

스위치, 체크박스, 라디오 버튼과 같은 토글 요소는 중요한 옵션 선택 시 사용자가 의도하지 않은 결과를 초래하거나 혼란을 일으킬 수 있으므로, 이러한 경우에는 맥락에 맞는 적절한 컴포넌트를 신중하게 선택할 필요가 있습니다.

그러나 다크모드 선택 시 원형의 체크박스를 사용하는 iOS의 사례와 같이, 본 글의 방식과는 다르게 설계된 UI도 존재하기 때문에 이들의 사용은 더욱 어렵게 느껴지기도 합니다. (필자 역시 본 케이스의 목적은 체크 메타포의 일관성 강조일지, 심미적인 이유인지 추측만 할 뿐 정확히 알지 못합니다.)

그럼에도 전통적인 토글의 사용성을 이해하는 것은, 새로운 사용성의 검증을 위한 기본이 되므로 중요하다고 생각합니다. 이와 더불어 토글의 목적과 맥락을 명확하게 정의했는지, 의도를 명확하게 파악할 수 있는지, 시각적으로 일관성을 주는지, 기존의 패턴을 준수하는지 등 사용성에 대한 집요한 테스트가 뒷받침 되어야할 것 입니다.