생각저장소 (배움의길에서 만나는 이야기)

2026-02-25Phase 3: 프레젠테이션 계층 구축1단계: ViewModel 및 Compose 기초 구축✅ MainViewModel 생성 (StateFlow 기반 UiState 관리)✅ SettingViewModel 생성 (설정 반응형 Flow)✅ InitViewModel 생성 (초기화 상태 관리)✅ Compose 화면 3개 생성: MainScreen, SettingScreen, InitScreen✅ UI 컴포넌트 3개 생성: DayInfoList, DayCard, CalendarGrid✅ NavGraph 구축: INIT → MAIN → SETTINGS 네비게이션2단계: MainActivity Compose 통합✅ MainActivity를 Compose 전용 진입점으로 전환✅ @AndroidEntr..

📸 Android | Jetpack Compose로 Photo Picker 구현 (백포트 없이)개요 (Intro)오늘은 Android 13 이상을 대상으로 Jetpack Photo Picker를 백포트 없이 Compose로 구현해보았습니다. Google Play 서비스의 백포트 모듈을 사용하지 않고도 최신 API만으로 충분히 구현 가능하다는 점을 확인했습니다.📅 날짜: 2025.11.06🎯 목표: Jetpack Photo Picker를 Compose에서 구현🧰 기술: Kotlin, Jetpack Compose, Coil, Android 13+문제 정의 (Problem / Motivation)앱에서 사용자에게 저장소 권한 없이 사진을 선택하게 하고 싶었습니다. Android 13 이상에서는 Jetp..

🚀 개발일기: Wear OS Tile Chip 너비 문제 해결📌 1️⃣ 핵심 개념 정리핵심 개념설명추가 정보예시Wear OS TileWear OS 기기에서 빠르고 간결한 정보 제공 및 앱 실행을 위한 사용자 인터페이스 요소.SuspendingTileService를 통해 데이터 및 UI 제공.날씨 타일, 피트니스 통계 타일.Chip (ProtoLayout Material)Wear OS Tiles에서 사용되는 버튼 형태의 Material 컴포넌트. 짧은 텍스트와 액션을 포함.setPrimaryLabelContent, setWidth, setChipColors 등."앱 열기", "다음 노래" 버튼.Column (ProtoLayout)자식 요소들을 수직으로 배치하는 레이아웃 컨테이너.addContent, s..

습관관리 앱 구현 과정 : Jetpack Compose에서 TopAppBar 구현 과정, 동적 버전 표시 및 웹 연동 Jetpack Compose를 사용한 안드로이드 앱 개발 중, 사용자에게 일관된 경험을 제공하기 위해 공통 TopAppBar를 구현한 과정을 공유합니다. 이 글에서는 TopAppBar에 앱 아이콘, 동적으로 가져온 앱 이름과 버전, 그리고 외부 URL로 연결되는 정보 아이콘을 추가하는 방법을 단계별로 설명합니다.1. TopAppBar 구현 위치 결정: MainActivity처음에는 각 화면(HomeScreen)에 TopAppBar를 추가할까 고민했지만, 앱 전체의 일관성 및 확장성을 위해 MainActivity.kt의 MainScreen Composable 내에 Scaffold를 사용해 ..

