습관관리 앱 : Jetpack Compose 광고 페이지 개발 및 성능 개선기

 

 

 

Jetpack Compose 광고 페이지 개발 및 성능 개선기

앱 아이디

 

오늘은 기존 습관 기록 앱에 쿠팡 파트너스 API를 연동하여 광고 상품을 보여주는 페이지를 개발하고, 사용자 경험을 개선하기 위해 이미지 로딩 성능을 최적화하는 과정을 거쳤습니다. 이 글에서는 전체 개발 과정과 마주쳤던 문제들, 그리고 해결 방법을 공유합니다.

1. ViewModel 상태 관리 및 API 연동

가장 먼저, API 통신 결과를 UI에 효과적으로 전달하기 위해 ViewModel에서 상태 관리를 구현했습니다. API 요청 상태를 Loading, Success, Error로 나누어 관리하는 AdProductState Sealed Interface를 정의하고, 이를 StateFlow로 UI에 노출시켰습니다.

// MainViewModel.kt

sealed interface AdProductState {
    object Loading : AdProductState
    data class Success(val products: List<BestProduct>) : AdProductState
    data class Error(val message: String) : AdProductState
}

@HiltViewModel
class MainViewModel @Inject constructor(...) : ViewModel() {

    private val _adProductState = MutableStateFlow<AdProductState>(AdProductState.Loading)
    val adProductState = _adProductState.asStateFlow()

    fun fetchCupangData(context: Context) {
        viewModelScope.launch {
            _adProductState.value = AdProductState.Loading
            try {
                // ... API 호출 로직 ...
                val response = CupangClient.getClient().getBestCategories(...)

                if (response.data != null) {
                    _adProductState.value = AdProductState.Success(response.data)
                    // 성능 개선을 위한 이미지 프리로딩 호출
                    preloadImages(context, response.data)
                } else {
                    _adProductState.value = AdProductState.Error("No products found")
                }
            } catch (e: Exception) {
                _adProductState.value = AdProductState.Error(e.message ?: "Unknown error")
            }
        }
    }
    // ...
}
    

2. Composable UI 구현: AdProductPage

ViewModel에서 제공하는 adProductState를 구독하여 상태에 따라 다른 UI를 보여주는 Composable 화면을 만들었습니다. LazyColumn을 사용하여 상품 목록을 효율적으로 표시하도록 구성했습니다.

// AdProductPage.kt

@Composable
fun AdProductPage(viewModel: MainViewModel = hiltViewModel()) {
    val state = viewModel.adProductState.collectAsState()
    when (val currentState = state.value) {
        is AdProductState.Loading -> {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                CircularProgressIndicator()
            }
        }
        is AdProductState.Success -> {
            LazyColumn(modifier = Modifier.fillMaxSize()) {
                items(currentState.products) { product ->
                    // 상품 아이템 UI
                }
            }
        }
        is AdProductState.Error -> {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = currentState.message)
            }
        }
    }
}
    

3. 이미지 로딩 성능 개선 과정

단순히 이미지 URL을 Coil에 넘겨주자, 사용자가 스크롤할 때마다 로딩 인디케이터가 보이면서 사용자 경험을 해쳤습니다. 앱 시작 시점에 이미 상품 정보를 모두 가져왔으므로, 광고 페이지에 진입했을 때는 이미지가 즉시 표시되어야 했습니다.

3.1. 1차 개선: 로딩 인디케이터와 플레이스홀더

우선 로딩 중임을 명확히 보여주기 위해 AsyncImage 대신 SubcomposeAsyncImage를 사용하고, loading 파라미터에 CircularProgressIndicator를 설정해주었습니다. 이는 로딩이 길어질 때 사용자에게 피드백을 주기 위한 최소한의 조치였습니다.

// AdProductPage.kt (개선 중)

SubcomposeAsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(product.productImage)
        .crossfade(true)
        .build(),
    contentDescription = product.productName,
    loading = {
        CircularProgressIndicator()
    },
    modifier = Modifier.size(128.dp)
)
    

3.2. 2차 개선: 이미지 프리로딩 (Pre-loading)

근본적인 문제를 해결하기 위해, 이미지 프리로딩 기법을 도입했습니다. ViewModel에서 상품 정보 API를 호출한 직후, 응답으로 받은 이미지 URL 목록을 Coil의 캐시에 미리 저장하는 방식입니다.

주의: 처음에는 preloadImages 함수 내에서 ImageLoader(context)로 새로운 이미지 로더 인스턴스를 만드는 실수를 했습니다. 이 경우 프리로딩에 사용된 캐시와 UI에서 사용된 캐시가 달라져 효과가 없었습니다.

애플리케이션 전역에서 사용되는 싱글톤 ImageLoader 인스턴스 (context.imageLoader)를 사용해야 캐시가 공유되어 프리로딩이 정상적으로 동작합니다.

// MainViewModel.kt (최종)

private fun preloadImages(context: Context, products: List<BestProduct>) {
    // context.imageLoader를 사용하여 싱글톤 인스턴스에 접근
    val imageLoader = context.imageLoader
    products.forEach {
        val request = ImageRequest.Builder(context)
            .data(it.productImage)
            // 실제 이미지를 보여줄 필요는 없으므로, 메모리/디스크 캐시에만 저장
            .build()
        imageLoader.enqueue(request)
    }
}
    

4. 캐시 동작 확인 및 디버깅

프리로딩이 정말 효과가 있는지 확인하기 위해, SubcomposeAsyncImage의 onSuccess 콜백을 사용하여 이미지 데이터의 출처(dataSource)를 로그로 확인했습니다.

앱을 처음 실행하고 광고 페이지에 접근했을 때는 NETWORK 또는 DISK에서 이미지를 로드했지만, 앱을 다시 시작하거나 다른 화면에 갔다 돌아오면 MEMORY 캐시에서 이미지를 즉시 불러오는 것을 확인할 수 있었습니다.

// AdProductPage.kt (디버깅)

SubcomposeAsyncImage(
    model = ...,
    contentDescription = ...,
    loading = { ... },
    onSuccess = { result ->
        // 이미지 출처 로그: MEMORY, DISK, NETWORK
        Log.d("AdProductPage", "Image loaded from: ${result.result.dataSource}")
    },
    modifier = Modifier.size(128.dp)
)
    

5. 기타 문제 해결

개발 과정에서 몇 가지 추가적인 경고와 오류를 해결했습니다.

• BestProduct 클래스 오류: DTO 클래스명이 Product로 되어 있던 것을 BestProduct로 수정하여 해결했습니다.
• Coil 의존성: build.gradle.kts에 io.coil-kt:coil-compose 의존성을 추가했습니다.
• OnBackInvokedCallback 경고: Android 13의 예측 뒤로가기 제스처 지원을 위해 AndroidManifest.xml에 android:enableOnBackInvokedCallback="true" 속성을 추가했습니다.
• hiltViewModel Deprecation: androidx.hilt.navigation.compose.hiltViewModel 대신 androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel를 사용하도록 import 경로를 수정했습니다.

결론

단순한 기능 구현에서 시작하여, 사용자 경험을 저해하는 성능 문제를 발견하고 이를 개선하는 과정을 통해 많은 것을 배울 수 있었습니다. 특히 이미지 로딩과 같은 비동기 작업을 다룰 때, 캐시 전략과 라이브러리의 동작 원리를 정확히 이해하는 것이 얼마나 중요한지 다시 한번 깨닫게 되었습니다. 이제 사용자는 광고 페이지에 진입했을 때, 지연 없이 상품 이미지를 즉시 확인할 수 있게 되었습니다.