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 시작
   

   View Slide

2. Now In Android
   https://github.com/android/nowinandroid
   Now In Android는 구글에서 최근 배포한 오픈 소스 프로젝트로 Compose를 이용한 구성을 확인할 수
   있습니다.
   

   View Slide

3. Now In Android
   https://github.com/android/nowinandroid
   Github android nowinandroid를 통해 모듈 형태의 앱 구성을 확인할 수 있습니다.
   

   View Slide

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에서 발표한 재웅님 자료를
   참고하세요.
   

   View Slide

5. Compose 적용
   이 발표에서는 Compose 적용을 어떻게 하면 좋을까를 고민하셨다면 약간의 가이드로 작성하였습니다.
   

   View Slide

6. XML 코드 사이에
   ComposeView 추가 후
   setContent 활용
   XML에
   Compose
   01
   Compose 적용
   선택지는 3가지가 있는데, 그중 당장 적용해볼 수 있는 방법은 ComposeView를 xml 코드 사이에 추가하여
   활용하는 방법입니다. 단점은 수정 포인트가 2곳으로 나뉜다는 점입니다.
   

   View Slide

7. Compose 적용
   기존 xml 코드 사이에 ComposeView를 추가합니다. 기존 높이가 있다면 그대로 활용하시면 됩니다.
   

   View Slide

8. Compose 적용
   binding을 활용하여 ComposeView를 찾고 여기에 setContent를 활용해줍니다. Base로 활용한 Surface를
   정의합니다.
   

   View Slide

9. 01
   Compose 적용
   XML 코드 사이에
   ComposeView 추가 후
   setContent 활용
   XML에
   Compose
   결과적으로 위 이미지와 같은 xml + compose 뷰를 볼 수 있습니다. theme도 다르다는걸 알 수 있는데
   theme역시 맞춰주셔야 합니다. 처음 작업 시에 theme를 잘 작업해두는게 가장 좋은데, 시간은…
   

   View Slide

10. 01 02
    Compose 적용
    XML 코드 사이에
    ComposeView 추가 후
    setContent 활용
    XML에
    Compose
    Compose 사이에
    XML을 로드하여 사용
    Compose에
    XML 활용
    또 다른 방법으로 기존 작업 xml을 compose로 불러와서 활용하는 방법입니다. 이 역시 부분부분도 가능하고,
    통으로도 가능합니다.
    

    View Slide

11. Compose 적용
    이번엔 Compose 위에서 동작해야해서 AndroidView를 활용합니다. AndroidView는 앞으로 자주 활용하게
    될건데, factory, update를 주의해서 사용해야합니다.
    

    View Slide

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를 활용할 수 있습니다.
    

    View Slide

13. Compose map
    GDE 안성용님이 Compose로 naver map을 맵핑해두었으니 참고하세요.
    

    View Slide

14. ● Component 구성이 필요할까?
    ● Material 버전은?
    ● TextField 활용은 어떨까?
    ● AndroidView 활용
    ● Compose 최적화
    ○ 최신 버전의 Android Studio를 통해
    ■ Recompose 확인
    ■ LiveEdit 활용
    Compose 적용
    Compose 적용 시 고민해야할 부분을 미리 정리해보았습니다.
    

    View Slide

15. ● Component 구성이 필요할까?
    ● Material 버전은?
    ● TextField 활용은 어떨까?
    ● AndroidView 활용
    ● Compose 최적화
    ○ 최신 버전의 Android Studio를 통해
    ■ Recompose 확인
    ■ LiveEdit 활용
    ● Compose 활용 시에는 Kotlin 디펜던시 강제는 선택이 아닌
    필수
    Compose 적용
    Compose 활용 시에는 kotlin 디펜던시가 강제사항이라 참고하세요.
    

    View Slide

16. Compose 적용
    ● Version에 따라 Kotlin 적용
    버전 확인 필요
    https://developer.android.com/jetpack/andr
    oidx/releases/compose-kotlin
    Compose 활용 시에는 kotlin 디펜던시가 강제사항이라 참고하세요.
    

    View Slide

