[Android Compose] @Composable 종속성을 StateFlow로 바꿔보자
·
Android/Compose
안녕하세요, Android 개발자 한민재입니다.최근 Hilingual 프로젝트의 네비게이션 로직을 리팩토링 했어요. 이번 글에서는 @Composable에 의존하던 내비게이션 상태 로직을 UI와 분리된 상태 홀더(State Holder) 패턴과 StateFlow 를 통해 개선한 과정을 상세히 공유해 보려고 합니다. (해당 작업 PR입니다.)UI와 결합된 로직리팩토링 이전, MainNavigator 클래스는 앱의 메인 화면 탐색을 관리했어요. 이 클래스는 DroidKnightsApp을 레퍼런스로 사용했던 코드에요. 그러나 최근에 해당 작업자 본인이 말하길 “땜빵코드”라 꼭 고쳐서 쓰라고 조언을 받았습니다 😅저는 그 얘기를 듣고 한참을 고민했었어요. 좋은 코드같았는데 뭐가 문제였을까? 하면서 고민한 결과 몇..
[Android Compose] flowWithLifecycle은 언제 쓰면 좋을까?
·
Android/Compose
안녕하세요! Compose로 개발하다 보면 Side Effect를 어떻게 처리할지 항상 고민인데요. 저도 ViewModel에서 발생한 이벤트를 LaunchedEffect로 받아서 스낵바를 보여주거나 화면을 전환하는 코드를 자주 작성했어요. 그런데 문득 앱이 백그라운드로 전환됐을 때 flow 수집이 중단되나? 생각이 들어서 테스트 해보니 LaunchedEffect가 계속 동작하는걸 발견했어요.이번 글에서는 제가 겪었던 문제와 flowWithLifecycle API로 해결한 경험, 그리고 이 과정에서 만든 재사용 가능한 확장 함수까지 공유해보려합니다! (해당 작업 PR 입니다)어떤 문제가 있었나요?보통 ViewModel의 단방향 이벤트(Side Effect)를 처리할 때 LaunchedEffect를 많이 사..
[Android Compose] Effect Handlers 딥다이브
·
Android/Compose
안녕하세요! 최근 개발 실력이 나름 늘어간다고 생각이 들면서, 이전까지 모호하게 알고 있다고 생각이 들었던 것들에 대해 다시 기초부터 다지는 중인데요. 내가 컴포즈로 개발을 하면서 사이드 이펙트에 대해 고민을 하고 코드를 작성하고 있었나?라는 생각이 들어 정리를 해봤습니다. 다른 분들에게도 도움이 됐으면 좋겠네요!사이드 이펙트란?사이드 이펙트는 컴포저블 함수의 범위를 벗어나 외부 상태가 변경되는 작업을 말해요. 네트워크 요청, 데이터베이스 접근, 파일 시스템 조작 등이 대표적인 예시예요.왜 문제가 될까요?컴포저블 함수는 언제든지, 몇 번이든 호출될 수 있어요. 리컴포지션은 상태 변화, 부모 컴포저블의 변화, 시스템 설정 변경 등 다양한 이유로 발생하죠. 만약 컴포저블 함수 내에서 직접 네트워크 요청을 한..
[Android Compose] 상태 읽기 지연(Defer State Reads)으로 리컴포지션 최적화하기
·
Android/Compose
Android Compose에서 성능 최적화는 단순히 "빠르게 만들기"를 넘어서, 사용자 경험을 좌우하는 핵심 요소예요. 특히 리컴포지션(Recomposition)을 얼마나 효율적으로 관리하느냐에 따라 앱의 반응성과 배터리 효율성이 크게 달라져요.오늘은 상태 읽기 지연(Defer State Reads) 패턴을 활용해 리컴포지션을 효과적으로 줄인 사례를 통해 Compose 성능 최적화를 알아볼게요.📊 리컴포지션의 3단계와 성능 비용Compose의 리컴포지션은 다음 3단계로 진행돼요컴포지션(Composition) - UI 구조를 다시 계산레이아웃(Layout) - 각 요소의 위치와 크기를 결정드로우(Draw) - 실제 화면에 그리기각 단계는 모두 연산 비용이 발생하며, 특히 컴포지션 단계에서는 모든 계산을..
[Android Compose] Figma의 타원형 Radial Gradient를 구현해보자
·
Android/Compose
🧩 문제 상황: Compose에서 Figma gradient가 구현되지 않는다..!안녕하세요! 오늘은 컴포즈에서 Gradient 구현에 대해 얘기해보려고 해요!최근 참여중인 프로젝트 Spoony에서 아래와 같은 디자인이 있었어요!처음에는 단순히 Brush.radialGradient(...)로 해결되기를 제발 바랬어요,,, 하지만 결과는 너무 처참했어요. 그래서 피그마 스펙을 좀더 자세히 뜯어봤습니다. 중심점이 단순한 원처럼 보이지 않았거든요!border-radius: 40px;background: radial-gradient(141.42% 141.42% at 100% 0%, #FF5235 54.5%, #FFCEC6 100%);위의 ActiveTrack의 CSS스펙이에요. 이걸보고 아..단순한 원은 아니..
[Android Compose] Figma 그림자를 쉽게 만들어 보자
·
Android/Compose
안녕하세요! 오늘은 Jetpack Compose에서 디자이너가 피그마로 디자인한 그림자를 제대로 구현하기 위해 만든 확장함수를 소개합니다! 피그마의 양식을 어떻게 하면 제대로 적용할 수 있을지 고민했어요.1. 선 요약Jetpack Compose에서 제공하는 기본 Modifier.shadow는 커스터마이징에 한계가 있어요디자이너가 피그마에서 디자인한 그림자 효과를 구현하기 위해서 커스텀 확장 함수를 구현했어요그림자 효과를 구현하기 위해 Canvas API와 drawBehind 를 사용했어요성능 최적화를 위해 remember와 composed를 사용해 객체 재생성을 방지할 수 있어요2. 기본 Modifier.shadow의 한계Jetpack Compose에서 제공하는 기본 Modifier.shadow는 간단한..
[Android Jetpack] Paging3와 LazyVerticalGrid의 페이지 요청 최적화 방법
·
Android/Jetpack
안녕하세요! Android 개발자 한민재입니다. 이번에는 과제전형을 진행하면서 Paging3와 Compose의 LazyVerticalGrid를 함께 사용하면서 발견한 정말 사소한 문제와 해결 과정을 공유하려고 해요.🤔 어떤 문제가 있었나요?과제에서는 Picsum API를 사용해서 자유롭게 뷰를 구현하는 것이 목표였어요. API에 페이징이 있는 것을 발견하고 Paging3를 적용한 이미지 그리드를 구현하던 중, 앱 초기 실행 시 의도치 않게 많은 페이지가 한 번에 요청되는 현상이 발생했어요.문제가 있던 코드예요@Composablefun PhotoGrid( photosPagingData: LazyPagingItems, gridState: LazyGridState, modifier: Modi..
[Android Compose] TopBar 배경색 전환 애니메이션 구현 방법
·
Android/Compose
안녕하세요! Android 개발자 한민재 입니다. 오늘은 SOPT에서 진행한 합동세미나중, Jetpack Compose로 TopBar에 스크롤 애니메이션을 적용해보면서 알게 된 내용들을 공유하려 해요.💡 구현 목표스크롤 전에는 투명 배경의 TopBar예요스크롤 후에는 흰색 배경으로 자연스럽게 전환돼요배경색 변화에 따라 아이콘 색상이 자동으로 대응해요🛠 구현 방법비교적 과거에 작성한 코드니 부족한 부분은 눈감아 주세요ㅠ1. 스크롤 상태 감지하기val scrollState = rememberLazyListState()val isScrolledPastImage = scrollState.firstVisibleItemIndex > 0 || scrollState.firstVisibleItemScrollOf..
[Android Compose] ImePadding 이중 패딩 문제 해결 방법 (+키보드 영역 조정)
·
Android/Compose
안녕하세요! Android 개발자 한민재입니다.이번에 Spoony라는 프로젝트를 진행하면서 겪었던 이슈를 다뤄보려고 해요. Spoony Android는 Only Compose로 개발했어요. 그 중, 게시글 등록 화면을 개발하던 중 마주친 짜증나는 문제와 그 해결 방법을 공유하려고 합니다! Compose로 개발하시는 분들이라면 한 번쯤 마주칠 수 있는 문제라 생각되어서, 제가 겪은 경험과 해결 과정을 정리해보았어요.🤔 어떤 문제가 있었나요?게시글 등록 화면을 개발하던 중이었는데요. Modifier.imePadding()을 사용했을 때 키보드 위에 이상하게 큰 하얀 여백이 생기는 현상을 발견했어요.오류가 발생하는 뷰 특이한 점은 이 현상이 android:windowSoftInputMode="adjustRe..