[우아콘2022] Jetpack Compose로 디자인시스템 만들기

배달의민족 Android 프로젝트에 디자인시스템(aka 배시시, 배민시각시스템)을 도입한 경험과, 디자인시스템을 만들기 위해 Jetpack Compose를 사용해 보고 느낀 점을 공유합니다.

발표영상 : https://www.youtube.com/watch?v=O1yPOr7J3gY

Transcript

1. +FUQBDL
   $PNQPTF۽ ٣੗ੋदझమ ٜ݅ӝ 강경완 배민푸드Android개발팀
2. ٜযоӝী খࢲ https://www.youtube.com/watch?v=BX0rQvYgf1I
3. ٜযоӝী খࢲ https://www.youtube.com/watch?v=BX0rQvYgf1I
4. ߓ޹ दп दझమ ߓदद 배시시를 소개합니다.
5. ߓ޹ दп दझమ ߓदद 배시시를 소개합니다. § 보다 효율적으로 일관된 UI를 개발! § 파편화되어있는 컴포넌트를 단일화 § 일관된 UI/UX 제공 § 생산성 증가 § 중복 작업 줄이기 § UI 개발비용 절감
6. ߓदद ҳઑ 우리는 디자인 컴포넌트를 이렇게 정의하고 있어요. 파운데이션 § Color § Typo § Icon § Radius § 등 가장 기본적인 시각 규칙 모임 코어 컴포넌트 § Bar § Badge § Button § Chip § 등 공통으로 사용하는 기본 컴포넌트 프로덕트 컴포넌트 § Core comp Core comp § Core comp Non core comp § Non core Non core
7. ߓदद ҳઑ 우리는 여기서 앞 부분을 배시시라고 부릅니다. 파운데이션 § Color § Typo § Icon § Radius § 등 가장 기본적인 시각 규칙 모임 코어 컴포넌트 § Bar § Badge § Button § Chip § 등 공통으로 사용하는 기본 컴포넌트 프로덕트 컴포넌트 § Core comp Core comp § Core comp Non core comp § Non core Non core
8. ߓदद ҳઑ 우리는 여기서 앞 부분을 배시시라고 부릅니다. 파운데이션 § Color § Typo § Icon § Radius § 등 가장 기본적인 시각 규칙 모임 코어 컴포넌트 § Bar § Badge § Button § Chip § 등 공통으로 사용하는 기본 컴포넌트 프로덕트 컴포넌트 § Core comp Core comp § Core comp Non core comp § Non core Non core
9. ٣੗ੋदझమਸ ৵ ٜ݅঻աਃ 디자인시스템 만들어요 § 디자인시스템 2.0 배시시 디자인시스템 3.0 § 생산성 제고 § 목적으로는 더 빠른 속도로 디자인 / 개발 / 배포하여 경험의 혁신 속도를 빠르게 가져가는 것 § 개발적으로는 중복 작업, UI 개발비용 절감 § 일관된 UI § 모양새는 비슷하더라도 Android / iOS / Web 별로 조금씩 별도로 제작되고 있는 UI/UX 통일 § 모양새는 비슷하더라도 각 서비스별로 조금씩 별도로 제작되고 있는 UI/UX 통일 배시시에 대해 더 궁금하다면? 우형 디자인시스템, 배시시를 소개합니다 발표 참조
10. Ӓۢ ৵ +FUQBDL
    $PNQPTFܳ Jetpack Compose로 만들어진 배시시 § UI 와 비즈니스 로직 분리가 확실한 Compose § 재사용성이 뛰어난 Compose § 컴포넌트 단위로 작성이 가능한 Compose § 기존 View 방식과도 호환성이 좋음 § 앞으로 필수로 선택될 안드로이드 개발 방식
11. +FUQBDL
    $PNQPTFਵ۽ 디자인시스템 배시시 을 만들어봅시다
12. "OESPJE
    5IFNF Color System § Android 의 Material Design § Jetpack Compose 는 디지털 인터페이스를 만들기 위한 포괄적인 시스템인 Material Design 구현을 지원합니다. § Color System § Typography § Shape § Ripple § Etc.. https://material.io/design/introduction#theming The color, typography, and shape of Material Components like buttons can be easily modified to match your brand. Material Theming makes it easy to customize Material Design to match the look and feel of your brand, with built-in support and guidance for customizing colors, typography styles, and corner shapes. Theming
13. "OESPJE
    5IFNF Color System § Android 의 Material Design § Jetpack Compose 는 디지털 인터페이스를 만들기 위한 포괄적인 시스템인 Material Design 구현을 지원합니다. § Color System Color Palettes § Light Color § Dark Color
