아마존의 메가 드롭다운 메뉴 분석 Breaking down Amazon's Mega Dropdown

메뉴에서 2차적으로 나오는 서브 메뉴를 표시할 때, 대충 만들면 생각보다 큰 낭패를 당하게 됩니다. 저희 블로그에서도 이 문제를 여러 차례 지적했었는데요,
공군 가기 힘들어(Global Navigation Bar 디자인)에서, 메뉴 경로를 너무 좁게 만들었다가 망신 당한 공군 웹페이지를 보여 드리고 그 근본 원인을 알려드렸구요,
피츠를 알려주는 퀴즈 (A Quiz Designed to Give You Fitts)에서는 이 문제를 해결하기 위해, 맥과 윈도즈가 어떻게 다르게 접근하였는가를 설명했습니다.

지난 3월 6일 발표되어 많은 인기를 끌고 있는 Ben Kamens님의 아마존 메가 드롭다운 분석(BREAKING DOWN AMAZON'S MEGA DROPDOWN)은 메뉴 UI에서 꼭 알아야할 이 문제를 잘 설명해 주었습니다. 이 문제를 해결해줄 라이브러리를 기대한지 10년도 더 되었는데 이제 처음 보게 되는군요. 가능하면 영어 원문을 보시고, 댓글도 읽어 보시면 흥미롭습니다. 이 글은 Ben Kamens님의 서면 허락을 받고, 블로그에 게재하는 것이므로 절대 복사해가지 않으셨으면 합니다. 명지은님이 초벌 번역을 도와주셨습니다. 영어 공부 하고 싶은 분은 원문과 함께 보세요.

아마존 웹사이트의 "Shop by Department" 메가 드롭다운의 마우스 오버 효과를 보면 엄청나게 빠르다. 마우스를 메인 메뉴 아래로 움직일 때 하위 메뉴들이 얼마나 빨리 나타나는지 한 번 보시라:
The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look’it how quick each submenu fills in as your mouse moves down the list:

정말 반응이 빠르다!! 난 이걸 발견하자마자 여기에 완전히 정신이 빼았겼다. 보통 드롭다운 메뉴의 하위 메뉴를 활성화시킬 때는 약간의 시간 지연이 있을 수 밖에 없다. (내가 개발자로 있는) Khan Academy의 예전 드롭다운 하나를 예로 들자면:
It’s instant. I got nerd sniped by this. Most dropdown menus have to include a bit of a delay when activating submenus. Here’s an old Khan Academy dropdown as an example:

한 박자 늦게 뜨는게 보이나? 이 딜레이가 필요한 이유는, 이 딜레이가 없으면, 메인 메뉴에서 하위 메뉴로 마우스를 옮길 때 하위 메뉴가 사라져버리는, 도무지 깰 수 없는 한심한 두더지 게임이 되어버리기 때문이다. 예를 들자면 다음과 같은 bootstrap의 드롭다운 메뉴처럼 말이다: See the delay? You need that, because otherwise when you try to move your mouse from the main menu to the submenu, the submenu will disappear out from under you like some sort of sick, unwinnable game of whack-a-mole. Enjoy this example from bootstrap’s dropdown menus:

내가 bootstrap을 싫어하는게 아니니 꼬아서 받아들이지 마시길... 실망스러운 하위 메뉴의 적절한 예를 드는 것일 뿐 I love bootstrap, don’t get it twisted. Just a good example of submenu frustration.

그렇다면 아마존은 어떻게 이런 딜레이 없이 해냈을까?? How did Amazon get away without using a delay?

아마존에서는, 메인 메뉴에서 하위 메뉴로 커서를 옮기기가 쉽다. 위의 bootstrap과 같은 문제가 발생하지 않는다. 아마존이 이렇게 할 수 있는 것은 커서의 방향을 탐지하기 때문이다.
It’s easy to move the cursor from Amazon’s main dropdown to its submenus. You won’t run into the bootstrap bug. They get away with this by detecting the direction of the cursor’s path.

커서가 위의 파란색 삼각형 구역에 들어서면 현재 나타나있는 하위 메뉴가 좀 더 오래 열려 있다. If the cursor moves into the blue triangle the currently displayed submenu will stay open for just a bit longer.

커서가 어디에 있든지 현재 마우스 위치와 드롭다운 메뉴의 우측상단 우측하단 모서리 사이의 삼각형 구도를 그려볼 수 있다. 마우스의 다음 위치가 그 삼각형 안에 있다면, 사용자가 커서를 현재 떠 있는 하위 메뉴로 옮길 가능성이 높다. 아마존은 이것을 이용해 훌륭한 효과를 만들어 낸다. 커서가 그 파란 삼각형 구역 내에 머무는 내내 현재 하위 메뉴는 열려 있다. 커서가 순간적으로 "Appstore for Android" 위에 올려져 있어도 상관없다 -- 사용자는 아마 "Learn more about Cloud Drive." 를 클릭하러 가는 중일 것이다. At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open. It doesn’t matter if the cursor hovers over "Appstore for Android" momentarily — the user is probably heading toward "Learn more about Cloud Drive."

커서가 파란 삼각형 밖으로 나가면 하위 메뉴가 즉시 바뀌면서 바로 반응하는 인상을 강하게 남긴다. And if the cursor goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.

만약 당신도 나만큼 이런 사소한 것에 감동하는 geek 이라면 (주로 컴퓨터 프로그래밍이나 수학 등 남들이 그다지 깊은 관심을 갖지 않는 어렵고 복잡한 분야에 흥분하고 폭 빠지는 살짝 천재적이고 살짝 괴짜) 눈여겨 보길.. 이와 같은 방향성 메뉴를 탐지할 때 각종 이벤트(event)를 발생시키는 jQuery plugin을 만들었다 jQuery-menu-aim. 현재 Khan Academy 의 새 "Learn" 메뉴에 사용중이다: So if you’re as geeky as me and think something this trivial is cool, I made a jQuery plugin that fires events when detecting this sort of directional menu aiming: jQuery-menu-aim. We’re using it in the new Khan Academy "Learn" menu:

내가 보기엔 아주 똑부러지고 산뜻해 보이는 것 같다. 아마존을 따라한 건 하나도 부끄럽지 않다. 분명 이건 오래전부터 누군가 문제 삼아 해결되고 잊혀지고 또 해결책이 재발견되기를 반복했을 거라 생각한다. I think it feels snappy. I’m not ashamed to copy Amazon. I’m sure this problem was solved years and years ago, forgotten, rediscovered, solved again, forgotten, rediscovered, solved again.

지구상에 다른 누군가가 jQuery-menu-aim 를 유용하게 사용하고 있다면, 사용 의견을 공유해주길 바란다. If anyone else on the planet ends up finding a use for jQuery-menu-aim, I’d be grateful to know what you think.

파란 삼각형 내의 움직임을 감지하기 위해 아마존이 사용하는 선형대수/벡터적 마술을 이해하는데 도움을 준 Ben Alpert 에게 고마움을 표한다. 결국 나는 선형대수에 대한 이해 부족으로 좀 더 투박한 slope-based approach (경사면적인 접근) 을 택했지만 말이다. 슬프다.... KA(Khan Academy) 동영상을 더 많이 시청해야겠다. Thanks go to Ben Alpert for helping me understand the linear algebra / cross-product magic Amazon uses to detect movement inside the "blue triangle." I ended up going w/ a cruder slope-based approach, mostly b/c I’ve lost all intuitive understanding of linear algebra. Sad. Need to watch more KA videos.

역자 후기
1. 공군 동영상 꼭 보세요! 웃기기도 하고 배울 점도 많습니다.
2. 옷장수님께서 좀 더 자세한 함수 분석을 해 주셨습니다. Amazon의 MEGA DROPDOWN menu 코드를 보고..
[참고##UI 디테일##]