카카오페이 앱 리빌딩 스토리

#Android

카카오페이앱을 리빌딩하면서 겪은 과정들을 소개해 드리려고 합니다.

발표자 : skyler.shin
카카오페이 안드로이드 주식 서비스 업무를 맡고 있는 스카일러입니다.

eddy.kang
카카오페이 안드로이드 계정 서비스 업무를 맡고 있는 에디입니다.

Transcript

1. 신문규 Skyler.Shin, 강진호 Eddy.Kang, 이호용 Yong.E 카카오페이 Copyright 2022. Kakao Corp. All rights reserved. Redistribution or public display is not permitted without written permission from Kakao. if(kakao)2022 : DI, 모듈화, UI를 중심으로 카카오페이 앱 리빌딩 스토리
2. 앱 리빌딩 배경 DI 개선 및 모듈화 UI 완성도 올리기 정리하기
3. 앱 리빌딩 배경 DI 개선 및 모듈화 UI 완성도 올리기 정리하기
4. 앱 리빌딩 배경
5. 0 30 60 2019 2020.6 2021.6 2022.09 서비스 증가 서비스
6. 개발팀 규모 증가 0 30 60 2019 2020.6 2021.6 2022.09 인원 서비스
7. 빠르게 성장 중인 안드로이드 개발팀 재정비
8. 코드 품질
9. 사용성 코드 품질
11. UI Architecture Network DI Module
12. UI Architecture Network DI Module
13. 앱 리빌딩 배경 DI 개선 및 모듈화 UI 완성도 올리기 정리하기
14. DI(Dependency Injection) 역할 모듈 결합도 낮추기
15. 모듈 결합도 낮추기 :a :b
16. 모듈 결합도 낮추기 class A Interface B
17. :a :b_interface :b_impl 모듈 결합도 낮추기
18. :a :b_interface :b_impl 모듈 결합도 낮추기
19. 카카오페이 앱 DI 구현 상황 - Koin 라이브러리 사용 - 쉽게 사용이 가능한 factory, single 함수 사용 빈도가 잦음 - 올바른 scope로 객체가 생성 되었는지 알 수 없음 // 호출할 때마다 객체를 새로 생성 factory { PayPaymentOfflineLocalDataSource() } // 앱 내에 하나의 객체만 생성 single { PayPaymentOfflineLocalDataSource() }
20. DI를 바꾼다면? Koin Dagger Hilt 실행 Runtime Compile Compile 사용 현황 카카오페이 앱 카카오톡 / 카카오페이 비즈니스 없음 사용 난이도 (Scope) 중간 중간 매우 쉬움
21. DI를 바꾼다면? Koin Dagger Hilt 실행 Runtime Compile Compile 사용 현황 카카오페이 앱 카카오톡 / 카카오페이 비즈니스 없음 사용 난이도 (Scope) 중간 중간 매우 쉬움
22. Hilt 장점 SingletonComponent @Singleton ActivityRetainedComponent @ActivityRetainedScoped ActivityComponent @ActivityScoped FragmentComponent @FragmentScoped ViewWithFragmentComponent @ViewScoped ViewComponent @ViewScoped ServiceComponent @ViewScoped ViewModelComponent @ViewModelScoped
23. Hilt 도입의 어려운 점 - Custom scope인 경우 hilt의 미리 정의된 scope와 맞출지 판단 필요 Fragment Fragment Fragment Custom Scope
24. - Custom scope인 경우 hilt의 미리 정의된 scope와 맞출지 판단 필요 - Navigation graph scope로 문제 해결 // parent fragment scope val viewModel: PayOfflineViewModel by navGraphViewModels(R.id.payment_offline_graph) // child fragment val parentsViewModel: PayOfflineViewModel by viewModels({requireParentFragment()}) Hilt 도입의 어려운 점
25. Feature based module :app :money :payment :stock :home :design§system :core :util NonïFeature Feature :core :resource :util :widget
26. Feature based module :app :money :payment :stock :home :design§system :core :util NonïFeature Feature :core :resource :util :widget
27. Feature based module :app :money :payment :stock :home :design§system :core :util NonïFeature Feature
28. Features :payment :money :stock :account :offline :membership :history :presentation :domain :data
29. Features :payment :money :stock :account :offline :membership :history :presentation :domain :data
30. Features :payment :money :stock :account :offline :membership :history :presentation :domain :data
31. Presentation 모듈로 분리 :payment¶offline¶presentation :app Activity Fragment ViewModel
32. Domain 모듈로 분리 :payment¶offline¶domain :core¶domain UseCase Repository Model
33. Data 모듈로 분리 :payment¶offline¶data :core¶data Repository DataSource
34. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
35. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
36. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
37. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
38. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
39. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
40. 화면과 화면 사이 연결하기 - Navigator를 활용해 feature간 activity 실행 정리 - Dependency graph 최적화 과정 필요 :feature¶payment¶presentation :domain :data :core :design§system :feature¶money¶presentation
41. 화면과 화면 사이 연결하기 :feature¶payment¶presentation :navigator :navigatorImpl :feature¶money¶presentation height = 1
42. 화면과 화면 사이 연결하기 :feature¶payment¶presentation :navigator :navigatorImpl :feature¶money¶presentation height = 1
43. Navigator로 Feature 사이 연결 - Activity 실행 기능 - Fragment 실행 기능 - Scheme 실행 기능 // Activity 실행 navigator.start(this@PayHomeFragment, Direction.NotificationFeed) // Scheme 실행 openSchemeList.collect { navigator.start(activity = this, directionsList = it) }
44. Feature 기반으로 정리 된 모듈 :money :app :stock :core :utils :navigator :offline :membership Feature
45. 모듈화 전 모듈화 후 빌드 시간 10m 48s 9m 32s Module 5 37 kotlin line 186628 102138 모듈화 결과 Full build 기준 결과
46. 모듈화 전 모듈화 후 빌드 시간 10m 48s 9m 32s Module 5 37 kotlin line 186628 102138 빌드 시간 변화 Full build 기준 결과
47. 모듈화 전 모듈화 후 빌드 시간 10m 48s 9m 32s Module 5 37 kotlin line 186628 102138 모듈 수 변화 Full build 기준 결과
48. 모듈화 전 모듈화 후 빌드 시간 10m 48s 9m 32s Module 5 37 kotlin line 186628 102138 코드량 변화 Full build 기준 결과
49. 모듈화 전 모듈화 후 현재 빌드 시간 10m 48s 9m 32s 21m 45s Module 5 37 122 kotlin line 186628 102138 331325 1.8배 23배 2배 개편 전 그리고 현재 Full build 기준 결과
50. 더 세분화 된 모듈 :money :app :stock :core :utils :navigator :offline :membership Feature :bankAccounts :send :receive :charge
51. 더 세분화 된 모듈 :money :app :stock :core :utils :navigator :offline :membership Feature :bankAccounts :send :receive :charge
52. 모듈화로 얻은 것 생산성
53. 앱 리빌딩 배경 DI 개선 및 모듈화 UI 완성도 올리기 정리하기
54. 디자인 시스템 UI 완성도 올리기
55. Why? “디자인 시스템이 필요한가요?”
56. 브랜드 Identity 확립
57. 브랜드 사용자 경험 Identity 확립 일관된 UI 제공
58. 카카오페이 디자인 시스템 Foundation Component Module Template Color Theme Resource TypoGraphy . . . Badge Button Chip Checkbox RadioButton . . . AppBar Tab TextField Dialog BottomSheet BridgePage
59. <com.google.android.material.button.MaterialButton android:id="@+id/btn_success" style="@style/Widget.MaterialComponents.Button.UnelevatedButton" android:layout_width="0dp" android:layout_height="52dp" android:background="@android:color/transparent" android:insetLeft="0dp" android:insetTop="0dp" android:insetRight="0dp" android:insetBottom="0dp" android:minWidth="0dp" android:minHeight="0dp" android:padding="0dp" android:text="@string/pay_ok" android:textAppearance="@style/PayApp.Text.Medium.Bold" android:textColor="@color/pay_grey800_daynight" app:backgroundTint="@color/pay_grey200_daynight" app:backgroundTintMode="src_atop" app:cornerRadius="0dp" app:rippleColor="@color/pay_grey300_daynight" /> Case1. 디자인 시스템 도입 전 버튼 활용 예시 필요에 따라 일부 Style 및 attribute로 작성
60. - Color - Size - Typography <com.google.android.material.button.MaterialButton android:id="@+id/btn_success" style="@style/Widget.MaterialComponents.Button.UnelevatedButton" android:layout_width="0dp" android:layout_height="52dp" android:background="@android:color/transparent" android:insetLeft="0dp" android:insetTop="0dp" android:insetRight="0dp" android:insetBottom="0dp" android:minWidth="0dp" android:minHeight="0dp" android:padding="0dp" android:text="@string/pay_ok" android:textAppearance="@style/PayApp.Text.Medium.Bold" android:textColor="@color/pay_grey800_daynight" app:backgroundTint="@color/pay_grey200_daynight" app:backgroundTintMode="src_atop" app:cornerRadius="0dp" app:rippleColor="@color/pay_grey300_daynight" /> Case1. 디자인 시스템 도입 전 버튼 활용 예시 필요에 따라 일부 Style 및 attribute로 작성
61. CustomView + Style으로 간단하게 구현 가능 Case1. 디자인 시스템 도입 전 버튼 활용 예시 <com.kakaopay.fit.button.FitButton android:id="@+id/btn_success" android:layout_width="match_parent" android:layout_height="52dp" android:text="@string/pay_ok" style="@style/Widget.Fit.FitButton.Primary" />
62. Case 2. 확장성이 고려되지 않은 Custom View 특정 상황에 맞추어 개발이 되어 있음 기능 추가 또는 수정이 어려움 확장성이 낮다보니 새로운 View 개발
63. Case 2. 확장성이 고려되지 않은 Custom View PaySelectInputView PayInputView PayTextInputView 결제 멤버십 계정 머니
64. Case 2. 확장성이 고려되지 않은 Custom View FitTextField PaySelectInputView PayInputView PayTextInputView 결제 멤버십 계정 머니
65. 디자인 시스템 Components
66. 디자인 시스템 도입 결과 1. 파편화 된 UI 코드 정리 2. 개발 편의성 증가
67. System Bar 활용하기 UI 완성도 올리기
69. Status bar 색상이 다름 Navigation Bar 색상이 다름
70. 기존 방식의 한계점 - Background 색상이 달라지면, System Bar 색상도 변경해주어야 함 - 휴먼 에러 발생 확률이 높음 / / StatusBar 색상 변경 setStatusBarColor(R.color.Red) / / NavigationBar 색상 변경 setNavigationBarColor(R.color.Red)
71. System Bar 활용하기
72. System Bar 활용하기 Status Bar ViewGroup Navigation Bar
73. System Bar 활용하기 Status Bar ViewGroup Navigation Bar WindowCompat .setDecorFitsSystemWindows(window, false)
74. ViewGroup 확장하기 Status Bar ViewGroup Navigation Bar WindowCompat .setDecorFitsSystemWindows(window, false)
75. ViewGroup 확장하기 ViewGroup WindowCompat .setDecorFitsSystemWindows(window, false)
76. ViewGroup 확장하기 ViewGroup ViewCompat.setOnApplyWindowInsetsListener(view) { view, insets -> val systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars()) view.setPadding( top = view.paddingTop + systemInsets.Top, bottom = view.paddingBottom + systemInsets.bottom ) }
77. ViewGroup 확장하기 ViewGroup ViewCompat.setOnApplyWindowInsetsListener(view) { view, insets -> val systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars()) view.setPadding( top = view.paddingTop + systemInsets.Top, bottom = view.paddingBottom + systemInsets.bottom ) }
78. ViewGroup 확장하기 ViewGroup ViewCompat.setOnApplyWindowInsetsListener(view) { view, insets -> val systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars()) view.setPadding( top = view.paddingTop + systemInsets.Top, bottom = view.paddingBottom + systemInsets.bottom ) }
79. ViewGroup 확장하기 ViewCompat.setOnApplyWindowInsetsListener(view) { view, insets -> val systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars()) view.setPadding( top = view.paddingTop + systemInsets.Top, bottom = view.paddingBottom + systemInsets.bottom ) }
80. System Bar 활용 화면
81. System Bar 활용 결과 1. 유연한 화면구조 설계 2. 휴먼 에러 감소
82. 앱 리빌딩 배경 DI 개선 및 모듈화 UI 완성도 올리기 정리하기
83. DI Hilt 정리하기
84. Module DI Hilt Feature based 정리하기
85. Module DI Hilt Feature based UI Quality 정리하기
87. Action Items 1. 모듈 세분화 2. 빌드 시간 개선 3. Compose 기반 디자인 시스템 개발
88. E.O.D