14. "OESPJE
    5IFNF Color System § Android 의 Material Design § Jetpack Compose 는 디지털 인터페이스를 만들기 위한 포괄적인 시스템인 Material Design 구현을 지원합니다. § Color System Color Palettes § Light Color § Dark Color § Jetpack Compose는 기본으로 위 프리셋을 참조함 § 하지만… 그러기엔 너무 적은걸료..? 그리고 iOS 는..?
15. "OESPJE
    5IFNF Color System § 그래서 사용합니다 Semantic Color § 그래서 사용합니다 Custom Theme https://developer.android.com/jetpack/compose/themes/custom#replacing-systems
16. "OESPJE
    5IFNF Color System § Custom Jetpack Compose Theme… 그래 좋아요.. § 하지만 우리는 100 Jetpack Compose 가 아닌데요?? § Resource 에 테마를 정의하고 Compose Theme 가 가져와서 사용하는 방식을 채택 간단한 설명을 입력하세요 § 항목 § 항목 § 하위 항목 § 항목
17. "OESPJE
    5IFNF Color System § Custom Jetpack Compose Theme… 그래 좋아요.. § 하지만 우리는 100 Jetpack Compose 가 아닌데요?? § Resource 에 테마를 정의하고 Compose Theme 가 가져와서 사용하는 방식을 채택 § 을 했었다가 resource 는 resource 대로, Compose 는 Compose 대로 업데이트 하는 방식으로 다시 수정 삭. 제.
18. "OESPJE
    5IFNF Typo § 같은 방식으로 배시시의 Typography 를 작성 h1 h5, body.. 등 § Theme 에서 lineHeight 를 설정할 수 있음 § 특이사항으로는 platformStyle 을 재정의하여 font padding 을 제거하고 있음 § Compose 1.2 이상 § https://developer.android.com/jetpack/compose/text?hl=ko#includefontpadding_and_lineheight_apis § 1.2.0-alpha05 – 1.2.0-alpha08 까지는 false 가 기본값, 1.2.0-beta01 부터 재정의 가능 Shape § RoundedConerShape
19. "OESPJE
    5IFNF Typo § 같은 방식으로 배시시의 Typography 를 작성 h1 h5, body.. 등 § Theme 에서 lineHeight 를 설정할 수 있음 § 특이사항으로는 platformStyle 을 재정의하여 font padding 을 제거하고 있음 § Compose 1.2 이상 § https://developer.android.com/jetpack/compose/text?hl=ko#includefontpadding_and_lineheight_apis § 1.2.0-alpha05 – 1.2.0-alpha08 까지는 false 가 기본값, 1.2.0-beta01 부터 재정의 가능 Font padding = true Font padding = false
20. "OESPJE
    5IFNF Typo § 같은 방식으로 배시시의 Typography 를 작성 h1 h5, body.. 등 § Theme 에서 lineHeight 를 설정할 수 있음 § 특이사항으로는 platformStyle 을 재정의하여 font padding 을 제거하고 있음 § Compose 1.2 이상 § https://developer.android.com/jetpack/compose/text?hl=ko#includefontpadding_and_lineheight_apis § 1.2.0-alpha05 – 1.2.0-alpha08 까지는 false 가 기본값, 1.2.0-beta01 부터 재정의 가능 Shape § RoundedConerShape
21. "OESPJE
    5IFNF 잘 정의된 테마, 열 번 자잘한 수정 안 생긴다 파운데이션 § Color § Typo § Icon § Radius § 등 가장 기본적인 시각 규칙 모임 코어 컴포넌트 § Bar § Badge § Button § Chip § 등 공통으로 사용하는 기본 컴포넌트
22. $PSF
    $PNQPOFOU 이제 코어 컴포넌트를 요구사항대로 만듭니다. § 이때 가장 고려했던 것은? § 피그마파일을 보고 사용하는 개발자가 한눈에 이해할 수 있는가? 디자인시스템을 사용함으로써 공수가 줄어들어야 함
23. $PSF
    $PNQPOFOU 이제 코어 컴포넌트를 요구사항대로 만듭니다. § 이때 가장 고려했던 것은? § 피그마파일을 보고 사용하는 개발자가 한눈에 이해할 수 있는가? 디자인시스템을 사용함으로써 공수가 줄어들어야 함 코어 컴포넌트 정의가 적혀있는 배시시 피그마
