습관관리 앱 구현 과정 : Jetpack Compose에서 TopAppBar 구현 과정, 동적 버전 표시 및 웹 연동
Jetpack Compose를 사용한 안드로이드 앱 개발 중, 사용자에게 일관된 경험을 제공하기 위해 공통 TopAppBar를 구현한 과정을 공유합니다. 이 글에서는 TopAppBar에 앱 아이콘, 동적으로 가져온 앱 이름과 버전, 그리고 외부 URL로 연결되는 정보 아이콘을 추가하는 방법을 단계별로 설명합니다.
1. TopAppBar 구현 위치 결정: MainActivity
처음에는 각 화면(HomeScreen)에 TopAppBar를 추가할까 고민했지만, 앱 전체의 일관성 및 확장성을 위해 MainActivity.kt의 MainScreen Composable 내에 Scaffold를 사용해 구현하기로 결정했습니다. 이렇게 하면 모든 NavHost 화면에 동일한 TopAppBar가 적용됩니다.
// MainActivity.kt
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
// ... NavController, Context 등 초기화
Scaffold(
modifier = Modifier.fillMaxSize(),
topBar = {
// TopAppBar가 위치할 곳
},
bottomBar = {
// BottomNavigation
}
) { innerPadding ->
NavHost(
navController = navController,
startDestination = Screen.Home.route,
modifier = Modifier.padding(innerPadding) // TopAppBar, BottomBar 영역을 제외한 컨텐츠 영역
) {
// ... composable 화면들
}
}
}
2. 앱 이름 및 버전 정보 동적으로 표시하기
TopAppBar에 표시될 앱 이름은 strings.xml 리소스에서, 버전 이름은 앱의 빌드 정보에서 동적으로 가져오도록 구현했습니다.
문제 발생: BuildConfig 참조 오류
처음에는 build.gradle.kts의 versionName을 가져오기 위해 BuildConfig.VERSION_NAME을 사용하려고 했습니다. 이를 위해 build.gradle.kts 파일에 buildConfig = true 옵션을 추가하고 Gradle 동기화를 수행했지만, IDE에서 BuildConfig 클래스를 찾지 못하는 문제가 계속 발생했습니다.
해결 방안: PackageManager 사용
BuildConfig 문제의 대안으로, PackageManager를 사용하여 런타임에 직접 앱의 버전 정보를 가져오는 안정적인 방법을 선택했습니다. 이 방식은 Gradle 빌드 과정의 영향을 받지 않아 더 유연합니다.
수정된 MainActivity.kt
@Composable
fun MainScreen() {
// ...
val context = LocalContext.current
val versionName = remember {
try {
val packageInfo = context.packageManager.getPackageInfo(context.packageName, 0)
packageInfo.versionName
} catch (e: Exception) {
"1.0" // 예외 발생 시 기본값
}
}
Scaffold(
topBar = {
TopAppBar(
title = {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.drawable.ic_launcher_v1_round),
contentDescription = "App Icon",
modifier = Modifier.size(40.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "${stringResource(id = R.string.app_name)} v$versionName")
}
},
// ...
)
},
// ...
) {
// ...
}
}
3. 정보 아이콘 추가 및 외부 웹 브라우저 연동
마지막으로, TopAppBar의 우측에 정보 아이콘을 추가하고, 이 아이콘을 클릭하면 지정된 URL이 웹 브라우저에서 열리도록 구현했습니다.
TopAppBar의 actions 파라미터에 IconButton을 추가하고, Intent(Intent.ACTION_VIEW)를 사용하여 클릭 시 웹 페이지를 열도록 했습니다.
MainActivity.kt의 TopAppBar actions 부분
// ...
topBar = {
TopAppBar(
title = { /* ... */ },
actions = {
val url = "https://billcorea.tistory.com/747"
val context = LocalContext.current
val intent = remember { Intent(Intent.ACTION_VIEW, Uri.parse(url)) }
IconButton(onClick = { context.startActivity(intent) }) {
Icon(
imageVector = Icons.Default.Info,
contentDescription = "Information"
)
}
}
)
},
//...
결론
이번 과정을 통해 Jetpack Compose에서 일관된 UI를 제공하는 TopAppBar를 구현하고, PackageManager를 이용해 동적으로 앱 정보를 표시하며, Intent를 통해 외부 앱과 연동하는 방법을 적용해 보았습니다. 특히 BuildConfig 문제 발생 시 대안을 찾아 해결하는 과정이 좋은 경험이 되었습니다.
