메뉴에서 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" 메가 드롭다운의 마우스 오버 효과를 보면 엄청나게 빠르다. 마우스를 메인 메뉴 아래로 움직일 때 하위 메뉴들이 얼마나 빨리 나타나는지 한 번 보시라:


정말 반응이 빠르다!! 난 이걸 발견하자마자 여기에 완전히 정신이 빼았겼다. 보통 드롭다운 메뉴의 하위 메뉴를 활성화시킬 때는 약간의 시간 지연이 있을 수 밖에 없다. (내가 개발자로 있는) Khan Academy의 예전 드롭다운 하나를 예로 들자면:


한 박자 늦게 뜨는게 보이나? 이 딜레이가 필요한 이유는, 이 딜레이가 없으면, 메인 메뉴에서 하위 메뉴로 마우스를 옮길 때 하위 메뉴가 사라져버리는, 도무지 깰 수 없는 한심한 두더지 게임이 되어버리기 때문이다. 예를 들자면 다음과 같은 bootstrap의 드롭다운 메뉴처럼 말이다:

내가 bootstrap을 싫어하는게 아니니 꼬아서 받아들이지 마시길... 실망스러운 하위 메뉴의 적절한 예를 드는 것일 뿐



그렇다면 아마존은 어떻게 이런 딜레이 없이 해냈을까?? 

아마존에서는, 메인 메뉴에서 하위 메뉴로 커서를 옮기기가 쉽다. 위의 bootstrap과 같은 문제가 발생하지 않는다. 아마존이 이렇게 할 수 있는 것은 커서의 방향을 탐지하기 때문이다.

커서가 위의 파란색 삼각형 구역에 들어서면 현재 나타나있는 하위 메뉴가 좀 더 오래 열려 있다.


커서가 어디에 있든지 현재 마우스 위치와 드롭다운 메뉴의 우측상단 우측하단 모서리 사이의 삼각형 구도를 그려볼 수 있다. 마우스의 다음 위치가 그 삼각형 안에 있다면, 사용자가 커서를 현재 떠 있는 하위 메뉴로 옮길 가능성이 높다. 아마존은 이것을 이용해 훌륭한 효과를 만들어 낸다. 커서가 그 파란 삼각형 구역 내에 머무는 내내 현재 하위 메뉴는 열려 있다. 커서가 순간적으로 "Appstore for Android" 위에 올려져 있어도 상관없다 -- 사용자는 아마 "Learn more about Cloud Drive." 를 클릭하러 가는 중일 것이다. 

커서가 파란 삼각형 밖으로 나가면 하위 메뉴가 즉시 바뀌면서 바로 반응하는 인상을 강하게 남긴다. 

만약 당신도 나만큼 이런 사소한 것에 감동하는 geek 이라면 (주로 컴퓨터 프로그래밍이나 수학 등 남들이 그다지 깊은 관심을 갖지 않는 어렵고 복잡한 분야에 흥분하고 폭 빠지는 살짝 천재적이고 살짝 괴짜) 눈여겨 보길.. 이와 같은 방향성 메뉴를 탐지할 때 각종 이벤트(event)를 발생시키는 jQuery plugin을 만들었다 jQuery-menu-aim. 현재 Khan Academy 의 새 "Learn" 메뉴에 사용중이다: 


내가 보기엔 아주 똑부러지고 산뜻해 보이는 것 같다. 아마존을 따라한 건 하나도 부끄럽지 않다. 분명 이건 오래전부터 누군가 문제 삼아 해결되고 잊혀지고 또 해결책이 재발견되기를 반복했을 거라 생각한다. 

지구상에 다른 누군가가 jQuery-menu-aim 를 유용하게 사용하고 있다면, 사용 의견을 공유해주길 바란다. 

파란 삼각형 내의 움직임을 감지하기 위해 아마존이 사용하는 선형대수/벡터적 마술을 이해하는데 도움을 준 Ben Alpert 에게 고마움을 표한다. 결국 나는 선형대수에 대한 이해 부족으로 좀 더 투박한 slope-based approach (경사면적인 접근) 을 택했지만 말이다. 슬프다.... KA(Khan Academy) 동영상을 더 많이 시청해야겠다. 


원문: http://story.pxd.co.kr/655


저작자 표시
신고
Posted by suny imoo
블로그 이미지
UX Designer facebook.com/jsy.1005

카테고리

imoo (190)
숨통 (0)
In Lens (56)
Design (124)
레시피스크랩 (8)

Back to top