Upgrade to Pro — share decks privately, control downloads, hide ads and more …

뚝딱뚝딱 20분 UI

Avatar for Ji Sungbin Ji Sungbin
February 23, 2023
Programming
150
0

뚝딱뚝딱 20분 UI

매시업 세미나 발표 자료 (20분)

Avatar for Ji Sungbin

Ji Sungbin

February 23, 2023

More Decks by Ji Sungbin

See All by Ji Sungbin
2025 컴포즈 마법사
Avatar for Ji Sungbin jisungbin
1
410
Kotlin Compiler Plugin 맛보기
Avatar for Ji Sungbin jisungbin
0
190
2024 컴포즈 정원사
Avatar for Ji Sungbin jisungbin
0
340
설레발 주도 개발
Avatar for Ji Sungbin jisungbin
0
320
Deep Dive into Jetpack Compose State
Avatar for Ji Sungbin jisungbin
0
590
[단축본] 컴포즈 내부로 이해하는 최적화 비법
Avatar for Ji Sungbin jisungbin
0
170
Jetpack Compose: How it works?
Avatar for Ji Sungbin jisungbin
0
390
우리가 기술 블로그를 시작해야 하는 이유
Avatar for Ji Sungbin jisungbin
0
410
2023 SBLDC Welcome
Avatar for Ji Sungbin jisungbin
0
1.3k

Other Decks in Programming

See All in Programming
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
4
360
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
130
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
210
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
240
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
460
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
290
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
200
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
170
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
310
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
570
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
140
使用 Meilisearch 建立新聞搜尋工具
Avatar for johnroyer johnroyer
0
210

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
820
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
480
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.7k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
180

