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
130
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
파급효과: From AI to Android Development
l2hyunwoo
0
170
선언형 UI에서의 상태관리
l2hyunwoo
0
470
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
380
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
1.2k
React Native under the hood
l2hyunwoo
0
93
유연한 Composable 설계
l2hyunwoo
0
640
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
110
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
400
CDG로 모두와 함께 성장하기
l2hyunwoo
0
180
Other Decks in Programming
See All in Programming
Serving TUIs over SSH with Go
caarlos0
0
810
SpringBootにおけるオブザーバビリティのなにか
irof
1
580
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
160
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
170
抽象データ型について学んだ
ryounasso
0
140
オープンソースコントリビュート入門
_katsuma
0
150
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
260
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
120
2025年のz-index設計を考える
tak_dcxi
13
5k
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
1
150
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
260
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
For a Future-Friendly Web
brad_frost
177
9.7k
Practical Orchestrator
shlominoach
187
11k
Unsuck your backbone
ammeep
671
58k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Gamification - CAS2011
davidbonilla
81
5.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
122
52k
Adopting Sorbet at Scale
ufuk
76
9.4k
It's Worth the Effort
3n
184
28k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Side Projects
sachag
453
42k
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 :)