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
DroidKnights 2024 : Compose Material3 커스텀 디자인 시...
Search
권대원
June 11, 2024
Programming
0
550
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
컬리에서 디자인 시스템인 KPDS를 도입하기 위해 Android Compose Material3 기반 디자인 시스템 구축 경험을 소개합니다.
권대원
June 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
AIコーディングの理想と現実
tomohisa
38
40k
Cloudflare Workersで進めるリモートMCP活用
syumai
12
1.6k
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
hayaokimura
5
1.2k
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
110
KANNA Android の技術的課題と取り組み
watabee
1
580
Vibe Coding の話をしよう
schroneko
14
3.9k
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
120
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.9k
Duke on CRaC with Jakarta EE
ivargrimstad
1
250
Storybookの情報をMCPサーバー化する
shota_tech
3
1.4k
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
150
Road to Ruby for A Linguistics Nerd
hayat01sh1da
PRO
0
370
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
Balancing Empowerment & Direction
lara
0
43
How STYLIGHT went responsive
nonsquared
100
5.5k
Designing for Performance
lara
608
69k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Designing for humans not robots
tammielis
253
25k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Navigating Team Friction
lara
185
15k
Facilitating Awesome Meetings
lara
54
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Become a Pro
speakerdeck
PRO
28
5.3k
Transcript
Compose Material3 ழझథ ٣ੋ दझమ ҳ୷ӝ ӂਗ / ஸܻ
None
None
None
None
None
None
None
None
❏ ࠁ ബਯਵ۽ ੌҙػ UIܳ ѐߊ ❏ ಞച ஹನք ױੌച
❏ ੌҙػ UI/UX ઁҕ ❏ ࢤࢿ ೱ࢚ ❏ ࠂ স ӝ ❏ ࠺ૉפझ ۽ যڃ જਸөਃ?
৵ Jetpack Compose? ❏ 100% Jetpack Compose ۽ ҳࢿػ KPDS
Android ❏ UI ৬ ࠺ૉפझ ۽ ܻ࠙ ❏ ஹನք ױਤ۽ ࢿ оמೞ ❏ KPDSח Material Design Guideܳ ଵҊ ❏ Compose-Foundation, Ui ഝਊ
KPDS ҳઑ
Compose Material3 ҳઑ ❏ ӝࠄਵ۽ foundation/layout ী ઓೞҊ . ❏
compose.ui - layout, drawing ١ ӝࠄੋ ҳࢿਃࣗ(Layout, KeyboardType..) ❏ foundation - ӝୡ ਃࣗܳ ഛ೧ ٣ੋ दझమ ਃࣗܳ ઁҕ(Box, BasicTextField..) ❏ compose.material3 ❏ Material Design3 ӝ߈ਵ۽ Jetpack Compose UIܳ ࠽٘(Surface, TextField..)
KPDS ҳઑ ❏ Foundation ❏ Color ❏ Typography ❏ Icon
❏ Spacing ❏ Radius… ❏ Core-Component ❏ Button ❏ Topbar ❏ Dialog ❏ Image ❏ TextField…
❏ Foundation ❏ Color ❏ Typography ❏ Icon ❏ Spacing
❏ Radius… KPDS ҳઑ
❏ Core-Component ❏ Button ❏ Topbar ❏ Dialog ❏ Image
❏ TextField… KPDS ҳઑ
❏ ٣ੋ ࣘࢿਸ ೞח प ❏ ࢚࢝, ӖԜ, ࣻ৬ э
झఋੌ ч ❏ ೞ٘٬ػ ч न ٣ੋ ష ࢎਊ ❏ ాੌࢿ ❏ ࣻ ਊࢿ ❏ Ӕࢿ Design Token(in material)
❏ ٣ੋ ࣘࢿਸ ೞח प ❏ ࢚࢝, ӖԜ, ࣻ৬ э
झఋੌ ч ❏ ೞ٘٬ػ ч न ٣ੋ ష ࢎਊ ❏ ాੌࢿ ❏ ࣻ ਊࢿ ❏ Ӕࢿ Design Token(in material)
Design Token
Design Token
Design Token
Design Token
Color Token ❏ ష ઑѤী ٮۄ ܲ чਸ оܻఇ ❏
ప݃, ۨইਓ..
KPDS Color System ❏ ColorSet Token ❏ ஸ۞ ࢎਊ ݾী
ݏח ۿੋ ܴਸ
KPDS Color System ❏ BackgroudColor ❏ BackgroundColorTokens ❏ Background1
KPDS Color System ❏ যڌѱ ੑغաਃ? ❏ BackgroundColorTokens.Background1 ❏ ColorTokens.WhiteInverse
❏ White / Black900
KPDS Color System
KPDS Color System
KPDS Color System
Core Component ❏ о ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ
যڃ ஹನքܳ ࢎਊ೧ ঠ ೞח ߄۽ ೧
Core Component ❏ о ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ
যڃ ஹನքܳ ࢎਊ೧ ঠ ೞח ߄۽ ೧
Core Component ❏ о ਃೞѱ ࢤпೠ Ѫ ❏ Figmaܳ ࠁҊ
যڃ ஹನքܳ ࢎਊ೧ ঠ ೞח ߄۽ ೧ ❏ औѱ ೧ೞҊ ҕਬೞӝ एਕঠೠ ❏ ֎߁, ۽ಌ౭ ١ ೖӒ݃৬ эب۾
Core Component
Core Component KurlyBoxButton( text = "Button", onClick = { },
Core Component KurlyBoxButton( text = "Button", onClick = { },
boxButtonColorType = BoxButtonColorType.Primary,
Core Component KurlyBoxButton( text = "Button", onClick = { },
boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL,
Core Component KurlyBoxButton( text = "Button", onClick = { },
boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge,
Core Component KurlyBoxButton( text = "Button", onClick = { },
boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge, shape = ButtonShape.Square,
Core Component KurlyBoxButton( text = "Button", onClick = { },
boxButtonColorType = BoxButtonColorType.Primary, boxButtonStyle = BoxButtonStyle.FILL, boxButtonSizeType = BoxButtonSizeType.ExtraLarge, shape = ButtonShape.Square, leadingIcon = KurlyIcons.Normal.Default.Blank )
Core Component
Core Component
Core Component
Core Component Scaffold( modifier = Modifier, topBar = { KurlyTopBar(
title = "పҊܻ", actions = Actions( notification = false, address = true, cart = true,
Core Component Scaffold( modifier = Modifier, topBar = { KurlyTopBar(
title = "పҊܻ", actions = Actions( notification = false, address = true, cart = true, Scaffold( modifier = Modifier, topBar = { KurlyMediumTopBar( title = "పҊܻ", actions = Actions( notification = false, address = true, cart = true,
KPDSܳ ਊೞݶࢲ
۞࠶ ग ❏ Recomposition
۞࠶ ग ❏ Recomposition
۞࠶ ग
۞࠶ ग ❏ ࢚కܳ ೞਤ झীࢲ ੍ӝ ❏ ۈ ଵઑܳ
ഝਊ೧ पઁ ࢚కо ੍ח ߧਤܳ ইې۽ ગ൨
۞࠶ ग ❏ ࢚కܳ ೞਤ झীࢲ ੍ӝ ❏ ۈ ଵઑܳ
ഝਊ೧ पઁ ࢚కо ੍ח ߧਤܳ ইې۽ ગ൨
۞࠶ ग ❏ ࢚కܳ ೞਤ झীࢲ ੍ӝ ❏ ۈ ଵઑܳ
ഝਊ೧ पઁ ࢚కо ੍ח ߧਤܳ ইې۽ ગ൨
۞࠶ ग
۞࠶ ग ❏ Compose ۈध ӝরߨ ❏ Compose ஹੌ۞ח Composable
ೣࣻী ݒѐ߸ࣻ ഋక۽ ׳ػ ۈध ഐਸ ୭ ചೞৈ ࢎਊ ❏ ೞ ঋח ۈधਸ यӖహਵ۽ ݽ؛݂, ࢎਊ оמೠ ੋझఢझ۽ ୭ച ❏ ۈध ߸ࣻ чਸ ೞח ҃ ղࠗਵ۽ remember ഝਊ ❏ ױ, ػ чب Stableযঠ recomposition skip ӝ
KPDSܳ ઁೞࠁפ ❏ ٣ੋ दझమਸ ೞח ழޭפா࣌ ࠺ਊ ❏ ஹನք
ѐߊী ࣗਃػ दрࠁ ഻ঁ ݆ ਃ೮.. ❏ ஹನք ߸҃ਸ য٣ө ৌযل? ❏ ೧ ২࣌ vs ৻ী ೠ
KPDSܳ ઁೞࠁפ ❏ ٣ੋ दझమਸ ೞח ழޭפா࣌ ࠺ਊ ❏ ஹನք
ѐߊী ࣗਃػ दрࠁ ഻ঁ ݆ ਃ೮.. ❏ ஹನք ߸҃ਸ য٣ө ৌযل? ❏ ೧ ২࣌ vs ৻ী ೠ
None
None
хࢎפ.