Tooltip, 1980년대 GUI의 작은 도움말 풍선

한 줄로

아이콘 위에 마우스를 올리면 살짝 떠오르는 작은 글자 박스입니다. "이게 무슨 도구인가"를 알려주는 작은 팁(tool tip)입니다.

어디서 왔나

1980년대 GUI 시대 초기, 아이콘 기반 인터페이스가 등장하면서 새 문제가 생겼습니다. 아이콘은 그림이라 의미가 항상 명확하지 않았습니다. 톱니바퀴가 "설정"인지 "도구"인지 헷갈렸습니다.

Apple Lisa와 매킨토시에서 이미 비슷한 개념이 있었지만, tooltip이라는 명확한 명칭은 1991년 Microsoft Windows 3.1에서 본격화됐습니다. 아이콘에 마우스를 올리면 그 도구의 이름이 작은 노란 박스로 떴습니다.

이 작은 박스가 GUI 사용성의 핵심 무기가 됐습니다. 아이콘의 모호함을 즉시 해소했습니다.

UI 적용

좋은 tooltip의 조건입니다.

• 0.5~1초 지연 후 표시: 사용자가 의도적으로 호버한 경우에만.
• 짧은 한 줄: 5단어 이내.
• 명사 + 동사: "삭제하기", "북마크 저장", "프로필 보기".
• 마우스 떠나면 즉시 사라짐.

모바일에서

마우스 호버가 없는 모바일에서 tooltip은 어떻게 처리할까요?

옵션입니다.

• Long press: 손가락을 길게 누르면 표시 (Android 표준).
• 명시적 라벨: 아이콘 옆에 텍스트 라벨 같이 두기.
• 3D Touch / Haptic Touch: iPhone의 압력 터치.

모바일에서는 아이콘만으로는 부족하고 라벨을 같이 두는 것이 권장됩니다.

접근성

키보드 사용자에게는 마우스 호버가 없습니다. WCAG 가이드라인입니다.

• 포커스 시에도 표시: 키보드로 Tab해서 도달했을 때도 tooltip이 떠야 합니다.
• 닫기 가능: Escape로 닫힐 수 있어야 합니다.
• 마우스가 위에 있는 동안 유지: 자동 닫히지 않아야 합니다.

함정

• 본질적 정보를 tooltip에만 두지 말 것: 호버 못 하는 사용자가 못 봅니다.
• 너무 자주 뜨면 방해: 0.5초 지연이 필수.
• 모바일에서 tooltip 의존 = 사용성 재앙.

바이브 메이커가 챙길 한 가지

아이콘 버튼에 tooltip을 거의 항상 둡시다. 사용자에게도 도움이 되고, 스크린리더의 aria-label과 짝을 이뤄 접근성도 챙깁니다. CSS 한 줄, HTML title 속성 한 줄로도 가능합니다.

관련

Popover · Recognition over recall · ARIA