액티브

눌렀는지 아닌지를 결과로만 확인하던 시절이 있었습니다. 저장 버튼을 눌렀는데 서버 응답이 1초 늦으면 사용자는 자기 손가락이 빗나갔다고 판단합니다. 그래서 한 번 더 누르고, 두 요청이 모두 도착해 문서가 두 번 저장됩니다.

목록에서도 같은 일이 벌어집니다. 항목을 눌러 상세 화면으로 넘어가는 데 0.5초가 걸리면 사람들은 그 사이에 두세 번 더 누릅니다. 한 번은 열리고 나머지는 이미 바뀐 화면의 다른 항목을 누르는 셈입니다.

필요한 것은 결과보다 앞서는 반응이었습니다. 서버가 무엇을 하든 손가락이 닿은 그 순간 화면이 달라지면 사용자는 눌린 것을 압니다. 액티브가 그 자리를 맡습니다.

누르는 순간 나타나고 손이나 버튼을 떼면 사라집니다. 지켜야 하는 것은 넷입니다.

1. 변화 폭을 앞 상태보다 한 단계 크게 잡습니다. 기본 상태보다 배경색을 한두 단계 진하게 하거나, 1에서 2픽셀쯤 눌려 들어간 느낌을 줍니다. 호버가 이미 한 단계 진해진 모습이니 액티브는 그보다 더 진해야 눌린 것이 구별됩니다.
2. 전환 시간을 두지 않습니다. 색이 부드럽게 바뀌도록 150밀리초를 넣으면 짧게 누르는 조작에서는 변화가 다 나타나기 전에 손이 떨어집니다. 나타나는 쪽은 즉시, 사라지는 쪽만 짧게 둡니다.
3. 세 상태가 같은 방향으로 진해지게 맞춥니다. 기본보다 호버가, 호버보다 액티브가 진한 순서입니다. 중간에 방향이 뒤집히면 사용자는 색만 보고 지금 어떤 단계인지 알 수 없습니다.
4. 결과가 늦을 때를 이어 줍니다. 손을 떼는 순간 이 상태는 사라지므로, 응답이 1초 뒤에 오는 동작이면 버튼을 잠그고 대기 표시로 바꿉니다. 빼면 손을 뗀 뒤 다시 아무 반응 없는 화면이 됩니다.

손가락으로 쓰는 화면에서는 이 상태의 무게가 더 큽니다. 마우스 환경에는 누르기 전에 호버가 한 번 알려 주지만, 손가락에는 그 단계가 없어서 액티브가 유일한 즉시 반응입니다.

"탭해도 아무 반응이 없어요. 액티브가 빠진 것 같습니다."

누른 즉시 달라지는 모습이 구현되지 않았다는 지적입니다.

"전환을 150밀리초 넣었더니 빨리 탭할 때 표시가 안 보여요."

나타나는 시간을 0으로 돌리자는 말입니다.

"호버와 액티브가 같은 색이에요. 누른 게 티가 안 납니다."

두 상태의 변화 폭이 겹쳐 구별되지 않는다는 뜻입니다.

페이지덱에서 민서가 버튼 상태를 정리할 때 이 순서를 표로 만들어 두었습니다. 기본은 회색 60, 호버는 70, 액티브는 80입니다. 태오가 나타나는 전환은 0으로, 사라지는 전환은 80밀리초로 두었습니다. 빨리 누르는 사람에게도 표시가 보이고 손을 뗄 때는 끊기지 않습니다.