Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
120
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
300
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
360
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
1.1k
React Native under the hood
l2hyunwoo
0
82
유연한 Composable 설계
l2hyunwoo
0
620
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
110
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
390
CDG로 모두와 함께 성장하기
l2hyunwoo
0
170
fun HelloKMP(): GladToMeetYou
l2hyunwoo
0
440
Other Decks in Programming
See All in Programming
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
100
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
160
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
210
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
Unlock the Potential of Swift Code Generation
rockname
0
250
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.4k
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
150
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
Qiita Bash
mercury_dev0517
2
200
Make Parsers Compatible Using Automata Learning
makenowjust
1
4.6k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Code Reviewing Like a Champion
maltzj
522
40k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
RailsConf 2023
tenderlove
30
1.1k
Being A Developer After 40
akosma
91
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Automating Front-end Workflow
addyosmani
1369
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Speed Design
sergeychernyshev
29
900
It's Worth the Effort
3n
184
28k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
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 :)