17. Material vs Material 3
    Material 과 Material 3가 있는데 무엇을 선택해야할까요?
    

    View Slide

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 도 어렵죠.
    

    View Slide

19. Material Theme vs fun
    ● Compose는 기본 Material 테마 기반
    ○ fun 맵핑 - 컴포넌트 구성
    Compose는 기본 Material 테마 기반으로 동작합니다. 그래도 쓰기 싫다면 파편화를 줄이기 위해서
    Component를 다 만들 수 밖에 없습니다. 그렇다고해도 theme를 잘 활용하는게 더 좋은데, 이 둘은 사실
    상호보완이라 둘다 가져가면 가장 좋습니다.
    

    View Slide

20. Material Theme vs fun
    ● Compose는 기본 Material 테마 기반
    ○ fun 맵핑 - 컴포넌트 구성
    ○ Material 셋을 지정해 Theme 기반 동작
    Colors, theme까지 모두 지정하는 방법입니다. Compose의 기본은 MaterialTheme를 따르는 것이기 때문에
    colors 정의에 시간이 걸립니다. 한 2일+ 정도의 시간으로 파악하고, 이를 활용할 수 있습니다.
    

    View Slide

21. ● isLight가 다르다.
    ● isSystemInDarktheme() 를 이용해 Theme 구분
    Material Theme 사용
    Material에서 isLight라는 키워드가 있는데, 몇몇 코드는 isLight 키워드에 따라 테마에 지정한 색상 정보를
    바꿔버립니다. 원치 않는 결과가 나올 수 있는데 isLight를 true 또는 false로 고정하고,
    isSystemInDarktheme란 키워드를 활용하는게 더 적합합니다.
    

    View Slide

22. ● primary 앱에서 강조되어야 할 색상을 지정
    ● secondary 아래에서 사용
    ○ 플로팅 액션 버튼
    ○ CheckBox 및 RadioButton 같은 선택 컨트롤
    ○ 링크 및 헤드라인
    ● background 스크롤 가능한 콘텐츠 뒤에 나타나는 배경색입니다.
    ○ Column, Row 등
    ● 등
    Material colors
    Colors의 정보는 문서에 어느게 어디에서 활용되는지 명확하지는 않습니다. 그래서 학습을 해야합니다.
    

    View Slide

23. ● Material 3에서 알아야할 컬러 정보가 더 많아졌다
    ○ 기존 Material에 포함되어있던 isLight는 제거
    ○ 개발자나 디자이너가 요구한 컬러셋을 그대로 적용
    Material 3
    Material 3에서는 isLight와 같은 애매한 값을 제거했습니다. 개발자나 디자이너가 생각한 컬러셋이 그대로
    들어갑니다. 다만 컬러셋 정보가 약 2배가 되었는데 추가로 학습해야할 필요가 있습니다.
    

    View Slide

24. Material 3 - Window size
    Material 3를 선택했다면 Window size 대응이 가능해집니다.
    

    View Slide

25. ● Window size는 targetApi 32 부터 활용 가능
    ○ Target 32는 Android 12L
    Material 3 Window size
    단점은 target 32를 강제화해야하는데, 어차피 Compose 1.2.0-xxx 사용시 target 32를 필요로 합니다.
    

    View Slide

26. ● Material 3에는 window size classes를 통해 Compat, Medium, Expanded
    Material 3 Window size
    Window size는 그간 테블릿을 직접 구분하거나, phone을 직접 구분하던 임의적인 코드 대신 구글에서
    Compat, Medium, Expanded를 구분하여 제공합니다.
    

    View Slide

27. ● Compat 사이즈 - 일반적인 스마트폰 (폴더블 접힌 상태)
    Material 3 Window size
    Compat는 가장 기본적인 형태로 일반적인 스마트폰, 폴더블의 접힌 형태가 될 수 있습니다.
    

    View Slide

28. ● Medium 사이즈 - 폴더블 펼침 또는 태블릿
    Material 3 Window size
    Medium 사이즈는 폴더블의 펼침 또는 작은 태블릿에 해당합니다. 바텀 메뉴의 위치를 왼쪽으로 이동할 수
    있죠.
    

    View Slide

