이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Firebase와 Jetpack Compose로 Android 앱 빌드

1. 소개

최종 업데이트: 2022년 11월 16일

Firebase와 Jetpack Compose를 사용하여 Android 앱 빌드

이 Codelab에서는 Make It So라는 Android 앱을 빌드합니다. 이 앱의 UI는 네이티브 UI를 빌드하기 위한 Android의 최신 툴킷인 Jetpack Compose로 완전히 빌드되었습니다. 직관적이며 .xml 파일을 작성하여 활동, 프래그먼트, 뷰에 바인딩하는 것보다 코드가 더 적습니다.

Firebase와 Jetpack Compose가 함께 잘 작동하는지 이해하기 위한 첫 번째 단계는 최신 Android 아키텍처를 이해하는 것입니다. 좋은 아키텍처는 구성 요소가 구성되고 서로 통신하는 방식이 매우 명확해지므로 시스템을 이해하고, 개발 및 쉽게 유지관리할 수 있습니다. Android 환경에서 권장되는 아키텍처는 Model - View - ViewModel입니다. 모델은 애플리케이션에서 데이터에 액세스하는 레이어를 나타냅니다. View는 UI 레이어이며 비즈니스 로직에 관해 아무것도 알 수 없습니다. 또한 ViewModel에는 비즈니스 로직이 적용되며, 이를 위해 ViewModel에서 Model 레이어를 호출해야 하는 경우도 있습니다.

이 도움말을 읽고 Jetpack Compose로 빌드된 Android 앱에 Model - View - ViewModel이 적용되는 방식을 이해하는 것이 좋습니다. 그러면 코드베이스를 더 쉽게 이해하고 다음 단계를 더 쉽게 완료할 수 있기 때문입니다.

빌드할 항목

Make It So는 사용자가 할 일을 추가 및 수정하고 플래그, 우선순위, 마감일을 추가하고 할 일을 완료로 표시할 수 있는 간단한 할 일 목록 애플리케이션입니다. 아래 이미지는 이 애플리케이션의 두 가지 기본 페이지, 즉 작업 만들기 페이지와 생성된 작업 목록이 있는 기본 페이지를 보여줍니다.

Make it So Add Task(작업 추가 화면) 홈 화면으로 설정

이 앱에 없는 몇 가지 기능을 추가합니다.

이메일과 비밀번호로 사용자 인증
Firestore 컬렉션에 리스너를 추가하고 UI가 변경사항에 반응하도록 설정
커스텀 trace를 추가하여 앱에서 특정 코드의 성능 모니터링
원격 구성을 사용하여 기능 전환 버튼을 만들고 단계적 출시를 사용하여 기능 전환 실행

학습 내용

최신 Android 애플리케이션에서 Firebase 인증, Performance Monitoring, 원격 구성, Cloud Firestore를 사용하는 방법
Firebase API를 MVVM 아키텍처에 적합하게 만드는 방법
Compose UI에서 Firebase API로 변경한 사항을 반영하는 방법

필요한 항목

Android 스튜디오 Flamingo+
API 21 이상을 사용하는 Android Emulator
Kotlin 프로그래밍 언어에 관한 지식

2. 샘플 앱 가져오기 및 Firebase 설정

샘플 앱의 코드 가져오기

명령줄에서 GitHub 저장소를 클론합니다.

git clone https://github.com/FirebaseExtended/make-it-so-android.git

Firebase 설정

가장 먼저 해야 할 일은 Firebase Console로 이동하고 아래와 같이 '+ 프로젝트 추가' 버튼을 클릭하여 Firebase 프로젝트를 만드는 것입니다.

Firebase Console

화면의 단계에 따라 프로젝트 만들기를 완료합니다.

각 Firebase 프로젝트 내에서 Android, iOS, 웹, Flutter, Unity용 다양한 앱을 만들 수 있습니다. 아래와 같이 Android 옵션을 선택합니다.

