스낵바

되돌릴 수 없는 동작을 안전하게 만드는 오래된 방법은 실행 전에 한 번 더 묻는 것이었습니다. 삭제를 누르면 정말 삭제할지 확인하는 창이 뜨고, 확인을 누르면 지워집니다. 논리는 분명하지만 사용자가 같은 질문을 백 번 보게 되면 읽지 않고 누르는 손동작이 됩니다.

페이지덱도 문서 삭제에 확인 창을 뒀습니다. 뒤 화면을 덮고 뜨는 모달이었습니다. 모달은 답하기 전에는 다른 일을 못 하게 막는 레이어입니다. 민서가 기록을 열어 보니 그 창에서 취소를 누른 비율은 2퍼센트였습니다. 98퍼센트는 그냥 확인을 눌렀다는 뜻입니다. 그런데도 잘못 지웠다는 문의는 매주 들어왔습니다. 확인 창이 실수를 막지 못하면서 나머지 98퍼센트의 시간만 쓰고 있었던 것입니다.

스낵바는 순서를 바꿉니다. 먼저 실행하고, 되돌릴 기회를 그 자리에서 줍니다. 문서를 지운 직후 화면 아래에 지웠다는 문구와 되돌리기 버튼이 함께 뜹니다. 실수하지 않은 98퍼센트는 아무것도 누르지 않고 지나가고, 실수한 2퍼센트는 한 번 눌러 되돌립니다. 막는 비용을 모두에게 걷는 대신 틀린 사람만 한 번 더 움직이게 만든 구조입니다.

동작을 실행한 뒤 화면 아래쪽에 결과 문구와 되돌리기 버튼을 얹어 띄우고, 몇 초 뒤에 저절로 사라지는 방식입니다. 정하는 것은 다섯 가지입니다.

1. 자리와 개수 — 화면 아래 가운데나 왼쪽 아래에 두고, 한 번에 하나만 띄웁니다. 동작을 연달아 하면 앞의 것을 닫고 새로 띄우거나 "3개 삭제했습니다" 처럼 묶습니다. 두 개가 겹쳐 쌓이면 어느 버튼이 무엇을 되돌리는지 알 수 없게 됩니다.
2. 문구 — 이미 일어난 일을 과거형으로 적습니다. "삭제할까요" 가 아니라 "문서를 삭제했습니다" 입니다. 무엇이 사라졌는지 이름까지 적으면 되돌릴지 판단하는 데 다시 확인할 일이 없습니다.
3. 버튼 — 하나만 둡니다. 되돌리기 하나가 원칙이고, 되돌리기와 자세히 보기를 함께 넣으면 급한 순간에 어느 쪽이 되돌리기인지 찾게 됩니다.
4. 남는 시간 — 5초에서 10초 사이로 잡습니다. 읽고, 잘못됐다고 판단하고, 손을 옮겨 누르는 데까지 걸리는 시간이 필요합니다. 되돌릴 버튼이 없는 알림보다 길게 잡는 이유가 이것입니다.
5. 실제로 지우는 시점 — 두 방식이 있습니다. 스낵바가 떠 있는 동안 실행을 미뤄 두었다가 사라질 때 지우는 방식과, 즉시 지우고 되돌리기를 누르면 복구하는 방식입니다. 앞쪽은 구현이 간단하지만 그 몇 초 동안 다른 기기에서는 문서가 아직 보입니다. 뒤쪽은 어디서 봐도 상태가 같은 대신 복구 경로를 따로 만들어야 합니다.

접근성에서 걸리는 항목이 하나 더 있습니다. 접근성은 장애나 상황에 상관없이 제품을 쓸 수 있게 만드는 일입니다. 저절로 사라지는 알림은 화면을 읽어 주는 프로그램을 쓰는 사용자나 손이 느린 사용자에게 시간이 모자랍니다. 그래서 초점이 들어오면 사라지는 시간을 멈추고, 키보드만으로 되돌리기 버튼에 닿을 수 있게 만듭니다.

