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
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
18k
NPOでのDevinの活用
codeforeveryone
0
850
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
810
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
型で語るカタ
irof
0
140
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Fireside Chat
paigeccino
37
3.5k
The Language of Interfaces
destraynor
158
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Raft: Consensus for Rubyists
vanstee
140
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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
хࢎפ.