24. $PSF
    $PNQPOFOU 이제 코어 컴포넌트를 요구사항대로 만듭니다. § 이때 가장 고려했던 것은? § 피그마파일을 보고 사용하는 개발자가 한눈에 이해할 수 있는가? 디자인시스템을 사용함으로써 공수가 줄어들어야 함 Product Developer 가 참고하는 화면
25. $PSF
    $PNQPOFOU 이제 코어 컴포넌트를 요구사항대로 만듭니다. § 이때 가장 고려했던 것은? § 피그마파일을 보고 사용하는 개발자가 한눈에 이해할 수 있는가? 디자인시스템을 사용함으로써 공수가 줄어들어야 함 Product Developer 가 참고하는 화면 한눈에 이해하기 위해서는? § 네이밍과 타입, 상태 등을 피그마와 동일시하기
26. $PSF
    $PNQPOFOU 이제 코어 컴포넌트를 요구사항대로 만듭니다. § 이때 가장 고려했던 것은? § 피그마파일을 보고 사용하는 개발자가 한눈에 이해할 수 있는가? 디자인시스템을 사용함으로써 공수가 줄어들어야 함 Product Developer 가 참고하는 화면 한눈에 이해하기 위해서는? § 네이밍과 타입, 상태 등을 피그마와 동일시하기 § 전부 맞출 순 없겠지만.. 그래도 최대한..
27. $PSF
    $PNQPOFOU 한눈에 이해할 수 있도록 하라 컴포넌트 이름 맞추기 Property 값이나 상태 맞추기 § 항목 § 항목 § 항목 리소스 네이밍 맞추기
28. $PSF
    $PNQPOFOU 내비게이션을 만들어요
29. $PSF
    $PNQPOFOU 내비게이션을 만들어요 컴포넌트 이름 맞추기
30. $PSF
    $PNQPOFOU 내비게이션을 만들어요 컴포넌트 이름 맞추기
31. $PSF
    $PNQPOFOU 내비게이션을 만들어요 컴포넌트 이름 맞추기
32. $PSF
    $PNQPOFOU 내비게이션을 만들어요 컴포넌트 이름 맞추기
33. $PSF
    $PNQPOFOU 내비게이션을 만들어요 컴포넌트 이름 맞추기
34. $PSF
    $PNQPOFOU 접근성도 챙겨요 § View 로 개발할 때보다 설정하기 쉬워진 Jetpack Compose 시멘틱 § Content Description § nullable 이긴 하지만 default parameter 가 없음 ex: Image § Content Description 만 설정해도 많은 문제가 해결됨 § Role 을 지정해보자 § clearAndSetSemantics 를 활용하는 방법 https://developer.android.com/jetpack/compose/semantics?hl=ko
