Compose 정식 출시보다 앞섰던 Compose 적용기

2023년 4월 8일 마루180에서 열린 <2023 성빈랜드 컨퍼런스>에서 발표한 내용입니다.

[링크]
2023 성빈랜드 공식 홈페이지 : https://2023.sungbinland.day
블로그 : https://workspace-dev.medium.com
HOLIX Jetpack Compose 사용자 모임 : https://hlx.kr/workspace

Transcript

1. 오랫동안 써오면서 느낀 점을 공유합니다 류기민 Compose 정식 출시보다 앞섰던 Compose 적용기 세션 05
2. 안녕하세요, 개발자 workspace 류기민입니다. 연사 소개 2 온라인강의플랫폼 에듀캐스트 2015.01 2021.07 자기 계발 커뮤니티 HOLIX 2021.07 ~ HOLIX Jetpack Compose 사용자 모임 운영 2021.07
3. 목차 3 1. 공유하게 된 계기 2. 왜 Compose 였나? 3. Compose로 한달 만에 새 앱 출시하기 4. Compose와의 사투 ? 5. 새로운 기술을 적용한 회고 6. 마무리
4. Compose 정식 출시보다 앞섰던 Compose 적용기 공유하게 된 계기 류기민 세션 05
5. 공유하게 된 계기 공유하게 된 계기 5 우연한 계기로 새로운 기술의 alpha 버전부터 stable 출시까지 세상에 공개되어 발전하는 과정 속에 몰입할 수 있었습니다. 그 과정에서 느꼈던 효용과 좌절했던 경험을 가감 없이 이야기해볼까 합니다. Compose를 적용할지 검토 중이신 분, 배우면 좋을지 고민 중이신 분께 도움이 되면 좋겠습니다. 아울러 능동적으로 기술을 습득하는 사람으로 변한 경험 또한 공유해 보고자 합니다.
6. Compose 정식 출시보다 앞섰던 Compose 적용기 왜 Compose였나? 류기민 세션 05
7. Compose를 선택한 3가지 이유 왜 Compose였나? 7 1. 커스텀 컴포넌트 구현 2. View 대비 낮은 진입 장벽 3. 적은 노력으로 만들 수 있는 인터랙션 애니메이션
8. 처음 접한 시기 왜 Compose였나? 8
9. 지속적인 관심 왜 Compose였나? 9
10. 21년 2월 1.0 beta 출시 🎉 그런데…? 왜 Compose였나? 10
11. 기민님, 새 기능에 캘린더가 필요합니다. 왜 Compose였나? 11
12. 당시 에듀캐스트 안드로이드 앱은… 왜 Compose였나? 12 제품 디자이너의 부재 material design components mdc 를 이용 요구사항은 대부분 ConstraintLayout mdc components로 구현하여 달성 커스터마이징이 필요할 때 어려움을 많이 겪음 🤪
13. 공식 compose sample : Crane 왜 Compose였나? 13
14. 결국… 왜 Compose였나? 14
15. Compose 정식 출시보다 앞섰던 Compose 적용기 Compose로 한달 만에 앱 출시하기 류기민 세션 05
16. 사실 새로운 요구사항들은 피보팅으로부터 16 * 피보팅이란 핵심 사업 아이템이나 서비스를 바탕으로 외부 환경의 변화에 맞춰 사업 방향을 전환하는 것을 말한다. Compose로 한달 만에 앱 출시하기
17. MainActivity + Jetpack Navigation을 이용한 Single Activity 구조 AuthActivity, PurchaseActivity, PlayerActivity등은 분리 당시 에듀캐스트 안드로이드 앱은… 17 Compose로 한달 만에 앱 출시하기
18. 원래 계획은 점진적인 적용 18 navigation graph A Fragment B Fragment C Fragment xml / xml / Compose로 한달 만에 앱 출시하기
19. 19 Compose로 한달 만에 앱 출시하기
20. 20 Compose로 한달 만에 앱 출시하기
21. 그러던 중… 기획이 완전히 엎어졌다 21 Compose로 한달 만에 앱 출시하기
22. 때는 6월 말, 목표는 7월 말 출시 data layer 🟢 domain layer ⚠ ui layer ❌ 안드로이드 경험이 전무한 4명의 지원 인력 구현 해야할 feature는? 😇🤪 주어진 상황 22 Compose로 한달 만에 앱 출시하기
23. 약간 도원결의? 비슷한 거 하고 일단 달려보기로 🍻 23 Compose로 한달 만에 앱 출시하기
24. 1. 단시간에 안드로이드 프레임워크 및 View 이해는 사실상 불가하다고 생각 2. 4명 중 3명이 선언형 UI 경험이 있었음 3. xml보다 Compose가 더 배우기 쉬울 것이라는 판단 UI는 Compose를 100 도입 24 Compose로 한달 만에 앱 출시하기
25. 리스트 구현을 예시로 들어본다면… 25 div :key item.id … /div Vue RecyclerView ViewHolder Adapter xml View LazyColumn modifier … items items items key item … Compose Compose로 한달 만에 앱 출시하기
26. 빠른 기여를 위한 shortcut 설계 1 26 Compose로 한달 만에 앱 출시하기
27. 빠른 기여를 위한 shortcut 설계 1 27 Compose로 한달 만에 앱 출시하기
28. 빠른 기여를 위한 shortcut 설계 2 28 navigation graph A Fragment B Fragment C Fragment app module c module CScreen CViewModel b module BScreen BViewModel a module AScreen AViewModel model module data module 그 외 공용 module AScreen BScreen CScreen 🐥 🐥 🐥 🐓 🐥 Compose로 한달 만에 앱 출시하기
29. Kotlin + Compose 만으로 10일 만에 기여 🎉 29 Compose로 한달 만에 앱 출시하기
30. 간단히 구현 할 수 있었던 인터랙션 1 30 compose sample - Rally Compose로 한달 만에 앱 출시하기
31. SwipeToAction pointerInput detectHorizontalDragGestures 간단히 구현 할 수 있었던 인터랙션 2 31 Compose로 한달 만에 앱 출시하기
32. 간단하진 않지만 구현할 수 있었던 인터랙션 32 ???: 교과서를 중심적으로 봤어요 Compose로 한달 만에 앱 출시하기
33. Compose 적용 의사결정 과정 33
34. 작업 끝내자마자 바로 Compose 1.0 공식 출시 🚀 34 Compose로 한달 만에 앱 출시하기
35. Compose 정식 출시보다 앞섰던 Compose 적용기 Compose와의 사투 류기민 세션 05
36. Compose 이제 안정적인가요? Compose와의 사투 36 Compose 이슈들 많이 해결되었나요? 이제 Compose 배워도 되나요?
37. 저의 답은… Compose와의 사투 37
38. 케바케 사바사 팀바팀 회바회 Compose와의 사투 38
39. 삼성키보드 문구 추천 시 
 자음과 모음이 분리되는 현상 AndroidView + EditText로 대응 한글 자소 분리 1 Compose와의 사투 39
