Developer
-
Compose UI 에서 메시지 자연스럽게 보여주기 - FlowChat #3 이전 포스팅에서 Coroutine Flow를 사용해서 결과 데이터가 한 번에 완성되어 내려오는 것이 아니라 문자의 단위로 순차적으로 흘러들어오는 구조를 구현하였습니다.이번 글에서는 그 구조를 바탕으로, 스트리밍 중인 메시지와 완료 처리된 메시지를 Compose UI에서 어떻게 처리할 지에 대해서 포스팅을 작성해보려고 합니다.제가 구현하고자 했던 화면은 사용자가 메시지를 보낸 뒤, 답변이 한 글자씩 혹은 문장의 음절 단위로 생성되는 것처럼 보이는 것을 원했습니다.또한 생성이 끝난 메시지에 대해서는 일반 채팅 메시지 처럼 목록에 노출하고자 하였습니다.이때 저는 아직 작성 중인 메시지와 이미 완료된 메시지를 같은 방식으로 처리하는 것이 아니라 상태를 분리하여 노출하고자 하였습니다.완료된 메시지와 스트리밍 진행..
-
Coroutine Flow 스트리밍에 retry, timeout, cancel 적용하기 - FlowChat #2 지난 포스팅에서는 Coroutine Flow를 사용해서 텍스트를 순차적으로 보내고이를 수집하여 UI 상태에 누적하여 스트리밍 텍스트의 기본 구조를 정리해 보았는데요.하지만 여기서 끝내면 좀 아쉬우니까실제 서비스에 가까운 프로젝트를 만들기 위해서 조금 고민을 해보았는데요.스트리밍 중간에 에러가 발생하는 경우, 응답이 오래 걸리는 경우, 사용자가 답변을 임의로 멈추는 경우 등의 예외처리를 구상하여 이에 대한 처리를 추가해보려고 합니다.이를 코드 베이스의 설명으로 한다면 아래와 같이 정리할 수 있을 것 같습니다.retryWhen을 사용한 재시도 처리withTimeout을 사용한 응답 시간의 제한Job을 사용하여 사용자의 중단 이벤트응답의 상태를 정의먼저 스트리밍 상태를 다음과 같이 정의하였습니다.기준은 크게 ..
-
Coroutine Flow로 스트리밍 텍스트 처리하기 - FlowChat #1 화면 작업을 하다 보면 한 번에 결과가 다 나와있는 작업은 사실 많지 않은데요.다양한 라이브러리를 통해서 로딩에 대한 컴포넌트 처리를 하거나 각 요소를 단위로 노출하는 경우도 있습니다.다른 프로젝트를 하다가 텍스트를 한 글자씩 혹은 문장의 조각 단위로 처리하는 경우를 구현하게 되었는데요. 그걸 계기로 이번 프로젝트를 만들게 되었고, 포스팅을 오랜만에 작성하게 되었는데요.해당 프로젝트의 구조는 AI 에이전트 어플처럼 답변을 한 글자씩 처리하여 점진적으로 응답을 완성하는 구조로 구현하였습니다.안안녕안녕하안녕하세안녕하세요안녕하세요.위와 같이 여러 값을 시간에 따라 순차적으로 방출하는 구조를 구현하기 위해서 Kotlin Coroutine의 Flow를 이용하였습니다.Flow란?일단 개념적으로 살짝 짚고 넘어가자면..
-
MoneyTalk 사례로 풀어보기 #6 : LazyColumn에 대하여 일단, 이번 포스팅을 마지막으로 Compose 탐험일지 시리즈 1막을 마무리하려고 합니다.앱에서 리스트란, 뗄레야 뗄 수 없는 존재이거든요. 대부분의 UI에 리스트가 안들어 가는 화면이 없기 때문입니다..xml 기반의 명령형 개발에서 리스트는 꽤나 까다로운 친구 입니다. RecyclerView는 리스트를 구현하기 위해서 Adapter, ViewHolder, LayoutManager 의 세트를 구성해주어야 하나의 리스트를 완성할 수 있었습니다. 하지만 Compose에서는 좀 더 간편하게 리스트를 구현할 수 있답니다.그 주인공이 바로 LazyColumn 입니다.지금부터 MoneyTalk 에서 구현된 화면을 예시로 리스트의 스크롤, 아이템 바인딩과 상태관리까지 한 번에 정리를 해보겠습니다.LazyColumn ..
-
MoneyTalk 사례로 풀어보기 #5 : Material3 맛보기: Button, TextField, Card, Scaffold 활용 지난번 포스팅들에서는 각 화면을 구성하는 큰 단락(화면 구조) 위주로 살펴보았습니다.오늘은 방향을 조금 바꿔서, Material3에서 자주 사용되는 기본 컴포넌트들을 주제로 가져와봤습니다.막 깊게 안 파도 되는 부분인데, 연속으로 블로그 포스팅을 올리다 보니 약간 쉬어가는 타임으로 준비해 보았습니다.Compose가 아니더라도 Android의 디자인은 Material Design Guide를 따릅니다. 가끔, 요구사항이 "iOS처럼 만들어 주세요"인 경우를 제외하면요...🤔Jetpack Compose에서 Material Design 3는 현대적인 UI를 손쉽게 구현할 수 있도록 강력한 컴포넌트들을 제공합니다. 단순히 예쁘게 보이는 것뿐 아니라, 일관된 디자인 철학과 사용자 친화적인 접근성까지 고려되어 있..
-
MoneyTalk 사례로 풀어보기 #4 : Jetpack Compose 상태 관리, ViewModel과 Flow까지 Compose의 상태 관리는 솔직히 처음엔 “이게 뭐지?” 싶은 동시에, “대박이다” 싶은 그런 개념이었습니다..xml 기반 개발에서는 View의 속성을 직접 컨트롤하는 경우가 많았는데, Compose에서는 단순히 상태를 변경하는 것만으로 UI가 갱신됩니다. 이 차이를 경험하면서, “내가 그동안 UI 갱신에 쏟아온 시간이…” 하는 생각이 들었습니다.그래서 그 상태란 무엇인가? 를 정리해본다면,💡 Compose의 State(상태)는 UI를 그리는 "데이터의 현재 값"이다.UI는 이 값을 읽어서 그리고, 상태가 변화하면 자동으로 Recompose가 일어나서 UI가 갱신됩니다. 💡 Recompose는 상태가 바뀌었을 때 해당 Composable 함수를 다시 호출하여 UI를 새로 그리는 과정을 의미합니다.이..
-
MoneyTalk 사례로 풀어보기 #3 : Modifier, 체이닝과 레이아웃 Compose 를 공부하고, "아, 이제는 내가 이런것도 고민해야 하는구나"하고 생각했던 부분이 바로 이부분이었습니다.기존 xml에서는 뷰의 속성 지정에 있어서 순서는 딱히 관련이 없습니다. 시스템 내의 inflate 과정에서 일괄적으로 적용을 해주었기 때문인데요.하지만 Compose는 다릅니다.그래서 어떤 결과를 만들고 싶은지에 따라 Modifier의 조합과 순서를 의식적으로 설계해야 합니다.왜냐하면 Modifier는 단순한 속성 나열이 아니라, 순차적으로 실행되는 함수 체인이기 때문입니다.✍️ Modifier란? Compose에서 UI 요소(Composable)의 크기, 위치, 모양, 행동을 부여하는 데코레이터..xml 내에서는 뷰 태그 안의 속성들을 붙이거나 코드 내에서 컨트롤 하는 등의 속성 작업..
-
MoneyTalk 사례로 풀어보기 #2 : Compose 레이아웃 컴포저블 스터디를 시작할 때 제일 많이 헤맸던 부분은 바로 “그래서 레이아웃이 어떤식으로 그려진다는 건데?” 였습니다.명령형 UI에서는 레이아웃 코드를 작성하고, 거기에 데이터를 lifecycle에 맞춰 주입하는 방식으로 화면을 완성했습니다. 그런데 Compose에서는 그 과정이 예전처럼 직접 보이지 않아서 어딘가 생략된 것처럼 느껴졌는데요.눈앞에서 코드와 UI가 연결되는 지점을 못 잡으니, 프리뷰도 제대로 작성할 수 없었고, 결국 보이지 않는 View를 머릿속으로 ‘상상 코딩’해야 하는 상황이 되곤 했습니다. 😅😅😅😅💡 물론 실제로는 “생략”이 아니라 선언형 UI + Recomposition이라는 다른 메커니즘으로 동작한다. 우리는 “무엇을 그릴지”를 선언하고, 상태(Snapshot State)가 바뀌..
-
MoneyTalk 사례로 풀어보기 #1 : Compose와 친해지기 현업에서는 주로. xml을 통한 Ui구성을 했기 때문에 명령형 Ui에 익숙해져 있던 저는 선언형 Ui인 Compose가 많이 어색했습니다.하지만 점점 현업에서도 Compose를 많이 사용하고 있고 필수적이게 되었는데요.그래서 조금씩 공부하고 있던 내용들을 모아서 하나의 프로젝트로 구성하고 Compose와 본격적으로 친해지는 시간을 가져고려고 합니다.막연히 코드를 분석하기 보다 하나씩 기능을 만들어 보는 것이 가장 빨리 늘 수 있다고 생각했기 때문입니다.이 프로젝트는 완료된 프로젝트도 아니고 하나씩 하나씩 적용해 보는 프로젝트라서 기능이 조금씩 추가될 예정이며, 지난 6월과 7월에 작게 시작한 마일스톤 1차를 이번 시리즈 1에서 정리하고 새로운 기능추가를 위해 마일스톤 2차를 진행하려고 합니다.1차 마일스..
-
Android ISO-8601 날짜 문자열 파싱 오류 해결하기 요즘 신규 프로젝트 작업을 진행하면서API 데이터를 연결하던 중에 특정 화면에서 앱이 바로 종료되는 Fatal Issue가 있었습니다.처음에는 화면 쪽 문제라고 생각을 했었는데, 로그를 보니 원인은 날짜 문자열 파싱 과정에서 발생한 예외였습니다.java.time.format.DateTimeParseException서버에서 내려온 날짜 값은 아래와 같은 형태였습니다."2024-06-12T00:00:00" 기존에 사용하던 날짜 포맷에도 시간 정보는 포함되어 있었습니다."yyyy-MM-dd HH:mm:ss" 두 문자열 모두 날짜와 시간을 가지고 있지만, 날짜와 시간 사이의 구분자가 다릅니다.기존 파싱 로직은 날짜와 시간이 공백으로 구분된 형태를 기대하고 있었고,실제 서버 응답은 ISO-8601 형식처럼 T로 ..
728x90
반응형