메가 드롭다운 메뉴

이 문제의 뿌리는 Global Navigation Bar(GNB)의 계층 메뉴 구조에 있다. 목표 서브 메뉴로 가는 경로(path) 위에 또 다른 최상위 메뉴가 놓여 있으면, 마우스를 옮기는 동안 열려 있던 서브 메뉴가 닫히고 엉뚱한 최상위 메뉴가 열려버린다. 2006년 화제였던 "공군 가기 힘들어" 동영상은 이 문제로 실제 공군 홈페이지 메뉴가 개선된 사례로 꼽힌다. Bruce Tognazzini는 이 문제를 해결하는 두 방법—마우스 이동 각도로 판단하는 방법과 서브 메뉴 유지 시간(딜레이)으로 판단하는 방법—을 계층 메뉴 구조 설계 퀴즈에서 제시했고, 각도 기반 판단이 절대적으로 우월하다고 주장했다(이견도 있다).

메가 드롭다운 메뉴에서 상위 메뉴 항목 위로 마우스를 옮길 때 하위 메뉴가 얼마나 빠르고 자연스럽게 전환되는지는 메뉴 UI의 완성도를 가르는 핵심 문제다. Ben Kamens가 분석한 아마존의 "Shop by Department" 메가 드롭다운은 Tognazzini가 말한 각도 기반 판단을 실전에 구현해 이 문제를 해결한 대표 사례로 꼽힌다. 일반적으로 서브메뉴 전환에는 약간의 지연(delay)이 필요한데, 지연이 없으면 마우스를 메인 메뉴에서 하위 메뉴로 옮기는 사이 서브메뉴가 사라져버리는 "깰 수 없는 두더지 게임" 현상(예: bootstrap의 드롭다운 메뉴)이 발생하기 때문이다. 반대로 지연이 너무 길면 반응성이 떨어져 답답하게 느껴진다.

아마존은 이 딜레이 없이도 문제를 해결했는데, 핵심은 커서 이동 방향을 탐지하는 것이다. 현재 마우스 위치와 열려 있는 서브메뉴의 우측 상단·우측 하단 모서리를 잇는 삼각형 영역을 실시간으로 계산해, 다음 마우스 위치가 이 삼각형 안에 있으면 사용자가 서브메뉴 쪽으로 이동 중이라고 판단하고 현재 서브메뉴를 계속 열어둔다. 커서가 일시적으로 다른 메뉴 항목(예: "Appstore for Android") 위를 스쳐도, 삼각형 영역 안에 머무는 한 서브메뉴 전환은 일어나지 않는다. 반대로 커서가 삼각형 밖으로 벗어나는 순간 즉시 서브메뉴가 전환되어, 지연 없이도 빠릿한 반응성을 확보한다.

이 분석을 계기로 원저자는 이 방향성 탐지 로직을 이벤트로 발생시키는 jQuery-menu-aim 플러그인을 만들어 Khan Academy의 메뉴에 실제 적용했다. 아마존이 사용한 것으로 추정되는 방식은 선형대수 기반의 벡터(cross-product) 연산이지만, 저자는 이해도 부족을 이유로 더 단순한 기울기(slope) 기반 근사 방식을 택했다고 밝혔다. 이는 완벽하게 동일한 알고리즘이 아니어도 UX 관점에서 충분히 좋은 결과를 낼 수 있음을 보여주는 사례다.

웹 페이지에서는 마우스 궤적을 실시간으로 추적하는 비용이 크기 때문에, 대부분의 사이트는 각도 판단 대신 딜레이(시간차) 방식을 택할 수밖에 없다. 그런데 이 딜레이 방식이 정교하지 않으면 오히려 롤오버 메가 메뉴가 사용을 방해하는 역효과를 낸다. 브라우저 멀티탭이나 툴바 바로가기로 사이트에 진입하면 마우스 포인터가 화면 최상단에서 시작하는 경우가 많은데, 조선일보(chosun.com)처럼 딜레이 없이 곧바로 메뉴가 콘텐츠를 덮어버리는 방식은 사용자가 첫 번째 헤드라인을 클릭하러 내려가는 길에 메가 메뉴가 펼쳐져 클릭을 막아버린다. 반면 Slate(slate.com)는 메뉴 위에 잠깐이라도 머물지 않으면 열리지 않는 시간차를 두었고, 열리는 방식도 콘텐츠를 덮는 대신 아래로 밀어내는 방식이라 설사 열려도 방해가 덜하다. 완벽한 해법은 아니지만, 이런 디테일 하나가 메인 화면에서 가장 빈번하게 쓰이는 UI인 GNB의 사용성을 크게 좌우한다.

핵심 내용

  • 문제의 근원은 GNB 계층 메뉴에서 목표 서브 메뉴로 가는 경로 위에 다른 최상위 메뉴가 있어 이동 중 엉뚱한 메뉴가 열리는 것("공군 가기 힘들어" 사례)
  • Bruce Tognazzini는 이를 해결하는 두 방법(마우스 각도 탐지 vs. 딜레이)을 제시하고 각도 탐지의 우월성을 주장
  • 서브메뉴 전환 딜레이가 없으면 커서 이동 중 메뉴가 사라지는 문제 발생(두더지 게임 현상)
  • 아마존은 딜레이 대신 커서와 서브메뉴 모서리를 잇는 삼각형 영역으로 이동 방향을 예측(Tognazzini의 각도 탐지 방식을 실전 구현)
  • 커서가 삼각형 안에 있으면 서브메뉴 유지, 벗어나면 즉시 전환 → 지연 없이도 자연스러운 반응성 확보
  • jQuery-menu-aim 플러그인으로 이 방향성 탐지 로직을 재사용 가능한 이벤트로 구현
  • 정교한 선형대수 대신 기울기 기반 근사로도 실용적으로 충분한 결과 달성 가능
  • 웹에서는 궤적 추적 비용 때문에 대개 딜레이 방식을 쓰는데, 오버레이형(조선일보, 오클릭 위험)과 푸시다운형(Slate, 오클릭 적음) 구현 디테일 차이가 사용성을 가른다

관련 개념

출처

최종 업데이트: 2026-07-14 | 출처 2개