40. 한글 자소 분리 2 Compose와의 사투 40 리눅스 머신에 aosp 개발 환경 세팅하여 문구 추천 비활성화 옵션 추가를 시도 compose foundation - TextInputServiceAndroid.android.kt
41. Compose와의 사투 41
42. 한글 자소 분리 3 Compose와의 사투 42 https://workspace dev.medium.com/jetpack compose textfield 5866bdae33e7 일본어 이슈 처리하다가 해결됨 github로 foundation library의 commit을 가끔 follow up하던 중 발견 1.3.0 alpha03부터 문제 해결됨 개인적으론 가장 집요했고 뿌듯했던 경험
43. WebView, MapView, SurfaceView 등 compose가 대체할 수 없는 요소들이 있고 이를 사용할 수 있도록 상호운용성 API interoperability api 가 존재함 다만 당시엔 사용 사례가 전무하여 
 내가 맞게 쓰고 있나? 계속 생각 compose 적용을 검토하고 있다면 
 가장 먼저 고려해야할 부분 AndroidView Compose와의 사투 43
44. AndroidView 사용 사례 Compose와의 사투 44 WebView SurfaceView ExoPlayer EditText
45. googlemaps/android maps compose google MapView fornewid/naver map compose naver MapView google/accompanist/web WebView AndroidView 대응 라이브러리 Compose와의 사투 45
46. Zoomable composable accompanist pager로 구현 시도 ❌ AndroidView + Pager2 + PhotoView ❌ MessageImageViewerActivity - Pager2 + PhotoView 🟢 타협의 과정… 고객은 어차피 이게 compose인지 xml인지 알 필요 없다 AndroidView 동작은 예상과 다를 수 있다 1 Compose와의 사투 46
47. WebView 재생성 LazyColumn NavHost Pager HOLIX는 일종의 ViewCache 구현으로 해결 google/accompanist#1178 AndroidView 동작은 예상과 다를 수 있다 2 Compose와의 사투 47
48. Compose 1.4 : AndroidView 관련 변화 Compose와의 사투 48
49. 49 https://github.com/google/accompanist/issues/1536 Compose와의 사투
50. 없어서 직접 만든 경우도… Compose와의 사투 50 holixfactory/bottomsheetdialog compose 개발기 2023년 2월 material3 1.1.0 alpha06에서 ModalBottomSheet가 추가되어 거취를 고민 중…
51. Compose 이제 안정적인가요? Compose와의 사투 51 Compose 이슈들 많이 해결되었나요? 이제 Compose 배워도 되나요?
52. 케바케 사바사 팀바팀 회바회 Compose와의 사투 52
53. Compose만 봤을 땐 어느 정도 궤도에 오르지 않았나 초기엔 너무 절실한 것들이 alpha, beta에 추가되는 걸 
 바로바로 써야 해 release만 목 빠지게 기다림 accompanist의 많은 것들이 공식 라이브러리를 통해 지원 유명 오픈 소스는 대부분 compose 지원 glide, coil, lottie 등 성능도 많이 좋아짐 그럼에도 여전히 케바케 는 존재 Popup, BottomSheet + TextField 조합 시 
 키보드가 아래로 깔리는 이슈 개인적인 의견 Compose와의 사투 53
