모바일 UI에서 햄버거 메뉴가 사라진 이유는?


2022년 이후 많은 안드로이드 앱이 좌측 상단의 햄버거 메뉴를 포기한 이유는? 왼쪽에서 당기면 여러 메뉴가 나오는 디자인이 좋은데.

안드로이드 앱에서 햄버거 메뉴를 포기하는 이유는 다양합니다. 여기에는 몇 가지 주요 이유가 있습니다:

  1. 네비게이션 패턴의 변화: Material Design 가이드라인의 변화와 함께 앱 개발자들은 더 직관적인 네비게이션 패턴을 채택하기 시작했습니다. 햄버거 메뉴는 사용자에게 어떤 옵션이 가능한지 알려주기가 어려워, 더 직접적이고 사용자 친화적인 네비게이션을 선호할 수 있습니다.
  2. 제스처 기반 네비게이션: 많은 최신 Android 기기에서는 제스처 기반 네비게이션을 사용하는 것이 일반적입니다. 이로 인해 뒤로가기, 홈, 최근 앱 등의 기능에 쉽게 접근할 수 있으므로 햄버거 메뉴를 사용할 필요성이 줄어듭니다.
  3. 공간 활용: 햄버거 메뉴는 화면의 상단 좌측에 위치하며, 화면 공간을 차지하는 요소입니다. 따라서 화면 공간을 더 효과적으로 활용하고 사용자에게 더 많은 콘텐츠를 표시하기 위해 햄버거 메뉴를 대체하는 패턴을 사용하는 것이 일반적입니다.

이러한 이유로 많은 개발자가 햄버거 메뉴를 대체하는 네비게이션 디자인을 선택하고 있으며, 사용자 경험을 개선하기 위해 노력하고 있습니다.

Google Material Design 가이드라인에 햄버거 메뉴를 잘 활용하는 방법과 템플릿이 마련되어 있었습니다.

최근 스마트폰에서는 왼쪽에서 오른쪽으로 스와이프 하는 경우 뒤로가기 동작이 작동하는데, 이것 때문이야?

네, 맞습니다. 왼쪽에서 오른쪽으로 스와이프할 때 뒤로가기 동작이 작동하는 것이 햄버거 메뉴가 점차 사라진 중요한 이유 중 하나입니다.

많은 최신 안드로이드 기기와 앱에서는 제스처 네비게이션을 채택하고 있어, 화면의 왼쪽 가장자리에서 오른쪽으로 스와이프하면 뒤로가기가 작동합니다. 이런 제스처는 뒤로가기 버튼 대신 더 직관적으로 앱을 탐색할 수 있도록 도와주지만, 동시에 햄버거 메뉴와 충돌할 수 있습니다. 사용자가 메뉴를 열려고 스와이프를 하다가 실수로 뒤로가기를 트리거하는 경우가 발생할 수 있기 때문이죠.

이 문제를 해결하기 위해 개발자들은 햄버거 메뉴 대신:

  • 하단 네비게이션 바
  • 탭 레이아웃
  • 플로팅 액션 버튼 (FAB)

같은 대체 인터페이스를 도입하게 되었습니다. 이는 제스처 기반의 탐색 흐름과 더 잘 맞고, 사용자가 실수할 가능성을 줄이는 데 도움을 줍니다.

기존에는 왼쪽 위에 햄버거 메뉴 (≡)를 많이 도입했지만, 많은 앱이 모바일 화면에서 하단 네비게이션 바를 적용하게 되었습니다.

PC 환경에서는 여전히 유효한 레이아웃 UI

그렇구나. PC에서는 있는게 좋은 것 같아.

맞아요, PC 환경에서는 햄버거 메뉴가 여전히 유용할 수 있습니다. PC에서는 큰 화면과 마우스를 사용해 탐색하기 때문에 제스처 기반 네비게이션의 충돌 문제가 없고, 화면의 여유 공간이 더 많아서 햄버거 메뉴가 불편함 없이 적절하게 작동할 수 있습니다.

특히 데스크탑 앱이나 웹사이트에서는 많은 메뉴나 옵션을 한곳에 정리할 수 있는 햄버거 메뉴가 유연한 탐색을 제공하는 장점이 있습니다. 사용자는 쉽게 클릭해서 여러 서브 메뉴에 접근할 수 있기 때문에 복잡한 앱이나 사이트에서는 여전히 선호될 수 있죠.

또한, 데스크탑에서는 화면의 넓이 때문에 네비게이션 바를 항상 표시해 두는 방식이 일반적이지만, 화면을 더 깔끔하게 유지하고 싶다면 햄버거 메뉴를 통해 숨겨진 옵션들을 정리하는 것이 더 유리할 수 있습니다.

PC에서는 스와이프 제스처 대신 클릭 기반이 주로 사용되기 때문에, 햄버거 메뉴의 단점보다는 정보를 직관적으로 정리할 수 있는 장점이 더 크게 작용하는 것 같습니다.

File, Edit, View 같은 메뉴처럼 이를 하나로 묶어서 표현해도 좋은 것 같더라고.

그렇군요! “File,” “Edit,” “View”와 같은 전통적인 메뉴를 하나로 묶는 방식은 미니멀리즘UI 단순화를 선호하는 디자인 트렌드와 잘 맞을 수 있습니다. 이렇게 하면 화면이 더 깔끔해지고, 사용자가 메뉴를 찾는 과정에서 혼란을 줄일 수 있는 장점이 있습니다.

특히 간결한 인터페이스가 필요한 경우나 기능이 많지 않은 애플리케이션에서는 이런 접근이 더 직관적일 수 있습니다. 사용자가 한 번에 모든 주요 기능을 볼 수 있어 메뉴 간 전환이 더 빠르고 편리해지죠.

이런 통합 메뉴는 다양한 방법으로 디자인할 수 있습니다:

  • 드롭다운 메뉴로 여러 항목을 한 번에 보여주기.
  • 모달 윈도우로 중요한 기능을 모아서 사용자에게 제공.

결국 사용자의 요구와 애플리케이션의 복잡도에 따라 최적의 메뉴 구조를 결정하는 것이 중요합니다.

Visual Studio Code