[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스펙이에요. 이걸보고 아..단순한 원은 아니..
[Kotline Coroutine] OnFailure에 로그적기 귀찮아
·
Kotlin
안녕하세요! 오늘은 Result를 사용할 때 실패 시마다 반복해서 적던 로그 코드를 줄이기 위해 만든 확장 함수를 소개하려고 합니다. 사실 정말 간단해요ㅎㅎ1. 왜 만들었어요?제가 참여중인 Spoony에서는 런캐칭으로 감싸 뷰모델에서 onSuccess와 onFailure로 결과값을 처리하고 있었어요. 그러나 작업자마다 로그를 찍는 게 일관적이지 않았고 매번 실패 시에 Timber.e(e)를 적는 게 귀찮게 다가왔어요. 사용되는 부분이 많다 보니 매번 팀버 코드를 작성해야 했고 확장함수로 만드면 어떻냐는 팀원의 아이디어가 나왔어요.그래서 바로 작업에 들어갔습니다.2. Result 실패 처리 반복현재 ViewModel에서 다음과 같이 runCatching과 Result를 조합해 API 호출의 성공/실패를..
[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] 이미지 압축 최적화하기: ImageDecoder 도입
·
Android/Jetpack
안녕하세요! Android 개발자 한민재입니다. 이번에는 Spoony 프로젝트를 진행하면서 겪었던 이미지 압축 관련 이슈를 다뤄보려고 해요. 게시글 작성 기능을 개발하면서 마주친 문제와 그 해결 과정을 공유하려고 합니다!해당 이슈가 담긴 PR입니다: https://github.com/SOPT-all/35-APPJAM-ANDROID-SPOONY/pull/200🤔 어떤 문제가 있었나요?게시글 작성 화면에서 이미지 업로드 기능을 구현하던 중이었는데요. 기존 BitmapFactory를 사용했을 때 다음과 같은 문제점들이 있었어요용량이 큰 단일 이미지 혹은 여러 이미지 압축 속도가 느렸어요 (평균 1,200ms 이상)용량이 큰 이미지를 여러 장 업로드하면 앱이 중단되는 현상이 발생했어요압축된 이미지 품질이 일관..
[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..