토글

설정 화면은 오랫동안 네모 칸을 체크하고 맨 아래 저장 버튼을 누르는 방식이었습니다. 문서를 편집하는 화면에서는 저장 버튼이 익숙한 장치인데, 설정처럼 값 하나를 바꾸고 나가는 화면에서는 그 버튼이 한 단계 더 남은 숙제로 작동했습니다.

페이지덱 알림 설정이 그랬습니다. 네모 칸 여섯 개와 저장 버튼이 있었고, 민서가 기록을 뒤져 보니 설정을 건드린 방문 가운데 23퍼센트가 저장을 누르지 않은 채 화면을 떠났습니다. 그중 일부는 다음 주에 문의를 보냈습니다. 알림을 껐는데 왜 계속 오느냐는 내용이었습니다. 사용자는 바꿨다고 기억하고 제품은 안 바뀐 상태였습니다. 저장하지 않았다는 사실이 화면에 드러나지도 않았습니다.

토글은 벽에 달린 전기 스위치의 모양을 화면으로 옮겨 온 요소입니다. 스위치는 올리는 동작과 불이 켜지는 결과가 나뉘어 있지 않습니다. 조작이 곧 반영이라는 그 성질을 빌려 와서, 저장 버튼이라는 한 단계를 없앤 것이 이 요소가 한 일입니다.

누르면 두 상태 사이를 곧바로 오가고 그 결과가 그 자리에서 저장됩니다. 정해 둘 것은 일곱 가지입니다.

1. 상태는 둘뿐입니다. 절반만 켜진 상태나 아직 정하지 않은 상태를 두지 않습니다. 셋 이상이 필요하다는 판단이 나오면 이 요소가 아닙니다. 켜는 중간 단계가 필요한 값도 여기 담기지 않습니다.
2. 지금 어느 상태인지를 모양으로 보여 줍니다. 손잡이의 위치와 색을 같이 씁니다. 색만으로 구분하면 색을 구별하기 어려운 사용자에게는 두 상태가 같아 보입니다.
3. 라벨은 상태가 아니라 대상을 적습니다. 알림 받기라고 써 두고 스위치가 켜짐과 꺼짐을 나타내는 식입니다. 알림 끄기라고 쓰면 켜진 스위치가 끈 상태인지 켠 상태인지 알 수 없습니다.
4. 누른 즉시 화면에 반영하고 서버에도 저장합니다. 사용자는 이 요소를 본 순간부터 저장 버튼을 찾지 않으므로, 저장이 안 되면 바꿨다고 믿는 쪽과 실제 설정이 갈립니다.
5. 저장에 시간이 걸리면 손잡이를 먼저 옮기고 진행 표시를 겹칩니다. 실패하면 손잡이를 원래 자리로 되돌리고 왜 안 됐는지 알립니다. 되돌리지 않으면 화면만 켜진 상태로 남습니다.
6. 손잡이가 움직이는 짧은 애니메이션을 둡니다. 0.2초 안쪽의 이런 마이크로 인터랙션이 상태가 방금 바뀌었다는 것을 알려 줍니다. 움직임 없이 색만 바뀌면 눌렸는지 아닌지가 불분명합니다.
7. 키보드와 스크린 리더로도 다룰 수 있게 합니다. 초점을 받고 스페이스로 켜지게 만들고, 현재 상태를 ARIA가 정한 방식으로 알려야 눈으로 보지 않는 사용자도 지금 켜져 있는지를 알 수 있습니다.

저장 버튼이 없는 화면에서 씁니다. 알림을 받을지, 문서를 링크로 공개할지, 화면을 어두운 색으로 볼지처럼 값 하나를 바꾸고 바로 나가는 설정이 대표적입니다. 잘못 눌렀어도 한 번 더 눌러 되돌릴 수 있다는 점이 즉시 반영을 감당하게 해 줍니다.

맞지 않는 자리는 셋입니다.

