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
390
Kotlin Compiler Plugin 맛보기
Avatar for Ji Sungbin jisungbin
0
190
2024 컴포즈 정원사
Avatar for Ji Sungbin jisungbin
0
340
설레발 주도 개발
Avatar for Ji Sungbin jisungbin
0
310
Deep Dive into Jetpack Compose State
Avatar for Ji Sungbin jisungbin
0
580
[단축본] 컴포즈 내부로 이해하는 최적화 비법
Avatar for Ji Sungbin jisungbin
0
170
Jetpack Compose: How it works?
Avatar for Ji Sungbin jisungbin
0
380
우리가 기술 블로그를 시작해야 하는 이유
Avatar for Ji Sungbin jisungbin
0
400
2023 SBLDC Welcome
Avatar for Ji Sungbin jisungbin
0
1.3k

Other Decks in Programming

See All in Programming
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
Avatar for HideyukiKitao panda728
PRO
2
250
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
350
SLOをサービス品質の共通言語にするために 取り組んできたこと
Avatar for wakanaction wakana0222
0
480
1年で人数1.5倍、PR数5.5倍増。 品質とアウトカムはどうなったか、 何が効いたか
Avatar for ike ike002jp
0
120
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
140
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
150
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
470
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
14
7.4k
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
Avatar for ANDPAD inc andpad
0
110
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
260
act2-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
110
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
6
480

Featured

See All Featured
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
560
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
210
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
390
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
610
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k

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🙋