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
580
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
컬리에서 디자인 시스템인 KPDS를 도입하기 위해 Android Compose Material3 기반 디자인 시스템 구축 경험을 소개합니다.
권대원
June 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
560
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.7k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
720
画像コンペでのベースラインモデルの育て方
tattaka
3
1k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
520
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Flutterと Vibe Coding で個人開発!
hyshu
1
220
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
What's in a price? How to price your products and services
michaelherold
246
12k
Code Reviewing Like a Champion
maltzj
524
40k
BBQ
matthewcrist
89
9.8k
Being A Developer After 40
akosma
90
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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
хࢎפ.