1. 제출 버튼이 있는 입력 양식 안. 이때는 체크박스를 씁니다. 양식은 제출을 눌러야 값이 넘어가는 구조라 즉시 반영이라는 전제가 깨집니다. 약관에 동의하는 칸이 체크박스인 이유도 같습니다.
2. 고를 것이 셋 이상일 때. 둘 중 하나가 아니면 라디오 버튼으로 펼치거나 셀렉트로 접습니다. 토글 세 개를 나란히 두고 하나만 켜지게 만드는 방식은 규칙이 화면에 드러나지 않아 사용자가 규칙을 눌러 보며 알아내야 합니다.
3. 되돌리기 어려운 동작. 계정을 지우거나 결제를 해지하는 일은 한 번 누름으로 처리하지 않습니다. 확인 단계를 따로 두고, 토글은 되돌릴 수 있는 설정에만 씁니다.

여러 개를 한 화면에 둘 때는 한 줄에 하나씩 놓고 왼쪽에 라벨, 오른쪽에 스위치로 자리를 고정합니다. 여덟 개를 넘어가면 묶음 제목으로 나눕니다. 스위치가 스무 개 깔린 화면은 무엇을 켜 뒀는지 사용자가 세어 보게 만듭니다. 라벨과 스위치 사이가 멀어지면 어느 라벨의 스위치인지 눈으로 잇기 어려워집니다.

"여긴 토글로 갑시다. 저장 버튼 없이 바로 반영되는 화면이에요."

즉시 반영 여부가 이 요소를 고르는 기준이라는 뜻입니다.

"라벨이 알림 끄기면 켜진 스위치가 끈 건지 켠 건지 알 수 없어요. 대상으로 바꿔 주세요."

부정형 라벨과 상태 표시가 겹치면 뜻이 뒤집힌다는 지적입니다.

"저장에 2초 걸리니까 손잡이를 먼저 옮기고, 실패하면 되돌립시다."

화면과 서버가 어긋나는 구간을 어떻게 다룰지 정하는 말입니다.

민서가 알림 설정의 네모 칸 여섯 개를 스위치로 바꾸고 저장 버튼을 없앴습니다. 저장을 누르지 않고 떠나던 23퍼센트는 그대로 사라졌습니다. 바꾸는 순간 반영되니 저장하지 않은 상태라는 것이 아예 생기지 않았기 때문입니다.

대신 새 문제가 하나 나왔습니다. 서버 저장이 실패한 경우에도 화면의 스위치는 켜진 채로 남아 있었습니다. 사용자는 껐다고 믿는데 알림은 계속 나갔고, 이전 방식보다 알아차리기 더 어려웠습니다. 민서와 태오는 실패하면 손잡이를 원래 자리로 되돌리고 그 이유를 짧게 띄우도록 고쳤습니다. 즉시 반영이라는 약속은 저장이 실패했을 때 무엇을 보여 줄지까지 정해 두지 않으면 지켜지지 않습니다.

체크박스의 보기 좋은 버전이라고 읽는 경우가 가장 많습니다. 둘 다 켜고 끄는 값을 받으니 모양만 다른 것처럼 보이기 때문입니다. 갈리는 지점은 저장 시점입니다. 제출 버튼이 있는 양식 안에 스위치를 넣으면 사용자는 이미 저장됐다고 생각하고 제출을 누르지 않습니다. 화면을 다듬으려고 양식 안의 네모 칸을 스위치로 바꾸는 작업이 제출 누락을 늘리는 결과로 끝나는 일이 그렇게 생깁니다.

스위치가 켜져 있으면 사용자가 켠 것이라고 읽는 것도 흔합니다. 켜짐이 사용자의 선택처럼 보이는 탓입니다. 그런데 기본값으로 켜 둔 항목은 아무도 고른 적이 없는 상태입니다. 마케팅 메일 수신을 켜 둔 채로 두고 사용자가 동의했다고 취급하면 나중에 근거를 대지 못합니다. 기본값은 따로 결정하고 기록해 둬야 하는 값이고, 화면에 켜져 있다는 사실로는 아무것도 증명되지 않습니다.