뚝딱뚝딱 20분 UI

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. View Slide

8. View Slide

9. ࢤ࢑ࢿ੷ೞ
   

   View Slide

10. tݺ۸ഋ6*u
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. +FUQBDL$PNQPTF
    (PPHMF*0
    

    View Slide

16. 4XJGU6*
    88%$
    

    View Slide

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

    View Slide

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

    View Slide

19. View Slide

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

    View Slide

21. tࢶ঱ഋ6*u
    

    View Slide

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

    View Slide

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

    View Slide

24. 🤩ࢶ঱ഋ6*
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 🏷️5FYU
    ޙ੗಴द
    

    View Slide

31. 🏷️*NBHF
    Ӓܿ಴द
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 = {
    
    
    
    
    

    View Slide

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 = {
    
    
    
    
    

    View Slide

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 = {
    
    
    
    
    

    View Slide

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 = {
    
    
    
    
    

    View Slide

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
    
    
    )
    
    
    
    

    View Slide

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
    
    
    )
    
    
    
    

    View Slide

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
    
    
    )
    
    
    
    

    View Slide

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
    
    
    )
    
    
    
    

    View Slide

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(
    
    
    
    

    View Slide

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(
    
    
    
    

    View Slide

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(
    
    
    
    

    View Slide

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(
    
    
    
    

    View Slide

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
    
    
    )
    
    
    }
    
    
    }
    
    
    )
    
    
    

    View Slide

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
    
    
    )
    
    
    }
    
    
    }
    
    
    )
    
    
    

    View Slide

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
    
    
    )
    
    
    }
    
    
    }
    
    
    )
    
    
    

    View Slide

54. 🤓৮ࢿ
    ௏٘חױ઴
    

    View Slide

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

    View Slide

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

    View Slide