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
570
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
컬리에서 디자인 시스템인 KPDS를 도입하기 위해 Android Compose Material3 기반 디자인 시스템 구축 경험을 소개합니다.
권대원
June 11, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
型で語るカタ
irof
0
130
効率的な開発手段として VRTを活用する
ishkawa
0
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
920
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Side Projects
sachag
455
42k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Scaling GitHub
holman
460
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Unsuck your backbone
ammeep
671
58k
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
хࢎפ.