The Android Wears Material

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

Transcript

1. HyunWoo Lee The Android Wears Material Basics for Understanding Android Design System
2. Android Engineer - SOPT Android/Server - Mathpresso(QANDA) Android Developer - DroidKnights 2021 Open Source Contributor - 27ӝ SOPT Android MVP - ઱ਃ ೐۽ં౟ - Hacker/CatchMe/о஖ࢎ੗/FILL-IN/BeMe ੉അ਋
3. Problem
4. ? ѐߊ੗৬ ӝദ/٣੗੉ց р੄ ࣗా਷ যڃ ߑधਵ۽ ੉ܞઉঠೡө?
5. Design System
6. ѐ ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ ইېীࢲ ঌܿ੉ जೞҊ աয়ѱ ೡ ࣻ ੓ਸөਃ? ѐ ????
7. ѐ ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ ইېীࢲ ঌܿ੉ जೞҊ աয়ѱ ೡ ࣻ ੓ਸөਃ? ѐ ???? ੿੄о উػ ਊযٜ਷ Communication Costܳ ֫ੋ׮
8. Design System Product Makerٜ੄ ডࣘ ডࣘػ UI + ੹ۚ੸ UX
9. Design System Product Makerٜ੄ ডࣘ ੌҙػ ࢚ഐ੘ਊ ಁఢ ੤ࢎਊ/ࣻ੿ оמೠ ҳઑ
10. Nathan Curtis, EightShapes “ ٣੗ੋ दझమ਷ ೐۽؋౟о ইתפ׮. 
 ઁಿਸ ઁҕೞח ઁಿੑפ׮. ”
11. Design System੄ ҳࢿ Colors Typography Component Style Behavior UI System UX Principle Brand/Business Guide Product Design
12. Design System੄ ҳࢿ Colors Typography Component Style Behavior UI System UX Principle Brand/Business Guide Product Design ੉Ѧ ׮…ঌইঠ ೞաਃ?
13. ? ѐߊ੗৬ ӝദ/٣੗੉ց р੄ ࣗా਷ যڃ ߑधਵ۽ ੉ܞઉঠೡө?
14. ੿੄ػ ডࣘਸ ੉೧ೞҊ ੉ܳ ഝਊೞৈ ࣗాਸ दبೞ੗
15. Then How?
16. Material Design System
17. ѐ ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ ইېীࢲ ঌܿ੉ जೞҊ աয়ѱ ೡ ࣻ ੓ਸөਃ? ѐ ????
18. ѐ ѐߊ੗ש! ഑द ߡౡ ௿ܼೞݶ झճ߄ աয়ѱ ೡ ࣻ ੓ਸөਃ? ѐ !!!!!!!!
20. Pixel Density One UI Guide with Multi-Platform - ׮নೠ ೧࢚ب੄ ӝӝী ೞա੄ 
 о੉٘ۄੋਵ۽ ੸ਊೞӝ ਤೣ - ੌ੿ ӡ੉ ׼ ೗ࣄ ࣻܳ ӝ߈ਵ۽ ׮ܲ ೧࢚ب੄ ചݶীࢲب Ӑੌೠ ࣻ஖۽ 
 ಴दೞѱ ೞӝ ਤೠ ࣻױ - ੌ߈੸ਵ۽ о۽ח 360dp۽ ա১
