비활성

어떤 버튼을 지금은 누를 수 없을 때 오래 쓰인 선택은 둘뿐이었습니다. 버튼을 아예 치우거나, 누를 수 있게 두고 누르면 오류를 띄우는 것입니다. 둘 다 사용자를 헤매게 만듭니다. 치워 버리면 그 기능이 있다는 사실 자체를 모르고, 눌러서 오류를 만나면 왜 안 되는지를 누른 뒤에야 압니다.

페이지덱의 결제 화면이 두 번째였습니다. 카드를 등록하지 않은 계정도 결제 버튼을 누를 수 있었고, 누르면 요청을 처리할 수 없습니다 한 줄이 떴습니다. 그 한 줄로는 카드가 없어서인지 금액이 잘못됐는지 알 수 없어서, 같은 문의가 한 달에 서른 건씩 들어왔습니다.

비활성은 그 사이에 놓인 세 번째 선택입니다. 기능이 있다는 사실은 그대로 보여 주면서, 지금은 안 된다는 것을 누르기 전에 알립니다. 사용자의 조작으로 모습이 달라지는 UI 상태 중 상호작용 갈래에 들어가고, 아무도 건드리지 않았을 때의 기본 상태에서 무엇을 뺀 모습인지로 정해집니다.

세 가지를 함께 정해야 한 상태가 완성됩니다.

1. 보이는 모습입니다. 투명도를 40퍼센트로 내리거나 회색으로 바꿔 기본 상태보다 눈에 덜 띄게 만듭니다. 이때 글자와 배경의 밝기 차이가 함께 낮아지므로, 아예 읽히지 않을 만큼 흐려 두면 있다는 사실을 보여 주려던 목적이 사라집니다.
2. 조작 차단입니다. 눌러도 아무 일이 일어나지 않게 하고, 키보드 탭 순서에서도 빼는 것이 보통입니다. 다만 순서에서 빼면 포커스를 받지 못해 스크린 리더가 이 요소를 알리지 않습니다. 이유를 반드시 전해야 하는 자리라면 탭이 닿게 두고 읽히게 합니다.
3. 이유입니다. 가장 자주 빠지는 칸이고, 빠지면 앞의 둘을 잘 만들어도 사용자는 추측하게 됩니다. 버튼 옆이나 아래에 한 줄을 붙입니다. 결제 버튼이 흐리다면 카드를 먼저 등록해 주세요가 그 한 줄입니다.

막아야 할 조건이 여럿이면 비활성이 답이 아닐 수 있습니다. 채워야 할 항목이 다섯인데 버튼만 흐려 두면 무엇이 빠졌는지 알 수 없습니다. 이럴 때는 버튼을 살려 두고 누른 순간 빠진 항목을 짚어 주는 쪽이 낫습니다.

"이 버튼 왜 회색이에요? 이유가 안 적혀 있는데요."

상태는 만들었지만 이유를 알리는 칸이 비어 있다는 지적입니다.

"조건이 다섯 개면 비활성으로 두지 말고 눌렀을 때 뭐가 빠졌는지 알려 주죠."

막는 방식 자체를 바꾸자는 제안입니다.

"비활성인데 탭으로 못 가니까 스크린 리더에서는 버튼이 없는 거예요."

보이지만 보조 기술에는 전달되지 않는 상태라는 뜻입니다.

페이지덱에서는 민서가 버튼 시안을 넘길 때 비활성 한 장을 반드시 붙입니다. 태오가 먼저 묻는 것이 이유 문구라서, 그 줄이 없으면 구현이 시작되지 않습니다.