Jetpack Compose + Firebase 기반 게시판 앱 개발기 이 글은 Jetpack Compose, Firebase Realtime Database, Hilt, Compose Destinations를 기반으로 한 게시판 앱 개발 과정을 정리한 것입니다. 게시글은 최근순으로 표시되며, 댓글 기능도 포함합니다.1. 프로젝트 구성KotlinJetpack ComposeFirebase Realtime DatabaseHilt (DI)Compose Destinations (Navigation)2. 게시글 리스트 화면Firebase에서 게시글 데이터를 읽고, 최근 등록순으로 보여줍니다.LazyColumn( reverseLayout = true // 최신 글이 위로) { items(posts) { ..

Jetpack Compose + Firebase + Google Maps 완벽 가이드 이 글은 Jetpack Compose를 활용하여 Firebase Realtime Database 및 Google Maps, WebView를 사용하는 앱을 개발하면서 겪었던 문제들과 그 해결법을 정리한 개발 노트입니다. 1. Firebase에서 반경 필터링Firebase Realtime Database는 위치 기반 검색을 기본 제공하지 않기 때문에, 클라이언트에서 위도/경도를 기준으로 거리 계산을 해야 합니다.▶ 거리 계산 함수 (Haversine Formula)fun haversine(lat1: Double, lon1: Double, lat2: Double, lon2: Double): Double { val R =..

Jetpack Compose로 DropDown과 카테고리 버튼 UI 만들기 이 글에서는 Jetpack Compose로 드롭다운 메뉴를 만들고, JSON 형태의 카테고리 데이터를 3x3 버튼 그리드 형태로 화면에 표시하는 방법을 정리합니다.🟡 1. DropDown (Spinner 형태) 버튼 만들기아래는 Compose의 DropdownMenu를 이용하여 간단한 드롭다운 UI를 구성하는 예시입니다.@Composablefun SimpleDropdownMenu( options: List, onOptionSelected: (String) -> Unit) { var expanded by remember { mutableStateOf(false) } var selectedOption by re..

제트팩 구성에서 스크롤 효과가 있는 무너지는 앱바 생성• 이 기사는 사용자 스크롤링에 동적으로 응답하는 현대 모바일 앱의 인기 있는 UI 요소인 제트팩 컴포즈에서 접히는 앱바의 구현을 자세히 설명합니다.• 설계에는 두 개의 TopAppBar가 포함됩니다. 하나는 접힌 상태(필수 정보만 표시)를 위한 것이고 다른 하나는 확장된 상태(헤더 및 자세한 내용 표시)를 위한 것입니다.• 스캐폴드는 메인 화면 컨테이너로 사용되어 스낵바 및 플로팅 액션 버튼과 같은 다른 UI 구성 요소를 쉽게 통합할 수 있습니다.• 확장된 AppBar의 높이는 사용자 정의 가능하며(이 예에서 180.dp), 'windowInsets = WindowInsets(0)'는 상태 표시줄에서 추가 패딩을 제거합니다.• ‘LazyVertica..

Jetpack Compose에서 Navigation 구현하기: compose-destinations와 AnimatedBottomBarCompose 사용 소개이번 포스트에서는 Jetpack Compose에서 네비게이션을 구현하는 방법을 다룹니다. 특히, compose-destinations와 AnimatedBottomBarCompose 라이브러리를 사용하여 스타일리시한 하단 네비게이션 바를 만드는 방법을 설명합니다.1. 의존성 추가먼저, build.gradle 파일에 필요한 의존성을 추가합니다.Kotlin dependencies { implementation("io.github.raamcosta.compose-destinations:core:1.7.0-beta") ksp("io.github.ra..

Compose to Kotlin Compatibility 을 구글에서 검색을 해 보았습니다. 여기서 첫번째 나온 것을 클릭해 봅니다. 한국에 위치하고 있고 크롬의 설정에 따라 다른 결과를 얻을지도 모르지만, 저의 경우는 아래와 같이 한국어에 페이지가 나옵니다. 이 페이지에서 나오는 것으로 봐서는 1.4.3 까지 패치된 것으로 오해할 수 있도록 보여 주고 있습니다. (2024.01.04 현재까지) 하지만, 이는 구글이 페이지를 한국어로 전환을 하지 않아 발생하는 현상으로 보입니다. 그래서 저는 저기 나온 url 의 ko을 en으로 변경해 보겠습니다. 여기서 나오는 버전의 표기는 1.5.7 이 최신 버전으로 보입니다. (2024.01.04 현재) 향상 최신 버전을 확인하고 작성을 해 두는 것이 최선(?)일 ..