[Android] Principles of navigation

leeeha·2024년 11월 12일
0

안드로이드

목록 보기
5/6
post-thumbnail

학습 목표

  • 일관되고 직관적인 사용자 경험을 만들기 위한 네비게이션 원칙에 대해 알아보자!
  • NavController.navigateUp() vs NavController.popBackStack() 이 둘의 차이점을 알아보자!

Fixed start destination

모든 앱은 고정된 시작 대상을 가진다. 시작 대상이란 유저가 런처로 앱을 실행시켰을 때, 가장 첫번째로 보는 화면을 의미한다. 또한 Back 버튼을 눌러서 런처로 돌아올 때, 가장 마지막으로 보는 화면이기도 한다.

image

위의 그림에서는 List Screen이 시작 대상이라고 볼 수 있다.

Note: 어떤 앱은 일회성 설정이나 일련의 로그인 화면을 가질 수 있는데, 이러한 화면들은 특정한 경우에만 사용자에게 보이는 조건부 화면이므로 시작 대상으로 간주하면 안 된다.

앱이 처음 실행되면 새로운 Task가 생성되고, 앱에 시작 대상이 표시된다. 이 시작 대상이 백 스택으로 알려진 base destination이 되며, 앱 탐색 상태의 기초가 된다.

스택의 상단은 현재 화면이며, 스택의 이전 destination들은 사용자가 탐색한 화면에 대한 기록을 나타낸다. 백 스택에는 항상 앱의 시작 대상이 스택의 맨 아래에 위치하게 된다. 그리고 백 스택을 변경하는 push, pop 연산은 스택의 top에서만 발생한다. Navigation Component는 모든 백 스택 명령을 대신 관리해주지만, 직접 관리하는 방법도 있다.

Up and Back are identical within your app's task

image

👉 왼쪽이 Up, 오른쪽이 Back 버튼

화면 하단의 시스템 네비게이션 바에 위치한 Back 버튼은, 사용자가 방문한 대상들을 역순으로 탐색할 때 사용된다. Back 버튼을 누를 때마다 현재 대상이 백 스택에서 pop 되면서, 이전 대상으로 이동할 수 있다.

화면 상단의 앱 바에 위치한 Up 버튼은, 앱의 Task 내에서는 Back 버튼과 동일하게 작동한다.

Back 버튼을 누르면 NavController.popBackStack(), Up 버튼을 누르면 NavController.navigateUp() 메서드가 호출된다.

The Up button never exits your app

사용자가 앱의 시작 대상에 있는 경우

  • Back 버튼: 앱을 종료시킨다.
  • Up 버튼: 표시되지 않는다. (앱을 종료시키지 않으므로)

다른 앱의 Task에서 딥링크로 앱을 실행시킨 경우

  • Back 버튼: 앱이 종료되고, 딥링크를 제공했던 원래 앱으로 돌아간다.
  • Up 버튼: 현재 앱의 백 스택에 따라, 상위 화면으로 이동한다. 이때, 백 스택은 실제 백 스택을 시뮬레이션 한 백 스택이다. (밑에서 추가 설명할 예정)

Deep linking simulates manual navigation

특정 대상으로 이동하기 위해, 딥링크를 사용하거나 수동으로 탐색할 수 있다. 이때 중요한 점은, 딥링크를 사용했을 때도 이전 대상으로 돌아갈 수 있다는 점이다.

이것이 가능한 이유는 앱의 task 내에서 특정 대상으로 딥 링크하면, 기존의 백 스택은 제거되고 deep-linked 백 스택으로 대체되기 때문이다.

Sunflow app 예시를 다시 보자.

image

위의 그림은 사용자가 런처에서 앱을 실행시켜 사과에 대한 상세 화면으로 이동한 모습이다. 탐색 동작에 따른 백 스택의 모습은 오른쪽 그림과 같을 것이다.

image

현재 앱이 이름을 통해 특정 식물의 상세 화면으로 이동하는 딥링크 기능을 제공한다고 가정해보자.

홈 버튼을 눌러서 앱을 백그라운드 상태로 전환시킨 다음에, 딥링크로 앱을 열면 기존의 백 스택이 오른쪽 그림과 같이 새로운 백 스택으로 완전히 대체된 것을 확인할 수 있다.

이처럼 딥링크로 만들어진 합성 백 스택은, 앱을 수동으로 탐색하여 얻을 수 있는 백 스택과 일치해야 한다. 이러한 점에서 앞서 시뮬레이션 된 백 스택이라고 표현했던 것이다.

중첩이 없는 단순한 내비게이션 그래프의 경우, 합성 백 스택은 시작 대상과 딥 링크 대상으로 구성된다. 보다 복잡한 중첩된 탐색 그래프의 경우, 합성 백 스택은 딥 링크 대상의 조상인 중첩된 그래프의 시작 대상도 포함한다.

Navigation Component는 딥 링크를 지원하며, 탐색 그래프의 모든 대상에 링크할 때 실제 백 스택을 재생성하게 된다.

참고자료

https://developer.android.com/guide/navigation/backstack?hl=ko

https://developer.android.com/guide/navigation/principles?hl=ko

https://n-square.tistory.com/115

profile
습관이 될 때까지 📝

0개의 댓글