Keep the Experience Natural, Easy, Light

#1 개요기존에는 무한 스크롤을 위한 암시적 스크롤 로직을 ViewModel과 View과 양분하고 있었다. 본 게시글에서 이 스크롤 관련한 로직을 View에 일임한다. ViewModel은 이제 LazyColumn이 보유할 아이템 리스트의 추가ㆍ제거만 수행하면 될 것이다. #2 코드#2-1 ViewModel에서의 Scroll 관련 코드 삭제... class NutrientViewModel : ViewModel() { // (1) 화면 표시용 State ... // (2) ViewModel용 내부 변수 ... // (3) View에서 받아 처리할 이벤트 ... // (4) View로부터 받은 이벤트 처리 fun onEvent(event: NutrientViewModelEvent) { when (event) ..

#1 스크롤 함수 변경#1-1 기존 함수LazyListState.scrollToItem() 및 LazyListState.scrollBy()는, 시스템 상의 제약이 존재한다. 사용자가 화면에 손을 붙인 채로 유지하면 스크롤이 아예 잠겨버리기 때문이다. 이 시스템 상의 제약을 우회하려고 정말 많은 코드를 시도해보았지만, 제대로 작동하기 않았고 작동하더라도 앱이 굉장히 조잡해보이는 모양새였다. #1-2 LazyListState.requestScrollToItem() LazyListState | Android Developersdeveloper.android.com그러다 찾은 함수가 LazyListState.requestScrollToItem()다. 다음 Recomposition 때 스크롤이 위치해야하는 부분을..

#1 개요이전 게시글에서 역방향 무한 스크롤을 불완전하게 구현했었다. 문제점은 다음과 같았다.  1 눈에 보이는 Item의 인덱스 중 0이 존재하면, 새로운 Item을 Load했다.  2 이러면 새로 Load된 Item의 인덱스가 다시 0이되면서 동시에 눈에 보이게 된다. 따라서 무한 재귀호출이 발생했었다.  3 이 문제를 해결하려면 새 Item을 Load함과 동시에 스크롤을 조작해야 한다. 그렇게 해서 '새 아이템이 눈에 보이기 전에' 스크롤을 성공시킨다면 무한 재귀호출에서 벗어날 수 있다. 본 게시글에선  3 의 상태를 만드는 걸 목표로 잡는다. #2 코드#2-1 깨알 변경...@Composablefun NutrientScreen( scope: CoroutineScope, snackbarH..

#1 개요이전 게시글에선 불완전한 무한 스크롤을 구현했었다. 그 불완전함을 보완하는 코드를 작성하기 앞서, 먼저 기존 코드를 교통 정리하겠다. 첫째로는 초기 화면에서 보일 Item을 하나에서 20개로 늘린다. 초기 Item이 하나 뿐이면 아랫 방향 무한 스크롤 로직과 역방향(윗 방향) 무한 스크롤 로직이 동시에 작동하기에 이를 직관적으로 다루기 어렵기 때문이다. 20개라는 숫자는 Item들이 화면을 가득 채울만한 아무 숫자다. 특정 숫자로 하드 코딩하는 게 썩 내키지는 않지만, 일단 지금은 무한 스크롤의 문제를 해결하는 게 급선무다. 나중에 소프트 코딩으로 바꾸겠다. 또, 무한 스크롤 로직이 초기화가 완전히 완료된 후에 작동하도록 만들 것이다. 이를 위해 뷰 모델에 초기화 완료 정보를 담는 Boolean..

#1 깨알 변경 - SnapshotStateList로 마이그레이션#1-1 NutrientScreenState.kt......import androidx.compose.runtime.snapshots.SnapshotStateListdata class NutrientScreenState( val dailyMeals: SnapshotStateList)data class DailyMeal( var date: LocalDate, val meals: SnapshotStateList)data class Meal( var time: LocalTime, var name: String, val nutritionInfo: NutritionInfo,)List형을 전부 SnapshotStateL..

