스위프트UI로 Hello, World! 작성하기

안녕하세요! 이번 포스팅에서는 스위프트UI를 이용해서 간단한 "Hello, World!" 애플리케이션을 만드는 다양한 예제를 살펴보겠습니다. 스위프트UI는 애플의 최신 사용자 인터페이스 프레임워크로, 간결하고 직관적인 문법 덕분에 UI를 빠르고 쉽게 개발할 수 있습니다. 자, 그럼 시작해볼까요?

1. 기본적인 Hello, World!

가장 첫 번째 예제는 기본적인 Hello, World! 텍스트를 화면에 표시하는 것입니다. 아래의 코드를 보세요.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
    }
}

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

위의 코드를 Xcode에서 실행하면 "Hello, World!"가 화면 중앙에 나타납니다.

2. 텍스트 스타일링 추가하기

이번에는 텍스트에 스타일을 추가해 보도록 하겠습니다. 폰트를 굵게 하고, 글씨 크기도 키워보겠습니다. 아래의 코드를 확인해보세요.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(.blue)
            .padding()
    }
}

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

이 코드에서는 텍스트의 폰트를 변경하고, 색상도 파란색으로 바꾸었습니다.

3. 버튼 추가하기

이번 예제에서는 버튼을 추가해 기본적인 상호작용을 구현해보겠습니다. 버튼을 클릭하면 텍스트가 변화하는 기능을 만들어볼게요.

import SwiftUI

struct ContentView: View {
    @State private var message: String = "Hello, World!"
    
    var body: some View {
        VStack {
            Text(message)
                .font(.largeTitle)
                .padding()
            
            Button(action: {
                message = "Hello, SwiftUI!"
            }) {
                Text("Change Message")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

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

버튼을 클릭하면 텍스트가 "Hello, SwiftUI!"로 변경됩니다.

4. 이미지와 함께 보여주기

이제는 이미지를 추가하여 Hello, World!를 더욱 풍성하게 만들어 봅시다. 이미지를 위에 보여주고 텍스트는 아래에 위치시키겠습니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(.yellow)

            Text("Hello, World!")
                .font(.largeTitle)
                .padding()
        }
    }
}

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

위 코드를 실행하면 별 모양의 이미지와 함께 "Hello, World!"가 표시됩니다.

5. 애니메이션 효과 추가하기

마지막 예제로는 간단한 애니메이션 효과를 추가해볼 것인데요, 버튼을 누르면 텍스트의 크기가 변하는 애니메이션을 만들어 보겠습니다.

import SwiftUI

struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.largeTitle)
                .scaleEffect(scale)
                .animation(.easeInOut(duration: 0.5))
                .padding()
            
            Button(action: {
                scale = scale == 1.0 ? 1.5 : 1.0
            }) {
                Text("Animate Message")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

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

버튼을 클릭하면 텍스트의 크기가 애니메이션 효과와 함께 변경되는 것을 확인할 수 있습니다.

 

이처럼 스위프트UI를 이용하면 간단하게 다양한 UI를 조합하여 멋진 애플리케이션을 만들 수 있습니다. 이번 예제를 통해 기본적인 앱 개발을 위한 스위프트UI의 활용법을 익히셨길 바랍니다!