호버 없는 버튼은 사용자를 불안하게 만든다호버 없는 버튼은 사용자를 불안하게 만든다

커서를 버튼 위에 올렸는데 아무 변화가 없다면, 사용자는 무의식적으로 의심합니다. 이거 눌리는 거 맞나? 호버 효과는 장식이 아니라 '여기는 클릭할 수 있는 곳'이라는 시스템의 응답입니다. 인터랙티브 요소의 상태 설계는 UI의 신뢰도를 결정합니다.

설계해야 할 다섯 가지 상태

모든 클릭 가능한 요소는 최소 다섯 상태를 가집니다. 기본(default), 호버(hover), 포커스(focus), 누름(active), 비활성(disabled). 호버는 배경 밝기 변화·살짝 떠오름·색 진해짐 등으로 '반응함'을 알리고, 액티브는 눌리는 순간 살짝 가라앉는 느낌으로 '입력됨'을 확정합니다. 비활성은 투명도를 낮추되, 왜 비활성인지 알 수 있는 단서(툴팁, 안내문)를 함께 제공해야 합니다.

포커스 상태를 지우지 마세요

키보드로 웹을 탐색하는 사용자에게 포커스 링은 마우스 커서와 같습니다. outline: none으로 포커스 표시를 지우는 것은 커서를 숨기는 것과 같은 일입니다. 기본 파란 테두리가 디자인과 안 맞는다면 지우는 대신 브랜드에 맞는 포커스 스타일로 교체하세요. :focus-visible을 쓰면 키보드 사용자에게만 포커스 링을 보여줄 수 있어 마우스 사용자의 시각적 잡음도 막을 수 있습니다.

터치 환경에서의 호버 문제

모바일에는 호버가 없습니다. 따라서 호버에만 의존해 정보를 숨기는 패턴(호버 시에만 보이는 버튼, 호버 툴팁 속 필수 정보)은 모바일에서 기능 실종으로 이어집니다. 호버는 어디까지나 보조 피드백으로 쓰고, 핵심 정보와 행동은 항상 노출하세요. 터치에서는 액티브 상태(눌림 피드백)가 호버의 역할을 대신하므로 :active 스타일과 적절한 터치 피드백이 더 중요해집니다.

컴포넌트를 만들 때 기본 상태 하나만 그리고 끝내지 마세요. 다섯 상태가 모두 정의된 버튼과 그렇지 않은 버튼의 차이가, 완성된 제품과 시안의 차이입니다.

상태 스타일의 코드 패턴

다섯 상태를 CSS로 정리하면 이렇습니다. 기본 상태에 transition: background .15s, transform .15s를 깔아 두고, :hover에서 배경을 한 단계 진하게(또는 transform: translateY(-1px)), :active에서 transform: scale(.98)로 살짝 눌리게, :focus-visible에서 outline: 2px solid와 outline-offset: 2px로 포커스 링을, :disabled에서 opacity: .5와 cursor: not-allowed를 줍니다. 이 다섯 줄의 패턴을 버튼 컴포넌트 하나에 넣어 두면 제품의 모든 버튼이 살아 있는 것처럼 느껴집니다.

호버에 정보를 숨기지 말라는 원칙의 예외

호버 노출이 허용되는 경우도 있습니다. 행 위에 올렸을 때 나타나는 보조 액션(복사, 편집 아이콘)은 화면의 시각적 잡음을 줄이는 유효한 패턴입니다. 단, 조건이 있습니다. 같은 기능에 도달하는 다른 경로(우클릭 메뉴, 상세 화면의 버튼)가 존재해야 하고, 터치 기기에서는 해당 액션이 항상 노출되거나 탭으로 접근 가능해야 합니다. 호버는 지름길로 쓰고, 유일한 길로 쓰지 마세요.