Firebase 프로젝트 개요

이어서 다음 단계를 수행합니다.

패키지 이름으로 com.example.makeitso를 입력하고 원하는 경우 닉네임을 입력합니다. 이 Codelab에서는 디버그 서명 인증서를 추가할 필요가 없습니다.
다음을 클릭하여 앱을 등록하고 Firebase 구성 파일에 액세스합니다.
google-services.json 다운로드를 클릭하여 구성 파일을 다운로드하고 make-it-so-android/app 디렉터리에 저장합니다.
다음을 클릭합니다. Firebase SDK가 이미 샘플 프로젝트의 build.gradle 파일에 포함되어 있으므로 Next를 클릭하여 Next steps로 건너뜁니다.
콘솔로 이동을 클릭하여 완료합니다.

Make it So 앱이 제대로 작동하도록 하려면 코드로 이동하기 전에 콘솔에서 인증 제공업체를 사용 설정하고 Firestore 데이터베이스를 만드는 두 가지 작업을 수행해야 합니다. 먼저 사용자가 앱에 로그인할 수 있도록 인증을 사용 설정해 보겠습니다.

Build 메뉴에서 Authentication을 선택한 다음 Get Started를 클릭합니다.
로그인 방법 카드에서 이메일/비밀번호를 선택하여 사용 설정합니다.
그런 다음 새 제공업체 추가를 클릭하고 익명을 선택하여 사용 설정합니다.

다음으로 Firestore를 설정합니다. Firestore를 사용하여 로그인한 사용자의 작업을 저장합니다. 각 사용자는 데이터베이스의 컬렉션 내에서 자체 문서를 가져옵니다.

빌드 메뉴에서 Firestore를 선택한 다음 데이터베이스 만들기를 클릭합니다.
프로덕션 모드에서 시작을 사용 설정한 상태로 유지하고 다음을 클릭합니다.
메시지가 표시되면 Cloud Firestore 데이터를 저장할 위치를 선택합니다. 프로덕션 앱을 개발할 때 대다수의 사용자와 가깝고 Firebase Functions와 같은 다른 Firebase 서비스와 동일한 리전에 위치하는 것이 좋습니다. 이 Codelab에서는 기본 리전을 유지하거나 가장 가까운 리전을 선택할 수 있습니다.
사용 설정을 클릭하여 Firestore 데이터베이스를 프로비저닝합니다.

잠시 Firestore 데이터베이스에 강력한 보안 규칙을 빌드해 보겠습니다. Firestore 대시보드를 열고 규칙 탭으로 이동합니다. 그런 다음 보안 규칙을 다음과 같이 업데이트합니다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

이러한 규칙은 기본적으로 앱에 로그인한 모든 사용자가 컬렉션 내에서 직접 문서를 만들 수 있도록 규정합니다. 그런 다음 문서를 만든 사용자만 문서를 보거나 업데이트하거나 삭제할 수 있습니다.

애플리케이션 실행

이제 애플리케이션을 실행할 준비가 되었습니다. Android 스튜디오에서 make-it-so-android/start 폴더를 열고 앱을 실행합니다 (Android Emulator 또는 실제 Android 기기를 사용하여 실행할 수 있음).

3. Firebase 인증

어떤 기능을 추가할 예정인가요?

Make It So 샘플 앱의 현재 상태에서는 사용자가 먼저 로그인하지 않고도 앱 사용을 시작할 수 있습니다. 이를 위해 익명 인증을 사용합니다. 하지만 익명 계정을 사용하면 사용자가 다른 기기나 이후 세션에서도 자신의 데이터에 액세스할 수 없습니다. 익명 인증은 웜 온보딩 시 유용하지만 사용자가 항상 다른 형태의 로그인으로 전환할 수 있는 옵션을 제공해야 합니다. 이를 염두에 두고 이 Codelab에서는 Make It So 앱에 이메일 및 비밀번호 인증을 추가합니다.