가장 잘 맞는 자리는 되돌릴 수 있는 파괴적 동작입니다. 문서 삭제, 보관함으로 옮기기, 폴더 이동이 그렇습니다. 여러 개를 한 번에 처리한 경우에도 유용합니다. 문서 스무 개를 골라 지운 뒤에 되돌리기가 없으면 사용자는 스무 번을 다시 찾아야 합니다.

제품이 알아서 한 일을 알릴 때도 씁니다. 정렬 순서를 자동으로 바꿨다거나 중복된 항목을 합쳤다는 식의 결과에 되돌리기를 붙여 두면, 사용자가 그 판단에 동의하지 않을 때 원래대로 갈 길이 생깁니다.

안 맞는 자리는 셋입니다.

1. 되돌릴 수 없는 동작 — 결제 승인, 외부로 나가는 초대 메일 발송처럼 실행되면 회수할 수 없는 일은 실행 전에 물어야 합니다. 이 자리는 여전히 모달입니다.
2. 놓치면 곤란한 공지 — 결제 카드가 만료됐다는 안내는 몇 초 뒤에 사라지면 안 됩니다. 화면 위쪽에 걸려 계속 남는 배너로 띄웁니다.
3. 되돌릴 것이 없는 확인 — 저장했다는 알림처럼 되돌릴 대상이 없는 문구에는 버튼 없는 알림을 씁니다.

"삭제 확인 창을 없애고 스낵바로 바꾸죠. 되돌리기만 있으면 됩니다."

실행 전에 묻는 대신 실행 뒤에 되돌릴 기회를 주자는 제안입니다.

"스낵바 시간이 3초예요. 되돌리기를 누를 시간이 안 됩니다."

버튼이 있는 알림은 더 길게 띄워야 한다는 지적입니다.

"이건 되돌릴 수 없으니까 스낵바로 하면 안 돼요."

되돌리기를 구현할 수 없는 동작에는 이 요소를 쓰지 말자는 정정입니다.

민서가 문서 삭제 흐름을 바꿨습니다. 확인 창을 없애고, 지운 뒤 화면 아래에 문서 이름과 되돌리기 버튼이 든 스낵바를 8초 동안 띄웠습니다. 태오는 즉시 지우고 복구하는 방식 대신 8초 동안 실행을 미루는 방식으로 만들었고, 그동안 목록에서는 해당 문서를 감췄습니다.

바꾼 뒤 잘못 지웠다는 문의는 주 3건에서 거의 0건이 됐습니다. 되돌리기를 실제로 누른 비율은 2.4퍼센트였습니다. 확인 창에서 취소를 누르던 비율과 거의 같았는데, 달라진 것은 나머지 97퍼센트가 창을 한 번 덜 닫게 됐다는 점입니다.

스낵바가 확인 창을 언제나 대신할 수 있다고 보는 경우가 가장 많습니다. 되돌릴 수 있으면 막을 필요가 없다는 논리가 깔끔하니 그렇게 읽힙니다. 하지만 되돌리기는 우리 쪽 데이터베이스 안에서만 성립합니다. 초대 메일이 이미 상대 편지함에 도착했거나 결제가 카드사로 넘어간 뒤에는 되돌릴 대상이 없습니다. 이 오해를 그대로 두면 되돌리기 버튼이 눌렸을 때 아무 일도 일어나지 않는 화면이 나오고, 그때 잃는 신뢰는 확인 창 하나보다 비쌉니다.

시간을 넉넉히 잡으면 사용자가 다 본다고 보는 것도 흔합니다. 15초쯤 띄워 두면 놓칠 사람이 없어 보입니다. 그런데 사라지는 알림은 길이와 상관없이 다른 화면을 보던 사람에게는 닿지 않고, 오래 남을수록 다음 작업을 가립니다. 화면 아래에 계속 떠 있는 띠는 목록의 마지막 줄을 덮습니다. 놓치면 곤란한 내용은 시간을 늘려 해결하지 않고 사라지지 않는 자리로 옮깁니다.