호버

화면에 놓인 것들 가운데 무엇이 누를 수 있는 것인지는 겉모습만으로 늘 구분되지 않습니다. 파란 글씨에 밑줄이 있으면 링크라는 것이 오랜 관습으로 전해지지만, 요즘 화면에서는 검은 글자와 회색 상자도 누르면 반응합니다.

페이지덱의 문서 목록이 그랬습니다. 제목이 검은 글자였고 행 전체가 눌리는 영역이었는데, 사용자들은 제목 글자만 조심스럽게 겨냥해 눌렀습니다. 행의 빈 자리를 눌러도 열린다는 사실을 알 방법이 없었기 때문입니다. 민서가 행에 마우스를 올리면 배경이 옅은 회색으로 바뀌게 하자 그 자리에서 해결됐습니다. 색이 바뀌는 범위가 곧 눌리는 범위라는 것을 사용자가 스스로 알아냅니다.

호버는 이렇게 포인터가 올라간 동안만 모습을 바꿔 여기가 반응한다고 미리 말해 주는 상태입니다. 기본 상태는 아무 조작도 없을 때의 모습이고, 호버는 그 위에 덧씌워지는 첫 반응입니다.

포인터가 요소 안에 들어오면 정해 둔 스타일로 바뀌고 벗어나면 되돌아갑니다. 정할 것은 다섯 가지입니다.

1. 무엇을 바꿀지 — 배경색, 글자색, 테두리, 그림자 가운데 하나나 둘을 씁니다. 손 모양 커서로 바뀌는 것도 같은 신호라 함께 둡니다.
2. 변화의 크기 — 알아챌 만큼만 바꿉니다. 배경을 한 단계 어둡게 하는 정도가 보통이고, 색을 확 바꾸면 목록을 훑는 동안 화면이 번쩍입니다.
3. 전환 시간 — 100에서 150밀리초 사이가 무난합니다. 들어올 때는 즉시 켜고 나갈 때는 조금 천천히 되돌리면 포인터가 스쳐 지나갈 때 덜 산만합니다.
4. 영역 — 색이 바뀌는 범위와 실제로 눌리는 범위를 같게 맞춥니다. 행 전체가 밝아지는데 제목 글자만 눌린다면 그 화면은 거짓말을 하는 셈입니다.
5. 터치 화면에서의 처리 — 손가락에는 올려놓기가 없습니다. 호버로만 전하는 정보는 모바일에서 통째로 사라지므로, 설명이나 메뉴를 호버에만 두지 않습니다.

"여기 호버가 없어서 누를 수 있는 건지 모르겠어요."

반응을 미리 알려 주는 상태가 빠졌다는 지적입니다.

"호버 영역이 행 전체인데 실제로는 제목만 눌려요."

보이는 범위와 눌리는 범위가 어긋났다는 뜻입니다.

"그 설명을 호버로만 띄우면 모바일에서는 아무도 못 봅니다."

터치 화면에는 이 상태가 없다는 정정입니다.

민서가 문서 목록의 행 호버를 만들 때 배경을 한 단계만 어둡게 하고 전환을 120밀리초로 잡았습니다. 태오가 눌리는 영역을 행 전체로 넓혀 색이 바뀌는 범위와 맞췄습니다. 목록에서 잘못 누르는 비율이 줄었고, 같은 규칙을 표와 카드 목록에도 그대로 옮겼습니다.