UI cheat sheet: selectors

Radio Buttons, Checkboxes, Toggles 은 다르다

최근에는 많은 앱과 웹 사이트에서 라디오 버튼, 체크 박스, 토글이 거의 같은 의미로 사용되는 것을 알아 차 렸다. 라디오 버튼은 체크 박스가 아니며 체크 박스는 토글이 아니고 토글은 라디오 버튼이 아니다. 이러한 각 요소는 고유 한 용도로 사용된다.

01

Radio Buttons (라디오 버튼)

라디오 버튼은 사용자가 항목 목록에서 하나의 옵션만 선택할 수 있을 때 사용해야 한다. 버튼은 원형이 어야 하며 선택 시 채워져야 한다. 라디오 버튼의 모양은 체크박스와 구별되게 디자인하는 것이 중요하다.

Radio Buttons

02

Checkboxes (체크 박스)

사용자가 항목 목록에서 옵션을 선택하지 않거나 하나 또는 여러 개 선택할 수 있는 경우 체크박스를 사용해야 한다. 버튼은 정사각형이어야 하며 선택 시 체크 표시 또는 X가 있어야 한다.

Checkboxes

왼: Radio Buttons / 오: Checkboxes

라디오 버튼과 체크박스는 몇 가지 주요 차이점을 제외하고는 매우 유사하다. 주요 차이점은 라디오 버튼을 사용하면 하나의 항목만 선택할 수 있는 반면 체크박스를 사용하면 한 개 이상의 항목을 선택할 수 있다는 것이다.

Multi-level Checkboxes (다단계 체크 박스)

Multi-level Checkboxes

Accordion menu, Toggle menu

제목을 클릭하면 내용이 펼쳐지고 다시 클릭하면 축소되는 기능을 아코디언(혹은 토글)이라고 한다.

이러한 기능은 사이드바 메뉴, FAQ 등 다양하게 응용이 가능한다. 또한 아코디언(토글)은 한 번에 한 개의 항목을 펼치는 것을 지칭한다.

Segmented control

세그먼트 컨트롤은 각각 상호 배타적인 버튼으로 작동하는 두 개 이상의 세그먼트로 구성된 선형 집합이다. 컨트롤 내에서 모든 세그먼트의 너비는 동일하다. 버튼과 마찬가지로 세그먼트에는 텍스트 또는 이미지가 포함될 수 있다. 세그먼트 컨트롤은 종종 다른 보기를 표시하는 데 사용되기도 한다. 예를 들어 지도에서 세그먼트 컨트롤을 사용하면 지도, 대중교통, 위성으로 전환할 수 있다.

Segmented Controls - Controls - iOS - Human Interface Guidelines - Apple Developer

Label

선택기 레이블(selector labels)에는 일관성 유지라는 하나의 엄격한 규칙이 있다.

모든 선택기 레이블(label)의 대소 문자가 동일한 지 확인한다. (문장 대소 문자, 제목 대소 문자 등)

모든 항목이 마침표로 끝나는지 확인해야 한다.

모든 항목이 문장, 구문 또는 단어인지 확인해야 한다. 어떤 옵션은 문장이고 다른 옵션은 문장으로 이뤄지게 하지 않도록 주의해야 한다.

03

Toggles (토글)

토글은 무언가를 켜거나 끄거나 활동을 시작하거나 중지하는 것과 같은 작업을 나타내는 데 사용해야 한다. 어떤 상태가 켜져 있고 어떤 상태가 꺼져 있는지 명확해야 한다.

토글은 설정에서 가장 자주 사용되며 사용자가 예 / 아니오 옵션 중에서 선택할 수 있다.

모바일에서 토글 자체는 일반적으로 맨 오른쪽에 있고 레이블은 맨 왼쪽에 있습니다. 이것은 오른쪽 엄지 손가락이 옵션을 쉽게 변경할 수 있도록 하기 위한 것이다.

Toggles

04

Extra Tips

레디오 버튼의 항목 옵션 목록을 세로로 표시하는 것이 좋지만 가로로 정렬하고 싶다면 목록 항목 간의 여백에 세심한 주의를 기울여야 한다. 자칫 가로로 정렬된 옵션을 사용자가 선택할 시 구분하기 어려울 수 있기 때문이다.

위: 목록 항목 간격의 잘못된 예 / 아래: 목록 항목 간격의 좋은 예

체크박스의 경우 선택하지 않은 상태와 선택했을 때 명확하게 알 수 있어야 한다. 여기서 주의할 점은 선택하지 않은 상태가 비활성화된 것처럼 보이지 않도록 주의해야 한다.

왼: 선택되지 않은 상태의 잘못된 예, 너무 어두워서 읽기 어렵고 비활성화된 것처럼 보인다. / 오: 선택되지 않은 상태의 좋은 예

사용자가 선택 시 라디오 버튼, 체크박스만 클릭할 수 있는 것이 아닌 전체 목록 옵션을 클릭할 수 있게 만들어야 한다. 이렇게 하면 사용자가 원하는 옵션을 더 쉽게 선택할 수 있다. 모든 사용자들이 마우스로 정확하게 버튼을 클릭하지 않는다.

Radio Buttons, Checkboxes, and Toggles, Oh My!

UI cheat sheet: radio buttons, checkboxes, and other selectors