SwiftUI 버튼 스타일링 기법: 커스텀 버튼 만들기

SwiftUI는 최신 iOS 개발 프레임워크로서, 다양한 UI 요소를 쉽게 구현할 수 있게 해줍니다. 그 중에서도 버튼은 아주 중요한 역할을 합니다. 기본 버튼만으로도 많은 기능을 구현할 수 있지만, 커스터마이징을 통해 사용성을 극대화하고, 더욱 매력적인 사용자 인터페이스를 만들 수 있습니다. 이 글에서는 SwiftUI에서 버튼을 스타일링하는 방법과 커스텀 버튼을 만드는 기법에 대해 다룹니다.

기본 버튼 사용하기

SwiftUI에서 가장 기본적인 버튼의 사용법은 아래와 같습니다. Button 뷰를 사용하면 됩니다.

swift
Button("Click Me") {
    // Action goes here
    print("Button clicked")
}

기본 제공되는 버튼은 단순한 텍스트 버튼입니다. 하지만 이러한 기본 버튼을 그대로 사용하는 것은 시각적 매력도가 떨어질 수 있습니다.

버튼의 스타일 변경하기

SwiftUI는 버튼 스타일링을 위한 여러 가지 방법을 제공합니다. Button 뷰에 다양한 수정자를 사용해 스타일을 변경할 수 있습니다.

텍스트와 배경 색상 변경

텍스트와 배경 색상을 변경하는 가장 간단한 방법은 foregroundColor와 background 수정자를 사용하는 것입니다.

swift
Button("Click Me") {
    print("Button clicked")
}
.foregroundColor(.white)
.background(Color.blue)

이렇게 하면 버튼 텍스트는 흰색으로, 배경은 파란색으로 설정됩니다. 이 접근 방식은 기본 스타일에서 크게 벗어나지 않지만, 명시적인 색상 설정이 가능합니다.

모서리 라운드 처리와 그림자 추가

버튼에 모서리를 둥글게 만들고 그림자를 추가하면 더욱 매력적입니다. cornerRadius와 shadow 수정자를 사용하면 됩니다.

swift
Button("Click Me") {
    print("Button clicked")
}
.padding()
.background(Color.green)
.cornerRadius(10)
.shadow(radius: 5)

이 코드에서는 버튼에 패딩과 녹색 배경이 추가되었고, 모서리는 10포인트 둥글게 처리되었습니다. 또한, 반경 5의 그림자가 추가되어 버튼이 떠 있는 느낌을 줍니다.

이미지 버튼 만들기

텍스트 대신 이미지를 버튼으로 사용할 수도 있습니다. 이미지 버튼은 사용자 인터페이스를 더욱 시각적으로 만드는 데 매우 유용합니다.

swift
Button(action: {
    print("Image button clicked")
}) {
    Image(systemName: "star.fill")
        .resizable()
        .frame(width: 50, height: 50)
}
.background(Color.yellow)
.cornerRadius(25)
.shadow(radius: 10)

이 예제에서는 이미지를 버튼으로 사용하고, 배경색과 둥근 모서리를 추가했습니다. 이미지를 resizable로 설정해 크기를 자유롭게 조정할 수 있게 했습니다.

커스텀 버튼 만들기

더욱 복잡한 스타일의 버튼이 필요하다면 ButtonStyle 프로토콜을 채택하여 커스텀 버튼 스타일을 만들 수 있습니다.

swift
struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(configuration.isPressed ? Color.gray : Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            .shadow(radius: configuration.isPressed ? 0 : 5)
    }
}

이 커스텀 버튼 스타일은 버튼이 눌렸을 때와 그렇지 않을 때의 모습을 다르게 표현합니다. isPressed 속성을 이용해 눌렸을 때 색상과 그림자 효과를 변경할 수 있습니다.

이제 이 스타일을 버튼에 적용할 수 있습니다.

swift
Button("Custom Style") {
    print("Custom button clicked")
}
.buttonStyle(CustomButtonStyle())

이렇게 하면 버튼이 눌렸을 때와 그렇지 않을 때 다른 스타일이 적용됩니다.

결론

SwiftUI에서 버튼을 스타일링하고 커스텀 버튼을 만드는 것은 사용자 인터페이스 디자인을 개선하는 데 매우 유용합니다. 기본 제공되는 수정자를 활용해 간단한 스타일 변경부터 ButtonStyle 프로토콜을 사용한 복잡한 커스터마이징까지 다양한 방법이 있습니다. 이러한 기법을 통해 앱의 시각적 요소를 더욱 매력적으로 만들고 사용자 경험을 향상시킬 수 있습니다.