SwiftUI 환경설정 창 구성하기: 설정 화면 만들기

SwiftUI는 Apple의 최신 UI 프레임워크 중 하나로, 사용자 인터페이스를 쉽고 빠르게 구성할 수 있는 도구입니다. macOS 앱에서 사용자에게 설정 가능한 옵션을 제공하려면 환경설정 창을 만들어야 합니다. 이 글에서는 SwiftUI를 이용해 간단한 설정 창을 구성하는 과정을 자세히 설명하겠습니다.

시작하기

먼저, Xcode에서 새로운 macOS SwiftUI 프로젝트를 생성합니다. 프로젝트 생성 후, 기본적으로 제공되는 ContentView를 수정하여 설정 화면의 진입점을 만듭니다.

swift
import SwiftUI

@main
struct SettingsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .commands {
            CommandGroup(replacing: .appSettings) {
                Button(action: showSettings) {
                    Text("Settings")
                }
                .keyboardShortcut(",", modifiers: [.command])
            }
        }
    }
    
    func showSettings() {
        NSApp.sendAction(#selector(NSApplication.showPreferencesWindow(_:)), to: nil, from: nil)
    }
}

위 코드는 앱의 설정 메뉴를 구성하고 단축키를 추가하는 방법을 보여줍니다. 이제 본격적으로 설정 창을 구성해보겠습니다.

환경설정 창 구현하기

환경설정 창은 여러 개의 탭으로 나눌 수 있습니다. 이를 위해 SwiftUI에서 기본으로 제공하는 TabView를 사용할 수 있습니다. 각각의 탭은 독립된 View로 구성되는 것이 좋습니다.

기본 설정 탭 만들기

먼저 기본 설정 탭을 구성합니다. 새로운 SwiftUI View 파일을 생성하고 GeneralSettingsView로 이름을 짓습니다.

swift
import SwiftUI

struct GeneralSettingsView: View {
    @AppStorage("username") private var username: String = ""
    
    var body: some View {
        Form {
            TextField("Username", text: $username)
                .padding()
            
            Button("Save") {
                // 저장 로직 구현
            }
            .padding()
        }
        .padding()
        .frame(width: 300, height: 200)
    }
}

struct GeneralSettingsView_Previews: PreviewProvider {
    static var previews: some View {
        GeneralSettingsView()
    }
}

위 코드는 사용자의 username을 설정할 수 있는 간단한 폼을 제공합니다. @AppStorage 속성 래퍼를 사용하여 사용자 설정을 저장합니다.

고급 설정 탭 만들기

다음으로 고급 설정 탭을 구성합니다. 새로운 SwiftUI View 파일을 생성하고 AdvancedSettingsView로 이름을 짓습니다.

swift
import SwiftUI

struct AdvancedSettingsView: View {
    @AppStorage("enableFeatureX") private var enableFeatureX: Bool = false
    
    var body: some View {
        Form {
            Toggle("Enable Feature X", isOn: $enableFeatureX)
                .padding()
            
            Button("Apply") {
                // 저장 로직 구현
            }
            .padding()
        }
        .padding()
        .frame(width: 300, height: 200)
    }
}

struct AdvancedSettingsView_Previews: PreviewProvider {
    static var previews: some View {
        AdvancedSettingsView()
    }
}

고급 설정 탭은 고급 기능을 켜고 끌 수 있는 토글을 제공합니다. 역시 @AppStorage를 사용하여 설정을 저장합니다.

설정 창 연결하기

이제 설정 창에서 각각의 탭을 표시하도록 설정합니다. 새로운 SwiftUI View 파일을 생성하고 PreferencesView라고 이름을 짓습니다.

swift
import SwiftUI

struct PreferencesView: View {
    var body: some View {
        TabView {
            GeneralSettingsView()
                .tabItem {
                    Label("General", systemImage: "gear")
                }
            
            AdvancedSettingsView()
                .tabItem {
                    Label("Advanced", systemImage: "wrench")
                }
        }
        .padding()
        .frame(width: 400, height: 300)
    }
} 

struct PreferencesView_Previews: PreviewProvider {
    static var previews: some View {
        PreferencesView()
    }
}

위 코드는 TabView를 이용하여 설정 창의 탭을 구성하는 방법을 보여줍니다. 이제 환경설정 창을 실제로 표시할 방법을 추가해야 합니다. 앱의 App 구조체에 필요한 수정을 추가합니다.

swift
import SwiftUI

@main
struct SettingsApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .commands {
            CommandGroup(replacing: .appSettings) {
                Button(action: showSettings) {
                    Text("Settings")
                }
                .keyboardShortcut(",", modifiers: [.command])
            }
        }
    }
    
    func showSettings() {
        NSApp.sendAction(#selector(NSApplication.showPreferencesWindow(_:)), to: nil, from: nil)
    }
}

class AppDelegate: NSObject, NSApplicationDelegate {
    var settingsWindow: NSWindow!

    func applicationDidFinishLaunching(_ notification: Notification) {
        let settingsView = PreferencesView()
        let settingsWindow = NSWindow(
            contentRect: NSRect(x: 0, y: 0, width: 400, height: 300),
            styleMask: [.titled, .closable, .miniaturizable],
            backing: .buffered, defer: false)
        settingsWindow.center()
        settingsWindow.setFrameAutosaveName("Settings")
        settingsWindow.contentView = NSHostingView(rootView: settingsView)
        self.settingsWindow = settingsWindow
    }
    
    @objc func showPreferencesWindow(_ sender: Any?) {
        settingsWindow.makeKeyAndOrderFront(nil)
        NSApp.activate(ignoringOtherApps: true)
    }
}

위 코드는 AppDelegate를 사용하여 설정 창을 생성하고 표시하는 방법을 보여줍니다. 앱 실행 시, 설정 메뉴를 클릭하면 설정 창이 나타나게 됩니다.

결론

SwiftUI를 이용하면 macOS 앱에 설정 창을 간단하게 추가할 수 있습니다. TabView를 활용하여 탭별로 나뉜 설정 화면을 만들고, AppStorage를 이용하여 사용자 설정을 손쉽게 저장할 수 있습니다. 이렇게 하면 사용자가 보다 편리하게 앱을 설정할 수 있게 됩니다. 이제 여러분도 SwiftUI를 사용하여 멋진 macOS 앱 설정 창을 만들어 보세요!