토글 버튼과 토글 스위치 사용법

토글 버튼과 토글 스위치. 이걸 우리말로 어떻게 적절하게 표현하면 더 좋겠는데, 적당한 말이 떠오르지 않는다. 암튼, 토글 스위치는 전등 스위치처럼 On/Off 형태로 켜고 끄는 버튼을 말한다. 토글 버튼은 두 개의 버튼을 나란히 두고, 하나를 켜면(활성화), 다른 하나는 자동으로 꺼지는(비활성화) 버튼을 말한다.

이 두 개의 -유사해 보이는- UI를 각각 적절한 상황에 사용하는 구별법을 다룬 컬럼을 소개한다.

원문링크: https://uxmovement.com/mobile/stop-misusing-toggle-switches/

Stop Misusing Toggle Switches

맥락 상태 vs. 시스템 상태

원문은 Contextual states vs. System states이다. 더 적절하게 번역을 못하겠네. (난 번역하는 사람이 아니므로, 적당히 넘어갑시다.) 아래 이미지를 보면 이해가 쉽다.

토글 버튼은 현재 보고 있는 화면에 영향을 주는 옵션을 결정할 때 쓴다. 예시 이미지처럼 왕복이냐 편도냐를 선택하는 것처럼. 토글 스위치는 시스템에 영향을 주는 옵션을 결정할 때 쓴다. '다른 이가 나를 찾도록 허용'처럼 변경하면 앱 설정값을 바꾸는 때처럼.

왕복 또는 편도를 선택하면 지금 수행하는 task의 결과값만을 바꾸지만, '다른 이가 나를 찾도록 허용'하면 전체 앱의 설정이 지속적으로 바뀐다. 

많은 앱들이 토글 스위치를 잘못 사용한다. 가령 검색 필터 같은 곳에 토글 스위치를 쓴다. 필터는 검색 상태만을 바꿀 뿐, 전체 시스템을 바꾸지 않으므로 이럴 때는 토글 스위치가 아니라 체크박스를 써야 한다.

사용자들은 토글 스위치를 바꾸는 순간 그 효력이 발생되리라 기대한다. 전등 스위치를 On으로 켜는 순간, 불이 켜지듯. 검색 필터는 스위치를 바꾸는 즉시 뭔가 변하는 게 아니다. '검색' 버튼을 눌러야 실제로 뭔가 변하고 작동한다. 이럴 때는 토글 스위치를 쓰면 안된다. 즉 토글 스위치를 On/Off로 작동한 뒤, 다시 CTA 버튼을 눌러야 한다면 잘못된 UI라는 얘기다.

둘 중 하나 선택 vs. 반대 선택

원문은 Binary options vs. Opposing options. 역시 아래 이미지를 보자.

A와 B 둘 중 하나를 선택하면 다른 하나는 배척하는 UI가 Binary option이다. 계속 전등 스위치를 생각하면 된다. 전등 스위치는 둘 중 하나다. 켜거나 끄거나. 

그런데 위 예시 이미지처럼 하나의 콘텐츠를 보는 방식만 바꿔 선택하는 건 이에 해당하지 않는다. 하나를 선택한다고 다른 하나가 사라지는 게 아니니까. 

조건 Vs. 실행

원문은 States vs. Actons. 스위치는 states에, 버튼은 actons에 써야 한다. 역시 이미지를 보자.

뭔가를 다운로드하는 상황에 토글 스위치를 쓰면 안된다. 다운로드는 그 순간 한 번 실행하는 action이므로 버튼을 써야 한다. 토글 스위치는 켜거나 끄면 현재 조건값이 바뀌고, 바뀐 값이 유지되는 상황에서 쓴다.

스위치를 쓰는 세 가지 상황

1. 시스템 상태값을 바꿀 때

2. 둘 중 하나를 선택하는 옵션일 때

3. 조건을 활성화할 때