29. ● Expanded 사이즈 - 폴더블 펼침 또는 태블릿
    Material 3 Window size
    Expanded 사이즈는 폴더블의 펼침 또는 태블릿에 해당합니다. 바텀 메뉴를 왼쪽으로 이동하고, 더 넓어진
    영역만큼 텍스트 표기도 할 수 있습니다.
    

    View Slide

30. ● 아래와 같은 접근은 X
    Material 3 Window size
    과거에 직접 코드 형태로 불러와 사용하던걸 할 필요는 없는데
    

    View Slide

31. ● rememberWithSizeClass()를 활용
    ○ Compat, Medium, Expanded 구분
    Material 3 Window size
    rememberWitdhSizeClass()를 활용하여 사이즈별로 메뉴의 위치와 형태를 지정할 수 있습니다.
    단점은 파편화 될 수 있을 수 있지만, 함수 형태로 잘 분리해줄 필요가 있습니다.
    

    View Slide

32. TextField
    Compose에서도 TextField를 활용할 수 있습니다.
    

    View Slide

33. ● 아직까지 Compose TextField는 타이핑 이슈 있음
    ○ 타이밍 이슈 발생
    ■ 특히 삼성 키보드, MS 키보드 등
    ■ 디버그 모드일때 심하고, 릴리즈일때는 상대적으로 괜찮음
    ● 해결방법은?
    ○ TextField를 활용한 해결 방법은 현재 마땅히 없다.
    ○ 적절한 해결 방법 : AndroidView 활용 EditText 매핑
    ● Chrisbanes - Twitter에서 사용하는 방법 소개
    ○ https://gist.github.com/chrisbanes/8c2f55f55b8dd2c64e436b704d65f266
    TextField 타이핑 문제
    다만, 타이핑 이슈가 여전히 있습니다. 보통 타이밍 이슈인데, 디버그일때 심하고, 릴리즈일때는
    상대적으로 괜찮습니다. 해결 방법은 특별히 없는데, Chrisbanse이 트위터에서 사용하는
    방법이라고 소개한 오픈 소스를 참고하세요.
    

    View Slide

34. Keyboard
    Keyboard 제어가 필요할 수 있습니다.
    

    View Slide

35. ● Keyboard 열린 상태에서 백그라운드 터치 시 키보드
    hide
    ● View 높이 체크하는 전통적인 코드 매핑 구현
    Keyboard
    Keyboard가 열린 상태에서 백그라운드 터치 시 키보드 hide 시킬 수 있는데, 그럼 키보드가
    떠있는걸 체크해야합니다. 제가 여러 코드를 봤는데 그냥 전통 적인 코드 맵핑을 활용합니다.
    

    View Slide

36. Keyboard
    전통 방식인 rootView.height를 측정하고, 키보드 높이를 rect로 측정하여 처리합니다.
    

    View Slide

37. Keyboard
    그리고 Modifier 확장함수로 코드를 정리해두었습니다.
    FocusManager를 활용하고, 키보드가 열렸다면 포커스를 함께 날려주는 형태입니다.
    

    View Slide

38. Keyboard
    저는 Scaffold에 이를 연결해서 사용하고 있습니다. scaffold의 키보드 상태가 닫히면 자동으로
    처리되도록 만들었습니다.
    

    View Slide

39. ● Focus 변경에 따른 recomposition count
    Keyboard
    AS 최신버전에서 recomposition count도 확인했는데 특별히 문제는 없음도 확인할 수 있습니다.
    

    View Slide

40. AndroidView
    생각보다 간혹 사용할 AndroidView를 소개합니다.
    

    View Slide

41. ● XML, UI 컴포넌트 중 Compose 미 지원 UI에
    대한 AndroidView 적용가능
    ● AndroidView는
    ○ factory - View 초기화
    ○ update - recompose 동작에 호출
    ○ modifier - Compose View 적용
    AndroidView
    AndroidView 활용시에는 recompose 이슈에 따라 무한 루프되는 동작이 발생할 수 있음을
    주의해야 합니다. 기본 factory에서 초기화를 하기에 새로 불리지 않아야할 부분을 여기에 담아야
    합니다. update는 가급적 최소한만 가져가면 좋습니다.
    

    View Slide