이제 코딩할 차례입니다.

사용자가 계정을 만드는 즉시 이메일과 비밀번호를 입력하여 Firebase Authentication API에 이메일 사용자 인증 정보를 요청한 다음 새 사용자 인증 정보를 익명 계정에 연결해야 합니다. Android 스튜디오에서 AccountServiceImpl.kt 파일을 열고 다음과 같이 linkAccount 함수를 업데이트합니다.

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

이제 SignUpViewModel.kt를 열고 onSignUpClick 함수의 launchCatching 블록 내에서 서비스 linkAccount 함수를 호출합니다.

screens/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

먼저 인증을 시도하고 호출이 성공하면 다음 화면 (SettingsScreen)으로 이동합니다. launchCatching 블록 내에서 이러한 호출을 실행하면 첫 번째 줄에서 오류가 발생하면 예외가 포착되어 처리되고 두 번째 줄에는 전혀 도달하지 않습니다.

사용자가 이미 인증되었으므로 SettingsScreen을 다시 열면 바로 로그인 및 계정 만들기 옵션이 사라졌는지 확인해야 합니다. 이렇게 하려면 SettingsViewModel가 현재 사용자의 상태 (AccountService.kt에서 사용 가능)를 수신 대기하도록 하여 계정이 익명인지 여부를 확인하겠습니다. 이렇게 하려면 SettingsViewModel.kt의 uiState를 다음과 같이 업데이트합니다.

screens/settings/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

마지막으로 해야 할 일은 SettingsViewModel에서 내보낸 상태를 수집하도록 SettingsScreen.kt의 uiState를 업데이트하는 것입니다.

screens/settings/SettingsScreen.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

이제 사용자가 변경될 때마다 SettingsScreen가 자체적으로 재구성되어 사용자의 새 인증 상태에 따라 옵션을 표시합니다.

테스트할 시간입니다.

Make it So를 실행하고 화면 오른쪽 상단의 톱니바퀴 아이콘을 클릭하여 설정으로 이동합니다. 여기에서 계정 만들기 옵션을 클릭합니다.

Make it So 설정 화면 가입 화면

유효한 이메일과 안전한 비밀번호를 입력하여 계정을 만드세요. 설정이 완료되면 설정 페이지로 리디렉션되며, 여기에 로그아웃과 계정 삭제라는 두 가지 새로운 옵션이 표시됩니다. Firebase Console의 인증 대시보드에서 사용자 탭을 클릭하여 생성된 새 계정을 확인할 수 있습니다.

4. Cloud Firestore

어떤 기능을 추가할 예정인가요?

Cloud Firestore의 경우 Make it So에 표시된 작업을 나타내는 문서를 저장하는 Firestore 컬렉션에 리스너를 추가합니다. 이 리스너를 추가하면 이 컬렉션에 대한 모든 업데이트를 받게 됩니다.

이제 코딩할 차례입니다.

다음과 같이 StorageServiceImpl.kt에서 사용 가능한 Flow를 업데이트합니다.

model/service/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

이 코드는 user.id에 따라 작업 컬렉션에 리스너를 추가합니다. 각 작업은 tasks라는 컬렉션의 문서로 표현되며 각 작업에는 userId라는 필드가 있습니다. currentUser의 상태가 변경되면 (예: 로그아웃) 새 Flow가 내보내집니다.

이제 TasksViewModel.kt의 Flow가 서비스에서와 동일하게 반영되도록 해야 합니다.

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

마지막으로 UI를 나타내는 TasksScreens.kt의 composable function가 이 흐름을 인식하고 상태로 수집하도록 합니다. 상태가 변경될 때마다 구성 가능한 함수는 자동으로 재구성되어 사용자에게 최신 상태를 표시합니다. 다음을 TasksScreen composable function에 추가합니다.

screens/tasks/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

