{"id":25790,"date":"2024-10-27T05:48:52","date_gmt":"2024-10-27T05:48:52","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25790"},"modified":"2024-11-26T07:56:49","modified_gmt":"2024-11-26T07:56:49","slug":"%ec%8a%a4%ec%9c%84%ed%94%84%ed%8a%b8%eb%a1%9c-swiftui-%eb%b0%a9%ec%8b%9d-%ec%95%84%ec%9d%b4%ed%8f%b0-%ec%95%b1-%ea%b0%9c%eb%b0%9c-09-%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%9d%b4%eb%8f%99%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25790\/","title":{"rendered":"\uc2a4\uc704\ud504\ud2b8\ub85c SwiftUI \ubc29\uc2dd, \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c, 09 \ud398\uc774\uc9c0 \uc774\ub3d9\ud558\uae30 – \ud398\uc774\uc9c0 \ucee8\ud2b8\ub864"},"content":{"rendered":"

<\/p>\n

\uc544\uc774\ud3f0 \ub610\ub294 iPad \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \ub370 \uc788\uc5b4 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub294 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \uc571\uc758 \uc131\uacf5\uc740 \uc885\uc885 \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UI\/UX)\uc640 \uad00\ub828\uc774 \uc788\uc73c\uba70, SwiftUI\ub294 \uc774 \ud601\uc2e0\uc801\uc778 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4\uae30 \uc704\ud55c \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 SwiftUI\ub97c \uc0ac\uc6a9\ud55c \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c\uc5d0\uc11c \ud398\uc774\uc9c0 \ucee8\ud2b8\ub864\uc744 \ud1b5\ud574 \ud398\uc774\uc9c0 \uac04 \uc804\ud658\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

SwiftUI\ub780?<\/h2>\n

SwiftUI\ub294 \uc560\ud50c\uc774 \uac1c\ubc1c\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \ud234\ud0b7\uc73c\ub85c, Swift \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub97c \uae30\ubc18\uc73c\ub85c \ud569\ub2c8\ub2e4. \ubaa8\ub358\ud55c \ubb38\ubc95\uacfc \ub9ac\uc561\ud2f0\ube0c \ud504\ub85c\uadf8\ub798\ubc0d \ubaa8\ub378\uc744 \uacb0\ud569\ud558\uc5ec, UI\ub97c \uc120\uc5b8\ud615\uc73c\ub85c \uad6c\ucd95\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4. SwiftUI\ub97c \uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc \uba87 \uc904\ub85c \ubcf5\uc7a1\ud55c UI\ub97c \uad6c\ucd95\ud558\uace0, \ubaa8\ub4e0 \uc560\ud50c \uae30\uae30\uc5d0\uc11c \uc77c\uad00\ub41c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud398\uc774\uc9c0 \ucee8\ud2b8\ub864\uc774\ub780?<\/h2>\n

\ud398\uc774\uc9c0 \ucee8\ud2b8\ub864\uc740 \uc5ec\ub7ec \ud398\uc774\uc9c0\ub97c \ud0d0\uc0c9\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\ub294 UI \uc694\uc18c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud604\uc7ac \ud398\uc774\uc9c0\uc758 \uc704\uce58\ub97c \ubcf4\uc5ec\uc8fc\uace0, \ud398\uc774\uc9c0\ub97c \uc2a4\uc640\uc774\ud504\ud558\uac70\ub098 \ubc84\ud2bc\uc744 \ub20c\ub7ec \uc27d\uac8c \uc804\ud658\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774\ub294 \ud2b9\ud788 \ud29c\ud1a0\ub9ac\uc5bc, \uc774\ubbf8\uc9c0 \uac24\ub7ec\ub9ac, \ub610\ub294 \uc5ec\ub7ec \ud654\uba74\uc774 \ud544\uc694\ud55c \uc571\uc5d0\uc11c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

SwiftUI\uc5d0\uc11c \ud398\uc774\uc9c0 \ucee8\ud2b8\ub864 \uad6c\ud604\ud558\uae30<\/h2>\n

\uc774\uc81c SwiftUI\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud398\uc774\uc9c0 \ucee8\ud2b8\ub864\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \ucf54\ub4dc \uad6c\uc870\ubd80\ud130 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n

Xcode\ub97c \uc5f4\uace0 \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. ‘App’ \ud15c\ud50c\ub9bf\uc744 \uc120\ud0dd\ud55c \ud6c4, \ud504\ub85c\uc81d\ud2b8 \uc774\ub984\uc744 \uc785\ub825\ud558\uace0 SwiftUI\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\uac00 \uc774 \uac00\uc774\ub4dc\uc758 \ubca0\uc774\uc2a4\uac00 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

2. \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac \ucd94\uac00\ud558\uae30<\/h3>\n

SwiftUI\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \ud2b9\ubcc4\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ucd94\uac00\ud560 \ud544\uc694\ub294 \uc5c6\uc9c0\ub9cc, SwiftUI \uc120\uc5b8 \ucee8\ud14d\uc2a4\ud2b8 \uc548\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 ObservableObject\uc640 State\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n

