툴팁에는 지연이 필요하다, 그리고 그 지연을 건너뛰는 방법도 필요하다
Tooltips Need a Delay, and Then They Need to Skip It
FrontPrep을 개발하며 마주친 툴팁 UX 문제를 해결한 과정을 소개합니다. 마우스가 페이지를 스치기만 해도 툴팁이 즉시 나타나는 문제를 200ms 지연으로 해결했지만, 인접한 로고 사이를 이동할 때마다 지연이 반복되어 답답함이 생겼습니다. 해결책은 '웜 윈도우' 개념입니다. 툴팁이 열리면 300ms 동안 페이지가 '따뜻한' 상태가 되어, 그 사이 다른 툴팁 위로 마우스를 옮기면 지연 없이 즉시 열립니다. 이 패턴을 React와 Radix로 구현한 코드와 함께, 200ms가 적절한 이유, 그리고 이 UX 패턴을 코드베이스에 적용할 수 있는 Claude 스킬도 제공합니다.
클릭은 항상 의도적이지만, 호버는 의도적이지 않다. 커서는 목적지를 향해 페이지를 가로지르며 지나치는 요소들 위를 통과하므로, 툴팁은 호버만으로 사용자가 그것을 열려는지 알 수 없다. 200ms가 그것을 알아내는 방법이다.