35. ੉ઁ ߓददܳ ੸ਊ೤द׮
36. ߓदद ੸ਊೞӝ 작은 부분을 Compose로 전환하기 § EmptyState 와 Button 을 배시시 선적용해서 배포 2022년 5월 § Compose 지면이 없기때문에, ComposeView를 사용해서 적용 § View Compose 상태관리 § 공통내비게이션 2022년 7월 § 문제의 TextField § 이 외 신규개발건에 대한 배시시 적용
37. ߓदद ੸ਊೞӝ 이슈발생!!! § 애니메이션 퍼포먼스 이슈 § 디버그 모드 시 ui 성능 저하 § View 사이즈를 변경하는 경우 § 릴리즈 빌드로 애니메이션 상태 체크
38. ߓदद ੸ਊೞӝ 이슈발생!!! § 디자인이랑 폰트 위치가 조금 다른데요? § 폰트들이 조금씩 아래로 내려왔어요 https://developer.android.com/jetpack/androidx/releases/compose-ui
39. ߓदद ੸ਊೞӝ 이슈발생!!! § 디자인이랑 폰트 위치가 조금 다른데요? § 폰트들이 조금씩 아래로 내려왔어요 https://developer.android.com/jetpack/androidx/releases/compose-ui
40. ߓदद ੸ਊೞӝ 이슈발생!!! § 디자인이랑 폰트 위치가 조금 다른데요? § 폰트들이 조금씩 아래로 내려왔어요 https://developer.android.com/jetpack/androidx/releases/compose-ui
41. ߓदद ੸ਊೞӝ 이슈발생!!! § 과도한 Material 가이드 적용 § Jetpack Compose 가 Material Design 혹은 Guideline 을 매우 잘 지키고 있음 § 구현코드 속에 숨어있어, 발견하기 쉽지 않은 문제 § 사소하지만 View 와는 다른 API § Ex Compose Text 에서는 Ellipsize TextOverflow.Ellipsis middle 옵션을 제공하지 않음
42. ߓदद ੸ਊೞӝ 이슈발생!!! § 과도한 Material 가이드 적용 § Jetpack Compose 가 Material Design 혹은 Guideline 을 매우 잘 지키고 있음 § 구현코드 속에 숨어있어, 발견하기 쉽지 않은 문제 § 사소하지만 View 와는 다른 API § Ex Compose Text 에서는 Ellipsize TextOverflow.Ellipsis middle 옵션을 제공하지 않음
43. ߓदद ੸ਊೞӝ 이슈발생!!! § 과도한 Material 가이드 적용 § Jetpack Compose 가 Material Design 혹은 Guideline 을 매우 잘 지키고 있음 § 구현코드 속에 숨어있어, 발견하기 쉽지 않은 문제 § 사소하지만 View 와는 다른 API § Ex Compose Text 에서는 Ellipsize TextOverflow.Ellipsis middle 옵션을 제공하지 않음
44. ߓदद ੸ਊೞӝ View 와 Compose Mix § 새로 만드는 지면은 Compose Base 로 만들지만, 기존 View 로 되어있는 지면 중 일부 수정일 경우 ComposeView 를 사용 xml 에 표시안됨 § Compose 도입 이후 늘어난 Build Time
45. ߓदद ੸ਊೞӝ 아직은 사용할 수 없는 TextField.. 너란 녀석.. § 한글 자소분리 이슈 § 텍스트 중간으로 커서를 옮겨 수정시, 자음과 모음이 분리 § 삼성키보드 문구 추천 시 발생 § Compose foundation:1.3.0 alpha03 부터 해결됨 § 문구 추천 단어 타이밍 이슈 § 포커스 관련 이슈
46. ߓदद ੸ਊೞӝ 해결안 EditText 를 사용한다 § 리뷰작성지면,, § TextField 를 포기하고 EditText 를 사용하여 해결
47. Ҋ޹ ٣੗ੋदझమਸ ٜ݅ݶࢲ 빠른 개발속도 § 정교한 디자인시스템을 위해 커뮤니케이션하는 비용 실제 컴포넌트 개발에 사용하는 비용 § Jetpack Compose 의 장점! 빠른 개발속도! § 선언형 API § 컴포넌트의 상태에 따라 그리기만 하면 되기 때문 비즈니스 로직 분리 § 간단하게 작성할 수 있는 코드 RecyclerView § 컴포넌트 재사용 § 다른 컴포넌트와 합성하여 사용할 수 있기 때문에 개발시간 단축 § 코드 감소
48. Ҋ޹ ٣੗ੋदझమਸ ٜ݅ݶࢲ Compose.. 아직은 불편한 점도.. § Jetpack Compose의 불편한 Preview § 잘못 사용했을 경우 잘 그려지지 않음 § 느린 LiveEdit 기능 § 배시시에서 사용하기 위해 Compose 버전업 § 메인 프로젝트 kotlin 버전업 ? § 메인 프로젝트 target 버전업 ? https://developer.android.com/jetpack/compose/tooling#live-edit
49. Ҋ޹ ٣੗ੋदझమਸ ٜ݅ݶࢲ Jetpack Compose 진짜 정말 쓸만한가?? § 일단은.. 대체로 긍정적 § 익숙해지면 정말 빨라지는 생산성 다시 돌아가고 싶지 않은 xml § 안정성을 추구한다면 조금씩 , 새로 만들 앱이라면 바로 적용해보세요!
50. Ҋ޹ ٣੗ੋदझమਸ ٜ݅ݶࢲ 범용적으로 만들 것인가? 전술적으로 만들것인가? § 이건 넣어놓으면 나중에 쓸 것 같은데요?? vs 이건 지금은 사용 안 하니까 다음에 사용하면 넣을까요?? § 사용처가 한 곳 밖에 없는데요?? vs 디자인시스템이면 다 들어가야하는게 아닌가?? § 내가 만든 제약, 덫에 걸려버린 나 § 디자인시스템 개발자만 고통받으면 된다.
51. খਵ۽੄ ߓदद Next 1 year?? § 서버 연동 디자이너가 업데이트하는 Foundation § 아직 미완성된 코어 컴포넌트 작성 § View 로만 작성된 코어 컴포넌트 Compose 로 전환 § 코드 재정리 § 더 빠른 생산성 증가 § Product 관점에서 단방향 아키텍처 적용
52. ٜয ઱࣊ࢲ хࢎ೤פ׮ Thank you!