SwiftUI Button Style을 활용한 다양한 효과 만들기

SwiftUI는 Apple이 2019년에 발표한 선언적 UI 프레임워크로, iOS, macOS, watchOS, tvOS 앱 개발에 사용됩니다. SwiftUI는 간결하고 직관적인 코드를 통해 복잡한 UI를 구현할 수 있게 해줍니다. 그중에서도 버튼은 사용자 인터페이스의 핵심 요소 중 하나입니다. SwiftUI에서는 Button Style을 활용하여 다양한 버튼 효과를 쉽게 구현할 수 있습니다. 이 글에서는 SwiftUI Button Style을 활용한 다양한 버튼 효과를 만드는 방법에 대해 자세히 알아보겠습니다.

기본적인 SwiftUI 버튼 스타일

SwiftUI에서 버튼은 매우 간단하게 생성할 수 있습니다. 기본 버튼 스타일을 사용하면, 시스템이 제공하는 기본 스타일이 적용됩니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("Tap me!")
        }
    }
}

위의 코드에서 기본 스타일의 버튼을 생성했습니다. 이제 이 버튼에 다양한 스타일을 적용해보겠습니다.

커스텀 버튼 스타일 만들기

SwiftUI에서는 ButtonStyle 프로토콜을 사용하여 커스텀 버튼 스타일을 만들 수 있습니다. 이를 통해 버튼의 외관과 상호작용 방식을 커스터마이즈할 수 있습니다.

1. 기본 커스텀 버튼 스타일

먼저, 간단한 커스텀 버튼 스타일을 만들어 보겠습니다.

swift
struct SimpleButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
            .animation(.spring(), value: configuration.isPressed)
    }
}

SimpleButtonStyle은 버튼이 눌렸을 때 살짝 축소되는 효과를 추가합니다. 이제 이 스타일을 버튼에 적용해보겠습니다.

swift
struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("Tap me!")
        }
        .buttonStyle(SimpleButtonStyle())
    }
}

이제 버튼을 누르면 크기가 약간 줄어드는 애니메이션 효과가 나타납니다.

2. 그림자 효과 추가하기

버튼에 그림자 효과를 추가하여 입체감을 더할 수 있습니다.

swift
struct ShadowButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
            .shadow(color: .gray, radius: configuration.isPressed ? 2 : 10, x: 0, y: configuration.isPressed ? 2 : 10)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
            .animation(.easeInOut(duration: 0.2), value: configuration.isPressed)
    }
}

ShadowButtonStyle은 버튼을 눌렀을 때 그림자와 크기가 변하는 효과를 추가합니다.

swift
struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("Tap me!")
        }
        .buttonStyle(ShadowButtonStyle())
    }
}

이제 버튼을 누르면 그림자가 줄어들고 크기가 살짝 작아지는 효과가 나타납니다.

3. 그라디언트 배경 버튼 스타일

그라디언트 배경을 사용하여 버튼을 더욱 화려하게 꾸밀 수 있습니다.

swift
struct GradientButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(LinearGradient(gradient: Gradient(colors: [.purple, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing))
            .foregroundColor(.white)
            .cornerRadius(8)
            .shadow(color: .black.opacity(0.2), radius: 10, x: 0, y: 10)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
            .animation(.spring(), value: configuration.isPressed)
    }
}

GradientButtonStyle은 그라디언트 배경과 그림자 효과를 추가합니다.

swift
struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("Tap me!")
        }
        .buttonStyle(GradientButtonStyle())
    }
}

이제 버튼이 화려한 그라디언트 배경을 가지게 되며, 누를 때 크기와 그림자가 변하는 효과가 나타납니다.

4. 회전 효과 추가하기

버튼을 누를 때 회전하는 효과를 추가하여 재미있는 인터랙션을 만들 수 있습니다.

swift
struct RotatingButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.orange)
            .foregroundColor(.white)
            .cornerRadius(8)
            .rotationEffect(configuration.isPressed ? .degrees(45) : .degrees(0))
            .animation(.spring(), value: configuration.isPressed)
    }
}

RotatingButtonStyle은 버튼을 눌렀을 때 회전하는 효과를 추가합니다.

swift
struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Button tapped!")
        }) {
            Text("Tap me!")
        }
        .buttonStyle(RotatingButtonStyle())
    }
}

이제 버튼을 누르면 45도 회전하는 애니메이션 효과가 나타납니다.

결론

SwiftUI의 ButtonStyle 프로토콜을 사용하면 버튼의 외관과 상호작용을 손쉽게 커스터마이즈할 수 있습니다. 기본적인 스타일에서부터 그림자, 그라디언트, 회전 효과 등 다양한 효과를 적용할 수 있으며, 이를 통해 더욱 매력적이고 직관적인 사용자 인터페이스를 만들 수 있습니다. 이 글에서 소개한 예제들을 바탕으로 자신만의 독창적인 버튼 스타일을 만들어보세요. SwiftUI의 강력한 기능을 활용하면 다양한 UI 효과를 구현하는 것이 어렵지 않습니다.