42. AndroidView
    https://google.github.io/accompanist/webview/
    WebView는 구글의 오픈소스 프로젝트인 accompanist에서 제공하니 이를 활용하는것도 가능한데,
    기본적인 형태로 사용 가능합니다.
    

    View Slide

43. Compose performance
    컴포즈 최적화 방법을 알아봅니다.
    

    View Slide

44. Lazy optimization
    RecyclerView 대신 Lazy를 활용하게 될겁니다. 이때 Unique key를 잘 적어주시면 최적화에
    도움됩니다.
    

    View Slide

45. Lazy optimization
    그리고 items 안에서 sortedWith과 같은 데이터를 변경하는걸 하지 않아야합니다. 당연히 이때도
    remember를 활용해야하는데
    

    View Slide

46. Lazy optimization
    만약 sorted가 필요하다면 이와 같은 코드를 활용해줘야 합니다.
    

    View Slide

47. change
    Data 구조를 전달했을때 recompose 동작은 name의 값이 변경되었을때 일어나게됩니다.
    

    View Slide

48. ● Preview 시에는 Hilt, Dagger로 초기화하는 viewModel을 통해 변수 접근 시
    Preview 불가능 한 경우 발생
    ● 함수 자체를 viewModel 활용하는 대신 data class 또는 primitive type 활용
    Preview
    이를 잘 활용 하여 Preview 할때도 data class를 전달하거나, primitive type을 전달해주는게
    좋습니다.
    

    View Slide

49. ● Android Studio Dolphin, Electric Eel에서 Recomposition counts 확인 가능
    ● 아직 완벽하게 동작하지 않음
    Recompose count
    Android Layout Inspector을 이용해어 Recomposition count으로 카운트 확인이 가능합니다. 다만
    잘 동작하지 않는 구조가 있는데, 보통 타고타고 들어간 현재 화면의 rootView를 찾지 못하는
    케이스가 있습니다. 한 페이지 안에 정적인 경우는 잘 불러오긴 합니다.
    

    View Slide

50. ● LiveEdit은 Device, Preview 에서 활용
    ● 타이핑 중간 중간에도 LiveEdit 처리되어 많은 성능을 필요로 함
    ○ M1 이상에서 활용하는게 좋음(Preview 도 동일)
    LiveEdit
    LiveEdit 역시 간혹 동작하지 않는 케이스가 있는데 타고들어가는 페이지의 수정이 일어나면 복구를
    못하는 케이스가 있습니다. 아무래도 코드의 동작에 따라 동작할거라 필요하다면 가급적 현재
    페이지를 그대로 뛰우는게 가장 좋은 방법입니다. 그리고 성능적으로 M1 이상에서만 활용하세요.
    

    View Slide

51. Component 구성은
    필요할까?
    Component 구성은 필요합니다.
    

    View Slide

52. ● Component가 없다면?
    ○ 파편화의 시작
    ○ Google에서 제공하는 컴포넌트 변경 시 모두 수정 필요
    Component
    파편화를 줄이고, 새로운 수정을 가할때 찾아서 수정하기보단 하나에서 수정하는게 좋죠.
    

    View Slide

53. ● Component가 있다면?
    ○ 파편화를 줄일 수 있음
    ○ 단, fun을 모두 매핑해줘야 하는 단점
    ○ font, colors 등을 theme를 통해 적용
    ○ 코드의 시작점을 scaffold로 지정하여 최소한의 시작점
    생성
    Component
    보통 이를 디자인 시스템 운영하는 회사에서만 활용할것이라고 생각하지만 실제론 미리
    만들어두고, 디자인 시스템도 함께 들어가는게 좋은데, 일부 색상이 틀어지는 문제도 줄여줄 수
    

    View Slide

54. Component
    개인적으로 이와 같은 형태로 활용하고 있습니다.
    

    View Slide

55. Thank you!
    Android Develop/Lemontree
    GDG Korea Android
    @taehwandev
    taehwan
    

    View Slide