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
420
Kotlin Compiler Plugin 맛보기
Avatar for Ji Sungbin jisungbin
0
200
2024 컴포즈 정원사
Avatar for Ji Sungbin jisungbin
0
340
설레발 주도 개발
Avatar for Ji Sungbin jisungbin
0
330
Deep Dive into Jetpack Compose State
Avatar for Ji Sungbin jisungbin
0
600
[단축본] 컴포즈 내부로 이해하는 최적화 비법
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
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.7k
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
260
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
8
3k
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
170
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
130
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
210
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
280
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.8k
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
490
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
210
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
730
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
280

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
940
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
610
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
250
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
490
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
530
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k

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🙋