UI 공부1. 토글(Toggle)
아는 것도 다시 보는 신입 UX기획자의 공부 노트
신입 UX기획자의 공부노트
- 하루 한개씩 쌓아나가는 UI기초
첫 번째 주제는 더 나은 선택 경험을 제공하기 위해 알맞은 UI를 제공하기 위해 '토글'을 공부해보고자 합니다. 우연히, 디자인 하다가 알게 된 내용들을 한 번쯤 정리해두고 싶어서 시작하게 되었습니다. 누군가에게는 도움되길 바랍니다:)
21.02.13
토글(Toggle)
토글은 주로 선택지가 2개일 때 사용합니다. 하단의 그림이 저희가 가장 익숙할 토글 형태입니다. 스위치를 키고, 끄듯이 사용하며, 활성화 되어 있을 때 상태를 사용자가 인지할 수 있는 시각적 피드백은 필수입니다.
Toggle UI (https://www.pinterest.co.kr/pin/465137467743957227/)위의 좌/우 형태의 토글 형태 뿐만 아니라, 하단의 글 편집기에서 사용되는 각각의 아이콘도 토글입니다. On/Off 기능처럼 볼드 기능을 키고, 끄는 형태이기 때문입니다.
Worpress Editor최근에 3가지 선택지 이상에서도 토글 형태의 버튼을 사용하는 것을 본 적이 있는데, 선택지에 일정한 규칙이 있어 사용되는 것 같았습니다(ex. Off/5min/30min/60min). 확실하지는 않아 자세히 다루지는 않겠습니다.
Google Material Design Example Image (주로 보통 한 가지 설정에 대해서 On/Off 기능 사용)체크 박스&라디오 버튼과의 차이점
토글은 단일 옵션의 On/Off 라는 스위치 기능처럼 사용한다면, 체크 박스와 라디오 버튼은 여러 선택지(옵션) 중에 선택하는 것입니다.
다만, 체크 박스(Check box)는 1개 이상의 선택지를 선택 가능할 때, 라디오 버튼(Radio button)은 선택 가능한 리스트에서 1가지를 선택할 때 사용하는 컴포넌트입니다. 선택을 할 때에 토글, 체크박스, 라디오 버튼 모두 사용 가능한 대안이나, 좋은 UX를 위해서는 각각의 UI 컴포넌트를 구분하여 사용해야 합니다.
Google Material Design 'Swtiches' 중에서https://material.io/components/switches
를 참고하여 작성하였습니다.
