Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Android Wears Material
Search
HyunWoo Lee
May 30, 2023
Programming
0
94
The Android Wears Material
2022년 대학생 IT 벤처창업동아리 SOPT에서 Google Material Design을 주제로 발표한 자료입니다.
HyunWoo Lee
May 30, 2023
Tweet
Share
More Decks by HyunWoo Lee
See All by HyunWoo Lee
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
220
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
630
React Native under the hood
l2hyunwoo
0
41
유연한 Composable 설계
l2hyunwoo
0
550
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
70
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
340
CDG로 모두와 함께 성장하기
l2hyunwoo
0
100
fun HelloKMP(): GladToMeetYou
l2hyunwoo
0
410
Jetpack Compose - 실무에 발라보기
l2hyunwoo
1
180
Other Decks in Programming
See All in Programming
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
100
Jakarta EE meets AI
ivargrimstad
0
710
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
2.6k
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
1.5k
距離関数を極める! / SESSIONS 2024
gam0022
0
340
WebAssembly Unleashed: Powering Server-Side Applications
chrisft25
0
1.9k
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
520
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
3.7k
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
5
5.4k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
140
Jakarta EE meets AI
ivargrimstad
0
760
チームにとって最適なスキルアップ施策とは何か/what-is-the-best-skill-up-approach-for-team
nobuoooo
0
160
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Become a Pro
speakerdeck
PRO
25
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Thoughts on Productivity
jonyablonski
67
4.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Code Reviewing Like a Champion
maltzj
520
39k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
150
Transcript
HyunWoo Lee The Android Wears Material Basics for Understanding Android
Design System
Android Engineer - SOPT Android/Server - Mathpresso(QANDA) Android Developer -
DroidKnights 2021 Open Source Contributor - 27ӝ SOPT Android MVP - ਃ ۽ં - Hacker/CatchMe/оࢎ/FILL-IN/BeMe അ
Problem
? ѐߊ৬ ӝദ/٣ց р ࣗా যڃ ߑधਵ۽ ܞઉঠೡө?
Design System
ѐ ѐߊש! द ߡౡ ܼೞݶ ইېীࢲ ঌܿ जೞҊ աয়ѱ ೡ
ࣻ ਸөਃ? ѐ ????
ѐ ѐߊש! द ߡౡ ܼೞݶ ইېীࢲ ঌܿ जೞҊ աয়ѱ ೡ
ࣻ ਸөਃ? ѐ ???? о উػ ਊযٜ Communication Costܳ ֫ੋ
Design System Product Makerٜ ডࣘ ডࣘػ UI + ۚ UX
Design System Product Makerٜ ডࣘ ੌҙػ ࢚ഐਊ ಁఢ ࢎਊ/ࣻ оמೠ
ҳઑ
Nathan Curtis, EightShapes “ ٣ੋ दझమ ۽؋о ইתפ. ઁಿਸ
ઁҕೞח ઁಿੑפ. ”
Design System ҳࢿ Colors Typography Component Style Behavior UI System
UX Principle Brand/Business Guide Product Design
Design System ҳࢿ Colors Typography Component Style Behavior UI System
UX Principle Brand/Business Guide Product Design Ѧ …ঌইঠ ೞաਃ?
? ѐߊ৬ ӝദ/٣ց р ࣗా যڃ ߑधਵ۽ ܞઉঠೡө?
ػ ডࣘਸ ೧ೞҊ ܳ ഝਊೞৈ ࣗాਸ दبೞ
Then How?
Material Design System
ѐ ѐߊש! द ߡౡ ܼೞݶ ইېীࢲ ঌܿ जೞҊ աয়ѱ ೡ
ࣻ ਸөਃ? ѐ ????
ѐ ѐߊש! द ߡౡ ܼೞݶ झճ߄ աয়ѱ ೡ ࣻ ਸөਃ?
ѐ !!!!!!!!
None
Pixel Density One UI Guide with Multi-Platform - নೠ ೧࢚ب
ӝӝী ೞա о٘ۄੋਵ۽ ਊೞӝ ਤೣ - ੌ ӡ ࣄ ࣻܳ ӝ߈ਵ۽ ܲ ೧࢚ب ചݶীࢲب Ӑੌೠ ࣻ۽ दೞѱ ೞӝ ਤೠ ࣻױ - ੌ߈ਵ۽ о۽ח 360dp۽ ա১
Pixel Density One UI Guide with Multi-Platform 360 X 800
Spacing Method Margin, Padding ਟ݅ೞݶ 4 ߓࣻ
Spacing Method Margin, Padding ਟ݅ೞݶ 4 ߓࣻ
“4” ৵ 4 ߓࣻੌө?
pixel = (dp X ӝӝ dot per inch) (ӝࠄ dot
per inch(160))
Color System Material Design Colors System - п ೡী ݏ
ஸ۞ दझమਸ ҳ୷ - ߓ҃ী ٜযт ࢝(Background)/ߓ҃ ਤী Ӓ۰ח ఫझ ࢝(On Background)৬ э X/onX ҳઑ۽ ҳࢿغয
Color System Material Design Colors System
Color System Material Design Colors System
Typography Material Design Type System - ٘ۄੋ/Titleী ٜযт ఫझ झఋ
ੌࠗఠ ࠄޙ/ߡౡ/ࠄޙ ఋౣী ٜ যт ఋੑ दझమਸ ܻ ೡ ࣻ
Typography CatchMe Design Type System - ৮ Material Design Systemҗ
ੌغ ঋইب ؽ - ࢎਊ ೡ ࣻ ѱ ஹನքച ೞח Ѫ ਃ
Typography UseCase CatchMe Design Type System (For Developer)
Typography UseCase CatchMe Design Type System (For Developer)
Typography UseCase CatchMe Design Type System (For Developer) Material Design
Systemҗ Ҋਬ Design Systemਸ sync, ٣ੋ दझమ ߄Շযب ٘о ইצ ఋੑ दझమ݅ ߸҃ೞѱ ࢸ҅
Typography UseCase Hacker Type System Material Design Systemҗ Ҋਬ
Design Systemਸ sync, ٣ੋ दझమ ߄Շযب ٘о ইצ ఋੑ दझమ݅ ߸҃ೞѱ ࢸ҅
Typography UseCase Hacker Type System Jetpack Composeܳ ࢎਊೞݶࢲ झఋੌਸ ࢎਊೡ
ࣻ ѱ ػ TextStyleਸ Context API(CompositionLocal)ܳ ా೧ ઁҕ
Material Design Component Quiz Chip
Material Design Component Quiz Dialog
Material Design Component Quiz (Navigation) Drawer
Material Design Component Quiz Snackbar
Material Design Component Toast vs Snackbar - Toastח System ীࢲ
ࠁҊ Snackbarח ೧ ചݶীࢲ݅ ࠁ - Toastח API 30(উ٘۽٘ 10) റ ୶оੋ ழझథ ࠛоמ(ষ য۵ ѱ) ٜ݅য֬
Suggestion
Suggestion For Designer/Project Manager - উ٘۽٘/iOS݅ Ҋਬ ٣ੋ दझమ ח
ࢎपਸ ঌইदӡ - Product Ҋਬ ٣ੋ दझమਸ ҳ୷ೞח Ѫ য۵ݶ ୭ࣗೠ Color/Type System ઁҕ - ٣ੋ दझమীࢲ ઁҕೞח UX GuideLine ೠߣঀ ࠊदӡ - Material3 Design System ഛੋ೧ࠁҊ উ٘۽٘ хࢿ וԑࠁӝ
Suggestion For Designer/Project Manager
(Material 2) Material Color Palette https://material.io/resources/color/
(Material 3) Material Theme Builder https://material-foundation.github.io/material-theme-builder/
Suggestion && Advice For Developer - UI Component ҳഅद Material
Component Style ਊ೧ࠁӝ - Product Ҋਬ झఋੌ ٘ח ୭ೠ ࢎਊೞৈ ഝਊೞӝ - MaterialComponent৬ Material3 झఋੌ ݆ ܴ!
Material Design Site https://material.io/
Thanks :)