Push Presentation in Mobile Development: 개요, 화면 스택

Push Presentation이란?

Push Presentation은 새 화면이 스택의 맨 위에 배치되고 이전 화면이 그 아래 메모리에 남아 있는 내비게이션 메커니즘입니다. 사용자는 상세 화면을 순차적으로 열어 콘텐츠를 더 깊이 탐색하며, 뒤로 가기 버튼은 이전 단계로 되돌아갑니다.

Push 내비게이션의 아키텍처는 LIFO(Last In, First Out) 데이터 구조를 기반으로 합니다. 새 화면은 항상 스택의 끝에 추가되며, 제거는 맨 위에서만 발생합니다. 이는 예측 가능한 동작을 보장합니다. 사용자는 뒤로 가기 버튼이 정확히 한 단계 뒤로 돌아간다는 것을 항상 알고 있습니다. 내비게이션 스택은 애플리케이션 복잡성에 따라 2~10+개의 화면을 포함할 수 있습니다.

Push Presentation은 계층적 콘텐츠가 있는 애플리케이션의 주요 패턴입니다: 뉴스 피드, 제품 카탈로그, 다단계 메뉴 및 문서. Material Design에 따르면, 스택 내비게이션은 사용자가 일반적인 것에서 구체적인 것으로 콘텐츠를 탐색하고 각 후속 화면이 주제에 대한 이해를 심화하는 시나리오에 적합합니다.

내비게이션 스택: 작동 원리

내비게이션 스택은 각 요소가 자체 ViewController 또는 Fragment의 상태를 저장하는 화면의 순서가 있는 집합입니다. Push 작업 중에 새 화면이 스택에 추가되고, 그 출현이 애니메이션 처리되며(iOS에서는 오른쪽에서 슬라이드, Android에서는 아래에서 슬라이드 또는 페이드), 활성화됩니다.

Pop 작업(뒤로 가기 버튼 누름) 중에는 맨 위 화면이 스택에서 제거되고, 파괴되거나 메모리로 이동되며, 이전 화면이 활성화됩니다. iOS는 기본적으로 팝된 ViewController를 파괴하여 메모리를 해제합니다. Android는 Fragment를 재생성 없이 복원할 수 있는 백 스택에 저장할 수 있습니다.

스택 깊이는 성능에 영향을 미칩니다: 스택의 각 화면은 메모리를 소비합니다. 권장 사항: 스택에 10개 이상의 화면을 유지하지 마십시오. 깊은 내비게이션의 경우 PopToRoot를 사용하거나 새 루트 화면으로 스택을 다시 시작하십시오. Android의 Navigation Component는 SavedStateHandle을 통해 스택 상태를 자동으로 관리합니다.

iOS의 Push 내비게이션: UINavigationController

UINavigationController는 UIViewController 스택을 관리하는 iOS 컨테이너 컨트롤러입니다. 현재 화면의 제목과 뒤로 가기 버튼이 있는 내비게이션 바를 자동으로 표시합니다. 기본 푸시 애니메이션은 오른쪽에서 왼쪽으로 슬라이드되어 사용자에게 콘텐츠에 몰입하는 느낌을 줍니다.

스택 관리

화면 추가는 pushViewController(_:animated:)를 통해 수행됩니다. 제거는 popViewController(animated:)를 통해 수행됩니다. 루트 화면으로 돌아가려면 popToRootViewController(animated:)를 사용하십시오. UINavigationController는 viewControllers 속성(스택의 모든 컨트롤러 배열)을 통해 프로그래밍 방식의 스택 관리도 지원합니다.

내비게이션 바 및 Large Titles

내비게이션 바에는 화면 제목, 뒤로 가기 버튼 및 선택적 작업 버튼이 포함됩니다. iOS 11부터 Large Titles(prefersLargeTitles)을 통해 스크롤 시 애니메이션으로 축소되는 확대된 글꼴로 제목을 표시할 수 있습니다. 이는 내비게이션 계층 구조를 개선하고 사용자에게 현재 섹션을 알려줍니다.

let detailVC = DetailViewController()
detailVC.title = "Item Details"
navigationController?.pushViewController(detailVC, animated: true)

// 이전 화면으로 돌아가기
navigationController?.popViewController(animated: true)

// 루트로 돌아가기
navigationController?.popToRootViewController(animated: true)

Android의 Push 내비게이션: Navigation Component

Navigation Component는 선언적 내비게이션을 위한 Android Jetpack 라이브러리입니다. 내비게이션 그래프(nav_graph)를 통해 프래그먼트 또는 Compose 화면을 관리하는 NavController를 제공합니다. Android의 Push는 iOS와 유사합니다: 각 새 Fragment가 백 스택에 추가되고 뒤로 가기 버튼이 이전으로 돌아갑니다.

