마우스 커서와 어포던스

웹 UI를 설계할 때 마우스 커서 모양은 사용자에게 요소의 클릭 가능성을 전달하는 중요한 시각적 단서다. 이 문제는 단순해 보이지만, 어포던스 이론·웹 표준·실무 관행이 충돌하는 흥미로운 UX 딜레마를 보여준다.

버튼의 커서 기본값은 화살표다. 데스크탑 운영체제에서 버튼은 그 자체로 클릭 가능하다는 어포던스(affordance)가 강하기 때문에, 굳이 손 모양 커서로 추가 신호를 줄 필요가 없다는 것이 전통적 이유다. Microsoft Windows UX Guidelines는 이를 명시적으로 규정한다. "손 모양 커서는 오직 링크에만 사용해야 한다. 명령 버튼은 이미 강한 어포던스를 갖추고 있으므로 손 모양이 필요 없다. 손 모양 포인터는 '이 대상은 링크다'를 의미해야 하며 다른 용도에 써서는 안 된다." 링크는 일반 텍스트와 시각적으로 유사하기 때문에 손 모양 커서로 클릭 가능성을 명시적으로 전달해야 하는 반면, 버튼은 그 형태 자체가 이미 충분한 단서를 제공한다는 논리다.

그러나 웹에서는 다른 흐름이 존재한다. 네이버, 다음, 쿠팡 세 회사 모두 로그인 버튼의 커서를 손 모양으로 변경했다. 이는 웹 사용자가 텍스트 링크에 익숙해진 나머지 커서 변화 없이는 클릭 가능성을 충분히 지각하지 못한다는 실무적 판단에서 비롯된다. 실제로 구글은 버튼에 화살표를, 페이스북은 손 모양을 사용해 두 관행이 공존한다.

체크박스와 라벨의 커서는 더 복잡한 문제다. 체크박스 자체는 버튼처럼 어포던스가 분명하지 않다. 더 중요한 것은 체크박스 옆 라벨 텍스트인데, HTML에서 `

실무적으로 취할 수 있는 정책은 세 가지다. 첫째, 가이드라인과 기본값을 따른다 — 버튼·체크박스는 화살표로 둔다. 단 라벨의 클릭 가능성이 불분명해지는 문제가 남는다. 둘째, 웹에서는 모든 클릭 가능한 요소를 손 모양으로 변경한다 — CSS `cursor: pointer`를 링크, 버튼, 라벨, 셀렉트 등에 모두 적용한다. 이 접근에 대해 많은 디자이너들이 오랜 역사의 디폴트값을 무분별하게 바꾼다는 우려를 제기한다. 셋째, 라벨만 손 모양으로 변경한다 — 표준을 존중하되, 클릭 가능성 지각이 가장 불분명한 라벨과 그에 연결된 체크박스/라디오만 수정한다.

핵심 내용

  • 버튼 기본 커서가 화살표인 이유: 버튼 자체가 강한 어포던스를 보유하기 때문
  • 링크는 텍스트와 유사해 어포던스가 약하므로 손 모양으로 클릭 가능성을 명시
  • Microsoft UX Guidelines: 손 모양은 링크 전용, 버튼에 사용하면 혼동 발생
  • 한국 주요 포털(네이버, 다음, 쿠팡)은 모두 로그인 버튼에 손 모양 적용
  • 체크박스 라벨의 커서는 세 회사가 각기 다른 정책을 채택
  • 가장 절충적 접근: 표준 존중 + 라벨만 손 모양으로 처리

관련 개념

  • 어포던스 — 사물의 클릭 가능성을 지각하게 만드는 인터랙션 속성
  • UI 가이드라인 — 플랫폼별 UI 표준 문서와 커서 정책의 배경
  • 로그인 UI 패턴 — 로그인 폼의 체크박스, 버튼 등 구성 요소 설계

출처

최종 업데이트: 2026-04-23 | 출처 1개