메뉴와 네비게이션 UI

하이솝·2026년 5월 2일

학습 목표

  • Scaffold를 이해하고 사용할 수 있다
  • 앱바(App Bar)를 이해하고 사용할 수 있다
  • 메뉴(DropdownMenu)를 이해하고 사용할 수 있다
  • 다이얼로그(AlertDialog BottomSheet)를 구현할 수 있다
  • 네비게이션(NavigationBar, NavigationDrawer, NavHost)을 이해·구현할 수 있다
  • 스낵바(Snackbar)를 이해하고 사용할 수 있다.
  • 코틀린 코루틴을 이해하고 설명할 수 있다.

Scaffold

  • Material Design에서 복잡한 사용자 인터페이스를 위한 기본 구조
  • App Bar, Floating Action Button등을 포함하고 일관된 디자인 제공


앱바(App Bar)

  • 사용자에게 현재 화면에 필요한 액션과 네비게이션 액션을 제공하는 컨테이너
  • 앱의 상단 또는 하단에 표시됨
  • TopAppBar
    • 네비게이션 및 현재 필요 액션
  • BottomAppBar
    • 현재 화면에 필요한 액션 중심

메뉴(DropdownMenu)

  • 사용자가 아이콘, 텍스트 필드 또는 기타 컴포넌트를 클릭한 다음
    일시적으로 나타나는 드롭다운 메뉴(옵션 목록)에서 옵션을 선택할 수 있음

  • DropdownMenu, DropdownMenuItem을 이용하여 구현

  • DropdownMenu

    • expanded: 메뉴 표시 여부
    • onDismissRequest: 메뉴가 닫힐 때 호출
    • content: 드롭다운 메뉴 옵션, DropdownMenuItem 컴포저블 사용
  • DropdownMenuItem

    • text: 메뉴 옵션 이름
    • onClick: 옵션 선택 시 호출

다이얼로그(AlertDialog)

  • 앱 콘텐츠 위에 대화상자로 메시지를 표시하거나 입력 받기 위한 UI
    • 파일 삭제와 같은 작업 진행 전에 사용자에게 확인 요청
    • 일정 관리에서 일정 추가할 때 사용자 입력을 받아야 하는 경우


Bottom Sheet Dialog

  • 앱 아래쪽에 표시하는 다이얼로그


  • 보통 BottomBar에 같은 수준의 3-5개 대상 화면에 대해 화면 전환할 때 사용

  • NavigationBar로 대상 선택 메뉴 구성

    • NavigationBarItem
  • NavHost로 실제 보여질 화면을 구성

  • NavigationBar와 NavHost의 연결은
    navigation controller를 통해서

NavHost와 navigation controller를 사용하지 않아도 됨


  • 앱의 여러 화면으로 전환하는 대상을 선택할 수 있는 서랍
  • ModalNavigationDrawer, ModalDrawerSheet를 이용하여 탐색 서랍을 구성
    • NavigationDrawerItem으로 대상 하나를 정의


Snackbar

  • 화면 하단에 표시되는 간단한 알림


코틀린 코루틴(Coroutines)

  • 협력적 멀티태스킹

  • 모바일 앱은 애니메이션, 네트워크 통신이나 DB 접근처럼
    시간이 오래 걸리는 작업이 많음

    • 문제점
      작업이 완료될 때 까지 기다리는 동안 메인 스레드가 멈추게 되면(Blocking), 화면이 멈추고 ANR(Application Not Responding) 발생 가능
    • 해결책
      기다리는 동안 스레드를 양보하고, 작업이 끝나면 다시 돌아오는 비차단(non-blocking) 방식 필요
  • 코루틴은 스레드에 비해 가벼움

    • 스레드는 생성 및 컨텍스트 스위칭 비용이 높고, 강제로 선점
    • 코루틴은 자발적인 양보를 필요로 하며, 매우 가볍고 부담 없음
    • 하나의 스레드에 여러 코루틴이
      자발적으로 양보하며, 협력적으로 멀티태스킹을 수행
    • 함수 앞에 suspend 키워드로 코루틴임을 나타냄
      suspend fun myCoroutine()

코루틴 3대 요소

코루틴 스코프(CoroutineScope)

  • 코루틴이 수행되는 범위, 코루틴은 반드시 코루틴 스코프 내에서 실행
    예)
    viewModelScope: 뷰모델 생명주기에 맞춰 종료
    lifecycleScope: 액티비티/프래그먼트 생명주기에 맞춰 종료

디스패쳐(Dispatcher) = 스레드

  • 어떤 스레드에서 실행?
  • Dispatcher.Main: UI 업데이트용 (메인 스레드)
  • Dispatcher.IO: 네트워크 디스크 읽기/쓰기 등 무거운 작업용
  • Dispatcher.Default: CPU 집약적인 계산 작업용

Coroutine Context

  • 어떤 정보를 담고 있는가?
  • 코루틴의 이름, Dispatcher, Job 등을 담고 있는 컨텍스트

0개의 댓글