GDG Seoul IO Extended 2022 - Android Compose

자료에 포함한 링크 모음
- Now in android : https://github.com/android/nowinandroid
- Guide app architecture https://developer.android.com/topic/architecture
- GDE 엄재웅님 발표자료 : https://speakerdeck.com/skydoves/o-extended-korea-android-exploring-now-in-android
- GDE 안성용님 Naver map compose github : https://github.com/fornewid/naver-map-compose
- Compose kotlin : https://developer.android.com/jetpack/androidx/releases/compose-kotlin
- https://material.io/blog/migrating-material-3
-
chrisbanes : EditText mapping : https://gist.github.com/chrisbanes/8c2f55f55b8dd2c64e436b704d65f266
- https://google.github.io/accompanist/webview/

Transcript

1. taehwan Compose 시작
2. Now In Android https://github.com/android/nowinandroid Now In Android는 구글에서 최근 배포한 오픈 소스 프로젝트로 Compose를 이용한 구성을 확인할 수 있습니다.
3. Now In Android https://github.com/android/nowinandroid Github android nowinandroid를 통해 모듈 형태의 앱 구성을 확인할 수 있습니다.
4. • Compose • Material 3 • Official architecture guidance • Hilt • Testing Now In Android 2022 I/O Extended Korea Android - Exploring Now in Android - Speaker Deck - GDE 엄재웅 발표자료 100% Compose로 구성하고, Material 3 기반으로 작업되었습니다. IO EX Android에서 발표한 재웅님 자료를 참고하세요.
5. Compose 적용 이 발표에서는 Compose 적용을 어떻게 하면 좋을까를 고민하셨다면 약간의 가이드로 작성하였습니다.
6. XML 코드 사이에 ComposeView 추가 후 setContent 활용 XML에 Compose 01 Compose 적용 선택지는 3가지가 있는데, 그중 당장 적용해볼 수 있는 방법은 ComposeView를 xml 코드 사이에 추가하여 활용하는 방법입니다. 단점은 수정 포인트가 2곳으로 나뉜다는 점입니다.
7. Compose 적용 기존 xml 코드 사이에 ComposeView를 추가합니다. 기존 높이가 있다면 그대로 활용하시면 됩니다.
8. Compose 적용 binding을 활용하여 ComposeView를 찾고 여기에 setContent를 활용해줍니다. Base로 활용한 Surface를 정의합니다.
9. 01 Compose 적용 XML 코드 사이에 ComposeView 추가 후 setContent 활용 XML에 Compose 결과적으로 위 이미지와 같은 xml + compose 뷰를 볼 수 있습니다. theme도 다르다는걸 알 수 있는데 theme역시 맞춰주셔야 합니다. 처음 작업 시에 theme를 잘 작업해두는게 가장 좋은데, 시간은…
10. 01 02 Compose 적용 XML 코드 사이에 ComposeView 추가 후 setContent 활용 XML에 Compose Compose 사이에 XML을 로드하여 사용 Compose에 XML 활용 또 다른 방법으로 기존 작업 xml을 compose로 불러와서 활용하는 방법입니다. 이 역시 부분부분도 가능하고, 통으로도 가능합니다.
11. Compose 적용 이번엔 Compose 위에서 동작해야해서 AndroidView를 활용합니다. AndroidView는 앞으로 자주 활용하게 될건데, factory, update를 주의해서 사용해야합니다.
12. 01 02 Compose를 페이지 단위로 적용 단 일부 뷰는 AndroidView • Map • WebView • ExoPlayer • Etc 화면 단위 적용 03 Compose 적용 XML 코드 사이에 ComposeView 추가 후 setContent 활용 XML에 Compose Compose 사이에 XML을 로드하여 사용 Compose에 XML 활용 한번에 다 변경하는게 가장 좋은데 신규 화면 단위로 작업하시는게 가장 좋은 방법입니다. 기존 뷰 사이에 끼어넣기보단 새로운 화면을 Compose로 작업하고, 필요한 경우에만 xml 또는 Compose를 지원하지 않는 component를 사용할 때 Android View를 활용할 수 있습니다.
13. Compose map GDE 안성용님이 Compose로 naver map을 맵핑해두었으니 참고하세요.
14. • Component 구성이 필요할까? • Material 버전은? • TextField 활용은 어떨까? • AndroidView 활용 • Compose 최적화 ◦ 최신 버전의 Android Studio를 통해 ▪ Recompose 확인 ▪ LiveEdit 활용 Compose 적용 Compose 적용 시 고민해야할 부분을 미리 정리해보았습니다.
15. • Component 구성이 필요할까? • Material 버전은? • TextField 활용은 어떨까? • AndroidView 활용 • Compose 최적화 ◦ 최신 버전의 Android Studio를 통해 ▪ Recompose 확인 ▪ LiveEdit 활용 • Compose 활용 시에는 Kotlin 디펜던시 강제는 선택이 아닌 필수 Compose 적용 Compose 활용 시에는 kotlin 디펜던시가 강제사항이라 참고하세요.
16. Compose 적용 • Version에 따라 Kotlin 적용 버전 확인 필요 https://developer.android.com/jetpack/andr oidx/releases/compose-kotlin Compose 활용 시에는 kotlin 디펜던시가 강제사항이라 참고하세요.
17. Material vs Material 3 Material 과 Material 3가 있는데 무엇을 선택해야할까요?
18. • Material • Material 3 ◦ Android 12와 함께 출시 ◦ Migrating https://material.io/blog/migrating-material-3 Material vs Material 3 Material은 1.1.1, 1.2.0-rc02까지 나왔고, Material 3는 아직 작업 중입니다. 하지만 언젠가 변경해야 할건데 일단 Material 도 어렵죠.
19. Material Theme vs fun • Compose는 기본 Material 테마 기반 ◦ fun 맵핑 - 컴포넌트 구성 Compose는 기본 Material 테마 기반으로 동작합니다. 그래도 쓰기 싫다면 파편화를 줄이기 위해서 Component를 다 만들 수 밖에 없습니다. 그렇다고해도 theme를 잘 활용하는게 더 좋은데, 이 둘은 사실 상호보완이라 둘다 가져가면 가장 좋습니다.
20. Material Theme vs fun • Compose는 기본 Material 테마 기반 ◦ fun 맵핑 - 컴포넌트 구성 ◦ Material 셋을 지정해 Theme 기반 동작 Colors, theme까지 모두 지정하는 방법입니다. Compose의 기본은 MaterialTheme를 따르는 것이기 때문에 colors 정의에 시간이 걸립니다. 한 2일+ 정도의 시간으로 파악하고, 이를 활용할 수 있습니다.
21. • isLight가 다르다. • isSystemInDarktheme() 를 이용해 Theme 구분 Material Theme 사용 Material에서 isLight라는 키워드가 있는데, 몇몇 코드는 isLight 키워드에 따라 테마에 지정한 색상 정보를 바꿔버립니다. 원치 않는 결과가 나올 수 있는데 isLight를 true 또는 false로 고정하고, isSystemInDarktheme란 키워드를 활용하는게 더 적합합니다.
22. • primary 앱에서 강조되어야 할 색상을 지정 • secondary 아래에서 사용 ◦ 플로팅 액션 버튼 ◦ CheckBox 및 RadioButton 같은 선택 컨트롤 ◦ 링크 및 헤드라인 • background 스크롤 가능한 콘텐츠 뒤에 나타나는 배경색입니다. ◦ Column, Row 등 • 등 Material colors Colors의 정보는 문서에 어느게 어디에서 활용되는지 명확하지는 않습니다. 그래서 학습을 해야합니다.
23. • Material 3에서 알아야할 컬러 정보가 더 많아졌다 ◦ 기존 Material에 포함되어있던 isLight는 제거 ◦ 개발자나 디자이너가 요구한 컬러셋을 그대로 적용 Material 3 Material 3에서는 isLight와 같은 애매한 값을 제거했습니다. 개발자나 디자이너가 생각한 컬러셋이 그대로 들어갑니다. 다만 컬러셋 정보가 약 2배가 되었는데 추가로 학습해야할 필요가 있습니다.
24. Material 3 - Window size Material 3를 선택했다면 Window size 대응이 가능해집니다.
25. • Window size는 targetApi 32 부터 활용 가능 ◦ Target 32는 Android 12L Material 3 Window size 단점은 target 32를 강제화해야하는데, 어차피 Compose 1.2.0-xxx 사용시 target 32를 필요로 합니다.
26. • Material 3에는 window size classes를 통해 Compat, Medium, Expanded Material 3 Window size Window size는 그간 테블릿을 직접 구분하거나, phone을 직접 구분하던 임의적인 코드 대신 구글에서 Compat, Medium, Expanded를 구분하여 제공합니다.
27. • Compat 사이즈 - 일반적인 스마트폰 (폴더블 접힌 상태) Material 3 Window size Compat는 가장 기본적인 형태로 일반적인 스마트폰, 폴더블의 접힌 형태가 될 수 있습니다.
28. • Medium 사이즈 - 폴더블 펼침 또는 태블릿 Material 3 Window size Medium 사이즈는 폴더블의 펼침 또는 작은 태블릿에 해당합니다. 바텀 메뉴의 위치를 왼쪽으로 이동할 수 있죠.
29. • Expanded 사이즈 - 폴더블 펼침 또는 태블릿 Material 3 Window size Expanded 사이즈는 폴더블의 펼침 또는 태블릿에 해당합니다. 바텀 메뉴를 왼쪽으로 이동하고, 더 넓어진 영역만큼 텍스트 표기도 할 수 있습니다.
30. • 아래와 같은 접근은 X Material 3 Window size 과거에 직접 코드 형태로 불러와 사용하던걸 할 필요는 없는데
31. • rememberWithSizeClass()를 활용 ◦ Compat, Medium, Expanded 구분 Material 3 Window size rememberWitdhSizeClass()를 활용하여 사이즈별로 메뉴의 위치와 형태를 지정할 수 있습니다. 단점은 파편화 될 수 있을 수 있지만, 함수 형태로 잘 분리해줄 필요가 있습니다.
32. TextField Compose에서도 TextField를 활용할 수 있습니다.
33. • 아직까지 Compose TextField는 타이핑 이슈 있음 ◦ 타이밍 이슈 발생 ▪ 특히 삼성 키보드, MS 키보드 등 ▪ 디버그 모드일때 심하고, 릴리즈일때는 상대적으로 괜찮음 • 해결방법은? ◦ TextField를 활용한 해결 방법은 현재 마땅히 없다. ◦ 적절한 해결 방법 : AndroidView 활용 EditText 매핑 • Chrisbanes - Twitter에서 사용하는 방법 소개 ◦ https://gist.github.com/chrisbanes/8c2f55f55b8dd2c64e436b704d65f266 TextField 타이핑 문제 다만, 타이핑 이슈가 여전히 있습니다. 보통 타이밍 이슈인데, 디버그일때 심하고, 릴리즈일때는 상대적으로 괜찮습니다. 해결 방법은 특별히 없는데, Chrisbanse이 트위터에서 사용하는 방법이라고 소개한 오픈 소스를 참고하세요.
34. Keyboard Keyboard 제어가 필요할 수 있습니다.
35. • Keyboard 열린 상태에서 백그라운드 터치 시 키보드 hide • View 높이 체크하는 전통적인 코드 매핑 구현 Keyboard Keyboard가 열린 상태에서 백그라운드 터치 시 키보드 hide 시킬 수 있는데, 그럼 키보드가 떠있는걸 체크해야합니다. 제가 여러 코드를 봤는데 그냥 전통 적인 코드 맵핑을 활용합니다.
36. Keyboard 전통 방식인 rootView.height를 측정하고, 키보드 높이를 rect로 측정하여 처리합니다.
37. Keyboard 그리고 Modifier 확장함수로 코드를 정리해두었습니다. FocusManager를 활용하고, 키보드가 열렸다면 포커스를 함께 날려주는 형태입니다.
38. Keyboard 저는 Scaffold에 이를 연결해서 사용하고 있습니다. scaffold의 키보드 상태가 닫히면 자동으로 처리되도록 만들었습니다.
39. • Focus 변경에 따른 recomposition count Keyboard AS 최신버전에서 recomposition count도 확인했는데 특별히 문제는 없음도 확인할 수 있습니다.
40. AndroidView 생각보다 간혹 사용할 AndroidView를 소개합니다.
41. • XML, UI 컴포넌트 중 Compose 미 지원 UI에 대한 AndroidView 적용가능 • AndroidView는 ◦ factory - View 초기화 ◦ update - recompose 동작에 호출 ◦ modifier - Compose View 적용 AndroidView AndroidView 활용시에는 recompose 이슈에 따라 무한 루프되는 동작이 발생할 수 있음을 주의해야 합니다. 기본 factory에서 초기화를 하기에 새로 불리지 않아야할 부분을 여기에 담아야 합니다. update는 가급적 최소한만 가져가면 좋습니다.
42. AndroidView https://google.github.io/accompanist/webview/ WebView는 구글의 오픈소스 프로젝트인 accompanist에서 제공하니 이를 활용하는것도 가능한데, 기본적인 형태로 사용 가능합니다.
43. Compose performance 컴포즈 최적화 방법을 알아봅니다.
44. Lazy optimization RecyclerView 대신 Lazy를 활용하게 될겁니다. 이때 Unique key를 잘 적어주시면 최적화에 도움됩니다.
45. Lazy optimization 그리고 items 안에서 sortedWith과 같은 데이터를 변경하는걸 하지 않아야합니다. 당연히 이때도 remember를 활용해야하는데
46. Lazy optimization 만약 sorted가 필요하다면 이와 같은 코드를 활용해줘야 합니다.
47. change Data 구조를 전달했을때 recompose 동작은 name의 값이 변경되었을때 일어나게됩니다.
48. • Preview 시에는 Hilt, Dagger로 초기화하는 viewModel을 통해 변수 접근 시 Preview 불가능 한 경우 발생 • 함수 자체를 viewModel 활용하는 대신 data class 또는 primitive type 활용 Preview 이를 잘 활용 하여 Preview 할때도 data class를 전달하거나, primitive type을 전달해주는게 좋습니다.
49. • Android Studio Dolphin, Electric Eel에서 Recomposition counts 확인 가능 • 아직 완벽하게 동작하지 않음 Recompose count Android Layout Inspector을 이용해어 Recomposition count으로 카운트 확인이 가능합니다. 다만 잘 동작하지 않는 구조가 있는데, 보통 타고타고 들어간 현재 화면의 rootView를 찾지 못하는 케이스가 있습니다. 한 페이지 안에 정적인 경우는 잘 불러오긴 합니다.
50. • LiveEdit은 Device, Preview 에서 활용 • 타이핑 중간 중간에도 LiveEdit 처리되어 많은 성능을 필요로 함 ◦ M1 이상에서 활용하는게 좋음(Preview 도 동일) LiveEdit LiveEdit 역시 간혹 동작하지 않는 케이스가 있는데 타고들어가는 페이지의 수정이 일어나면 복구를 못하는 케이스가 있습니다. 아무래도 코드의 동작에 따라 동작할거라 필요하다면 가급적 현재 페이지를 그대로 뛰우는게 가장 좋은 방법입니다. 그리고 성능적으로 M1 이상에서만 활용하세요.
51. Component 구성은 필요할까? Component 구성은 필요합니다.
52. • Component가 없다면? ◦ 파편화의 시작 ◦ Google에서 제공하는 컴포넌트 변경 시 모두 수정 필요 Component 파편화를 줄이고, 새로운 수정을 가할때 찾아서 수정하기보단 하나에서 수정하는게 좋죠.
53. • Component가 있다면? ◦ 파편화를 줄일 수 있음 ◦ 단, fun을 모두 매핑해줘야 하는 단점 ◦ font, colors 등을 theme를 통해 적용 ◦ 코드의 시작점을 scaffold로 지정하여 최소한의 시작점 생성 Component 보통 이를 디자인 시스템 운영하는 회사에서만 활용할것이라고 생각하지만 실제론 미리 만들어두고, 디자인 시스템도 함께 들어가는게 좋은데, 일부 색상이 틀어지는 문제도 줄여줄 수
54. Component 개인적으로 이와 같은 형태로 활용하고 있습니다.
55. Thank you! Android Develop/Lemontree GDG Korea Android @taehwandev taehwan