3. \ud398\uc774\uc9c0 \ubdf0 \ubaa8\ub378 \ub9cc\ub4e4\uae30<\/h3>\n

\ud398\uc774\uc9c0\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574\uc11c ViewModel\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc774 \ubaa8\ub378\uc740 \ud604\uc7ac \ud398\uc774\uc9c0 \ub4f1\uc744 \uc720\uc9c0\ud558\uace0, \ud398\uc774\uc9c0 \uc804\ud658\uc744 \ucc98\ub9ac\ud560 \ucc45\uc784\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\nstruct PageData: Identifiable {\n    let id = UUID()\n    let title: String\n    let content: String\n}\n<\/pre>\n
4. \ud398\uc774\uc9c0 \ubaa8\ub378 \uc0dd\uc131<\/h3>\n
\ud398\uc774\uc9c0 \ubaa8\ub378\uc5d0 \uc0ac\uc6a9\ud560 \ub370\uc774\ud130\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uac04\ub2e8\ud55c \ubb38\uc790\uc5f4\uc744 \uac00\uc9c4 \ud398\uc774\uc9c0\uac00 \uc788\ub2e4\uace0 \uac00\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\nclass PageViewModel: ObservableObject {\n    @Published var currentPage: Int = 0\n    let pages: [PageData] = [\n        PageData(title: \"\ud398\uc774\uc9c0 1\", content: \"\uc5ec\uae30\ub294 \uccab \ubc88\uc9f8 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.\"),\n        PageData(title: \"\ud398\uc774\uc9c0 2\", content: \"\uc5ec\uae30\ub294 \ub450 \ubc88\uc9f8 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.\"),\n        PageData(title: \"\ud398\uc774\uc9c0 3\", content: \"\uc5ec\uae30\ub294 \uc138 \ubc88\uc9f8 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.\"),\n    ]\n}\n<\/pre>\n
5. \ud398\uc774\uc9c0 \ubdf0 \ub9cc\ub4e4\uae30<\/h3>\n
\uc774\uc81c \uac01 \ud398\uc774\uc9c0\ub97c \ud45c\uc2dc\ud560 \ubdf0\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. SwiftUI\uc5d0\uc11c\ub294 \ubdf0\ub97c \uc870\ud569\ud558\uc5ec \ubcf5\uc7a1\ud55c UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nstruct PageView: View {\n    @ObservedObject var viewModel: PageViewModel\n\n    var body: some View {\n        VStack {\n            Text(viewModel.pages[viewModel.currentPage].title)\n                .font(.largeTitle)\n                .padding()\n\n            Text(viewModel.pages[viewModel.currentPage].content)\n                .font(.body)\n                .padding()\n\n            PageControl(currentPage: $viewModel.currentPage, numberOfPages: viewModel.pages.count)\n                .padding()\n        }\n    }\n}\n<\/pre>\n
6. \ud398\uc774\uc9c0 \ucee8\ud2b8\ub864 \ub9cc\ub4e4\uae30<\/h3>\n
\ud398\uc774\uc9c0 \ucee8\ud2b8\ub864\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 UIKit\uc758 UIPageControl\uc744 \uac10\uc2f8\ub294 SwiftUI \ubdf0\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\nstruct PageControl: UIViewRepresentable {\n    @Binding var currentPage: Int\n    var numberOfPages: Int\n\n    func makeUIView(context: Context) -> UIPageControl {\n        let control = UIPageControl()\n        control.numberOfPages = numberOfPages\n        control.addTarget(context.coordinator, action: #selector(Coordinator.pageChanged(_:)), for: .valueChanged)\n        return control\n    }\n\n    func updateUIView(_ uiView: UIPageControl, context: Context) {\n        uiView.currentPage = currentPage\n    }\n\n    func makeCoordinator() -> Coordinator {\n        return Coordinator(self)\n    }\n\n    class Coordinator: NSObject {\n        var control: PageControl\n\n        init(_ control: PageControl) {\n            self.control = control\n        }\n\n        @objc func pageChanged(_ sender: UIPageControl) {\n            control.currentPage = sender.currentPage\n        }\n    }\n}\n<\/pre>\n
7. \ucd5c\uc885 \uc870\ud569\ud558\uae30<\/h3>\n
\ubaa8\ub4e0 \uad6c\uc131\uc694\uc18c\uac00 \uc900\ube44 \ub418\uc5c8\uc73c\ub2c8, \ucd5c\uc885\uc801\uc73c\ub85c \uc774\ub4e4\uc744 \uacb0\ud569\ud558\uc5ec \ud654\uba74\uc5d0 \ud45c\uc2dc\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\nstruct ContentView: View {\n    @StateObject var viewModel = PageViewModel()\n\n    var body: some View {\n        PageView(viewModel: viewModel)\n    }\n}\n<\/pre>\n
\ucf54\ub4dc \uc124\uba85<\/h2>\n
\uc704\uc758 \ucf54\ub4dc\ub294 \ud398\uc774\uc9c0\ub97c \uc870\uc791\ud560 \uc218 \uc788\ub294 \uc804\uccb4\uc801\uc778 \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n