The Android Wears Material

2022년 대학생 IT 벤처창업동아리 SOPT에서 Google Material Design을 주제로 발표한 자료입니다.

Transcript

1. HyunWoo Lee
   The Android Wears Material
   Basics for Understanding Android Design System
   

   View Slide

2. Android Engineer
   - SOPT Android/Server
   
   - Mathpresso(QANDA) Android
   Developer
   
   - DroidKnights 2021 Open Source
   Contributor
   
   - 27ӝ SOPT Android MVP
   
   - ઱ਃ ೐۽ં౟
   
   - Hacker/CatchMe/о஖ࢎ੗/FILL-IN/BeMe
   ੉അ਋
   

   View Slide

3. Problem
   

   View Slide

4. ?
   ѐߊ੗৬ ӝദ/٣੗੉ց р੄ ࣗా਷
   
   যڃ ߑधਵ۽ ੉ܞઉঠೡө?
   

   View Slide

5. Design System
   

   View Slide

6. ѐ
   ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ ইېীࢲ
   ঌܿ੉ जೞҊ աয়ѱ ೡ ࣻ ੓ਸөਃ?
   ѐ
   ????
   

   View Slide

7. ѐ
   ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ ইېীࢲ
   ঌܿ੉ जೞҊ աয়ѱ ೡ ࣻ ੓ਸөਃ?
   ѐ
   ????
   ੿੄о উػ ਊযٜ਷
   
   Communication Costܳ
   
   ֫ੋ׮
   

   View Slide

8. Design System
   Product Makerٜ੄ ডࣘ
   ডࣘػ UI + ੹ۚ੸ UX
   

   View Slide

9. Design System
   Product Makerٜ੄ ডࣘ
   ੌҙػ ࢚ഐ੘ਊ ಁఢ
   ੤ࢎਊ/ࣻ੿ оמೠ ҳઑ
   

   View Slide

10. Nathan Curtis, EightShapes
    “ ٣੗ੋ दझమ਷ ೐۽؋౟о ইתפ׮.
    

    ઁಿਸ ઁҕೞח ઁಿੑפ׮. ”
    

    View Slide

11. Design System੄ ҳࢿ
    Colors Typography
    Component Style Behavior
    UI System
    UX Principle
    Brand/Business Guide
    Product Design
    

    View Slide

12. Design System੄ ҳࢿ
    Colors Typography
    Component Style Behavior
    UI System
    UX Principle
    Brand/Business Guide
    Product Design
    ੉Ѧ ׮…ঌইঠ ೞաਃ?
    

    View Slide

13. ?
    ѐߊ੗৬ ӝദ/٣੗੉ց р੄ ࣗా਷
    
    যڃ ߑधਵ۽ ੉ܞઉঠೡө?
    

    View Slide

14. ੿੄ػ ডࣘਸ ੉೧ೞҊ
    
    ੉ܳ ഝਊೞৈ ࣗాਸ दبೞ੗
    

    View Slide

15. Then How?
    

    View Slide

16. Material Design System
    

    View Slide

17. ѐ
    ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ ইېীࢲ
    ঌܿ੉ जೞҊ աয়ѱ ೡ ࣻ ੓ਸөਃ?
    ѐ
    ????
    

    View Slide

18. ѐ
    ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ झճ߄
    աয়ѱ ೡ ࣻ ੓ਸөਃ?
    ѐ
    !!!!!!!!
    

    View Slide

19. View Slide

20. Pixel Density
    One UI Guide with Multi-Platform
    - ׮নೠ ೧࢚ب੄ ӝӝী ೞա੄ 

    о੉٘ۄੋਵ۽ ੸ਊೞӝ ਤೣ
    
    - ੌ੿ ӡ੉ ׼ ೗ࣄ ࣻܳ ӝ߈ਵ۽ ׮ܲ
    ೧࢚ب੄ ചݶীࢲب Ӑੌೠ ࣻ஖۽ 

    ಴दೞѱ ೞӝ ਤೠ ࣻױ
    
    - ੌ߈੸ਵ۽ о۽ח 360dp۽ ա১
    

    View Slide

21. Pixel Density
    One UI Guide with Multi-Platform
    360 X 800
    

    View Slide

22. Spacing Method
    Margin, Padding਷ ਟ݅ೞݶ 4੄ ߓࣻ
    

    View Slide

23. Spacing Method
    Margin, Padding਷ ਟ݅ೞݶ 4੄ ߓࣻ
    

    View Slide

24. “4”
    ৵ 4੄ ߓࣻੌө?
    

    View Slide

25. pixel =
    (dp X ӝӝ dot per inch)
    (ӝࠄ dot per inch(160))
    

    View Slide

