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
150
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
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
파급효과: From AI to Android Development
l2hyunwoo
0
210
선언형 UI에서의 상태관리
l2hyunwoo
0
500
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
420
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
1.4k
React Native under the hood
l2hyunwoo
0
110
유연한 Composable 설계
l2hyunwoo
0
670
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
120
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
430
Other Decks in Programming
See All in Programming
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
640
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
780
階層化自動テストで開発に機動力を
ickx
1
460
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
190
コーディングエージェント概観(2025/07)
itsuki_t88
1
480
What's new in Adaptive Android development
fornewid
0
130
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
260
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
150
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.3k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Cult of Friendly URLs
andyhume
79
6.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Into the Great Unknown - MozCon
thekraken
40
1.9k
How GitHub (no longer) Works
holman
314
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Being A Developer After 40
akosma
90
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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 :)