SwiftUI에서 Blur를 사용하는 4가지 방법

Blur

---

Apple Developer Documentation

struct ContentView: View {
    var body: some View {
        ZStack() {
            Image("bg.sample")
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()
                .blur(radius: 20)

            Text("Blur")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}

iOS13 부터 지원하는 blur는 가장 간단한 방법이지만 Image Layer에 적용해야 한다는 단점이 존재한다.
이는 해당 방식으로는 TextView의 frame에만 blur 효과를 주기 어렵다는 의미이기도 하다.

 

VisualEffect

---

Apple Developer Documentation

struct VisualEffectView: UIViewRepresentable {
	var effect: UIVisualEffect?
	func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
	func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}

struct ContentView: View {
    var body: some View {
        ZStack() {
            Image("bg.sample")
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()

            VisualEffectView(effect: UIBlurEffect(style: .light))
                .ignoresSafeArea()

            Text("VE Blur")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}

그래서 일반적으로 사용되는 것이 UIKit의 VisualEffect다.
이를 사용할 수 있게 간단한 구조체를 작성한 다음 사용하는 방식이다.
해당 방식은 iOS8 부터 지원하며

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
    func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}

struct ContentView: View {
    var body: some View {
        ZStack() {
            Image("bg.sample")
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()

            Text("VE Blur")
                .font(.largeTitle)
                .foregroundColor(.white)
                .frame(width: 100, height: 100)
                .background(
                    VisualEffectView(effect: UIBlurEffect(style: .light))
                )
        }
    }
}

그 자체로 View의 역할을 하기 때문에 View의 Frame에 맞게 적용할 수 있다는 장점이 있다.

Apple Developer Documentation

또한 굉장히 많은 스타일을 제공한다.

 

Material

---

Apple Developer Documentation

struct ContentView: View {
    var body: some View {
        ZStack() {
            Image("bg.sample")
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()

            Text("Material Blur")
                .font(.largeTitle)
                .foregroundColor(.white)
                .frame(width: 100, height: 100)
                .background(
                    .thinMaterial
                )
        }
    }
}

물론  iOS15 부터는 조금 더 간단한 방식으로 VisualEffect를 대체할 수 있다.
애플의 반투명 방식의 blur 효과를 적용하며 호환성이 조금 떨어지는 대신 조금 더 자연스러운 효과를 줄 수 있다.

struct ContentView: View {
    var body: some View {
        ZStack() {
            Image("bg.sample")
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()

            Text("Material Blur")
                .font(.largeTitle)
                .foregroundColor(.secondary)
                .frame(width: 100, height: 100)
                .background(
                    .ultraThinMaterial
                )
        }
    }
}

foregroundColor를 secondary로 설정하면 background의 변하는 색에 맞게 자연스러운 색으로 조절된다.

 

패키지

---

GitHub - lucasbrown/swiftui-visual-effects: View modifiers that wrap UIVisualEffectView, with environment integration.

material 효과를 이하의 버전에서도 간편하게 사용할 수 있다면 얼마나 좋을까.
VisualEffect를 사용하기 좋게 묶어낸 패키지가 여기 있다.

우측 상단의 Code 버튼을 누르고 HTTPS 링크를 복사한다.

Xcode > File > Add Package를 선택하고, 링크를 우측 상단에 붙여넣어 추가한다.

import SwiftUI
import SwiftUIVisualEffects

패키지를 import 하고

import SwiftUI
import SwiftUIVisualEffects

struct ContentView: View {
    var body: some View {
        ZStack() {
            Image("bg.sample")
                .resizable()
                .ignoresSafeArea()
                .scaledToFill()

            Text("VE Blur")
                .font(.largeTitle)
                .frame(width: 100, height: 100)
                .vibrancyEffect()
                .background(
                    BlurEffect()
                        .blurEffectStyle(.light)
                )
        }
    }
}

적당히 vibrancyEffect와 blurEffect를 추가하면 된다.
지금은 TextView의 폰트색에 해당하는 Foreground에 vibrancyEffect를 적용하고,
background에 light 스타일 blurEffect를 추가한 상태다.

해당 패키지가 iOS8 부터 지원하는 VisualEffect에 뿌리를 두고 있다는 점에서 호환성이 높고,
사용하기에 따라 굉장히 미려한 디자인을 구현할 수 있다.