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
520
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
컬리에서 디자인 시스템인 KPDS를 도입하기 위해 Android Compose Material3 기반 디자인 시스템 구축 경험을 소개합니다.
권대원
June 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
850
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.4k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
950
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Formの複雑さに立ち向かう
bmthd
1
900
Writing documentation can be fun with plugin system
okuramasafumi
0
120
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Open source software: how to live long and go far
gaelvaroquaux
0
650
React 19アップデートのために必要なこと
uhyo
5
830
Featured
See All Featured
A better future with KSS
kneath
238
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Writing Fast Ruby
sferik
628
61k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing Experiences People Love
moore
140
23k
Become a Pro
speakerdeck
PRO
26
5.1k
The Cult of Friendly URLs
andyhume
78
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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
хࢎפ.