구성 가능한 함수가 이러한 상태에 액세스하면 다음과 같이 LazyColumn (화면에 목록을 표시하는 데 사용하는 구조)를 업데이트할 수 있습니다.

screens/tasks/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

테스트할 시간입니다.

제대로 작동하는지 테스트하려면 앱을 사용하여 새 작업을 추가합니다 (화면 오른쪽 하단의 추가 버튼 클릭). 태스크 만들기가 완료되면 Firestore 콘솔의 Firestore 컬렉션에 표시됩니다. 다른 기기에서 동일한 계정으로 Make it So에 로그인하면 할 일 항목을 수정하고 모든 기기에서 실시간으로 업데이트되는 것을 볼 수 있습니다.

5. Performance Monitoring

어떤 기능을 추가할 예정인가요?

성능이 매우 나쁘고 간단한 작업을 완료하는 데 시간이 너무 오래 걸리는 사용자는 앱 사용을 포기할 가능성이 매우 높기 때문에 성능에는 주의를 기울여야 합니다. 따라서 사용자가 앱에서 수행하는 특정 여정에 대한 몇 가지 측정항목을 수집하는 것이 유용한 경우도 있습니다. 이를 지원하기 위해 Firebase Performance Monitoring에서 커스텀 trace를 제공합니다. 다음 단계에 따라 커스텀 trace를 추가하고 Make it So의 다양한 코드로 성능을 측정합니다.

이제 코딩할 차례입니다.

Performance.kt 파일을 열면 trace라는 인라인 함수가 표시됩니다. 이 함수는 Performance Monitoring API를 호출하여 커스텀 trace를 만들고 trace 이름을 매개변수로 전달합니다. 표시되는 다른 매개변수는 모니터링하려는 코드 블록입니다. 각 trace에 대해 수집되는 기본 측정항목은 완전히 실행되는 데 걸리는 시간입니다.

model/service/Performance.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

코드베이스에서 측정이 중요하다고 생각되는 부분을 선택하고 커스텀 트레이스를 추가할 수 있습니다. 다음은 이 Codelab의 앞부분 (AccountServiceImpl.kt에서)에 본 linkAccount 함수에 맞춤 트레이스를 추가하는 예입니다.

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

이제 여러분의 차례입니다. Make it So 앱에 커스텀 트레이스를 추가하고 다음 섹션으로 이동하여 예상대로 작동하는지 테스트합니다.

테스트할 시간입니다.

커스텀 trace 추가를 완료한 후 앱을 실행하고 측정하려는 기능을 몇 번 사용해야 합니다. 그런 다음 Firebase Console에서 성능 대시보드로 이동합니다. 화면 하단에는 네트워크 요청, 커스텀 trace, 화면 렌더링의 세 가지 탭이 있습니다.

커스텀 trace 탭으로 이동하여 코드베이스에 추가한 trace가 표시되고 이러한 코드를 실행하는 데 일반적으로 걸리는 시간을 확인할 수 있는지 확인합니다.

6. 원격 구성

어떤 기능을 추가할 예정인가요?

원격 구성에는 원격으로 앱의 모양을 변경하는 것부터 사용자 세그먼트별로 다른 동작을 구성하는 것까지 다양한 사용 사례가 있습니다. 이 Codelab에서는 원격 구성을 사용하여 Make it So 앱의 새로운 작업 수정 기능을 표시하거나 숨기는 기능 전환을 만듭니다.

이제 코딩할 차례입니다.

가장 먼저 해야 할 일은 Firebase Console에서 구성을 만드는 것입니다. 그러려면 원격 구성 대시보드로 이동하여 매개변수 추가 버튼을 클릭해야 합니다. 아래 이미지에 따라 입력란을 작성합니다.

원격 구성 매개변수 만들기 대화상자

