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

DroidKnights 2024 : Compose Material3 커스텀 디자인 시...

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

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

권대원

June 11, 2024
Tweet

Other Decks in Programming

Transcript

  1. ❏ ࠁ׮ ബਯ੸ਵ۽ ੌҙػ UIܳ ѐߊ ❏ ౵ಞച ஹನք౟ ױੌച

    ❏ ੌҙػ UI/UX ઁҕ ❏ ࢤ࢑ࢿ ೱ࢚ ❏ ઺ࠂ ੘স ઴੉ӝ ❏ ࠺ૉפझ ۽૒ ૘઺ যڃ ੼੉ જਸөਃ?
  2. ৵ Jetpack Compose? ❏ 100% Jetpack Compose ۽ ҳࢿػ KPDS

    Android ❏ UI ৬ ࠺ૉפझ ۽૒ ܻ࠙ ❏ ஹನք౟ ױਤ۽ ੘ࢿ੉ оמೞ׮ ❏ KPDSח Material Design Guideܳ ଵҊ ❏ Compose-Foundation, Ui ഝਊ
  3. Compose Material3 ҳઑ ❏ ӝࠄ੸ਵ۽ foundation/layout ী ੄ઓೞҊ ੓׮. ❏

    compose.ui - layout, drawing ١ ӝࠄ੸ੋ ҳࢿਃࣗ(Layout, KeyboardType..) ❏ foundation - ӝୡ ਃࣗܳ ഛ੢೧ ٣੗ੋ दझమ ਃࣗܳ ઁҕ(Box, BasicTextField..) ❏ compose.material3 ❏ Material Design3 ӝ߈ਵ۽ Jetpack Compose UIܳ ࠽٘(Surface, TextField..)
  4. KPDS ҳઑ ❏ Foundation ❏ Color ❏ Typography ❏ Icon

    ❏ Spacing ❏ Radius… ❏ Core-Component ❏ Button ❏ Topbar ❏ Dialog ❏ Image ❏ TextField…
  5. ❏ ٣੗ੋ ࣘࢿਸ ੷੢ೞח प୓ ❏ ࢚࢝, ӖԜ, ஖ࣻ৬ э਷

    झఋੌ ч ❏ ೞ٘௏٬ػ ч ؀न ٣੗ੋ ష௾ ࢎਊ ❏ ాੌࢿ ❏ ࣻ੿ ਊ੉ࢿ ❏ ੽Ӕࢿ Design Token(in material)
  6. ❏ ٣੗ੋ ࣘࢿਸ ੷੢ೞח प୓ ❏ ࢚࢝, ӖԜ, ஖ࣻ৬ э਷

    झఋੌ ч ❏ ೞ٘௏٬ػ ч ؀न ٣੗ੋ ష௾ ࢎਊ ❏ ాੌࢿ ❏ ࣻ੿ ਊ੉ࢿ ❏ ੽Ӕࢿ Design Token(in material)
  7. Core Component ❏ о੢ ઺ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ

    যڃ ஹನք౟ܳ ࢎਊ೧ ঠ ೞח૑ ߄۽ ੉೧
  8. Core Component ❏ о੢ ઺ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ

    যڃ ஹನք౟ܳ ࢎਊ೧ ঠ ೞח૑ ߄۽ ੉೧
  9. Core Component ❏ о੢ ઺ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ

    যڃ ஹನք౟ܳ ࢎਊ೧ ঠ ೞח૑ ߄۽ ੉೧ ❏ औѱ ੉೧ೞҊ ҕਬೞӝ एਕঠೠ׮ ❏ ֎੉߁, ೐۽ಌ౭ ١ ೖӒ݃৬ эب۾
  10. Core Component KurlyBoxButton( text = "Button", onClick = { },

    boxButtonColorType = BoxButtonColorType.Primary,
  11. Core Component KurlyBoxButton( text = "Button", onClick = { },

    boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL,
  12. Core Component KurlyBoxButton( text = "Button", onClick = { },

    boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge,
  13. Core Component KurlyBoxButton( text = "Button", onClick = { },

    boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge, shape = ButtonShape.Square,
  14. Core Component KurlyBoxButton( text = "Button", onClick = { },

    boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge, shape = ButtonShape.Square, leadingIcon = KurlyIcons.Normal.Default.Blank )
  15. Core Component Scaffold( modifier = Modifier, topBar = { KurlyTopBar(

    title = "஠పҊܻ", actions = Actions( notification = false, address = true, cart = true,
  16. 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,
  17. ౟۞࠶ ग౴ ❏ ࢚కܳ ೞਤ झ௏೐ীࢲ ੍ӝ ❏ ۈ׮ ଵઑܳ

    ഝਊ೧ पઁ ࢚కо ੍൤ח ߧਤܳ ইې۽ ગ൨
  18. ౟۞࠶ ग౴ ❏ ࢚కܳ ೞਤ झ௏೐ীࢲ ੍ӝ ❏ ۈ׮ ଵઑܳ

    ഝਊ೧ पઁ ࢚కо ੍൤ח ߧਤܳ ইې۽ ગ൨
  19. ౟۞࠶ ग౴ ❏ ࢚కܳ ೞਤ झ௏೐ীࢲ ੍ӝ ❏ ۈ׮ ଵઑܳ

    ഝਊ೧ पઁ ࢚కо ੍൤ח ߧਤܳ ইې۽ ગ൨
  20. ౟۞࠶ ग౴ ❏ Compose ۈ׮ध ӝরߨ ❏ Compose ஹ౵ੌ۞ח Composable

    ೣࣻী ݒѐ߸ࣻ ഋక۽ ੹׳ػ ۈ׮ध ഐ୹ਸ ୭੸ ചೞৈ ੤ࢎਊ ❏ ஭୛ೞ૑ ঋח ۈ׮धਸ यӖహਵ۽ ݽ؛݂, ੤ࢎਊ оמೠ ੋझఢझ۽ ୭੸ച ❏ ۈ׮ध੉ ߸ࣻ чਸ ஭୊ೞח ҃਋ ղࠗ੸ਵ۽ remember ഝਊ ❏ ױ, ஭୛ػ чب Stable੉যঠ recomposition skip ӝ؀
  21. KPDSܳ ઁ੘ೞ׮ࠁפ ❏ ٣੗ੋ दझమਸ ੿੄ೞח ழޭפா੉࣌ ࠺ਊ ❏ ஹನք౟

    ѐߊী ࣗਃػ दрࠁ׮ ഻ঁ ݆੉ ೙ਃ೮׮.. ❏ ஹನք౟ ߸҃੼ਸ য٣ө૑ ৌযل૑? ❏ ੿೧૓ ২࣌ vs ৘৻ী ؀ೠ ؀਽
  22. KPDSܳ ઁ੘ೞ׮ࠁפ ❏ ٣੗ੋ दझమਸ ੿੄ೞח ழޭפா੉࣌ ࠺ਊ ❏ ஹನք౟

    ѐߊী ࣗਃػ दрࠁ׮ ഻ঁ ݆੉ ೙ਃ೮׮.. ❏ ஹನք౟ ߸҃੼ਸ য٣ө૑ ৌযل૑? ❏ ੿೧૓ ২࣌ vs ৘৻ী ؀ೠ ؀਽