26. Color System
    Material Design Colors System
    - п ৉ೡী ݏ୾૓ ஸ۞ दझమਸ ҳ୷
    
    - ߓ҃ী ٜযт ࢝(Background)/ߓ҃
    ਤী Ӓ۰૑ח ఫझ౟੄ ࢝(On
    Background)৬ э੉ X/onX ҳઑ۽
    ҳࢿغয੓਺
    

    View Slide

27. Color System
    Material Design Colors System
    

    View Slide

28. Color System
    Material Design Colors System
    

    View Slide

29. Typography
    Material Design Type System
    - ೻٘ۄੋ/Titleী ٜযт ఫझ౟ झఋ
    ੌࠗఠ ࠄޙ/ߡౡ/ࠄޙ੄ ఋ੉ౣী ٜ
    যт ఋੑ दझమਸ ޷ܻ ੿੄ೡ ࣻ ੓
    ਺
    

    View Slide

30. Typography
    CatchMe Design Type System
    - ৮੹൤ Material Design Systemҗ
    ੌ஖غ૑ ঋইب ؽ
    
    - ੤ࢎਊ ೡ ࣻ ੓ѱ ஹನք౟ച ೞח Ѫ
    ੉ ઺ਃ
    

    View Slide

31. Typography UseCase
    CatchMe Design Type System (For Developer)
    

    View Slide

32. Typography UseCase
    CatchMe Design Type System (For Developer)
    

    View Slide

33. Typography UseCase
    CatchMe Design Type System (For Developer)
    Material Design Systemҗ Ҋਬ Design Systemਸ sync,
    
    ٣੗ੋ दझమ੉ ߄Շযب ௏٘о ইצ ఋੑ दझమ݅ ߸҃ೞѱ ࢸ҅
    

    View Slide

34. Typography UseCase
    Hacker Type System
    Material Design Systemҗ 

    Ҋਬ Design Systemਸ sync,
    
    ٣੗ੋ दझమ੉ ߄Շযب 

    ௏٘о ইצ ఋੑ दझమ݅ ߸҃ೞѱ ࢸ҅
    

    View Slide

35. Typography UseCase
    Hacker Type System
    Jetpack Composeܳ ࢎਊೞݶࢲ झఋੌਸ ੤ࢎਊೡ ࣻ ੓ѱ
    
    ੿੄ػ TextStyleਸ Context API(CompositionLocal)ܳ ా೧ ઁҕ
    

    View Slide

36. Material Design Component
    Quiz
    Chip
    

    View Slide

37. Material Design Component
    Quiz
    Dialog
    

    View Slide

38. Material Design Component
    Quiz
    (Navigation) Drawer
    

    View Slide

39. Material Design Component
    Quiz
    Snackbar
    

    View Slide

40. Material Design Component
    Toast vs Snackbar
    - Toastח System ੹৉ীࢲ ࠁ੉Ҋ
    Snackbarח ೧׼ ചݶীࢲ݅ ࠁ੐
    
    - Toastח API 30(উ٘۽੉٘ 10) ੉റ
    ୶о੸ੋ ழझథ੉ ࠛоמ(ষ୒ য۵
    ѱ) ٜ݅য֬਺
    

    View Slide

41. Suggestion
    

    View Slide

42. Suggestion
    For Designer/Project Manager
    - উ٘۽੉٘/iOS݅੄ Ҋਬ ٣੗ੋ दझమ੉ ੓׮ח ࢎपਸ ঌই઱दӡ
    
    - Product Ҋਬ ٣੗ੋ दझమਸ ҳ୷ೞח Ѫ੉ য۵׮ݶ ୭ࣗೠ 

    Color/Type System ઁҕ
    
    - ٣੗ੋ दझమীࢲ ઁҕೞח UX GuideLine਷ ೠߣঀ ࠊ઱दӡ
    
    - Material3 Design System ഛੋ೧ࠁҊ উ٘۽੉٘ хࢿ וԑࠁӝ
    

    View Slide

43. Suggestion
    For Designer/Project Manager
    

    View Slide

44. (Material 2)
    Material Color Palette
    https://material.io/resources/color/
    

    View Slide

45. (Material 3)
    Material Theme Builder
    https://material-foundation.github.io/material-theme-builder/
    

    View Slide

46. Suggestion && Advice
    For Developer
    - UI Component ҳഅद Material Component੄ Style ੸ਊ೧ࠁӝ
    
    - Product Ҋਬ੄ झఋੌ ௏٘ח ୭؀ೠ ੤ࢎਊೞৈ ഝਊೞӝ
    
    - MaterialComponent৬ Material3੄ झఋੌ੉ ݆੉ ׮ܴ!
    

    View Slide

47. Material Design Site
    https://material.io/
    

    View Slide

48. Thanks :)
    

    View Slide