DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기

컬리에서 디자인 시스템인 KPDS를 도입하기 위해 Android Compose Material3 기반 디자인 시스템 구축 경험을 소개합니다.

Transcript

1. Compose Material3 ழझథ ٣੗ੋ दझమ ҳ୷ӝ ӂ؀ਗ / ஸܻ
10. ❏ ࠁ׮ ബਯ੸ਵ۽ ੌҙػ UIܳ ѐߊ ❏ ౵ಞച ஹನք౟ ױੌച ❏ ੌҙػ UI/UX ઁҕ ❏ ࢤ࢑ࢿ ೱ࢚ ❏ ઺ࠂ ੘স ઴੉ӝ ❏ ࠺ૉפझ ۽૒ ૘઺ যڃ ੼੉ જਸөਃ?
11. ৵ Jetpack Compose? ❏ 100% Jetpack Compose ۽ ҳࢿػ KPDS Android ❏ UI ৬ ࠺ૉפझ ۽૒ ܻ࠙ ❏ ஹನք౟ ױਤ۽ ੘ࢿ੉ оמೞ׮ ❏ KPDSח Material Design Guideܳ ଵҊ ❏ Compose-Foundation, Ui ഝਊ
12. KPDS ҳઑ
13. Compose Material3 ҳઑ ❏ ӝࠄ੸ਵ۽ foundation/layout ী ੄ઓೞҊ ੓׮. ❏ compose.ui - layout, drawing ١ ӝࠄ੸ੋ ҳࢿਃࣗ(Layout, KeyboardType..) ❏ foundation - ӝୡ ਃࣗܳ ഛ੢೧ ٣੗ੋ दझమ ਃࣗܳ ઁҕ(Box, BasicTextField..) ❏ compose.material3 ❏ Material Design3 ӝ߈ਵ۽ Jetpack Compose UIܳ ࠽٘(Surface, TextField..)
14. KPDS ҳઑ ❏ Foundation ❏ Color ❏ Typography ❏ Icon ❏ Spacing ❏ Radius… ❏ Core-Component ❏ Button ❏ Topbar ❏ Dialog ❏ Image ❏ TextField…
15. ❏ Foundation ❏ Color ❏ Typography ❏ Icon ❏ Spacing ❏ Radius… KPDS ҳઑ
16. ❏ Core-Component ❏ Button ❏ Topbar ❏ Dialog ❏ Image ❏ TextField… KPDS ҳઑ
17. ❏ ٣੗ੋ ࣘࢿਸ ੷੢ೞח प୓ ❏ ࢚࢝, ӖԜ, ஖ࣻ৬ э਷ झఋੌ ч ❏ ೞ٘௏٬ػ ч ؀न ٣੗ੋ ష௾ ࢎਊ ❏ ాੌࢿ ❏ ࣻ੿ ਊ੉ࢿ ❏ ੽Ӕࢿ Design Token(in material)
18. ❏ ٣੗ੋ ࣘࢿਸ ੷੢ೞח प୓ ❏ ࢚࢝, ӖԜ, ஖ࣻ৬ э਷ झఋੌ ч ❏ ೞ٘௏٬ػ ч ؀न ٣੗ੋ ష௾ ࢎਊ ❏ ాੌࢿ ❏ ࣻ੿ ਊ੉ࢿ ❏ ੽Ӕࢿ Design Token(in material)
19. Design Token
20. Design Token
21. Design Token
22. Design Token
23. Color Token ❏ ష௾਷ ઑѤী ٮۄ ׮ܲ чਸ оܻఇ ❏ ׮௼ప݃, ۨ੉ইਓ..
24. KPDS Color System ❏ ColorSet Token ❏ ஸ۞ ࢎਊ ݾ੸ী ݏח ੄޷ۿ੸ੋ ੉ܴਸ ੿੄
25. KPDS Color System ❏ BackgroudColor ❏ BackgroundColorTokens ❏ Background1
26. KPDS Color System ❏ যڌѱ ઱ੑغաਃ? ❏ BackgroundColorTokens.Background1 ❏ ColorTokens.WhiteInverse ❏ White / Black900
27. KPDS Color System
28. KPDS Color System
29. KPDS Color System
30. Core Component ❏ о੢ ઺ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ যڃ ஹನք౟ܳ ࢎਊ೧ ঠ ೞח૑ ߄۽ ੉೧
31. Core Component ❏ о੢ ઺ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ যڃ ஹನք౟ܳ ࢎਊ೧ ঠ ೞח૑ ߄۽ ੉೧
32. Core Component ❏ о੢ ઺ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ যڃ ஹನք౟ܳ ࢎਊ೧ ঠ ೞח૑ ߄۽ ੉೧ ❏ औѱ ੉೧ೞҊ ҕਬೞӝ एਕঠೠ׮ ❏ ֎੉߁, ೐۽ಌ౭ ١ ೖӒ݃৬ эب۾
33. Core Component
34. Core Component KurlyBoxButton( text = "Button", onClick = { },
35. Core Component KurlyBoxButton( text = "Button", onClick = { }, boxButtonColorType = BoxButtonColorType.Primary,
36. Core Component KurlyBoxButton( text = "Button", onClick = { }, boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL,
37. Core Component KurlyBoxButton( text = "Button", onClick = { }, boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge,
38. Core Component KurlyBoxButton( text = "Button", onClick = { }, boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge, shape = ButtonShape.Square,
39. Core Component KurlyBoxButton( text = "Button", onClick = { }, boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge, shape = ButtonShape.Square, leadingIcon = KurlyIcons.Normal.Default.Blank )
40. Core Component
41. Core Component
42. Core Component
43. Core Component Scaffold( modifier = Modifier, topBar = { KurlyTopBar( title = "஠పҊܻ", actions = Actions( notification = false, address = true, cart = true,
44. Core Component Scaffold( modifier = Modifier, topBar = { KurlyTopBar( title = "஠పҊܻ", actions = Actions( notification = false, address = true, cart = true, Scaffold( modifier = Modifier, topBar = { KurlyMediumTopBar( title = "஠పҊܻ", actions = Actions( notification = false, address = true, cart = true,
45. KPDSܳ ੸ਊೞݶࢲ
46. ౟۞࠶ ग౴ ❏ Recomposition
47. ౟۞࠶ ग౴ ❏ Recomposition
48. ౟۞࠶ ग౴
49. ౟۞࠶ ग౴ ❏ ࢚కܳ ೞਤ झ௏೐ীࢲ ੍ӝ ❏ ۈ׮ ଵઑܳ ഝਊ೧ पઁ ࢚కо ੍൤ח ߧਤܳ ইې۽ ગ൨
50. ౟۞࠶ ग౴ ❏ ࢚కܳ ೞਤ झ௏೐ীࢲ ੍ӝ ❏ ۈ׮ ଵઑܳ ഝਊ೧ पઁ ࢚కо ੍൤ח ߧਤܳ ইې۽ ગ൨
51. ౟۞࠶ ग౴ ❏ ࢚కܳ ೞਤ झ௏೐ীࢲ ੍ӝ ❏ ۈ׮ ଵઑܳ ഝਊ೧ पઁ ࢚కо ੍൤ח ߧਤܳ ইې۽ ગ൨
52. ౟۞࠶ ग౴
53. ౟۞࠶ ग౴ ❏ Compose ۈ׮ध ӝরߨ ❏ Compose ஹ౵ੌ۞ח Composable ೣࣻী ݒѐ߸ࣻ ഋక۽ ੹׳ػ ۈ׮ध ഐ୹ਸ ୭੸ ചೞৈ ੤ࢎਊ ❏ ஭୛ೞ૑ ঋח ۈ׮धਸ यӖహਵ۽ ݽ؛݂, ੤ࢎਊ оמೠ ੋझఢझ۽ ୭੸ച ❏ ۈ׮ध੉ ߸ࣻ чਸ ஭୊ೞח ҃਋ ղࠗ੸ਵ۽ remember ഝਊ ❏ ױ, ஭୛ػ чب Stable੉যঠ recomposition skip ӝ؀
54. KPDSܳ ઁ੘ೞ׮ࠁפ ❏ ٣੗ੋ दझమਸ ੿੄ೞח ழޭפா੉࣌ ࠺ਊ ❏ ஹನք౟ ѐߊী ࣗਃػ दрࠁ׮ ഻ঁ ݆੉ ೙ਃ೮׮.. ❏ ஹನք౟ ߸҃੼ਸ য٣ө૑ ৌযل૑? ❏ ੿೧૓ ২࣌ vs ৘৻ী ؀ೠ ؀਽
55. KPDSܳ ઁ੘ೞ׮ࠁפ ❏ ٣੗ੋ दझమਸ ੿੄ೞח ழޭפா੉࣌ ࠺ਊ ❏ ஹನք౟ ѐߊী ࣗਃػ दрࠁ׮ ഻ঁ ݆੉ ೙ਃ೮׮.. ❏ ஹನք౟ ߸҃੼ਸ য٣ө૑ ৌযل૑? ❏ ੿೧૓ ২࣌ vs ৘৻ী ؀ೠ ؀਽
58. хࢎ೤פ׮.