안드로이드 가이드라인(5)_리스트와 내비게이션 드로어

학습목표

리스트와 드로어개념과 설계 원칙 이해하여 사용자에게 정보를 구조적으로 제공하는 방법을 학습한다.

---

1.리스트

• 리스트List는 일련의 내용 항목을 포함하는 행으로 구성되며, 콘텐츠의 형식이 다양하고, 각 행에는 아이콘과 텍스트가 표시된다.
• 리스트의 각 행은 타일이라고 하며, 타일의 높이는 서로 다를 수 있다. 각 타일에는 세 줄 이상의 텍스트를 표시할 수 있고, 텍스트의 길이는 일관성과 무관하게 달라질 수 있다.만약에 텍스트가 세 줄 이상이라면 카드를 사용하는 것이 좋다.
• 리스트는 수직으로만 스크롤할 수 있고, 각 타일의 스와이프 동작은 리스트 안에서 일관되게 유지되어야 한다.
• 타일은 파일을 폴더로 이동하는 것과 유사한 방법으로 리스트 안에서 수동으로 이동해 재정렬할 수 있지만, 날짜, 파일 크기, 알파벳 순서 등의 기준을 가지고 정렬하는 것이 좋다.
• 타일에는 관련 콘텐츠를 일관된 형식으로 표시해야 하며,
  계층 구조를 사용해 유형 또는 콘텐츠의 우선순위에 따라 중요한 정보를 빠르게 찾을 수 있도록 해야 한다.

리스트 디자인의 기본은

• 논리적인logical:목록은 알파벳순, 숫자, 연대순 또는 사용자 기본 설정과 같이 내용을 검색하기 쉽게 만드는 논리적 방식으로 정렬되어야 합니다.
• 실행 가능actionable; 컬렉션에서 특정 항목을 쉽게 식별하고 해당 항목에 대해 작업할 수 있는 방식으로 내용을 나열합니다.
•  Consistent 일관성: 목록은 아이콘, 텍스트 및 작업을 일관된 형식으로 표시해야 합니다.

---

5-2. 내비게이션 드로어

https://m3.material.io/components/navigation-drawer/specs

Navigation drawer – Material Design 3

내비게이션 드로어Navigation Drawer에는 햄버거 메뉴와 모달 드로어가 있다.

내비게이션 드로어는 다음 용도로 사용하는 것이 좋습니다.

• 최상위 대상이 5개 이상인 앱
• 두 가지 이상의 탐색 계층이 있는 앱
• 관련 없는 대상 간의 빠른 탐색

---

햄버거 메뉴

드로어는 주로 리스트 UI를 숨기고 있다가 슬라이딩해 여는 일종의 내비게이션 UI로, 슬라이딩메뉴라고 한다.

• 초창기 모바일 UI 패턴에서는 오른쪽 상단에 세로 방향 점 세 게로 구성되 오버플로 버튼Overflow Button을 이용해 숨긴 메뉴를 표시했지만, 최근에는 세로줄 세개를 사용하 는 것이 일반적이다. 가로로 세 줄이 있는 모양이 햄버거를 닮았다고 하여 햄버거 메뉴Hamburger Menu라고 부르며, 별도의 정식 이름은 없고 목록 아이콘이라고도 한다.
• 햄버거 메뉴 아이콘을 탭 하면 추가 옵션이 있는 사이드 메뉴가 햄버거 아이콘이 있는 위치에서 반대 방향으로 슬라이드되어 화면 전체 또는 일부를 덮으면서 나타난다. 햄버거 메뉴와 드로어는 따로 생각하기 어려운 UI 라고 할 수 있다.

---

모달 드로어

내비게이션 드로어는 주로 5개 이상의 최상위 목적지가 있는 앱이나 두 개 이상의 탐색 계층 구조 가 있는 앱 또는 관련 없는 대상 간의 빠른 탐색을 위해 사용된다.
표준 드로어는 탐색 메뉴 아이 콘을 탭해 영구적으로 보거나 열고 닫을 수 있으며, 목적지와 앱 콘텐츠에 동시 접속할 수 있다. 하지만 표준 드로어는 태블릿과 데스크톱에서만 사용할 수 있고, 모바일에서는 모달 드로어를 사용한다. 모달 드로어Modal Drawer는 측면 모달 드로어와 하단 모달 드로어로 구분된다
 
모달드로어는 작동하는 순간 나머지 콘텐츠와 상호작용을 차단하며, 앱의 UI 보다 높은 고도에 위치한다.

• 모달 드로어는 어두워진 오른쪽 스크림Scrim을 탭하거나 모달 자체를 스와이프해 닫을 수 있고, 모달 내에서 스크롤할 수도 있다.
• 하단 모달 드로어는 드로어의 콘텐츠가 전체 화면 높이의 50% 미만인 경우에 사용하며, 모달 내에서의 스크롤링은 불가능하다. 모달 드로어의 구성 요소는 [그림 6-68]과 같다.

내비게이션 드로어 디자인의 기본은

• 아이덴티피어블 : 드로어의 배치 및 목록 스타일 내용을 통해 내비게이션 드로어를 명확하게 식별할 수 있습니다.
• 조직적인(오거나이즈드) 내비게이션 드로어는 사용자 중요도에 따라 목적지를 정렬하는데, 자주 가는 목적지가 먼저, 관련 목적지가 함께 그룹화되어 나타냅니다.
• 상황별 컨텍스츄어 : 탐색 드로어는 다양한 앱 레이아웃을 수용하도록 표시하거나 숨길 수 있습니다.

몇가지 디자인 가이드를 살펴보면요

• 앱이 오른쪽에서 왼쪽으로 설정된 경우가 아니면 화면 오른쪽에서 탐색 드로어를 열지 마십시오.
• 드로어 메뉴의 영역 텍스트 레이블을 한 줄에 맞추려고 텍스트 크기를 줄이지 마십시오.
• 똑같은 아이콘을 사용하지 않습니다. 또한 아이콘 + 텍스트라면 전체적으로 일관성있게 디자인 해야합니다.
• 그리고 구분선을 줄수있다고 했는데...이럴때는 각 타일마다 주는 것은 피하는 것이 좋습니다.

내비게이션 드로어의 가이드라인을 보면요.

• 표준모달 드로의 너비는 256dp , right margin은 48dp보다는 크게

 

---