#1 깨알 변경 사항#1-1 "NutrientInputScreen"을 "NutrientScreen"으로 변경가독성을 위한 이름 변경이다. #1-2 "nutrient" 패키지 생성먼저, "NutrientScreen"를 "nutrient" 패키지에 넣는다. 또, 본 게시글에서 새로 만들 모든 파일은 해당 패키지에 들어간다 #2 개요#2-1 객체 지향적 UI 설계 [Android] Jetpack Compose - 객체 지향적 UI 레이어 설계#1 개요 UI 레이어  |  Android Developers이 페이지는 Cloud Translation API를 통해 번역되었습니다. UI 레이어 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. UI의 역kenel.tistory.com위 ..

#1 사용자의 속마음#1-1 나쁜 사용자 경험의 요소: 높은 피로감 Nutri Capture 방향성 - 살아남는 앱이 되려면#1 앱의 인기는 끝났다 앱의 인기는 끝났다당신의 폰에는 이미 앱이 꽉차 있다. 그래서 당신은 이제 새로운 앱을 다운로드 하지 않는다. 새롭게 앱을 출시하는 앱개발사나 앱퍼블리셔는 지속해kenel.tistory.com위 게시글에서 Nutri Capture를 살아 남는 앱으로 만들겠다는 포부를 밝혔다. 그러려면 사용자가 원하는 것이 무엇인지 알고 정확하게 제공해야할테다. 식단 관리... 이전에 나는 여기에서 사용자가 자신이 먹은 영양 기록을 수치로 입력하는 내용의 UI 스케치를 했었다. 자신이 먹은 음식의 양과 영양분을 칼같이 계산하고, 그걸 매번 기록하는 게 정말로 사용자가 원하는 ..

#1 개요#1-1 NavigationBar에 넣을 아이콘 가져오기 Material Symbols and Icons - Google FontsMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.fonts.google.comNavigationBar을 구현하기 위해선 먼저 아이콘이 필요하다. 위 페이지에서 SVG 아이콘을 다운로드했다. 이전 게시글에서 만든 NavHost의 Destination은 3개이므로 각각의 Destination에 어울리는 아이콘 3개를 골라 다운로드 했다 (참조: 첫번째 아이콘, 두번째 아이콘, 세번째 아이콘)..

#1 개요#1-1 Scaffold의 bottomBar Nutri Capture 프론트엔드 - Scaffold#1 개요#1-1 첫 삽 뜨기무엇부터 손을 대야할 지 감이 잡히지 않는다. 프로토타이핑을 한번 더 해야 하나? 소프트웨어 모델링이라는 건 뭐지... 이걸 먼저 공부해야할까? ...  여러 의문이 든다. 그kenel.tistory.com이전 게시글에서 Scaffold를 만들었다. 해당 Scaffold에는 대부분 앱의 전형적인 구조로서 포함되는 NavigationBar를 넣을 것이다. 그러기 위해서 먼저, NavHost부터 만들어둘 필요가 있다. #1-2 NavHost 구현 [Android] Jetpack Compose - Navigation 기초#1 개요#1-1 전통적인 안드로이드 프로젝트에서의 Na..

#1 개요#1-1 첫 삽 뜨기무엇부터 손을 대야할 지 감이 잡히지 않는다. 프로토타이핑을 한번 더 해야 하나? 소프트웨어 모델링이라는 건 뭐지... 이걸 먼저 공부해야할까? ...  여러 의문이 든다. 그래도 분명한 건 앞으로 내가 핵심적으로 공들여야할 무언가(핵심 과제)는 분명 존재할 것이라는 사실이다. 가령 프론트엔드에서 매끄러운 애니메이션을 구현해야한다거나 생명주기를 말끔하게 처리하는 작업들이 그 예일 것이다. 그 과제까지 닿기 위해서 먼저 확실히 해두어야 하는 것들부터 먼저 처리해야한다. #1-2 Scaffold [Android] Jetpack Compose - Scaffold#1 개요#1-1 Scaffold의 사전적 의미Scaffold는 비계((건설) 높은 곳에서 공사를 할 수 있도록 임시로 설..