[TellingMe/Android] 텔링미 안드로이드 개발 🔥2차 스프린트🔥

TellingUs - TellingMe

지난주까지 1차 스프린트에 이어 2차 스프린트를 진행했습니다.

1차 스프린트에서는 본격적인 개발을 시작하기 전 주요 컴포넌트와 디자인시스템을 구축하는 작업을 했다면 2차 스프린트에서는 일부 컴포넌트를 활용해 Screen을 Jetpack Compose로 구현하는 작업을 했습니다.

질문에 대한 답변을 작성하는 Screen

변경된 UI는 아직 배포가 되지 않아 공개가 어렵지만 1일 1회 사용자에게 주어지는 질문에 대한 본인의 답변을 작성하는 화면입니다.

Compose로 제대로 된 화면은 처음 만들어 보는지라 스프린트를 기간 동안 고민도 많이 하고, 공부도 많이 했던 화면입니다.

TopAppBar는 어떤 기준으로 컴포넌트화 할 수 있을지, 흐릿하게 보이는 BottomSheet와 Dialog가 Compose에서는 xml과 다르게 어떤 방식으로 띄워지고 활용되는지, TextField가 사용되는데 키보드가 올라올 때 UI 대응은 어떻게 할 수 있는지, 곡선이 포함된 위젯이 있는데 어떻게 그릴 수 있을지 등 많은 고민을 했습니다.. 아직까지 고민 중인 이슈들이 있는데 스프린트 내에 해결되지 않는 이슈들은 팀원과 공유하고 있습니다.

 

TextField, Switch, BottomSheet, Dialog 같은 Compose 컴포넌트를 다루다 보니 Compose의 모든 UI는 State(상태)에 따라 존재한다는 정의가 크게 와닿았던 것 같습니다.

모든 컴포넌트의 활성화/비활성화, Visible/Invisible 여부를 상태 호이스팅(State Hoisting)을 통해 자식 컴포저블 함수에서는 상태의 value만을 가지고 있어 Stateless 하도록 설계하는 방식도 인상 깊었어요.

특히 xml에서 Adapter로 RecyclerView를 구현하던 방식에서 LazyColum, LazyRow, LazyVerticalGrid 클래스를 이용해 아주아주 간단하게 구현이 가능하다는 것에 놀랐습니다.. ViewHolder 패턴이 강제될 필요가 없다니..

 

2차 스프린트를 마친 현재의 관심사는 "화면 하나 작업하는 데에도 이렇게 많은 상태를 관리하고, 상태에 따라 적절히 UI를 갱신해야 하는데 화면이 많아질수록 더 많아질 상태를 어떻게 효율적으로 관리할 수 있나?", "ViewModel로 관리하나? 그렇다면 ViewModel의 생명주기는 어떻게 관리되고 ViewModel은 어디에 존해하는지? 자식 컴포저블 함수를 호출하는 최상위 부모 컴포저블 함수?", "xml에서 hilt를 사용해 클래스와 객체를 주입하는 방법도 Compose에서 유사한가?" 등 상태 관리와 DI에 대한 내용이 주 인 것 같아요.

 

다음 스프린트를 진행하면서 Retrofit을 사용해 Clean Architecture 구조에 맞춰 View에서 ViewModel → Usecase → Repository → ... → API 까지 호출하는 과정을 거쳐 UI까지 갱신하는 작업을 해보려 합니다.

Compose에서는 API 호출 후 ViewModel에 있는 API 응답(이것도 상태(State)로 관리하겠죠?)을 어떻게 옵저빙하는지도 궁금하네요.

이런 느낌

 

---

📝 2차 스프린트 리뷰

고민 1. Compose에서 BottomSheet, Dialog는 어떻게 사용할 수 있나

- 레퍼런스를 참고하면서 초기에는 ModalBottomSheetLayout을 사용해 BottomSheet를 개발했습니다.

그치만 ModalBottomSheetLayout에서는 BottomSheet를 구성하는 UI 뿐만 아니라 BottomSheet를 포함하는 상위 레이아웃까지 BottomSheet 클래스 내에서 작성해줘야 해서 더 좋은 방법은 없는지 찾아보던 중 ModalBottomSheet를 발견해 ModalBottomSheet로 다시 작업했습니다.

 

- Dialog도 BottomSheet와 유사하게 자체적으로 Dialog 클래스를 제공합니다.

현재 상황에서 Dialog는 컴포넌트화 할 수 있을 것 같아 Title과 Contents영역, '확인', '취소', '완료' 같은 작업의 실행 여부를 확인하는 버튼을 SingleButton, DoubleButton 이런 식으로 타입을 나누어 관리하고 있습니다.

 

→Compose에서 BottomSheet를 공부하며 정리한 포스팅입니다.

[Compose/Kotlin] Compose로 BottomSheet 구성하기 feat. Material 3

 

고민 2. 곡선이 포함된 위젯을 Compose로 그리는 방법에 대한 고민

- 지인에게 Compose에서는 그리기 까다로워 보이는 UI나 위젯도 외부 라이브러리를 쓰지 않고 모두 그릴 수 있다고 들었습니다.

그래서 지난 1차 스프린트에서는 위 이미지에서 보이는 프로필 카드 배경에 옅은 빗금처럼 보이는 사다리꼴..? 모양을 어떻게 그릴 수 있을까 고민했습니다.

Compose에는 Canvas 클래스로 편리하게 커스텀 UI를 직접 원하는 대로 그릴 수 있었고, 카드 뒷면에서 직사각형을 그려 rotation(회전)을 주다가 직사각형의 높이만 한 굵은 직선을 긋는다는 아이디어가 떠올라 직선을 두 개 긋는 방법으로 해결했습니다.

하지만 이번에는 좀 더 까다로워 보이는 왼쪽으로 뾰족 튀어나온 말풍선 모양의 위젯이 있더라구요..

radius를 조절한 Card에 Text를 넣고, 좌측의 뾰족한 모양만 이미지로 넣어볼까? 했지만 요령을 피우지 않고 저 위젯도 Canvas로 그려보려 고민하고 있습니다.

당장 드는 생각은 삼각형을 그려서 회전시켜 모서리를 조금 깎으면 될 것 같아 서치하던 중 레퍼런스는 찾았지만 입맛에 맞게 적용하는 데에는 조금 어려움이 있어 아직 보류 중인 상황입니다ㅎㅎ