햄버거 메뉴와 소세지 링크의 장단점

왜 하필 모바일에서 사용하는 메뉴 UI 타입의 이름이 햄버거와 소세지가 되었는지는 잘 모르겠다. 아무튼 두 가지 메뉴 타입의 장단점을 얘기한 글을 하나 소개한다.

원문 링크: https://uglyduck.ca/hamburger-menu-alternative/

햄버거 메뉴의 장점

• 시각적 공간의 최소화
• 상당수의 사용자들이 기능을 이해하고 있음
• 디자이너가 모바일에서 모든 항목을 쑤셔넣기 편함

햄버거 메뉴의 단점

• 스크린 리더와 키보드만 쓰는 사용자에게도 잘 작동하는지 확인하기 위한 추가 업무 필요
• 하위 메뉴, 도움말 등이 있을 때 복잡도 상승
• 표시를 위해 추가적인 자바스크립트 작업이 필요할 수 있음
• 사용자의 추가적인 반응 필요(클릭해서 펼친 사용 가능한 항목을 살펴봐야 함)

위 글의 저자는 햄버거 메뉴도 그렇게 나쁘지만은 않으나, 그럼에도 그 의도를 깨거나 잘못 이용하는 이들에게는 소세지 링크를 권한다고 한다.

소세지 링크란?

아래 스크린샷을 참조하자.

소세지 링크

소세지 링크의 장점

• 극도로 최소화된 css
• 스크린 리더와 키보드 대응
• 자바스크립트 불필요
• 사용자가 전혀 상호작용 없이 선택 가능한 옵션이 있음

소세지 링크의 단점

• 시각적으로 그리 끌리지 않을 수는 있음
• 복잡한 사이트맵보다는 중소규모의 메뉴 목록에 적합
• 적절한 시각효과 없이는 사용자가 스크롤 기능을 알아채기 힘듦

그럼 소세지 링크를 햄버거 메뉴 대신 사용해야 할까?

프로젝트 성향에 달려 있다고. 이 둘을 같이 사용하는 프로젝트도 있을 수 있다. UI 설계자가 선택 가능한 대안이 여러 개 있음을 알고 있고, 그걸 적절하게 선택할 수 있다면 가장 좋다.