네비 하위 메뉴 호버 끊김을 sub-list height 통일로 해결한 기록

GNB 호버 메뉴에서 "메뉴 위에서 하위 메뉴로 마우스를 내릴 때 자꾸 닫혀요" 라는 피드백을 받았습니다. 작은 이슈처럼 보였는데 원인이 의외라 짧게 정리합니다.

1. 증상

상단 GNB(전역 네비게이션 바)는 호버 시 하위 메뉴가 펼쳐지는 구조입니다.

[메뉴 A]   [메뉴 B]   [메뉴 C]
   │
   ├─ 하위 1
   ├─ 하위 2
   └─ 하위 3

문제는 "메뉴 A"에 마우스를 올려 하위 메뉴가 펼쳐진 다음, 마우스를 하위 메뉴로 내리는 짧은 사이에 호버가 풀려서 하위 메뉴가 닫히는 일이 자주 발생한다는 거였어요.

2. 원인 — sub-list 높이가 들쭉날쭉

DevTools로 확인해보니 메뉴마다 하위 메뉴(sub-list)의 높이가 달랐습니다.

각 메뉴의 항목 수에 맞춰 클래스가 다르게 붙어 있었어요. 의도는 "딱 맞는 크기로 펼쳐지자"였는데, 부작용이 컸습니다.

2.1 호버 영역의 사각형이 좁아짐

상위 메뉴 텍스트와 하위 메뉴의 첫 항목 사이에는 약간의 시각적 간격이 있는데, 이 간격이 호버 가능 영역이어야 호버가 안 끊깁니다. 그런데 sub-list 높이가 작은 메뉴에서는 이 영역이 거의 0이 되어 마우스가 살짝 빨리 내려가면 영역을 벗어났어요.

2.2 hover hit zone 의 시각적 일관성도 깨짐

각 메뉴마다 호버가 풀리는 위치가 달라서, 사용자가 "어디까지가 호버 영역인지" 학습할 수 없었습니다. 어떤 메뉴는 늦게 닫히고 어떤 메뉴는 빨리 닫히니까요.

3. 결정 — 모든 sub-list를 h-28로 통일

선택지가 셋이었습니다.

③번으로 갔습니다.

h-28로 통일한 이유는 가장 항목 수가 많은 메뉴(5개)도 자연스럽게 들어가는 최소 높이였기 때문입니다. 더 큰 값(h-32, h-36)으로 잡으면 메뉴 아래쪽에 의미 없는 여백이 생기고, 더 작은 값으로 잡으면 5개 메뉴에서 텍스트가 짤렸어요.

<!-- 변경 전 -->
<ul class="sub-list h-32">...</ul>
<ul class="sub-list h-24">...</ul>
<ul class="sub-list h-20">...</ul>

<!-- 변경 후 -->
<ul class="sub-list h-28">...</ul>
<ul class="sub-list h-28">...</ul>
<ul class="sub-list h-28">...</ul>

CSS 클래스 하나만 바꾸는 작업이지만, 작업 중 *"왜 처음부터 통일하지 않았을까"*라는 생각이 들었습니다. 아마도 처음 만든 사람이 "필요한 만큼만"이라는 원칙으로 작업했고, 그게 호버 UX와 충돌한다는 걸 그땐 몰랐을 거예요.

4. 검증

작업 후 확인 항목:

• 모든 메뉴에서 상위 → 하위로 마우스를 내릴 때 호버가 안 끊기는지 (Chrome/Safari/Firefox)
• 메뉴별로 호버 닫힘 타이밍이 동일한지
• 항목이 적은 메뉴(2개)에서 빈 공간이 너무 어색해 보이지 않는지

마지막 항목이 살짝 걸렸지만, 결과적으로 호버 안정성이 훨씬 중요했고, 빈 공간은 메뉴 박스 디자인 안에서 충분히 자연스럽게 보였어요.

5. 교훈

• "딱 맞게"가 항상 최선은 아닙니다. 호버 UX처럼 마우스 동선이 개입하는 경우, 약간의 여유 영역이 안정성을 만듭니다.
• 작은 CSS 클래스 차이가 사용성에는 큰 차이를 만들 수 있어요.
• 호버 끊김을 JS delay로 우회하기 전에, 마크업/CSS의 hit zone부터 의심해 봅시다.

이런 종류의 이슈는 디자인 시스템 단위로 "sub-list는 무조건 h-28" 같은 룰을 박아두면 다시 재발하지 않습니다. 다음 번에 새 메뉴를 추가할 때 이 글이 그 단서가 되었으면 좋겠어요.