Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Other Decks in Programming

See All in Programming
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
260
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
640
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
130
cdk deploy JawsSonic #MARATHONしながらAWSリソースをデプロイしてみよう
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
140
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
410
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
290
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
1
340
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
120
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
730
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
190
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
Avatar for otouto otouto
0
310
すこし踏み込む CancellationToken
Avatar for tkym htkym
1
510

Featured

See All Featured
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
570
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.4k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
470
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
370
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
530
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
65k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
830
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.1k

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🙋