Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose 정식 출시보다 앞섰던 Compose 적ᄋ...

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

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

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

workspace

April 08, 2023
Tweet

More Decks by workspace

Other Decks in Programming

Transcript

  1. 안녕하세요, 개발자 workspace 류기민입니다. 연사 소개 2 온라인강의플랫폼 에듀캐스트 2015.01

    2021.07 자기 계발 커뮤니티 HOLIX 2021.07 ~ HOLIX Jetpack Compose 사용자 모임 운영 2021.07
  2. 목차 3 1. 공유하게 된 계기 2. 왜 Compose 였나?

    3. Compose로 한달 만에 새 앱 출시하기 4. Compose와의 사투 ? 5. 새로운 기술을 적용한 회고 6. 마무리
  3. 공유하게 된 계기 공유하게 된 계기 5 우연한 계기로 새로운

    기술의 alpha 버전부터 stable 출시까지 세상에 공개되어 발전하는 과정 속에 몰입할 수 있었습니다. 그 과정에서 느꼈던 효용과 좌절했던 경험을 가감 없이 이야기해볼까 합니다. Compose를 적용할지 검토 중이신 분, 배우면 좋을지 고민 중이신 분께 도움이 되면 좋겠습니다. 아울러 능동적으로 기술을 습득하는 사람으로 변한 경험 또한 공유해 보고자 합니다.
  4. Compose를 선택한 3가지 이유 왜 Compose였나? 7 1. 커스텀 컴포넌트

    구현 2. View 대비 낮은 진입 장벽 3. 적은 노력으로 만들 수 있는 인터랙션 애니메이션
  5. 당시 에듀캐스트 안드로이드 앱은… 왜 Compose였나? 12 제품 디자이너의 부재

    material design components mdc 를 이용 요구사항은 대부분 ConstraintLayout mdc components로 구현하여 달성 커스터마이징이 필요할 때 어려움을 많이 겪음 🤪
  6. 사실 새로운 요구사항들은 피보팅으로부터 16 * 피보팅이란 핵심 사업 아이템이나

    서비스를 바탕으로 외부 환경의 변화에 맞춰 사업 방향을 전환하는 것을 말한다. Compose로 한달 만에 앱 출시하기
  7. MainActivity + Jetpack Navigation을 이용한 Single Activity 구조 AuthActivity, PurchaseActivity,

    PlayerActivity등은 분리 당시 에듀캐스트 안드로이드 앱은… 17 Compose로 한달 만에 앱 출시하기
  8. 원래 계획은 점진적인 적용 18 navigation graph A Fragment B

    Fragment C Fragment xml / xml / Compose로 한달 만에 앱 출시하기
  9. 때는 6월 말, 목표는 7월 말 출시 data layer 🟢

    domain layer ⚠ ui layer ❌ 안드로이드 경험이 전무한 4명의 지원 인력 구현 해야할 feature는? 😇🤪 주어진 상황 22 Compose로 한달 만에 앱 출시하기
  10. 1. 단시간에 안드로이드 프레임워크 및 View 이해는 사실상 불가하다고 생각

    2. 4명 중 3명이 선언형 UI 경험이 있었음 3. xml보다 Compose가 더 배우기 쉬울 것이라는 판단 UI는 Compose를 100 도입 24 Compose로 한달 만에 앱 출시하기
  11. 리스트 구현을 예시로 들어본다면… 25 div :key item.id … /div

    Vue RecyclerView ViewHolder Adapter xml View LazyColumn modifier … items items items key item … Compose Compose로 한달 만에 앱 출시하기
  12. 빠른 기여를 위한 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로 한달 만에 앱 출시하기
  13. 간단히 구현 할 수 있었던 인터랙션 1 30 compose sample

    - Rally Compose로 한달 만에 앱 출시하기
  14. 삼성키보드 문구 추천 시 
 자음과 모음이 분리되는 현상 AndroidView

    + EditText로 대응 한글 자소 분리 1 Compose와의 사투 39
  15. 한글 자소 분리 2 Compose와의 사투 40 리눅스 머신에 aosp

    개발 환경 세팅하여 문구 추천 비활성화 옵션 추가를 시도 compose foundation - TextInputServiceAndroid.android.kt
  16. 한글 자소 분리 3 Compose와의 사투 42 https://workspace dev.medium.com/jetpack compose

    textfield 5866bdae33e7 일본어 이슈 처리하다가 해결됨 github로 foundation library의 commit을 가끔 follow up하던 중 발견 1.3.0 alpha03부터 문제 해결됨 개인적으론 가장 집요했고 뿌듯했던 경험
  17. WebView, MapView, SurfaceView 등 compose가 대체할 수 없는 요소들이 있고

    이를 사용할 수 있도록 상호운용성 API interoperability api 가 존재함 다만 당시엔 사용 사례가 전무하여 
 내가 맞게 쓰고 있나? 계속 생각 compose 적용을 검토하고 있다면 
 가장 먼저 고려해야할 부분 AndroidView Compose와의 사투 43
  18. googlemaps/android maps compose google MapView fornewid/naver map compose naver MapView

    google/accompanist/web WebView AndroidView 대응 라이브러리 Compose와의 사투 45
  19. Zoomable composable accompanist pager로 구현 시도 ❌ AndroidView + Pager2

    + PhotoView ❌ MessageImageViewerActivity - Pager2 + PhotoView 🟢 타협의 과정… 고객은 어차피 이게 compose인지 xml인지 알 필요 없다 AndroidView 동작은 예상과 다를 수 있다 1 Compose와의 사투 46
  20. WebView 재생성 LazyColumn NavHost Pager HOLIX는 일종의 ViewCache 구현으로 해결

    google/accompanist#1178 AndroidView 동작은 예상과 다를 수 있다 2 Compose와의 사투 47
  21. 없어서 직접 만든 경우도… Compose와의 사투 50 holixfactory/bottomsheetdialog compose 개발기

    2023년 2월 material3 1.1.0 alpha06에서 ModalBottomSheet가 추가되어 거취를 고민 중…
  22. Compose만 봤을 땐 어느 정도 궤도에 오르지 않았나 초기엔 너무

    절실한 것들이 alpha, beta에 추가되는 걸 
 바로바로 써야 해 release만 목 빠지게 기다림 accompanist의 많은 것들이 공식 라이브러리를 통해 지원 유명 오픈 소스는 대부분 compose 지원 glide, coil, lottie 등 성능도 많이 좋아짐 그럼에도 여전히 케바케 는 존재 Popup, BottomSheet + TextField 조합 시 
 키보드가 아래로 깔리는 이슈 개인적인 의견 Compose와의 사투 53
  23. 도입 시 설득과 증명이 필요 채용 안정성 발생할 문제점 대비

    효용의 가치 리더로서… 1 새로운 기술을 적용한 회고 55
  24. 구성원 간의 학습 격차를 주의 사람마다 능력이 다 다르므로 새로운

    것을 받아들이는 시간이 다름 팀원 간의 격차뿐 만 아니라 본인과 팀원들의 격차도 봐야… 
 🐓 .…..🐥🐥..🐥………🐥 세미나, 컨퍼런스 같이 보기, 특별 과제, 초 정밀하고 세세한 지시 등으로 극복하고자 노력 리더로서… 2 새로운 기술을 적용한 회고 56
  25. Compose라서 생기는 문제를 책임지고 해결할 준비가 되어 있어야 함 짧은

    역사 나랑 같은 문제를 겪는 사람을 만나기 어려움. 스스로 해결해야… 리더로서… 3 새로운 기술을 적용한 회고 58
  26. 취준생, 주니어로서… 나였다면? 새로운 기술을 적용한 회고 59 Jetpack Compose는

    분명히 기존 시스템을 대체할 것 취업은요..? 다른 선언형 UI… 일맥상통하는 지점이 있지 않나? Vue, RN, Flutter, SwiftUI… 기술 격차를 줄이는 기회로 삼자! 빅테크, 스타트업, 시니어, 주니어 할 것 없이 새로운 기술 앞에 평등 대신 러닝커브의 차이가 ㅎㅎ 앱 개발 ! UI 개발! 
 Compose가 UI 구현의 허들을 낮춰줘 아낀 시간을 
 아키텍처, 비즈니스 로직 구현, 안드로이드 플랫폼, 프레임워크의 이해에 사용하면 좋을 듯 최신 기술에 매달리라는 말은 아님! 내부 구현에 관심을 가지자
  27. 능동적으로 기술을 탐구하는 사람이 된 계기 개발자로서… 새로운 기술을 적용한

    회고 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
  28. 능동적으로 기술을 접하는 사람이 된 시간 개발자로서… Compose 적용 의사결정

    과정 61 안드로이드 공식 콘텐츠 블로그, 컨퍼런스, now in android, mad skills Jetpack 릴리즈 노트 구독 및 읽어보기 안드로이드 DevRel, GDE twitter follow 번지수 잘 찾기 : 모르거나 문제 있으면 Stack Overflow 말고 Issue Tracker kotlin Slack #compose cs.android.com 까지 뒤져보려는 열의 aosp 빌드해서 라이브러리 수정해보기
  29. 능동적으로 기술을 접하는 사람이 된 시간 개발자로서… Compose 적용 의사결정

    과정 62 안드로이드 공식 콘텐츠 블로그, 컨퍼런스, now in android, mad skills Jetpack 릴리즈 노트 구독 및 읽어보기 안드로이드 DevRel, GDE twitter follow 번지수 잘 찾기 : 모르거나 문제 있으면 Stack Overflow 말고 Issue Tracker kotlin Slack #compose cs.android.com 까지 뒤져보려는 열의 aosp 빌드해서 라이브러리 수정해보기