SwiftUI를 사용한 첫 UI 개발하기: 간단한 사용자 인터페이스 구성

SwiftUI는 Apple에서 제공하는 최신 사용자 인터페이스 프레임워크로, 보다 직관적이고 간단하게 iOS 앱을 개발할 수 있게 도와줍니다. 이 글에서는 SwiftUI를 사용해 간단한 사용자 인터페이스를 구성하는 방법을 단계별로 알아보겠습니다. SwiftUI의 기본 개념과 버튼, 텍스트, 이미지 등을 활용한 간단한 앱을 만들어볼 것입니다.

SwiftUI 시작하기

SwiftUI를 사용하려면 MacOS 10.15 Catalina 이상과 Xcode 11 이상이 필요합니다. Xcode를 열고 새로운 프로젝트를 생성하여 시작할 수 있습니다. 다음 단계를 따라 프로젝트를 설정해보세요:

1. Xcode를 열고 'Create a new Xcode project'를 클릭합니다.
2. 'App'을 선택하고 'Next'를 클릭합니다.
3. 프로젝트 이름을 설정하고 'User Interface'를 'SwiftUI'로 선택한 후 'Next'를 클릭합니다.
4. 프로젝트를 저장할 위치를 선택하고 'Create'를 클릭합니다.

프로젝트가 생성되면, 기본적으로 ContentView.swift 파일이 포함되어 있습니다. 이 파일에서 SwiftUI를 사용해 UI를 구성할 수 있습니다.

텍스트와 이미지 추가하기

가장 기본적인 UI 요소로는 텍스트와 이미지가 있습니다. SwiftUI에서는 Text와 Image 뷰를 사용해 쉽게 추가할 수 있습니다. 예를 들어, ContentView.swift 파일을 수정하여 Text와 Image를 추가해보겠습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
                .foregroundColor(.blue)
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(.yellow)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

위 코드에서는 VStack을 사용해 텍스트와 이미지를 세로로 배치했습니다. Text 뷰는 큰 글씨로 파란색 텍스트를 표시하며, Image 뷰는 크기를 조정하고 노란색 별 이미지를 표시합니다.

버튼 추가하기

앱에서 상호작용을 위해 버튼은 매우 중요한 요소입니다. SwiftUI에서는 Button 뷰를 사용하여 쉽게 버튼을 만들 수 있습니다. Button 뷰는 두 가지 인자를 필요로 합니다: action과 label입니다. action은 버튼이 클릭되었을 때 실행될 코드를 나타내며, label은 버튼의 외관을 정의합니다.

아래는 ContentView.swift 파일에 버튼을 추가하는 예제입니다:

swift
import SwiftUI

struct ContentView: View {
    @State private var message: String = ""

    var body: some View {
        VStack {
            Text(message)
                .font(.title)
                .padding()
            Button(action: {
                self.message = "Button Clicked!"
            }) {
                Text("Click Me")
                    .font(.headline)
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

위 코드에서는 @State 프로퍼티래퍼를 사용해 버튼을 클릭했을 때 변경될 message 변수를 정의했습니다. 버튼을 클릭하면 message가 변경되며, 텍스트 뷰가 업데이트되어