습관관리 앱 구현 과정 : 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 등 초기화
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" // 예외 발생 시 기본값 } }
이번 과정을 통해 Jetpack Compose에서 일관된 UI를 제공하는 TopAppBar를 구현하고, PackageManager를 이용해 동적으로 앱 정보를 표시하며, Intent를 통해 외부 앱과 연동하는 방법을 적용해 보았습니다. 특히 BuildConfig 문제 발생 시 대안을 찾아 해결하는 과정이 좋은 경험이 되었습니다.
이 장의 목표는 “30일 플랜을 실행 가능한 프로젝트”로 바꾸는 일입니다. 설치만 끝내는 세팅이 아니라, 바로 화면을 띄우고 기능을 쌓아올릴 수 있는 구조를 만듭니다. 핵심은 안정성(빌드가 흔들리지 않기), 단순성(모듈/의존성 최소), 확장성(기능을 추가해도 복잡해지지 않기)입니다.
왜 구조부터 잡아야 할까요?
워치는 화면이 작고 상호작용이 짧습니다. 그래서 “기능 1~2개를 빠르게 완성”하는 흐름이 중요합니다. 이를 돕는 구조는 곧 개발 속도입니다.
초기에 정리된 모듈/의존성/상태 관리 패턴은 디버깅 시간을 절반으로 줄입니다.
출시 시점의 서명/정책/자산 준비까지 거슬러 올라가면, 세팅이 깔끔할수록 마지막 주가 편해집니다.
필수 환경 점검
IDE: 최신 안정 버전의 Android Studio
SDK/에뮬: Wear OS 3 이상 에뮬레이터 1개, 실제 워치가 있다면 페어링
프로젝트 템플릿: Wear OS Compose 템플릿을 권장(기본 네비게이션/테마 포함)
패키지 네이밍: 초기에 고정(스토어/서명과 직결). 바꾸면 후반 작업이 증가합니다.
프로젝트 뼈대 만들기(초기 2시간)
앱 이름/아이콘/패키지명 확정
최소 구성만 유지: app(워치 앱) + core 모듈 1~2개 정도
core:design — 테마, 색상, 타이포, 공통 컴포저블(예: PrimaryButton, AppScaffold)
core:model(선택) — 데이터 모델/간단한 유틸(시간 포맷 등)
이유: 피처 단위 모듈화는 후반으로 미루고, 먼저 “작동하는 MVP”까지 직선으로 갑니다.