21. Pixel Density One UI Guide with Multi-Platform 360 X 800
22. Spacing Method Margin, Padding਷ ਟ݅ೞݶ 4੄ ߓࣻ
23. Spacing Method Margin, Padding਷ ਟ݅ೞݶ 4੄ ߓࣻ
24. “4” ৵ 4੄ ߓࣻੌө?
25. pixel = (dp X ӝӝ dot per inch) (ӝࠄ dot per inch(160))
26. Color System Material Design Colors System - п ৉ೡী ݏ୾૓ ஸ۞ दझమਸ ҳ୷ - ߓ҃ী ٜযт ࢝(Background)/ߓ҃ ਤী Ӓ۰૑ח ఫझ౟੄ ࢝(On Background)৬ э੉ X/onX ҳઑ۽ ҳࢿغয੓਺
27. Color System Material Design Colors System
28. Color System Material Design Colors System
29. Typography Material Design Type System - ೻٘ۄੋ/Titleী ٜযт ఫझ౟ झఋ ੌࠗఠ ࠄޙ/ߡౡ/ࠄޙ੄ ఋ੉ౣী ٜ যт ఋੑ दझమਸ ޷ܻ ੿੄ೡ ࣻ ੓ ਺
30. Typography CatchMe Design Type System - ৮੹൤ Material Design Systemҗ ੌ஖غ૑ ঋইب ؽ - ੤ࢎਊ ೡ ࣻ ੓ѱ ஹನք౟ച ೞח Ѫ ੉ ઺ਃ
31. Typography UseCase CatchMe Design Type System (For Developer)
32. Typography UseCase CatchMe Design Type System (For Developer)
33. Typography UseCase CatchMe Design Type System (For Developer) Material Design Systemҗ Ҋਬ Design Systemਸ sync, ٣੗ੋ दझమ੉ ߄Շযب ௏٘о ইצ ఋੑ दझమ݅ ߸҃ೞѱ ࢸ҅
34. Typography UseCase Hacker Type System Material Design Systemҗ 
 Ҋਬ Design Systemਸ sync, ٣੗ੋ दझమ੉ ߄Շযب 
 ௏٘о ইצ ఋੑ दझమ݅ ߸҃ೞѱ ࢸ҅
35. Typography UseCase Hacker Type System Jetpack Composeܳ ࢎਊೞݶࢲ झఋੌਸ ੤ࢎਊೡ ࣻ ੓ѱ ੿੄ػ TextStyleਸ Context API(CompositionLocal)ܳ ా೧ ઁҕ
36. Material Design Component Quiz Chip
37. Material Design Component Quiz Dialog
38. Material Design Component Quiz (Navigation) Drawer
39. Material Design Component Quiz Snackbar
40. Material Design Component Toast vs Snackbar - Toastח System ੹৉ীࢲ ࠁ੉Ҋ Snackbarח ೧׼ ചݶীࢲ݅ ࠁ੐ - Toastח API 30(উ٘۽੉٘ 10) ੉റ ୶о੸ੋ ழझథ੉ ࠛоמ(ষ୒ য۵ ѱ) ٜ݅য֬਺
41. Suggestion
42. Suggestion For Designer/Project Manager - উ٘۽੉٘/iOS݅੄ Ҋਬ ٣੗ੋ दझమ੉ ੓׮ח ࢎपਸ ঌই઱दӡ - Product Ҋਬ ٣੗ੋ दझమਸ ҳ୷ೞח Ѫ੉ য۵׮ݶ ୭ࣗೠ 
 Color/Type System ઁҕ - ٣੗ੋ दझమীࢲ ઁҕೞח UX GuideLine਷ ೠߣঀ ࠊ઱दӡ - Material3 Design System ഛੋ೧ࠁҊ উ٘۽੉٘ хࢿ וԑࠁӝ
43. Suggestion For Designer/Project Manager
44. (Material 2) Material Color Palette https://material.io/resources/color/
45. (Material 3) Material Theme Builder https://material-foundation.github.io/material-theme-builder/
46. Suggestion && Advice For Developer - UI Component ҳഅद Material Component੄ Style ੸ਊ೧ࠁӝ - Product Ҋਬ੄ झఋੌ ௏٘ח ୭؀ೠ ੤ࢎਊೞৈ ഝਊೞӝ - MaterialComponent৬ Material3੄ झఋੌ੉ ݆੉ ׮ܴ!
47. Material Design Site https://material.io/
48. Thanks :)