모든 필드가 작성되면 저장 버튼과 게시를 차례로 클릭합니다. 이제 매개변수가 생성되어 코드베이스에서 사용할 수 있으므로 새 값을 앱에 가져오는 코드를 추가해야 합니다. ConfigurationServiceImpl.kt 파일을 열고 다음 두 함수의 구현을 업데이트합니다.

model/service/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

첫 번째 함수는 서버에서 값을 가져오고 앱이 시작되는 즉시 SplashViewModel.kt에서 호출됩니다. 처음부터 모든 화면에서 최신 값을 사용할 수 있도록 하는 가장 좋은 방법입니다. 나중에 사용자가 어떤 작업을 하고 있을 때 UI나 앱의 동작을 변경하면 좋은 사용자 환경이 아닙니다.

두 번째 함수는 방금 콘솔에서 만든 매개변수에 대해 게시된 불리언 값을 반환합니다. 또한 loadTaskOptions 함수에 다음을 추가하여 TasksViewModel.kt에서 이 정보를 검색해야 합니다.

screens/tasks/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

첫 번째 줄의 값을 가져오고 이를 사용하여 두 번째 줄에는 작업 항목의 메뉴 옵션을 로드합니다. 값이 false이면 메뉴에 수정 옵션이 포함되지 않습니다. 이제 옵션 목록을 만들었으므로 UI에서 올바르게 표시하도록 해야 합니다. Jetpack Compose로 앱을 빌드할 때는 TasksScreen의 UI 모양을 선언하는 composable function를 찾아야 합니다. 따라서 TasksScreen.kt 파일을 열고 TasksViewModel.kt에서 사용 가능한 옵션을 가리키도록 LazyColum를 업데이트합니다.

screens/tasks/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

TaskItem는 단일 작업의 UI 모양을 선언하는 또 다른 composable function입니다. 또한 각 작업에는 사용자가 작업 끝에 있는 점 3개 아이콘을 클릭하면 표시되는 옵션이 포함된 메뉴가 있습니다.

테스트할 시간입니다.

이제 앱을 실행할 준비가 되었습니다. Firebase Console을 사용하여 게시한 값이 앱의 동작과 일치하는지 확인합니다.

false인 경우 점 3개 아이콘을 클릭하면 두 가지 옵션만 표시됩니다.
true인 경우 점 3개 아이콘을 클릭하면 세 가지 옵션이 표시됩니다.

Console에서 값을 몇 번 변경하고 앱을 다시 시작해 보세요. 이렇게 하면 원격 구성을 사용하여 앱에서 새 기능을 쉽게 실행할 수 있습니다.

7. 수고하셨습니다

축하합니다. Firebase와 Jetpack Compose를 사용하여 Android 앱을 성공적으로 빌드했습니다.

UI용으로 Jetpack Compose로 완전히 빌드된 Android 앱에 Firebase 인증, Performance Monitoring, 원격 구성, Cloud Firestore를 추가하고 권장되는 MVVM 아키텍처에 맞게 만들었습니다.

Firebase와 Jetpack Compose로 Android 앱 빌드

1. 소개

Firebase와 Jetpack Compose를 사용하여 Android 앱 빌드

빌드할 항목

학습 내용

필요한 항목

2. 샘플 앱 가져오기 및 Firebase 설정

샘플 앱의 코드 가져오기

Firebase 설정

애플리케이션 실행

3. Firebase 인증

어떤 기능을 추가할 예정인가요?

이제 코딩할 차례입니다.

테스트할 시간입니다.

4. Cloud Firestore

어떤 기능을 추가할 예정인가요?

이제 코딩할 차례입니다.

테스트할 시간입니다.

5. Performance Monitoring

어떤 기능을 추가할 예정인가요?

이제 코딩할 차례입니다.

테스트할 시간입니다.

6. 원격 구성

어떤 기능을 추가할 예정인가요?

이제 코딩할 차례입니다.

테스트할 시간입니다.

7. 수고하셨습니다

추가 자료

참조 문서