호버

정의

호버는 마우스 포인터가 요소 위에 머무는 동안 나타나는 상태입니다. 이때 배경색이 살짝 진해지거나, 그림자가 생겨 요소가 떠오르는 듯 보이거나, 커서가 손가락 모양으로 바뀌면서 '이건 눌러 볼 수 있는 것'이라는 신호를 조용히 건넵니다. 클릭이 일어나기 직전 단계라, 사용자는 실제로 누르기 전에 여기가 반응하는 자리인지 아닌지를 먼저 확인하게 됩니다. 그래서 호버는 화면과 사용자가 나누는 가장 짧은 첫 대화라고 볼 수 있습니다. 버튼, 링크, 카드, 메뉴 항목처럼 눌러서 무언가가 일어나는 요소에는 거의 빠짐없이 이 호버 반응이 붙는다고 보면 됩니다.

왜 중요한가

사용자는 화면 위에서 무엇이 눌리고 무엇이 그냥 글자인지 매 순간 판단합니다. 이때 호버 반응이 있으면 마우스를 올리는 것만으로 그 판단이 즉시 끝나, 헤매지 않고 다음 행동으로 넘어갈 수 있습니다. 반대로 버튼처럼 생겼는데 올려도 아무 변화가 없으면 사용자는 정말 눌리는 건지 의심하며 잠깐 멈칫하게 됩니다. 이 작은 망설임이 쌓이면 화면 전체가 둔하고 답답하게 느껴집니다. 잘 다듬어진 호버는 클릭 가능한 영역을 또렷하게 드러내 탐색 속도를 높이고, 사용자에게 이 화면이 살아 있고 반응한다는 안정감을 줍니다. 특히 목록이나 표처럼 비슷한 행이 길게 이어지는 화면에서는, 마우스가 올라간 줄만 배경이 옅게 바뀌어도 지금 어느 항목을 보고 있는지가 또렷해져 잘못 누르는 실수가 크게 줄어듭니다. 이렇게 호버는 눈으로 짚는 손가락처럼 현재 위치를 짚어 줍니다.

흔한 실수

• 중요한 정보나 기능을 오직 호버 뒤에만 숨겨 두는 것입니다. 터치 기기에는 포인터가 없어 호버 자체가 일어나지 않으므로, 그 안에 감춰 둔 메뉴나 설명을 휴대폰 사용자는 영영 볼 수 없게 됩니다.
• 호버 효과를 너무 과하게 주는 것입니다. 색이 확 바뀌거나 요소가 크게 튀어 오르면 마우스가 스칠 때마다 화면이 요란하게 흔들려, 오히려 시선을 방해하고 피로하게 만듭니다.
• 글자나 배경처럼 누를 수 없는 요소에도 호버 반응을 넣는 것입니다. 눌리지 않는데 반응만 하면 사용자는 클릭했다가 아무 일도 없어 혼란스러워하고, 진짜 눌리는 요소가 어디인지에 대한 믿음까지 흔들립니다.

실무 팁

• 호버는 어디까지나 보조 신호로만 쓰고, 정말 중요한 기능은 클릭이나 탭만으로도 닿을 수 있게 만드세요. 터치 기기에는 호버가 없다는 사실을 항상 전제로 두면 모든 사용자가 같은 기능에 접근할 수 있습니다.
• 호버 변화는 색과 그림자를 아주 조금만 움직이는 선에서 절제하세요. 은은한 변화가 오히려 세련돼 보이고, 여러 요소에 걸쳐 일관되게 적용하기도 쉽습니다.
• 호버 상태는 반드시 마우스를 올렸을 때만 나타나야 하며, 키보드로 이동할 때는 포커스 표시가 그 역할을 대신하도록 두 상태를 따로 설계하세요.

관련 개념