안드로이드가이드라인(1)_내비게이션

학습목표

안드로이드 디자인 가이드라인 이해머티리얼 디자인(Material Design)의 기본 원칙과 목적을 학습한다.
안드로이드 UI 디자인에서 레이아웃, 색상, 타이포그래피의 역할을 파악한다.
실제 개발 환경에서의 디자인 활용구글의 Android Developers 플랫폼을 활용하여 UI 구성 요소를 이해한다.

안드로이드 가이드라인에 관한 사항은 머터리얼디자인 가이드 사이트를 참조하면 된다.

https://m3.material.io/

Material Design

---

1. 내비게이션

내비게이션Navigation은 서비스를 이용하기 위해 앱 화면을 이동하는 것을 말하며, 전용 내비게이션 컴포넌트와 콘텐츠에 내비게이션 속성을 포함해 다양한 수단으로 구현됩니다.

네이게이션 유형을 앱의 정보 구조 방향에 따라

측면 내비, 전면 내비, 역방향 내비게이션 이렇게 세 가지 탐색 방향 중 하나로 이동이 가능합니다.

1.1 측면 내비게이션 (Lateral Navigation)

• 계층 구조가 동일한 화면으로 이동하는 것
• 최상위 수준에 있는 모든 대상에 대한 액세스를 제공
• 두개이상의 최상위 대상이 있는 앱은 드로어Drawer나 하단의 내비게이션 모음 또는 탭을 통해 측면 내비게이션을 제공할 수 있다.

 

• a.네비게이션 드로어는 5개 이상의 최상위 목적지에 적합하며 일관된 네비게이션 환경을 위해 기기 크기에 따라 사용
• b. 단 하단내비바는 모바일 장치에서 3-5개의 최상위 대상에 대한 액세스를 제공하며 화면 간 위치, 가시성 및 지속성을 통해 대상 간에 빠르게 피벗할 수 있어야 함.
• c. 탭은 앱 계층 구조의 모든 수준에서 사용하여 화면 크기에 걸쳐 둘 이상의 피어 데이터 집합을 표시할 수 있습니다.

---

 

1.2 전면 내비게이션 (Forward Navigation)

- 연속적인 계층 구조, 흐름 단계, 앱에서의 화면 간 이동 등 을 의미

- 카드나 이미지와 같은 컨테이너, 버튼, 링크, 검색 사용도 포함된다.

 

그림에서 1번처럼

앨범Album 메뉴에 접속할 수 있으며, 이어서 앨범 메뉴에서 특정 노래로 이동할 수 있다( 1 ). 또한, 2번의한 화면에서 다른 화면으로 바로 이동하는

즉 검색하고 해당 노래로 바로 이동해 앱 화 면의 라이브러리 메뉴를 건너뛸 수도 있다( 2 ).

이때 버튼은 레이블, 배치, 시각적 강조를 통해 흐름을 확실히 파악할 수 있게 하며, 사용자는 검색을 통해 앱의 정보 구조 내 어디에서든 화면에 빠르게 접근할 수 있다

---

1.3 역방향 내비게이션 (backward Navigation)

역방향 내비게이션Backward Navigation은 최근 화면 기록 등을 이용해 사용자 기록을 역순으로 탐색하는 것

앱 내에서든 다른 앱으로든 이전 화면으로 이동하는 것, 또는 앱 내에서 계층적 화면을 역으로 이동하는 것을 말한다.

예를 들어, 웹 브라우저의 뒤로 단추는 역 시간순 탐색의 한 형태입니다.

 

이 때 플랫폼에서는 앱 내에서의 역방향 탐색 동작이 정확하게 정해져 있어야 하는데

[그림 6-6]의 정보 구조에서 확인할 수 있듯이 노래Song 메뉴에서의 역방향 탐색은 상위 계층인 앨범Album 메뉴이 다( 1 ). 노래 화면에서 다른 노래를 검색Search하는 것( 2 )도 역방향 내비게이션을 사용하는 것입니다.

이러한 유형의 내비게이션은 일반적으로 운영 체제 또는 플랫폼에서 제공됩니다.

그림 6-7처럼 뒤로가기 버튼을 이용한 역방향 탐색을 보면

1. Android 탐색 모음의 뒤로 버튼(A)  2. 웹 브라우저의 뒤로 버튼(B)을 나타내고 있습니다.

---

1.4. 상향식 내비게이션

최상위 화면에 도달할 때까지 ‘뒤로 가기’를 사용하는 역방 향 내비게이션과는 달리
앱의 계층 구조 내에서 한 수준 위를 탐색하는 방식이다.

---

역방향 내비게이션 구현시 사용자 환경을 최적화하려면:

• 사용자를 이전 화면 위치 및 상태(예: 수직 스크롤 위치)로 되돌려서 정보 호출 및 작업 재개 속도를 높여 줘야합니다. 즉 앱의 모든 하위 화면에는 상향 내비게이션이 구현되어야 한다.
• form 정보가 개인 정보 보호를 위해 지워진 경우와 같이 화면의 이전 상태를 더 이상 사용할 수 없는 경우 명확한 메시지를 제공합니다.
• 계층 구조에서 페이지 뎁스에 따른 화면과의 관계를 명확하게 나타냅니다.
  예를 들어 사용자가 앱의 하위 화면으로 직접 이동하는 경우 위쪽을 탐색할 수 있는 상위 화면을 식별할 수 있어야 합니다.

---

Navigation transitions

화면 사이를 이동할 때 발생하며, 이때 화면 전환을 나타내는 모션을 통해  사용자는 앱의 계층 구조를 보며 서로 어떻게 관련되는지 파악하게 된다.

- 계층 전환은 앱의 계층을 통해 사용자를 한 단계 위 또는 아래로 이동시키는 전환이며, 

- 반면 피어 트랜지션은 사용자를 형제자매(동일한 계층의 화면) 간에 이동입니다.

 

• 앨범의 사진, 프로필의 섹션 또는 흐름의 단계와 같이 동일한 부모를 공유하는 화면은
• 서로 간의 관계를 강화하기 위해 함께 이동합니다. 이때 피어 스크린은 한 쪽에서 미끄러져 들어오고, 형제 화면은 화면 밖으로 반대 방향으로 이동합니다.
• 주로 탭을 클릭했을 때의 화면 전환에서 볼 수 있는 전환 방식입니다.

3. 최상위 전환 Top-Level transitions

앱의 최상위 레벨에서 발생하며, 작업이 서로 관련되어 있지 않은 경우 불투명도와 비율을 같은 값으로 변경해 제자리에서 전환

형제 전환과 유사하게 보일 수 있지만, 구조적으로 다른 방식이다.

---

추가적으로 또다른 내비게이션 중 Search를 살펴보면

• •본 검색을 사용하면 검색 텍스트 필드에 쿼리를 입력하여 관련 결과를 볼 수 있음
• 검색 쿼리 입력 방법을 확장하여 과거 제안, 쿼리의 자동 완료 및 음성 입력을 포함할 수도 있음.
• 영구 검색(Persistent Search) :
  • 검색이 앱의 주요 초점인 경우 영구 검색을 사용
  • 검색 텍스트 필드는 포커스를 받을 준비가 된 검색 표시줄 내부에 표시 됨.
  • Expandable search : 검색 텍스트 상자 대신 도구 모음에 검색 아이콘을 표시

 

---