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
180
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
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
880
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
560
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
290
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
200
Contextとはなにか
Avatar for chiroruxx chiroruxx
1
330
技術的負債解消で開発者の未来を開く- AIの力でコード刷新
Avatar for Kato Ryo kmd2kmd
0
110
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
740
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
150
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
400
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
140
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
840
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
150

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
200
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
820
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
700
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
350
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k

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🙋