NavHost 및 NavGraph

NavHost는 NavGraph에서 현재 대상을 표시하는 컨테이너입니다. NavGraph는 모든 애플리케이션 화면과 그 사이의 연결을 설명하는 XML 파일입니다. 전환은 대상과 선택적 인수를 지정하는 actions를 통해 정의됩니다. Navigation Component는 시스템 뒤로 가기, 애니메이션 및 상태 저장을 자동으로 처리합니다.

인수 및 Safe Args

화면 간 데이터 전달을 위해 Navigation Component는 Safe Args — 타입 안전 인수 클래스의 코드 생성을 지원합니다. Bundle에 수동으로 데이터를 배치하는 대신, 개발자는 NavGraph에서 인수를 선언하고 생성된 Directions 및 Args 클래스를 통해 받습니다. Safe Args는 타입 불일치 오류를 제거하고 리팩토링을 단순화합니다.

// XML에서 NavGraph 정의
<!-- res/navigation/nav_graph.xml -->
@navigation {
    NavHost(startDestination = "list") {
        composable("list") { ListScreen() }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { DetailScreen(it.arguments()?.getInt("itemId") ?: 0) }
    }
}

// 프로그래밍 방식으로 이동
navController.navigate("detail/42")

Push 스택과 BottomNavigation

Bottom Navigation과 Push 내비게이션의 조합은 모바일 애플리케이션에서 일반적인 패턴입니다. 각 Bottom Navigation 탭에는 자체 화면 스택이 있습니다. Navigation Component는 탭당 NavHost 또는 각 탭에 대한 별도 그래프가 있는 단일 NavHost를 통해 이를 지원합니다. 탭 전환은 푸시 스택 상태를 재설정하지 않습니다.

Push Presentation vs Modal Presentation

Push Presentation과 Modal Presentation은 서로 다른 내비게이션 작업을 해결합니다. Push는 각 새 화면이 컨텍스트를 심화시키는 순차적 콘텐츠 보기를 위해 설계되었습니다. Modal은 완료가 필요한 집중 작업을 위한 것입니다. 실제로는 특정 시나리오에 적합한 패턴을 선택하는 것이 중요합니다.

주요 선택 기준: 사용자가 컨텍스트를 잃지 않고 자유롭게 돌아갈 수 있어야 하는 경우 — Push를 선택하십시오. 작업이 일시적이고 기본 콘텐츠(양식, 인증)를 차단하는 경우 — Modal을 사용하십시오. 동일한 화면에서 패턴 혼합(Modal 내부의 Push)은 허용되지만 명확한 시각적 계층 구조가 필요합니다.

일반적인 실수는 논리적으로 기본 흐름의 일부인 화면 시퀀스에 Modal을 사용하는 것입니다. 예를 들어, 주문 생성 마법사(1단계 → 2단계 → 3단계)는 모달 창 체인보다 모달 컨테이너 내부의 Push를 통해 구현하는 것이 좋습니다. 이는 내비게이션 계층 구조와 반환의 예측 가능성을 유지합니다.

Swift 및 Kotlin 구현 예제

두 플랫폼에서 Push 내비게이션의 전체 구현을 살펴보겠습니다. Swift 예제는 프로그래밍 방식의 스택 관리 및 딥 링크 처리를 갖춘 UINavigationController를 보여줍니다. Kotlin 예제는 NavHost, 인수 및 애니메이션을 갖춘 Navigation Component를 보여줍니다.

class ListViewController: UIViewController {
    func showDetail(_ itemId: Int) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let detailVC = storyboard.instantiateViewController(
            withIdentifier: "DetailViewController"
        ) as! DetailViewController
        detailVC.itemId = itemId
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    var itemId: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Item #\(itemId)"
    }
}

@Composable
fun PushNavigationApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ListScreen(
                onItemClick = { id -> navController.navigate("detail/$id") }
            )
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments()?.getInt("itemId") ?: 0
            DetailScreen(itemId = itemId, onBack = { navController.popBackStack() })
        }
    }
}

예제는 기본 Push 내비게이션(목록 → 세부 정보)을 보여줍니다. iOS는 수동 데이터 전달과 함께 스토리보드 및 UINavigationController를 사용합니다. Android는 타입 안전 인수와 자동 백 스택 관리와 함께 NavHost를 사용합니다. 두 접근 방식 모두 딥 링크, 사용자 지정 애니메이션 및 회전 시 상태 저장을 지원합니다.