CareVision - Jetpack Compose Navigation 구성요소 설명

강유리 (Rein)·2024년 11월 10일

CareVision 안드로이드 서비스

목록 보기

2/6

CareVision
환자 곁에서 늘 함께, 간호사의 눈이 되어주는 환자 모니터링 서비스
Github : https://github.com/SSU-Capstone-Aurora
3-2 소프트웨어학부 캡스톤1 수업에서 진행하는 프로젝트 입니다.

네비게이션 공식문서

Kotlin DSL과 Navigation Compose에서의 타입 안정성

주로 위 링크의 공식문서를 기반으로 Jetpack Compose Navigation 세팅을 진행했습니다.

*사진 출처: https://newsletter.jorgecastillo.dev/p/the-composable-node-tree

Kotlin DSL와 Navigation Compose에서의 타입 안전성 공식 문서에서는 Navigation 2.8.0 버전부터 Compose에서 TypeSafety한 Route를 사용가능하다고 합니다. 따라서 아래와 같이 Kotlin-Serialize에 대한 의존성 추가도 필요합니다.

*TypeSafety에 대한 이야기는 추후에 할 예정입니다.

libs

kotlinxSerialization = "1.9.0"
kotlinxSerializationJson = "1.6.3"
composeNavigation = "2.8.0-alpha08"


[libraries]
androidx-compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }

[pugins]
kotlinx-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlinxSerialization" }

build.gradles.kts(Project)

    alias(libs.plugins.kotlinx.serialization) apply false

build.gradle.kts(:feature)

plugins {
	alias(libs.plugins.kotlinx.serialization)
}

dependencies {
	implementation(libs.kotlinx.serialization.json)
}

Jetpack Compose Navigation을 위해 알아야 하는 개념들은 아래와 같습니다.

Host

현재 탐색 중인 UI요소를 표시하는 화면 영역
사용자가 화면을 이동하면 Host가 탐색 대상을 전환하여 새로운 화면 콘텐츠를 보여준다
사용자가 앱을 탐색 시 앱은 기본적으로 탐색 호스트 안팍으로 대상을 전환한다.
보통 NavHost라는 컴포저블로 구현
NavController와 NavGraph를 기반으로 화면 간의 이동을 관리
탐색 그래프의 Destination을 보여주는 역할, Route를 NavController로 전달받으면 해당 목적지로 이동

Graph

앱 내 모든 탐색 대상과 연결 방법을 정의하는 데이터 구조

Controller

대상 간 탐색을 관리하는 중앙 코디네이터
컨트롤러는 대상 간 탐색, 딥 링크 처리, 백 스택 관리 등의 작업을 위한 메서드를 제공

Destination

탐색 그래프의 노드
해당 노드로 이동하면 호스트가 콘텐츠를 표시

Route

대상과 필요한 데이터를 고유하게 식별
Route를 사용하여 탐색 가능
Route를 통해 목적지로 이동할 수 있음

저는 이 개념을 공부하면서 사실 크게 개념이 와닿지 않았는데, 계속 읽을수록 트리구조가 떠올랐습니다.

다시 말해,

Jetpack Compose Navigation을 트리 구조에 비유하면, NavHost가 트리의 뿌리 역할을 하며, 전체 탐색 흐름을 시작합니다.

NavGraph는 이 트리의 가지처럼 여러 목적지 간의 경로와 관계를 정의합니다.

NavController는 나무의 줄기처럼 다양한 목적지 간의 이동을 제어하며, 화면 전환을 관리합니다.

Destination은 트리의 잎사귀처럼 각 화면(Screen)을 나타내며,

Route는 각 목적지로 가는 고유 경로를 지정해 데이터를 전달할 수 있게 합니다.

그러면 매번 모든 화면에 대한 NavGraph가 하나씩 있어야 할까요? - 중첩 그래프

모든 화면에 대해 개별 NavGraph를 만들 필요는 없습니다.

하나의 NavGraph에 여러 화면을 정의할 수 있고, 필요할 때만 중첩 NavGraph를 추가하는 것이 일반적입니다.

기능별로 독립적인 흐름을 유지할 때 필요한 화면 그룹에 중첩 NavGraph를 적용하는 것이 좋습니다.

중첩 그래프는 하나의 큰 트리 안에 서브 트리들이 존재하는 구조로 비유할 수 있습니다.

큰 트리의 NavController는 서브 트리 안팎의 이동을 조정하며, 서브 트리 내의 NavHost는 해당 기능에 특화된 탐색을 관리합니다. 서브 트리 내에서 자유롭게 이동하면서도 필요할 때 주 트리로 되돌아올 수 있는 구조로, 전체 흐름 속에서도 독립적으로 동작합니다.

따라서 이 중첩 그래프라는 개념이 있기에 우리는 Compose Navigation 설계가 Navigation에 대한 구현 전에 필요합니다.

중첩 그래프를 잘 활용한다면 앱의 네비게이션 구조가 간결해질 수 있습니다.

다음 포스팅에서는 직접 CareVision에서 사용했던 Navigation코드와 함께 Compose Navigation을 설계하고 구현했던 내용을 공유해보겠습니다.