실제 운영중인 서비스에 다크모드 적용 과정

Transcript

1. 김종식, 원티드랩 실제 운영중인 서비스에 다크모드 적용 과정
2. Key summary about developing Dark Theme Resource Identifier -night App Theme - DayNight Image Resource - Vector Drawable & Tint Check dark mode in programmatically
3. AppCompat <style name="AppTheme" parent="Theme.AppCompat.DayNight"> Material Component (1.1.0 이상) <style name="AppTheme" parent="Theme.MaterialComponents.DayNight"> DayNight theme https://maven.google.com/web/index.html It is not necessarily required.
4. Vector Drawable <vector xmlns:android=”…" android:width="24dp" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:tint="@color/icon_black" > <path android:fillColor=”#FFF" android:pathData=”…" /> </vector> references to other resources are not supported by build-time PNG generation 5.0미만 사용자 비율 = 0.25% 미만 minSDK 21 업데이트 drawable/Ic_arrow_back_white_24dp.xml <!-- Common Resource Colors --> <color name="icon_black">#000000</color> <color name="icon_dark_gray">#333333</color> <color name="icon_medium_gray">#666666</color> <color name="icon_light_gray">#999999</color> <!-- Common Resource Colors --> <color name="icon_black">#FFFFFF</color> <color name="icon_dark_gray">#CACACA</color> <color name="icon_medium_gray">#CFCFCF</color> <color name="icon_light_gray">#AAAAAA</color> values-night/color.xml values/color.xml
5. Tint Overlay the colors on the image with the appropriate colors. in XML android:tint – API level 21 android:drawableTint – API level 23 var ImageView.tint: Int? get() = 0 set(color) { color?.let { ImageViewCompat.setImageTintList(this, ColorStateList.valueOf(it)) } ?: run { ImageViewCompat.setImageTintList(this, null) } } var Drawable.tint: Int? get() = 0 set(color) { color?.let { DrawableCompat.setTint(this, color) } ?: run { DrawableCompat.setTintList(this, null) } } private fun initIntention() { viewModel.selectedIntention.observe(this@Fragment, Observer { intention -> intentionTextView.text = getString(intention.text) intentionTextView.setTextColor(intention.textColor) intentionImageView.tint = intention.arrowColor }) }
6. Check dark mode in programmatically fun Context.isDarkmode(): Boolean = (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES • Scrolling - SYSTEM_UI_FLAG 업데이트 부분 • React-Native 리소스 로드 부분
7. Goal 안정성을 유지한 채 사용자 경험 개선하기 프로젝트 레거시 정리
8. 안정성을 유지한 채 사용자 경험 개선하기 팀 내 사이드 프로젝트로 최소한의 리소스만으로 작업 - 개발자1, 디자이너1 - 우선순위를 낮춰 충분한 일정 확보 - 검증이 필요없는 수준으로 진행
9. Release schedule R S R R R R R R R Dark Theme - 2019.06.19. - v4.3.10 React-Native 도입 - 2019.08.27. - v4.4.0 Dark Theme - 2019.09.19. - v4.4.1 Design System - Icon - 2019.10.27. - v4.4.0
10. 개발 진행 시 고려사항 • 추가/수정 되는 UI요소 – 색상값은 직접 입력하도록 요청 - 리소스 제거 및 키 리네이밍을 함께 진행하기 때문에 충돌 최소화 목적 - 병렬로 진행되는 과제 단위 code review > merge > dark theme 업데이트 필요
11. Prototyping 개발팀 주도 프로토타이핑 디자인 리뷰 1차 – 색상 정리, 다크모드 적용을 위한 추가 리소스 작업 디자인 리뷰 2차 – 동시 진행되는 과제들 머지, 완성도 높은 기준으로 리뷰 내부 피드백 / 출시
12. Prototyping – Color • https://convertingcolors.com/ • Light 테마 색상 기준 Brightness Gradient / Saturation Gradient 20~40% • android:color/white, android:color/black 활용 values/color.xml values-night/color.xml
13. Prototyping – Text Color • 대부분의 텍스트 색상은 Black / White 계열 > RGB 대칭값으로 프로토타이핑 • 그 외 색상이 있는 색상은 Brightness Gradient 20~40% 값 활용 • 배경이 있는 영역의 텍스트는 99.9% android:color/white
14. Prototyping – Resources • 미사용 리소스는 모두 제거 • Tint 적용으로 Dark Theme 적용 가능 부분 제거 - 추가 이미지 작업이 필요한 리소스 : 21개 • Vector Drawable 아이콘 컬러를 WHITE 로 요청 - IDE에서 편하게 확인하기 위함
15. Prototyping – Design QA • 프로토타이핑 작업 관련 이슈 거의 없었음 • Fill 타입과 Line 타입을 모두 사용하는 색상의 경우 값 정리 - 두 타입을 모두 만족 시킬 수 있는 색상 값 - 리소스를 분리
16. 프로젝트 레거시 정리 • 모듈 구성 정리 • 미사용 리소스 제거 • 리소스 키 정리
17. 모듈 구성 정리 (기존) Library Library 1 app Application Build Installable APK Build Instant App APKs wanted_feature_base wanted_feature_ia Feature instant_app Instant App
18. 모듈 구성 정리 (통합) Library Library 1 app Application Build Installable APK Build Instant App APKs wanted_feature_base wanted_feature_ia Feature instant_app Instant App
19. 리소스 정리 • 미사용 리소스 제거 - 레이아웃, 이미지, 스타일, 다국어, … - Refactor > Remove Unused Resources... • 디자인 시스템 준비 - design_system resource 구성 추가 sourceSets { main { res.srcDirs = ['src/main/res', 'src/main/design_system'] } }
20. 성과
21. 주요 이슈사항 및 논의 항목 컨텐츠 원본 이미지가 밝은 경우 다크테마 설정 시 아이콘 색상 변경 건 위젯 다크모드 적용 건 SwipeRefreshLayout 색상 변경 건 구글 지도 – 다크테마 미지원 건 인앱 웹 뷰 – 웹 컨텐츠 색상 반전 처리 건 Shadow 색상 처리 건
22. 컨텐츠 원본 이미지가 밝은 경우 회사 상세 정보, 채용 공고, 기업 로고 등 다운로드 이미지 컨텐츠가 대부분 밝아 다크테마의 효과가 반감됨 원본 이미지에 임의 효과를 적용하는 것에 대하여 기업 고객이 원하는 것일지 판단이 서지 않음, 출시 후 별도 프로토타이핑 검토중
23. 다크테마 설정 시 아이콘 색상 변경 건 앱 아이콘 – 다크모드일 경우에는 warm tone 아이콘으로 노출함으로써 새로운 브랜딩을 시도할 수 있는 가능성 앱 내 대표 색상값에 대한 모든 화면별 검토가 필요하고, 최소한의 리소스만 활용하여 작업하는 것을 목표로 하였기 때문에 현 상태 유지
24. 위젯 다크모드 적용 건 디스플레이 - 다크테마 설정 후 바로 업데이트 안되는 현상 디스플레이 설정 변경 후 바로 위젯이 업데이트 되지 않고 일정 시간 이 후 업데이트 됨, 크리티컬 하지 않다고 판단되어 현상 유지
25. SwipeRefreshLayout 색상 변경 건 Pull to refresh 시 Progress background 색상도 다크 모드 적용이 필요하지 않을까? React Native – FlatList 스타일 중 RefreshLayout의 setProgressBackgroundColor 와 대응되는 내용을 확인하지 못함 Refreshing 상태에 대하여 UI가 모두 동일하게 표현되는 것으로 정리
26. 구글 지도 – 다크테마 미지원 건 구글 맵 – 다크모드 스타일 적용 후 한국일 경우 다크모드로 표시되지 않음 현 상태 유지
27. 인앱 웹 뷰 – 웹 컨텐츠 색상 반전 처리 건 서비스 소개, 이용 약관, 자주 묻는 질문, 개인정보 처리 방침 앱 내 이벤트, 토픽 등 인앱 웹페이지를 이용하는 컨텐츠의 경우 현 상태 유지
28. Ever wonder why the most popular apps are starting to look the same? It might be a good thing More focus on contents and outcomes. https://uxdesign.cc/ever-wonder-why-the-most-popular-apps-are-starting-to- look-the-same-it-might-be-a-good-thing-e54aadd50fd5 https://brunch.co.kr/@thinkaboutlove/216
29. 내가 만드는 서비스는 어느 단계에 있을까?
30. 관리가 필요한 리소스 수 3 2 1 3
31. 다크테마를 적용하는 일은 … • 어려운 일이 아닙니다. • 사용자에게 좀 더 나은 환경 서비스를 제공하려는 마음가짐 • 모든 화면을 두번, 세번 반복적으로 체크하는 성실함 • 히스토리 파악조차 어려운 컬러 리소스도 다시보기 꼼꼼함