툴팁에는 지연이 필요하다, 그리고 그 지연을 건너뛰는 방법도 필요하다
Tooltips Need a Delay, and Then They Need to Skip It
FrontPrep을 개발하며 마주친 툴팁 UX 문제를 해결한 과정을 소개합니다. 마우스가 페이지를 스치기만 해도 툴팁이 즉시 나타나는 문제를 200ms 지연으로 해결했지만, 인접한 로고 사이를 이동할 때마다 지연이 반복되어 답답함이 생겼습니다. 해결책은 '웜 윈도우' 개념입니다. 툴팁이 열리면 300ms 동안 페이지가 '따뜻한' 상태가 되어, 그 사이 다른 툴팁 위로 마우스를 옮기면 지연 없이 즉시 열립니다. 이 패턴을 React와 Radix로 구현한 코드와 함께, 200ms가 적절한 이유, 그리고 이 UX 패턴을 코드베이스에 적용할 수 있는 Claude 스킬도 제공합니다.
클릭은 항상 의도적이지만, 호버는 의도적이지 않다. 커서는 목적지를 향해 페이지를 가로지르며 지나치는 요소들 위를 통과하므로, 툴팁은 호버만으로 사용자가 그것을 열려는지 알 수 없다. 200ms가 그것을 알아내는 방법이다.
HN 토론
84- ProxCoques
제프 래스킨 아래의 애플이 (그는 The Humane Interface에서 이에 대해 썼다) 이런 상호작용 문제를 SYSTEM 6에서 1993년쯤에 관찰하고 고쳤다는 사실이 저를 항상 놀라게 합니다. 그런데 수십 년 후에 같은 문제가 다시 발견되고 다시 고쳐져야 하다니요.
- brixie
이것은 https://emilkowal.ski/ui/you-dont-need-animations 의 마지막 예제와 같은 기법을 설명하는 것 같습니다 (그리고 그 글 전체가 읽을 가치가 있다고 생각합니다, 이게 흥미로우셨다면). 정말 사소한 디테일이라서 저는 원래 눈치채지 못했을 것입니다 (애니메이션을 만들지 않으니 머리에 떠오르지 않거든요), 하지만 이제 알게 되니 항상 생각나네요.
- hurrell
이것을 히스테리시스의 예라고 설명할 수 있겠네요. 멋지네요! https://en.wikipedia.org/wiki/Hysteresis
- compiler-guy
이런 세심함에 크게 감사하며, 세상에 이런 것이 충분하지 않습니다. 예를 들어, Visual Studio에서 호버 팝업이 너무 빨리 떠서 거의 아무것도 선택할 수 없거나, 단어를 선택하는 대신 팝업을 클릭하게 됩니다.
- cush
새로운 웹 popover API에 이런 기본적인 사용성 기능이 내장되어 있지 않아서 실망했습니다.