{"id":25814,"date":"2024-10-27T05:48:58","date_gmt":"2024-10-27T05:48:58","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25814"},"modified":"2024-11-26T07:56:04","modified_gmt":"2024-11-26T07:56:04","slug":"swiftui-%eb%b0%a9%ec%8b%9d%ec%9c%bc%eb%a1%9c-%ec%95%84%ec%9d%b4%ed%8f%b0-%ea%b0%a4%eb%9f%ac%eb%a6%ac-%ec%95%b1%ec%97%90-%ed%95%80%ec%b9%98-%ea%b8%b0%eb%8a%a5-%ec%b6%94%ea%b0%80%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25814\/","title":{"rendered":"SwiftUI \ubc29\uc2dd\uc73c\ub85c \uc544\uc774\ud3f0 \uac24\ub7ec\ub9ac \uc571\uc5d0 \ud540\uce58 \uae30\ub2a5 \ucd94\uac00\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\n
\n

\uc791\uc131\uc790: \uc870\uad11\ud615 | \ub0a0\uc9dc: [\ub144\/\uc6d4\/\uc77c]<\/p>\n<\/header>\n

\n

1. \uc11c\ub860<\/h2>\n

\n \ud604\ub300 \ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc740 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \uc571 \uc0ac\uc6a9\uc790\uac00 \uc778\ud130\ud398\uc774\uc2a4\uc640 \uc0c1\ud638\uc791\uc6a9\ud560 \ub54c \ub290\ub07c\ub294
\n \uc9c1\uad00\uc131\uc740 \uc571\uc758 \uc131\uacf5 \uc5ec\ubd80\ub97c \uc88c\uc6b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc774\uc720\ub85c, \uc2a4\uc704\ud504\ud2b8(Swift)\uc640 SwiftUI\ub97c \uc774\uc6a9\ud55c
\n \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c\uc774 \uc810\uc810 \ub354 \uc120\ud638\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788, \uac24\ub7ec\ub9ac \uc571\uc740 \uc774\ubbf8\uc9c0\ub098 \ube44\ub514\uc624\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uae30\ubcf8\uc801\uc778
\n \ud615\ud0dc\uc758 \uc571\uc774\uc9c0\ub9cc, \uc0ac\uc6a9\uc790 \uac04\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ub354 \uc9c1\uad00\uc801\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574 \ud540\uce58 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.
\n \uc774 \uae00\uc5d0\uc11c\ub294 SwiftUI\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac24\ub7ec\ub9ac \uc571\uc5d0 \ud540\uce58 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

2. SwiftUI\ub780?<\/h2>\n

\n SwiftUI\ub294 \uc560\ud50c\uc774 \ubc1c\ud45c\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub85c, iOS, macOS, watchOS \ubc0f tvOS \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c
\n \uad6c\ucd95\ud558\ub294 \ub370 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. SwiftUI\ub294 \uc120\uc5b8\uc801 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uc744 \ucc44\ud0dd\ud558\uace0 \uc788\uc5b4, \uac1c\ubc1c\uc790\ub294 UI\uc758
\n \uc0c1\ud0dc\ub97c \uc815\uc758\ud558\uace0, \uc774 \uc0c1\ud0dc\uc5d0 \ub530\ub77c \ud654\uba74\uc774 \uc790\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4. \ub610\ud55c SwiftUI\ub294 \ub2e4\uc591\ud55c UI \uc694\uc18c\uc640
\n \uc560\ub2c8\uba54\uc774\uc158, \uc81c\uc2a4\ucc98 \uc778\uc2dd\uc744 \uc704\ud574 \uac04\ub2e8\ud55c \ucf54\ub4dc\ub97c \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \ubcf5\uc7a1\ud55c \uc791\uc5c5\uc744 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218
\n \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

3. \uc544\uc774\ud3f0 \uac24\ub7ec\ub9ac \uc571\uc758 \uad6c\uc870<\/h2>\n

\n \uac24\ub7ec\ub9ac \uc571\uc758 \uae30\ubcf8 \uad6c\uc870\ub294 \uc5ec\ub7ec \uac00\uc9c0 \uc911\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uc774 \uad6c\uc870\ub294 \ub300\uccb4\ub85c \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:\n <\/p>\n

    \n
  1. \uba54\uc778 \ubdf0(MaiView):<\/strong> \uac24\ub7ec\ub9ac\uc758 \uc804\uccb4 \ub808\uc774\uc544\uc6c3<\/li>\n
  2. \uc774\ubbf8\uc9c0 \ubdf0(ImageView):<\/strong> \uac1c\ubcc4 \uc774\ubbf8\uc9c0\ub97c \ud45c\uc2dc<\/li>\n
  3. \uac24\ub7ec\ub9ac \ub370\uc774\ud130(GalleryData):<\/strong> \uc774\ubbf8\uc9c0\uc758 \uc18c\uc2a4 \ubc0f \uba54\ud0c0\ub370\uc774\ud130<\/li>\n<\/ol>\n<\/section>\n
    \n

    4. \ud540\uce58 \uae30\ub2a5 \uc18c\uac1c<\/h2>\n

    \n \ud540\uce58 \uae30\ub2a5\uc740 \uc774\ubbf8\uc9c0 \ud655\ub300\/\ucd95\uc18c\ub97c \uac00\ub2a5\ud558\uac8c \ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uc811\uadfc\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\ub294
    \n \uc774\ubbf8\uc9c0\uc758 \uc138\ubd80\uc0ac\ud56d\uc744 \ub354 \uc27d\uac8c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud540\uce58 \uc81c\uc2a4\ucc98\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \ub450 \uc190\uac00\ub77d\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud654\uba74\uc5d0\uc11c
    \n \ud655\ub300 \ub610\ub294 \ucd95\uc18c\ud558\ub294 \ub3d9\uc791\uc73c\ub85c \uad6c\ud604\ub429\ub2c8\ub2e4. SwiftUI\uc5d0\uc11c\ub294 \uc774\ub97c Gesture \uad6c\uc870\uccb4\ub97c \ud1b5\ud574 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

    \n

    5. SwiftUI \uae30\ubcf8 \uc124\uc815 \ubc0f \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h2>\n

    \n \uba3c\uc800 Xcode\ub97c \uc5f4\uace0 \uc0c8\ub85c\uc6b4 SwiftUI \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc544\ub798 \ub2e8\uacc4\ub97c \ub530\ub77c \ud574\ubcf4\uc138\uc694:\n <\/p>\n

      \n
    1. Xcode\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/li>\n
    2. \u2018Create a new Xcode project\u2019 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n
    3. Template\uc5d0\uc11c \u2018App\u2019 \uc120\ud0dd \ud6c4 \u2018Next\u2019\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n
    4. Product Name\uc5d0 \uc801\ub2f9\ud55c \uc774\ub984 \uc785\ub825 \ud6c4 Interface\uc5d0\uc11c \u2018SwiftUI\u2019\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n
    5. \u2018Next\u2019\ub97c \ud074\ub9ad\ud558\uace0 \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub97c \uc120\ud0dd\ud55c \ud6c4 \u2018Create\u2019\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n<\/section>\n
      \n

      6. \uc774\ubbf8\uc9c0 \ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\uae30 \uc704\ud55c UI \uad6c\ud604<\/h2>\n

      \n \uac24\ub7ec\ub9ac \uc571\uc758 \uba54\uc778 \ud654\uba74\uc5d0 \uc774\ubbf8\uc9c0\ub97c \ubaa9\ub85d\uc73c\ub85c \ud45c\uc2dc\ud558\uae30 \uc704\ud574\uc11c\ub294 VStack, HStack, List \ub4f1\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
      \n SwiftUI\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \uae30\ubcf8\uc801\uc778 UI \uad6c\uc131 \uc694\uc18c\ub97c \ud1b5\ud574 \uac04\ub2e8\ud558\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
      \n \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uae30\ubcf8\uc801\uc778 \uc774\ubbf8\uc9c0 \ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\ub294 \uad6c\uc870\uc785\ub2c8\ub2e4:\n <\/p>\n

      \n                \n                    struct ContentView: View {\n                        let images = [\"image1\", \"image2\", \"image3\", \"image4\"]\n                        \n                        var body: some View {\n                            NavigationView {\n                                List(images, id: \\.self) { imageName in\n                                    NavigationLink(destination: ImageDetailView(imageName: imageName)) {\n                                        Image(imageName)\n                                            .resizable()\n                                            .scaledToFit()\n                                            .frame(height: 200)\n                                            .cornerRadius(10)\n                                    }\n                                }\n                                .navigationTitle(\"Gallery\")\n                            }\n                        }\n                    }\n                <\/code>\n            <\/pre>\n<\/section>\n
      \n
      7. \uc774\ubbf8\uc9c0 \ubdf0\uc5d0\uc11c \ud540\uce58 \uae30\ub2a5 \uad6c\ud604\ud558\uae30<\/h2>\n
      \n                \uc774\uc81c \uc774\ubbf8\uc9c0\ub97c \ubcf4\uc5ec\uc904 \ub54c \ud540\uce58 \uae30\ub2a5\uc744 \ucd94\uac00\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc744 \uc704\ud574\uc11c \uae30\uc874\uc758 ImageDetailView\ub97c
      \n                \uc218\uc815\ud558\uc5ec \ub450 \uc190\uac00\ub77d \uc81c\uc2a4\ucc98\ub97c \ud1b5\ud574 \uc774\ubbf8\uc9c0\ub97c \ud655\ub300 \ubc0f \ucd95\uc18c\ud560 \uc218 \uc788\ub3c4\ub85d \uad6c\ud604\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc774\ub97c
      \n                \uac00\ub2a5\ud558\uac8c \ud558\ub294 \uad6c\ud604 \uc608\uc785\ub2c8\ub2e4:\n            <\/p>\n
      \n                \n                    struct ImageDetailView: View {\n                        let imageName: String\n                        @State private var scale: CGFloat = 1.0\n                        \n                        var body: some View {\n                            GeometryReader { geometry in\n                                let maxScale = min(geometry.size.width, geometry.size.height) \/ 300\n                                \n                                Image(imageName)\n                                    .resizable()\n                                    .scaledToFit()\n                                    .scaleEffect(scale)\n                                    .gesture(\n                                        MagnificationGesture()\n                                            .onChanged { value in\n                                                let newScale = scale * value\n                                                \/\/ Limit the maximum scale\n                                                scale = min(newScale, maxScale)\n                                            }\n                                            .onEnded { _ in\n                                                \/\/ Reset the scale if needed\n                                                if scale < 1.0 {\n                                                    scale = 1.0\n                                                }\n                                            }\n                                    )\n                                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n                            }\n                        }\n                    }\n                <\/code>\n            <\/pre>\n<\/section>\n
      \n
      8. \ud540\uce58 \uae30\ub2a5\uc758 \ud14c\uc2a4\ud2b8 \ubc0f \ucd5c\uc801\ud654<\/h2>\n
      \n                \ud540\uce58 \uae30\ub2a5\uc774 \uad6c\ud604\ub41c \ud6c4, \uc2e4\uc81c \uae30\uae30\uc5d0\uc11c \ud14c\uc2a4\ud2b8\ub97c \ud1b5\ud574 \uc81c\uc2a4\ucc98 \uc778\uc2dd\uc774 \uc6d0\ud65c\ud558\uac8c \uc774\ub904\uc9c0\ub294\uc9c0 \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.
      \n                Xcode\uc5d0\uc11c\ub294 iOS Simulator\uc640 \uc2e4\uae30\uae30\ub97c \ubaa8\ub450 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud14c\uc2a4\ud2b8 \uc911\uc5d0 \ub290\uaef4\uc9c0\ub294 \ubb38\uc81c\ub098
      \n                \ubc84\uadf8\ub97c \uc218\uc815\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4. \ub610\ud55c, \ud540\uce58\uac00 \uac10\uc9c0\ub418\uc9c0 \uc54a\uac70\ub098 \uc81c\ub300\ub85c \ubc18\uc751\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0
      \n                Gesture \uc778\uc2dd \ucf54\ub4dc\ub97c \uc7ac\uac80\ud1a0\ud558\uace0, \uc5c5\ub370\uc774\ud2b8 \ubc0f \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
      \n
      9. \ub9c8\ubb34\ub9ac \ubc0f \ucd94\uac00 \uae30\ub2a5<\/h2>\n
      \n                \uc774\ubc88 \uac15\uc88c\ub97c \ud1b5\ud574 SwiftUI\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc544\uc774\ud3f0 \uac24\ub7ec\ub9ac \uc571\uc5d0 \ud540\uce58 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6cc\ubcf4\uc558\uc2b5\ub2c8\ub2e4.
      \n                \uac24\ub7ec\ub9ac \uc571\uc740 \ub2e4\uc591\ud55c \ucd94\uac00 \uae30\ub2a5\uc73c\ub85c \ud655\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4:\n            <\/p>\n