Transcript

  1. ڣٯڣٯ࠙6* ✨૑ࢿ࠼

  2. 👋૑ࢿ࠼ 🏠TVOHCJO 🏰TVOHCJOMBOETVOHCJOMBOEEBZ 🐙HJUIVCDPNKJTVOHCJO UI"OESPJE

  3.  ӝઓ6*ѐߊ੄ޙઁ੼  6*ѐߊ੄࢜۽਍ഄݺ  ࢶ঱ഋ6*੉೧ೞӝ  ӝୡஹನք౟੊൤ӝ  ݒएস୹୔জ6*ٮۄٜ݅ӝ

     ݃ޖܻ 📖ݾର

  4. 📝द੘ೞӝ੹ী  $PNQPTF.BMQIBӝળ  ௏٘ࣁࠗࢎ೦ࢤۚ

  5.  6*ஹನք౟ܳ݅٘חҗ੿੉ցޖࠂ੟ೞ׮  ࢚కҙܻоࣻز੉ۄपࣻೞӝऔ׮ 😵💫ӝઓ6*ѐߊ੄ޙઁ੼

  6. ஹನք౟ࣘࢿ੿੄ ஹನք౟ݽন݃௼স੿੄ ஹನք౟۽૒੘ࢿ ࣘࢿݽন݃௼সपઁ6*োѾ

  7. None
  8. None

  9. ࢤ࢑ࢿ੷ೞ

  10. tݺ۸ഋ6*u

  11. 🔥੉ܳӓࠂೞӝਤೠ֢۱

  12. 🔥੉ܳӓࠂೞӝਤೠ֢۱

  13. 😭ೞ૑݅  ఋࢎࢲ࠺झ ୶о׮਍۽٘೙ਃ   6*޷ܻࠁӝࠛоמ  ௏٘߸҃ࢎ೦૊द߈৔ࠛоמ IPUSFMPBE

  14. 🥳ݽ߄ੌ6*ѐߊ੄ഄݺ١੢

  15. +FUQBDL$PNQPTF (PPHMF*0

  16. 4XJGU6* 88%$

  17.  ա݅੄6*ஹನք౟ٜܳ݅ӝਤೠҗ੿੉ࢎۄ૓׮  ࢚కҙܻо੗ز੉׮  6*޷ܻࠁӝо૑ਗػ׮  ߸҃ࢎ೦૊द߈৔੉૑ਗػ׮ 🧐ޖ঺੉જਸө

  18. ஹನք౟۽૒੘ࢿ ࣘࢿ ݽন݃௼স੿੄ࠛ೙ਃ

  19. None

  20. ࢤ࢑ࢿ߂੤ࢎਊࢿૐо

  21. tࢶ঱ഋ6*u

  22. ݺ۸ഋ6*⚔️ࢶ঱ഋ6* <ࢿ࠼૘ীࢲࢲ਎оחߨ> ૘ীࢲա৬ࢲࢲ࢑ҕਊߡझఠ޷օө૑LNѦযр׮ ࢲ࢑ҕਊߡझఠ޷օীࢲࣃ౟ۡद౭ఠ޷օഐթࢶ೯Ҋࣘߡझܳ৘ݒೠ׮ ৘ݒೠथରӂਸࢎਊೞৈҊࣘߡझী఑थೠ׮ Ҋࣘߡझীदрزউঊই੓ח׮ ࣃ౟ۡद౭ఠ޷օীب੘ೞݶݽ੐੢ࣗ۽тࣻ੓ח૑ೞ୍৉ਵ۽Ѧযр׮ j 👉ਗೞחѾҗীب׳ೞӝਤೠݽٚҗ੿ਸݺदೠ׮

  23. ݺ۸ഋ6*⚔️ࢶ঱ഋ6* <ࢿ࠼૘ীࢲࢲ਎оחߨ> ݽ੐੢ࣗ۽р׮ 👉ਗೞחѾҗ݅ݺदೠ׮

  24. 🤩ࢶ঱ഋ6*

  25. 📦+FUQBDL$PNQPTF-BZPVU  4DBGGPME  3PX  $PMVNO

  26. 📦4DBGGPME  ஹನք౟ܳ.BUFSJBM٣੗ੋীݏѱߓ஖  ݒएস୹୔জীࢶ5PQ#BS $POUFOU #PUUPN#BSࢎਊ

  27. 📦3PX  ஹನք౟о۽ߓ஖

  28. 📦$PMVNO  ஹನք౟ࣁ۽ߓ஖

  29. 🏷️+FUQBDL$PNQPTF$PNQPOFOU  5FYU  *NBHF  *DPO

  30. 🏷️5FYU  ޙ੗಴द

  31. 🏷️*NBHF  Ӓܿ಴द

  32. 🏷️*DPO  ই੉௑಴द  *NBHF৬ର੉੼਷౯౟оӝࠄਵ۽ࢸ੿ظ੓਺

  33. 🎨+FUQBDL$PNQPTF.PEJGJFS  GJMM.BY8JEUIGJMM.BY4J[F  TJ[FXFJHIUIFJHIU  QBEEJOH  DMJQ 

    CBDLHSPVOE  CPSEFS  TIBEPX

  34.  GJMM.BY8JEUIஹನք౟੄о۽ܳ୭؀۽ݏ୺  GJMM.BY4J[Fஹನք౟੄ࢎ੉ૉ о۽ࣁ۽ ܳ୭؀۽ݏ୺ 🎨GJMM.BY8JEUIGJMM.BY4J[F 3BX $PMVNO੹୓GJMM $PMVNOթ਷৔৉݅ఀGJMM

    3BX

  35.  TJ[Fஹನք౟੄ࢎ੉ૉ о۽ࣁ۽ ૑੿  XFJHIUஹನք౟ࢎ੉ૉ о۽ࣁ۽ ࠺ਯ૑੿  IFJHIUஹನք౟ࣁ۽ӡ੉૑੿

    🎨TJ[FXFJHIUIFJHIU EQ EQYEQ 

  36.  QBEEJOHஹನք౟࢚ೞઝ਋ಁ٬୶о  DMJQஹನք౟ݽন૑੿  CBDLHSPVOEஹನք౟ߓ҃࢝૑੿  CPSEFSஹನք౟పفܻ಴द  TIBEPXஹನք౟Ӓܿ੗಴द

    🎨FUDj DMJQ CBDLHSPVOE CPSEFS TIBEPX QBEEJOH

  37. ⚒️+FUQBDL$PNQPTF"MJHO  4QBDF#FUXFFO  TQBDFE#Z  $FOUFS

  38.  4QBDF#FUXFFOஹನք౟ܳۨ੉ইਓ੄ন՘ীߓ஖  TQBDFE#Zஹನք౟ߓ஖рѺ  $FOUFSஹನք౟ܳۨ੉ইਓ੄઺बীߓ஖ ⚒️+FUQBDL$PNQPTF"MJHO $FOUFS 4QBDF#FUXFFO TQBDFE#Z

  39. Scaffold( topBar = { Row( modifier = Modifier .fillMaxWidth() .padding(top

    = 30.dp, horizontal = 30.dp), horizontalArrangement = Arrangement.SpaceBetween ) { Text( text = "ੌ੿ ળ࠺ ઺੉ীਃ.\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", fontSize = 20.sp, fontWeight = FontWeight.Bold ) Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 8.dp)) .border(width = 1.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 8.dp), text = "ੌ੿ ࢜۽Ҋஜ", fontSize = 13.sp ) } }, content = {

  40. Scaffold( topBar = { Row( modifier = Modifier .fillMaxWidth() .padding(top

    = 30.dp, horizontal = 30.dp), horizontalArrangement = Arrangement.SpaceBetween ) { Text( text = "ੌ੿ ળ࠺ ઺੉ীਃ.\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", fontSize = 20.sp, fontWeight = FontWeight.Bold ) Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 8.dp)) .border(width = 1.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 8.dp), text = "ੌ੿ ࢜۽Ҋஜ", fontSize = 13.sp ) } }, content = {

  41. Scaffold( topBar = { Row( modifier = Modifier .fillMaxWidth() .padding(top

    = 30.dp, horizontal = 30.dp), horizontalArrangement = Arrangement.SpaceBetween ) { Text( text = "ੌ੿ ળ࠺ ઺੉ীਃ.\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", fontSize = 20.sp, fontWeight = FontWeight.Bold ) Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 8.dp)) .border(width = 1.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 8.dp), text = "ੌ੿ ࢜۽Ҋஜ", fontSize = 13.sp ) } }, content = {

  42. Scaffold( topBar = { Row( modifier = Modifier .fillMaxWidth() .padding(top

    = 30.dp, horizontal = 30.dp), horizontalArrangement = Arrangement.SpaceBetween ) { Text( text = "ੌ੿ ળ࠺ ઺੉ীਃ.\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", fontSize = 20.sp, fontWeight = FontWeight.Bold ) Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 8.dp)) .border(width = 1.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 8.dp), text = "ੌ੿ ࢜۽Ҋஜ", fontSize = 13.sp ) } }, content = {

  43. content = { Column( modifier = Modifier .padding(all = 30.dp)

    .fillMaxSize() .clip(shape = RoundedCornerShape(size = 20.dp)) .border(width = 0.5.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 20.dp), verticalArrangement = Arrangement.spacedBy(space = 16.dp) ) { Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 30.dp)) .background(color = Color.MashupGray) .padding(vertical = 4.dp, horizontal = 8.dp), text = "D-?", color = Color.DarkGray, fontSize = 13.sp ) Text( text = "١۾ػ ੌ੿੉ হযਃ", color = Color.Gray, fontSize = 20.sp, fontWeight = FontWeight.Bold )

  44. content = { Column( modifier = Modifier .padding(all = 30.dp)

    .fillMaxSize() .clip(shape = RoundedCornerShape(size = 20.dp)) .border(width = 0.5.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 20.dp), verticalArrangement = Arrangement.spacedBy(space = 16.dp) ) { Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 30.dp)) .background(color = Color.MashupGray) .padding(vertical = 4.dp, horizontal = 8.dp), text = "D-?", color = Color.DarkGray, fontSize = 13.sp ) Text( text = "١۾ػ ੌ੿੉ হযਃ", color = Color.Gray, fontSize = 20.sp, fontWeight = FontWeight.Bold )

  45. content = { Column( modifier = Modifier .padding(all = 30.dp)

    .fillMaxSize() .clip(shape = RoundedCornerShape(size = 20.dp)) .border(width = 0.5.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 20.dp), verticalArrangement = Arrangement.spacedBy(space = 16.dp) ) { Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 30.dp)) .background(color = Color.MashupGray) .padding(vertical = 4.dp, horizontal = 8.dp), text = "D-?", color = Color.DarkGray, fontSize = 13.sp ) Text( text = "١۾ػ ੌ੿੉ হযਃ", color = Color.Gray, fontSize = 20.sp, fontWeight = FontWeight.Bold )

  46. content = { Column( modifier = Modifier .padding(all = 30.dp)

    .fillMaxSize() .clip(shape = RoundedCornerShape(size = 20.dp)) .border(width = 0.5.dp, color = Color.LightGray) .background(color = Color.White) .padding(all = 20.dp), verticalArrangement = Arrangement.spacedBy(space = 16.dp) ) { Text( modifier = Modifier .clip(shape = RoundedCornerShape(size = 30.dp)) .background(color = Color.MashupGray) .padding(vertical = 4.dp, horizontal = 8.dp), text = "D-?", color = Color.DarkGray, fontSize = 13.sp ) Text( text = "١۾ػ ੌ੿੉ হযਃ", color = Color.Gray, fontSize = 20.sp, fontWeight = FontWeight.Bold )

  47. fontWeight = FontWeight.Bold ) Column( modifier = Modifier .fillMaxSize() .clip(shape

    = RoundedCornerShape(size = 20.dp)) .background(color = Color.MashupGray), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Image( modifier = Modifier.size(size = 150.dp), image = Image.MashupSleeping ) Text( modifier = Modifier.padding(top = 4.dp), text = "ৌब൤ ੌ੿ਸ ળ࠺ೞҊ ੓যਃ\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", color = Color.Gray, fontSize = 15.sp, textAlign = TextAlign.Center ) } } }, bottomBar = { Row(

  48. fontWeight = FontWeight.Bold ) Column( modifier = Modifier .fillMaxSize() .clip(shape

    = RoundedCornerShape(size = 20.dp)) .background(color = Color.MashupGray), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Image( modifier = Modifier.size(size = 150.dp), image = Image.MashupSleeping ) Text( modifier = Modifier.padding(top = 4.dp), text = "ৌब൤ ੌ੿ਸ ળ࠺ೞҊ ੓যਃ\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", color = Color.Gray, fontSize = 15.sp, textAlign = TextAlign.Center ) } } }, bottomBar = { Row(

  49. fontWeight = FontWeight.Bold ) Column( modifier = Modifier .fillMaxSize() .clip(shape

    = RoundedCornerShape(size = 20.dp)) .background(color = Color.MashupGray), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Image( modifier = Modifier.size(size = 150.dp), image = Image.MashupSleeping ) Text( modifier = Modifier.padding(top = 4.dp), text = "ৌब൤ ੌ੿ਸ ળ࠺ೞҊ ੓যਃ\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", color = Color.Gray, fontSize = 15.sp, textAlign = TextAlign.Center ) } } }, bottomBar = { Row(

  50. fontWeight = FontWeight.Bold ) Column( modifier = Modifier .fillMaxSize() .clip(shape

    = RoundedCornerShape(size = 20.dp)) .background(color = Color.MashupGray), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Image( modifier = Modifier.size(size = 150.dp), image = Image.MashupSleeping ) Text( modifier = Modifier.padding(top = 4.dp), text = "ৌब൤ ੌ੿ਸ ળ࠺ೞҊ ੓যਃ\nઑӘ݅ ӝ׮۰ ઱ࣁਃ!", color = Color.Gray, fontSize = 15.sp, textAlign = TextAlign.Center ) } } }, bottomBar = { Row(

  51. }, bottomBar = { Row( modifier = Modifier .fillMaxWidth() .height(height

    = 60.dp) .shadow(elevation = 10.dp) .background(color = Color.White), verticalAlignment = Alignment.CenterVertically ) { Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.Tv ) Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.QrCodeScanner ) Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.EmojiPeople ) } } )

  52. }, bottomBar = { Row( modifier = Modifier .fillMaxWidth() .height(height

    = 60.dp) .shadow(elevation = 10.dp) .background(color = Color.White), verticalAlignment = Alignment.CenterVertically ) { Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.Tv ) Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.QrCodeScanner ) Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.EmojiPeople ) } } )

  53. }, bottomBar = { Row( modifier = Modifier .fillMaxWidth() .height(height

    = 60.dp) .shadow(elevation = 10.dp) .background(color = Color.White), verticalAlignment = Alignment.CenterVertically ) { Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.Tv ) Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.QrCodeScanner ) Icon( modifier = Modifier.weight(weight = 1f), icon = Icon.EmojiPeople ) } } )

  54. 🤓৮ࢿ ௏٘חױ઴

  55. 🥺$PNQPTFী൜޷оࢤ҂׮ݶ  ੉ߊ಴ীաৡ௏٘ܳ૒੽प೯೧ࠁҊर׮  +FUQBDL$PNQPTF۽ա݅੄জਸٜ݅যࠁҊर׮  +FUQBDL$PNQPTF੄׮নೠӝמਸ؊ঌইࠁҊर׮  +FUQBDL$PNQPTF੄ղࠗز੘੉ҾӘೞ׮ 👉%JTDPSEࢿ࠼

  56. хࢎ೤פ׮ ੉೐ۨઃప੉࣌਷IUUQTTVOHCJONBTIVQীࢲ׮दࠅࣻ੓णפ׮ ੉೐ۨઃప੉࣌ীחషझ౱ীࢲઁҕೠషझಕ੉झо੸ਊغয੓णפ׮ QnA🙋