54. Compose 정식 출시보다 앞섰던 Compose 적용기 새로운 기술을 적용한 회고 류기민 세션 05
55. 도입 시 설득과 증명이 필요 채용 안정성 발생할 문제점 대비 효용의 가치 리더로서… 1 새로운 기술을 적용한 회고 55
56. 구성원 간의 학습 격차를 주의 사람마다 능력이 다 다르므로 새로운 것을 받아들이는 시간이 다름 팀원 간의 격차뿐 만 아니라 본인과 팀원들의 격차도 봐야… 
 🐓 .…..🐥🐥..🐥………🐥 세미나, 컨퍼런스 같이 보기, 특별 과제, 초 정밀하고 세세한 지시 등으로 극복하고자 노력 리더로서… 2 새로운 기술을 적용한 회고 56
57. 새로운 기술을 적용한 회고 57
58. Compose라서 생기는 문제를 책임지고 해결할 준비가 되어 있어야 함 짧은 역사 나랑 같은 문제를 겪는 사람을 만나기 어려움. 스스로 해결해야… 리더로서… 3 새로운 기술을 적용한 회고 58
59. 취준생, 주니어로서… 나였다면? 새로운 기술을 적용한 회고 59 Jetpack Compose는 분명히 기존 시스템을 대체할 것 취업은요..? 다른 선언형 UI… 일맥상통하는 지점이 있지 않나? Vue, RN, Flutter, SwiftUI… 기술 격차를 줄이는 기회로 삼자! 빅테크, 스타트업, 시니어, 주니어 할 것 없이 새로운 기술 앞에 평등 대신 러닝커브의 차이가 ㅎㅎ 앱 개발 ! UI 개발! 
 Compose가 UI 구현의 허들을 낮춰줘 아낀 시간을 
 아키텍처, 비즈니스 로직 구현, 안드로이드 플랫폼, 프레임워크의 이해에 사용하면 좋을 듯 최신 기술에 매달리라는 말은 아님! 내부 구현에 관심을 가지자
60. 능동적으로 기술을 탐구하는 사람이 된 계기 개발자로서… 새로운 기술을 적용한 회고 60 안드로이드 공식 콘텐츠 
 블로그, 컨퍼런스, now in android, mad skills Jetpack 릴리즈 노트 구독 및 읽어보기 안드로이드 DevRel, GDE twitter follow 번지수 잘 찾기 : 모르거나 문제 있으면 
 Stack Overflow 말고 Issue Tracker Kotlin Slack #compose cs.android.com로 코드 까보기 AOSP 빌드해서 라이브러리 수정해 보기 Unsplash @ Alisa Reutova
61. 능동적으로 기술을 접하는 사람이 된 시간 개발자로서… Compose 적용 의사결정 과정 61 안드로이드 공식 콘텐츠 블로그, 컨퍼런스, now in android, mad skills Jetpack 릴리즈 노트 구독 및 읽어보기 안드로이드 DevRel, GDE twitter follow 번지수 잘 찾기 : 모르거나 문제 있으면 Stack Overflow 말고 Issue Tracker kotlin Slack #compose cs.android.com 까지 뒤져보려는 열의 aosp 빌드해서 라이브러리 수정해보기
62. 능동적으로 기술을 접하는 사람이 된 시간 개발자로서… Compose 적용 의사결정 과정 62 안드로이드 공식 콘텐츠 블로그, 컨퍼런스, now in android, mad skills Jetpack 릴리즈 노트 구독 및 읽어보기 안드로이드 DevRel, GDE twitter follow 번지수 잘 찾기 : 모르거나 문제 있으면 Stack Overflow 말고 Issue Tracker kotlin Slack #compose cs.android.com 까지 뒤져보려는 열의 aosp 빌드해서 라이브러리 수정해보기
63. Compose 정식 출시보다 앞섰던 Compose 적용기 류기민 세션 05 감사합니다