SwiftUI) Marterial 이란? (Widget transparent/blur background..?)

위젯의 배경에 투명도를 부여해서 단순 불투명한 배경을 만드는 것이 아니라 아래와 같은 블러처리 같은 느낌을 구현해보고자 했습니다.

(애초에 다크모드에 따른 위젯의 기본 배경도 변경되고 이는 바꿀 수 없습니다. 대신, 위에 색을 가진 뷰를 하나 얹는 것이죠...)

결론적으로 얘기하면 써드파티의 앱이 구현하도록 지원하지 않고 있습니다.

비슷한 질문은 여러 포럼에서 등장하였지만, 지원하지 않는 기능라고 답변을 주고 있었습니다. 뿐만 아니라 위젯의 배경자체를 투명하게 만들 수 없었습니다.

(위젯 자체의 기본 배경을 라이트모드는 하얀색, 다크모드는 검정색으로 지원하고 있었습니다. 또한, background 와 관련된 modifier 를 어디에 위치시키든 조정할 수 없었습니다🥲)

Blurred widget background - SwiftUI - Hacking with Swift forums

WidgetKit background like the syst... | Apple Developer Forums

WidgetKit blur

그러던 중 위젯의 배경을 블러처리할 수는 없지만, 다른 뷰 위에 있는 뷰에게 blur effect 를 줄 수 있는 기능을 찾게되어서 소개해드리려고 합니다.

간단하게 이해하고 들어가보자면, view 와 background 사이에 translucent layer 와 같은 material 을 넣게 되는 개념입니다.

그렇다면 Marterial 개념에 대해서 개발자 문서를 참고해서 알아봅시다!

👉 Marterial

A background material type.(iOS 15.0+…)

struct Material

Overview

background(_:ignoresSafeAreaEdges:) modifier 를 사용하여 material 을 추가하여 뒤에 나타는 뷰에 blur 효과를 적용할 수 있습니다.

ZStack {
    Color.teal
    Label("Flag", systemImage: "flag.fill")
        .padding()
        .background(.regularMaterial)
}

위의 예시에서, ZStack 은 청록색 위에 label 을 레이어 합니다. background modifier 는 label 아래에 material 를 삽입하여 padding 을 포함하여 label 을 덮는 배경 부분을 흐리게 만듭니다.

(좌측은 light, 우측은 dark)

material 은 view 가 아니지만, modified view 와 background 사이에 translucent layer 를 삽입하는 것과 같습니다.

여기서 중요한 점은 material 이 제공하는 blur effect 는 단순한 불투명도가 아닙니다. 대신, heavily frosted glass effect 를 생성하는 platform-specific blending 을 사용합니다.

이는 이미지와 같은 복잡한 배경을 사용하면 더 쉽게 확인할 수 있습니다.

ZStack {
    Image("chili_peppers")
        .resizable()
        .aspectRatio(contentMode: .fit)
    Label("Flag", systemImage: "flag.fill")
        .padding()
        .background(.regularMaterial)
}

physical materials 의 경우, 배경색이 통과하는 정도는 thickness 에 따라 다릅니다. 이 효과 또한 light 와 dark appearance(다크모드 유무)에 따라 달라집니다.

만약에 특정 모양의 material 이 필요한 경우, background(_:in:fillStyle:) modifier 를 사용할 수 있습니다.

아래 코드처럼 모서리가 둥근 material 을 만들 수 있습니다.

ZStack {
    Color.teal
    Label("Flag", systemImage: "flag.fill")
        .padding()
        .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 8))
}

material 을 추가할 때 foreground elements 는 대비를 향상시키는 fregbround 와 background color 의 컨텍스트별 혼합인 vibrancy(생동감) 을 나타냅니다. 하지만, foregroundStyle(_:) 을 사용하여 hierarchical 스타일을 제외하고, custom foreground style 을 설정하면 vibrancy 가 비활성화됩니다.