{"id":388026,"date":"2023-09-15T04:40:02","date_gmt":"2023-09-15T03:40:02","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=kotlin&p=388026"},"modified":"2023-09-15T04:40:09","modified_gmt":"2023-09-15T03:40:09","slug":"compose-multiplatform-1-5-0-release","status":"publish","type":"kotlin","link":"https:\/\/blog.jetbrains.com\/ko\/kotlin\/2023\/09\/compose-multiplatform-1-5-0-release\/","title":{"rendered":"Compose Multiplatform 1.5.0 \ucd9c\uc2dc"},"content":{"rendered":"

\uc624\ub298\ubd80\ud130 Compose Multiplatform 1.5.0\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ub9b4\ub9ac\uc2a4\ub294 Kotlin\uc6a9 Jetpack Compose \uc120\uc5b8\uc801 UI \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud558\uc5ec Android\ub97c \ub118\uc5b4 \ub370\uc2a4\ud06c\ud1b1, iOS, \uc6f9\uc73c\ub85c \ud655\uc7a5\ub429\ub2c8\ub2e4. \ub370\uc2a4\ud06c\ud1b1 \ubc84\uc804\uc740 \uc548\uc815\uc801\uc774\uace0 iOS\ub294 \uc54c\ud30c \ubc84\uc804\uc774\uba70 \uc6f9 \uc9c0\uc6d0\uc740 \uc2e4\ud5d8\uc801 \ub2e8\uacc4\uc785\ub2c8\ub2e4. \uc804\uccb4 \uc18c\uac1c \ub0b4\uc6a9\uc744 \ubcf4\ub824\uba74 Compose Multiplatform \uc6f9\uc0ac\uc774\ud2b8<\/a>\ub97c \ucc38\uc870\ud558\uc138\uc694.<\/p>\n

\uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc758 \uc8fc\uc694 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

    \n
  1. Dialog, Popup \ubc0f WindowInsets API\uac00 \uc774\uc81c \uacf5\ud1b5 \ucf54\ub4dc\uc5d0 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/li>\n
  2. iOS \uc2a4\ud06c\ub864\uacfc \uad00\ub828\ud558\uc5ec \ub9ac\uc18c\uc2a4 \uad00\ub9ac\uc640 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uac00 \uac1c\uc120\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n
  3. UI \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub370\uc2a4\ud06c\ud1b1\uc5d0\uc11c \uc548\uc815\ud654\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n

    \uc774 \ub9b4\ub9ac\uc2a4\ub294 \uc131\ub2a5 \uac1c\uc120\uc5d0 \uc911\uc810\uc744 \ub454 Jetpack Compose 1.5<\/a>\ub97c \uae30\ubc18\uc73c\ub85c \ud569\ub2c8\ub2e4. \ub610\ud55c Material Design 3\uc758 1.1 \ub9b4\ub9ac\uc2a4<\/a>\uc5d0\ub3c4 \uae30\ubc18\uc744 \ub461\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 \ub0a0\uc9dc \uc120\ud0dd\uae30 \ubc0f \uc2dc\uac04 \uc120\ud0dd\uae30\uc640 \uac19\uc740 \uc0c8\ub85c\uc6b4 \uad6c\uc131 \uc694\uc18c\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/p>\n

    Compose Multiplatform 1.5.0 \uc0ac\uc6a9\ud574 \ubcf4\uae30<\/a><\/p>\n

    Compose Multiplatform\uc740 Dialog, Popup \ubc0f WindowInsets\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4<\/h2>\n

    \ubc84\uc804 1.5\ubd80\ud130 Compose Multiplatform\uc5d0\uc11c \ub300\ud654\uc0c1\uc790\uc640 \ud31d\uc5c5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub300\ud654\uc0c1\uc790\ub294 \uc0ac\uc6a9\uc790\uac00 \ud56d\ubaa9\uc744 \uc120\ud0dd\ud558\uac70\ub098 \uc77c\ubd80 \ub370\uc774\ud130\ub97c \uc785\ub825\ud558\ub294 \ubaa8\ub2ec \uc774\ubca4\ud2b8\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ubc18\uba74\uc5d0 \ud31d\uc5c5\uc740 \uc120\ud0dd\uc801 \uae30\ub2a5 \uc81c\uacf5\uacfc \uac19\uc740 \ube44 \ubaa8\ub2ec \ub3d9\uc791\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n

    \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 \uae30\ubcf8 \ud0c0\uc785\uc778 Dialog<\/a>\uc640 Popup<\/a>\uc740 \ubb3c\ub860 DropdownMenu<\/a>\uc640 AlertDialog<\/a>\ub3c4 \uacf5\ud1b5 \ucf54\ub4dc \ub0b4\uc5d0\uc11c \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc5d0 \ub530\ub77c \ud50c\ub7ab\ud3fc\ubcc4 \uae30\ub2a5\uc744 \uc81c\uacf5\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n

    \uc608\ub97c \ub4e4\uc5b4, \uc544\ub798 Composable\uc740 \uc644\uc804\ud788 \uacf5\ud1b5 \ucf54\ub4dc\ub85c \uc791\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n

    \n@Composable\nfun CommonDialog() {\n   var isDialogOpen by remember { mutableStateOf(false) }\n   Button(onClick = { isDialogOpen = true }) {\n       Text("Open")\n   }\n   if (isDialogOpen) {\n       AlertDialog(\n           onDismissRequest = { },\n           confirmButton = {\n               Button(onClick = { isDialogOpen = false }) {\n                   Text("OK")\n               }\n           },\n           title = { Text("Alert Dialog") },\n           text = { Text("Lore ipsum") },\n       )\n   }\n}\n<\/pre>\n\n\n
    \uc774\ub294 \ub370\uc2a4\ud06c\ud1b1, Android \ubc0f iOS\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/p>\n
    \"\ub370\uc2a4\ud06c\ud1b1\uc758<\/p>\n
    \"Android<\/p>\n
    \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc138 \ubc88\uc9f8 \uae30\ub2a5\uc740 WindowInsets API<\/a>\ub85c, \ucf58\ud150\uce20\uac00 \uc2dc\uc2a4\ud15c UI\uc640 \uacb9\uce58\uc9c0 \uc54a\ub3c4\ub85d \ud558\uae30 \uc704\ud574 \uc5bc\ub9c8\ub098 \uc870\uc815\ud574\uc57c \ud558\ub294\uc9c0\ub97c \uc124\uba85\ud569\ub2c8\ub2e4. \ubc84\uc804 1.5\ubd80\ud130 \uc774 \uae30\ub2a5\uc740 Compose Multiplatform\uc5d0 \ud3ec\ud568\ub418\uc5b4 Android\uc640 iOS \ubaa8\ub450\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    WindowInsets API\ub97c \uc0ac\uc6a9\ud558\uba74 \ub178\uce58 \ub4a4\uc5d0\uc11c Compose Multiplatform\uc744 \ud1b5\ud574 \ubc30\uacbd \ucf58\ud150\uce20\ub97c \uadf8\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub54c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc704\uc5d0 \ud770\uc0c9 \uc120\uc774 \ucd94\uac00\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc544\ub798 \uc2a4\ud06c\ub9b0\uc0f7\uc740 \uc774\ub85c \uc778\ud55c \ucc28\uc774\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n
    \"WindowInsets<\/figure>\n
    iOS \uac1c\uc120 \uc0ac\ud56d<\/h2>\n
    iOS \ud50c\ub7ab\ud3fc\uc740 \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c \ud2b9\ud788 \uc911\uc810\uc744 \ub450\uc5c8\ub358 \ub9cc\ud07c, \ub2e4\uc591\ud55c \uac1c\uc120 \uc0ac\ud56d\uc774 \uc801\uc6a9\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc2a4\ud06c\ub864 \ub3d9\uc791\uc774 \ud50c\ub7ab\ud3fc\uc758 \ubaa8\uc591\uacfc \ub290\ub08c\uc744 \ub530\ub974\uace0, \ub9ac\uc18c\uc2a4 \uad00\ub9ac\uac00 \ub2e8\uc21c\ud654\ub418\uc5c8\uc73c\uba70, \ud14d\uc2a4\ud2b8 \ucc98\ub9ac\uac00 \ud5a5\uc0c1\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n
    \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \uc2a4\ud06c\ub864<\/h3>\n
    \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 iOS \uc2a4\ud06c\ub864\uc774 \uae30\ubcf8 \uc2a4\ud06c\ub864\uacfc \uac19\uc774 \uc791\ub3d9\ud558\ub3c4\ub85d \uc870\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud45c\uc2dc\ud560 \ud56d\ubaa9\uc758 \uc218 \ubc0f\/\ub610\ub294 \ud06c\uae30\uac00 \uc0ac\uc6a9 \uac00\ub2a5\ud55c \uacf5\uac04\uc744 \ucd08\uacfc\ud558\ub294 \ucf54\ub4dc\uac00 \uc788\ub2e4\uace0 \uac00\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n
    \n@Composable\nfun NaturalScrolling() {\n   val items = (1..30).map { "Item $it" }\n   LazyColumn {\n       items(items) {\n           Text(\n               text = it,\n               fontSize = 30.sp,\n               modifier = Modifier.padding(start = 20.dp)\n           )\n       }\n   }\n}\n<\/pre>\n\n\n
    \uc2a4\ud06c\ub864\ud558\uba74 \uae30\ubcf8 iPhone \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \ud56d\ubaa9\uc774 \ud654\uba74 \uac00\uc7a5\uc790\ub9ac\uc5d0\uc11c \ud280\uc5b4\ub098\uc635\ub2c8\ub2e4.<\/p>\n
    \"iOS\uc5d0\uc11c<\/p>\n
    \ub3d9\uc801 \ud0c0\uc785 \uc9c0\uc6d0<\/h3>\n
    iOS\uc758 \ub3d9\uc801 \ud0c0\uc785<\/a> \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uba74 \uc0ac\uc6a9\uc790\uac00 \uc120\ud638\ud558\ub294 \uae00\uaf34 \ud06c\uae30\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc989, \ubcf4\uae30 \uc27d\ub3c4\ub85d \ub354 \ud06c\uac8c \ud558\uac70\ub098 \ub354 \ub9ce\uc740 \ucf58\ud150\uce20\uc5d0 \ub9de\uac8c \ub354 \uc791\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc571 \ub0b4\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ud14d\uc2a4\ud2b8 \ud06c\uae30\ub294 \uc774 \uc2dc\uc2a4\ud15c \uc124\uc815\uc744 \uae30\uc900\uc73c\ub85c \ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
    \uc774 \uae30\ub2a5\uc774 \uc774\uc81c Compose Multiplatform\uc5d0\uc11c \uc9c0\uc6d0\ub429\ub2c8\ub2e4. \ud14d\uc2a4\ud2b8 \ud06c\uae30 \uc870\uc815\uc5d0 \uc0ac\uc6a9\ub418\ub294 \uc99d\ubd84\uc740 \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \uac83\uacfc \ub3d9\uc77c\ud558\ubbc0\ub85c \ub3d9\uc791\ub3c4 \ub3d9\uc77c\ud569\ub2c8\ub2e4.<\/p>\n
    \uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c Composable\uc744 \uc0dd\uac01\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n
    \n@Composable\nfun DynamicType() {\n   Text("This is some sample text", fontSize = 30.sp)\n}\n<\/pre>\n\n\n
    \uae30\ubcf8 \uc77d\uae30 \ud06c\uae30\uac00 \ucd5c\uc18c\ub85c \uc124\uc815\ub418\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/p>\n
    \"Compose<\/figure>\n
    \ubc18\uba74\uc5d0 \uc120\ud638\ud558\ub294 \uc77d\uae30 \ud06c\uae30\uac00 \ucd5c\ub300\uc77c \ub54c\uc758 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
    \"Compose<\/figure>\n
    \uc0c8\ub85c\uace0\uce68 \ube48\ub3c4\uac00 \ub192\uc740 \ub514\uc2a4\ud50c\ub808\uc774 \uc9c0\uc6d0<\/h3>\n
    \uc774\uc804 \ubc84\uc804\uc5d0\uc11c\ub294 \ucd5c\ub300 \ud504\ub808\uc784 \uc18d\ub3c4\uac00 60FPS\uc600\uc2b5\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 120Hz \ud654\uba74\uc744 \uc0ac\uc6a9\ud558\ub294 \uae30\uae30\uc5d0\uc11c UI\uac00 \ub290\ub824\uc9c0\uace0 \uc9c0\uc5f0\ub418\ub294 \uacbd\uc6b0\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 \ucd5c\ub300 120FPS\uc758 \ud504\ub808\uc784 \uc18d\ub3c4\uac00 \uc9c0\uc6d0\ub429\ub2c8\ub2e4.<\/p>\n
    \ub2e8\uc21c\ud654\ub41c \ub9ac\uc18c\uc2a4 \uad00\ub9ac<\/h3>\n
    1.5.0\ubd80\ud130 iOS \uc18c\uc2a4 \uc138\ud2b8\uc758 resources \ud3f4\ub354\uc5d0 \uc788\ub294 \ubaa8\ub4e0 \uc560\uc14b\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ubc88\ub4e4\uc5d0 \ubcf5\uc0ac\ub429\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 src\/commonMain\/resources\/<\/code>\uc5d0 \ub123\uc73c\uba74 \ud574\ub2f9 \ud30c\uc77c\uc774 \ubc88\ub4e4\uc5d0 \ubcf5\uc0ac\ub418\uc5b4 \ucf54\ub4dc\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    CocoaPods\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0, \ub354 \uc774\uc0c1 Gradle \ube4c\ub4dc \ud30c\uc77c\uc5d0\uc11c \uc774 \ub3d9\uc791\uc744 \uad6c\uc131\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \ub610\ud55c \uc218\uc815 \ud6c4 \uc560\uc14b\uc744 \ubcf5\uc0ac\uc2dc\ud0a4\uae30 \uc704\ud574 podInstall<\/em>\uc744 \ub2e4\uc2dc \ud638\ucd9c\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n
    \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 \uc544\ub798 \ud45c\uc2dc\ub41c \ub300\ub85c \ube4c\ub4dc \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ub3d9\uc791\uc744 \uba85\uc2dc\uc801\uc73c\ub85c \uad6c\uc131\ud558\ub824\uace0 \ud558\uba74 \uc624\ub958\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n\n\n
    \nkotlin {\n    cocoapods {\n        extraSpecAttributes["resources"] = "..."\n    }\n}\n<\/pre>\n\n\n
    \uc790\uc138\ud55c \ub0b4\uc6a9\uacfc \uae30\uc874 \ucf54\ub4dc\ub97c \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud558\uae30 \uc704\ud55c \uc9c0\uce68\uc740 \uc774 \ubb38\uc11c\ub97c \ucc38\uc870<\/a>\ud558\uc138\uc694.<\/p>\n
    TextField \uac1c\uc120<\/h3>\n
    \uc774\uc804 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 \ud14d\uc2a4\ud2b8\ub97c \uc785\ub825\ud558\uba74 \uc6d0\uce58 \uc54a\ub294 \ub3d9\uc791\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \ub450 \uac00\uc9c0 \uc0c1\ud669\uc774 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \uc5c6\uc560\ub3c4\ub85d TextField<\/code>\uac00 \uac1c\uc120\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n
    \ub300\ubb38\uc790 \uc0ac\uc6a9 \ubb38\uc81c<\/h4>\n
    \uccab\uc9f8, TextField<\/code>\ub294 \uc774\uc81c \uccab \uae00\uc790\uc758 \uc790\ub3d9 \ub300\ubb38\uc790 \ud45c\uc2dc\uac00 \ube44\ud65c\uc131\ud654\ub41c \uacbd\uc6b0 \uc774\ub97c \uc778\uc2dd\ud569\ub2c8\ub2e4. \uc774\ub294 \uc608\ub97c \ub4e4\uc5b4 \ube44\ubc00\ubc88\ud638\ub97c \uc785\ub825\ud560 \ub54c \uc911\uc694\ud569\ub2c8\ub2e4. \uc774 \ub3d9\uc791\uc740 KeyboardOptions \uc778\uc218\ub97c \ud1b5\ud574 \uc81c\uc5b4\ud569\ub2c8\ub2e4.<\/p>\n
    \uc774\ub97c \uc124\uba85\ud55c \uc544\ub798 \ucef4\ud3ec\uc800\ube14\uc744 \uc0b4\ud3b4\ubcf4\uc138\uc694.<\/p>\n\n\n
    \nfun TextFieldCapitalization() {\n   var text by remember { mutableStateOf("") }\n   TextField(\n       value = text,\n       onValueChange = { text = it },\n       keyboardOptions = KeyboardOptions(\n           capitalization = KeyboardCapitalization.Sentences,\n           autoCorrect = false,\n           keyboardType = KeyboardType.Ascii,\n       ),\n   )\n}\n<\/pre>\n\n\n
    \uc67c\ucabd \uc774\ubbf8\uc9c0\ub294 \ub300\ubb38\uc790 \ud45c\uc2dc \ud504\ub85c\ud37c\ud2f0\uac00 KeyboardCapitalization.None<\/code>\uc73c\ub85c \uc124\uc815\ub41c \uacbd\uc6b0\uc5d0 \ubc1c\uc0dd\ud558\ub294 \uc0c1\ud669\uc744 \ubcf4\uc5ec\uc8fc\uace0, \uc624\ub978\ucabd \uc774\ubbf8\uc9c0\ub294 \uac12\uc774 KeyboardCapitalization.Sentences<\/code>\uc778 \uacbd\uc6b0 \ubc1c\uc0dd\ud558\ub294 \uc0c1\ud669\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n
    \"TextField\ub97c<\/p>\n
    \ud558\ub4dc\uc6e8\uc5b4 \ud0a4\ubcf4\ub4dc<\/h4>\n
    \ub450 \ubc88\uc9f8 \uc0c1\ud669\uc740 \ud558\ub4dc\uc6e8\uc5b4 \ud0a4\ubcf4\ub4dc\uc640 \uad00\ub828\ub41c \uac83\uc785\ub2c8\ub2e4. \uc774\uc804 \ubc84\uc804\uc5d0\uc11c\ub294 \ud558\ub4dc\uc6e8\uc5b4 \ud0a4\ubcf4\ub4dc\ub97c \uc0ac\uc6a9\ud560 \ub54c Enter<\/strong>\ub97c \ub204\ub974\uba74 \uc5ec\ub7ec \uac1c\uc758 \uc904\uc774 \uc0c8\ub85c \uc0dd\uaca8\ub0ac\uace0 \ubc31\uc2a4\ud398\uc774\uc2a4<\/strong>\ub97c \ub204\ub974\uba74 \uc5ec\ub7ec \ubc88 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 \uc774\uc81c \uc774\ub7ec\ud55c \uc774\ubca4\ud2b8\uac00 \uc62c\ubc14\ub974\uac8c \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/p>\n
    \ub370\uc2a4\ud06c\ud1b1 \uac1c\uc120 \uc0ac\ud56d<\/h2>\n
    \uc548\uc815\ud654\ub41c \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c<\/h3>\n
    \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c\ub294 Compose for Desktop\uc5d0\uc11c \ud14c\uc2a4\ud2b8 \uc9c0\uc6d0\uc774 \uc548\uc815\ud654\ub418\uc5c8\uc2b5\ub2c8\ub2e4. Jetpack Compose\ub294 Compose \ucf54\ub4dc\uc758 \ub3d9\uc791\uc744 \uac80\uc99d\ud558\uae30 \uc704\ud55c \ud14c\uc2a4\ud2b8 API \uc138\ud2b8<\/a>\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c API\ub294 \ub370\uc2a4\ud06c\ud1b1\uc73c\ub85c \ud3ec\ud305\ub418\uc5c8\uc73c\uba70 \uc774\uc804 \ub9b4\ub9ac\uc2a4\uc5d0\uc11c \uc0ac\uc6a9 \uac00\ub2a5\ud588\uc9c0\ub9cc \uc81c\ud55c\uc801\uc774\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uc774\ub7ec\ud55c \uc81c\ud55c \uc0ac\ud56d\uc774 \uc81c\uac70\ub418\uc5b4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ub300\ud55c \ud3ec\uad04\uc801\uc778 UI \ud14c\uc2a4\ud2b8\ub97c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    \ud14c\uc2a4\ud2b8 \uae30\ub2a5\uc744 \uac04\ub7b5\ud558\uac8c \uc54c\uc544\ubcf4\uae30 \uc704\ud574 \uac04\ub2e8\ud55c UI\ub97c \ub9cc\ub4e4\uace0 \ud14c\uc2a4\ud2b8\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc608\uc2dc Composable\uc785\ub2c8\ub2e4.<\/p>\n\n\n
    \n@Composable\nfun App() {\n   var searchText by remember { mutableStateOf("cats") }\n   val searchHistory = remember { mutableStateListOf<String>() }\n\n\n   Column(modifier = Modifier.padding(30.dp)) {\n       TextField(\n           modifier = Modifier.testTag("searchText"),\n           value = searchText,\n           onValueChange = {\n               searchText = it\n           }\n       )\n       Button(\n           modifier = Modifier.testTag("search"),\n           onClick = {\n               searchHistory.add("You searched for: $searchText")\n           }\n       ) {\n           Text("Search")\n       }\n       LazyColumn {\n           items(searchHistory) {\n               Text(\n                   text = it,\n                   fontSize = 20.sp,\n                   modifier = Modifier.padding(start = 10.dp).testTag("attempt")\n               )\n           }\n       }\n   }\n}\n<\/pre>\n\n\n
    \uc5ec\uae30\uc11c\ub294 \uac80\uc0c9 \uc2dc\ub3c4\ub97c \uae30\ub85d\ud558\ub294 \uac04\ub2e8\ud55c UI\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
    \"\ud14c\uc2a4\ud2b8\uc6a9\uc73c\ub85c<\/p>\n
    Modifier.testTag<\/code>\ub294 TextField<\/code>, Button<\/code> \ubc0f LazyColumn<\/code>\uc758 \ud56d\ubaa9\uc5d0 \uc774\ub984\uc744 \ud560\ub2f9\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n
    \uadf8\ub7f0 \ub2e4\uc74c JUnit \ud14c\uc2a4\ud2b8 \ub0b4\uc5d0\uc11c UI\ub97c \uc870\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n
    \nclass SearchAppTest {\n   @get:Rule\n   val compose = createComposeRule()\n\n\n   @Test\n   fun `Should display search attempts`() {\n       compose.setContent {\n           App()\n       }\n\n\n       val testSearches = listOf("cats", "dogs", "fish", "birds")\n\n\n       for (text in testSearches) {\n           compose.onNodeWithTag("searchText").performTextReplacement(text)\n           compose.onNodeWithTag("search").performClick()\n       }\n\n\n       val lastAttempt = compose\n           .onAllNodesWithTag("attempt")\n           .assertCountEquals(testSearches.size)\n           .onLast()\n\n\n       val expectedText = "You searched for: ${testSearches.last()}"\n       lastAttempt.assert(hasText(expectedText))\n   }\n}\n<\/pre>\n\n\n
    Compose \uad00\ub828 JUnit \uaddc\uce59\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc74c\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n
      \n
    1. UI\uc758 \ucf58\ud150\uce20\ub97c App Composable\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/li>\n
    2. onNodeWithTag<\/code>\ub97c \ud1b5\ud574 \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uc640 \ubc84\ud2bc\uc758 \uc704\uce58\ub97c \ucc3e\uc2b5\ub2c8\ub2e4.<\/li>\n
    3. \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uc5d0 \uc0d8\ud50c \uac12\uc744 \ubc18\ubcf5\ud574\uc11c \uc785\ub825\ud558\uace0 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n
    4. onAllNodesWithTag<\/code>\ub97c \ud1b5\ud574 \uc0dd\uc131\ub41c \ubaa8\ub4e0 \ud14d\uc2a4\ud2b8 \ub178\ub4dc\ub97c \ucc3e\uc2b5\ub2c8\ub2e4.<\/li>\n
    5. \ud604\uc7ac \ud14d\uc2a4\ud2b8 \ub178\ub4dc \uc218\uac00 \uc0dd\uc131\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud558\uace0 \ub9c8\uc9c0\ub9c9 \ub178\ub4dc\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/li>\n
    6. \uc774 \ub9c8\uc9c0\ub9c9 \uc2dc\ub3c4\uc5d0 \ud544\uc694\ud55c \uba54\uc2dc\uc9c0\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
      Swing \uc0c1\ud638 \uc6b4\uc6a9\uc131 \uac1c\uc120<\/h3>\n
      \uc774\ubc88 \ub9b4\ub9ac\uc2a4\uc5d0\ub294 Swing \uad6c\uc131 \uc694\uc18c \ub0b4\uc5d0 \uad6c\uc131 \ud328\ub110 \ub80c\ub354\ub9c1\uc744 \uac1c\uc120\ud558\uae30 \uc704\ud55c \uc2e4\ud5d8\uc801 \uc9c0\uc6d0\uc774 \ub3c4\uc785\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud328\ub110\uc744 \ud45c\uc2dc\ud558\uac70\ub098 \uc228\uae30\uac70\ub098 \ud06c\uae30\ub97c \uc870\uc815\ud560 \ub54c \uc804\ud658 \ub80c\ub354\ub9c1 \ubb38\uc81c\uac00 \ubc29\uc9c0\ub429\ub2c8\ub2e4. \ub610\ud55c Swing \uad6c\uc131 \uc694\uc18c\uc640 \uad6c\uc131 \ud328\ub110\uc744 \uacb0\ud569\ud560 \ub54c \uc801\uc808\ud55c \ub808\uc774\uc5b4 \uad6c\uc131\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc774\uc81c Swing \uad6c\uc131 \uc694\uc18c\ub97c ComposePanel<\/code> \uc704\ub098 \uc544\ub798\uc5d0 \ud45c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
      \uc774\ub97c \uc124\uba85\ud55c \uc544\ub798 \uc608\ub97c \uc0b4\ud3b4\ubcf4\uc138\uc694.<\/p>\n\n\n
      \nfun main() {\n   System.setProperty("compose.swing.render.on.graphics", "true")\n   SwingUtilities.invokeLater {\n       val composePanel = ComposePanel().apply {\n           setContent {\n               Box(modifier = Modifier.background(Color.Black).fillMaxSize())\n           }\n       }\n\n\n       val popup = object : JComponent() { ... }\n\n\n       val rightPanel = JLayeredPane().apply {\n           add(composePanel)\n           add(popup)\n           ...\n       }\n\n\n       val leftPanel = JPanel().apply { background = CYAN }\n\n\n       val splitter = JSplitPane(..., leftPanel,rightPanel)\n\n\n       JFrame().apply {\n           add(splitter)\n           setSize(600, 600)\n           isVisible = true\n       }\n   }\n}\n<\/pre>\n\n\n
      \uc774 \ucf54\ub4dc\uc5d0\uc11c\ub294 \ub2e4\uc74c \ucf58\ud150\uce20\ub85c \uad6c\uc131\ub41c Swing JFrame<\/code>\uc744 \uc0dd\uc131\ud558\uace0 \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n
        \n
      1. JFrame\uc5d0\ub294 \uc218\uc9c1 \ubd84\ud560\uc120\uc774 \uc788\ub294 JSplitPane<\/code>\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
      2. \ubd84\ud560 \ucc3d \uc67c\ucabd\uc5d0\ub294 \uccad\ub85d\uc0c9\uc758 \ud45c\uc900 JPanel<\/code>\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
      3. \uc624\ub978\ucabd\uc5d0\ub294 \ub450 \uac1c\uc758 \ub808\uc774\uc5b4\ub85c \uad6c\uc131\ub41c JLayeredPane<\/code>\uc774 \uc788\uc2b5\ub2c8\ub2e4.\n