[UIKit] UIVisualEffect - UIView에 흐림(Blur) 효과 주기

 

지난 시간에 UIBarAppearance에 대해 찾아보면서 시스템 바에 흐림 효과를 주는 방법에 대해서도 알아보았었는데요.
이번 시간에는 시스템 바가 아닌 뷰에 흐림 효과를 주는 방법에 대해 알아보겠습니다.

 

Apple Design Resource와 Material

우선 지난 시간에 잠시 참고 했던 Apple Design Resource 피그마 파일을 다시 한번 참고해보겠습니다.

 

Apple Design Resource 피그마에서는 다양한 Color 및 Material들을 컴포넌트에 사용할 수 있는데요.

 

지난 시간에 UIBarAppearance를 살펴보며 피그마에서 iOS의 시스템 바는 chrome으로 채워져 있는 것을 알 수 있었습니다.
하지만, UIColor에는 chrome이라는 색이 존재하지 않는데요.

 

일반적으로 Apple Design Resource 피그마에서 Colors로 구분되어 있는 것은 UIColor에서 사용할 수 있었지만, chrome은 Colors가 아닌 Materials로 되어 있었습니다.

 

그렇다면 이 Materials라는 것은 무엇일까하고 고민하던 차에 피그마에서 Materials
라는 페이지를 발견했습니다.
이 페이지에는 여러 Materials와 Vibrant를 보여주고 있었는데요.

 

여기에서 힌트를 얻어 애플 공식 문서를 찾아보다가 UIBlurEffect.Style.systemChromeMaterial 이라는 것을 발견했습니다.
드디어 Material 이라는 용어가 나오는 문서를 찾았네요.
그렇다면 이 내용이 뷰에 흐림 처리를 할 수 있는 내용인지 확인해봐야겠죠?

 

UIBlurEffect.Style.systemChromeMaterial의 설명을 보면 시스템 크롬처럼 보이게 하는 적응형 흐림(Blur) 효과라고 합니다.
이 내용이 맞는 것 같네요!

 

그렇다면 이제부터 이 UIBlurEffect와 관련된 내용들에 대해서 알아봅시다.

 

UIVisualEffect

우선 UIBlurEffect가 상속 받고 있는 UIVisualEffect에 대해서 먼저 알아보겠습니다.

 

UIVisualEffect는 visual effect view와 blur 및 vibrancy 효과를 주기 위한 이니셜라이저로, 그 자체로는 사용되지 않고 UIVisualEffectView에 효과를 주기 위해 사용되는 UIBlurEffect와 UIVibrancyEffect의 부모 클래스로만 사용됩니다.

 

UIBlurEffect

UIBlurEffect는 Visual Effect View 뒤에 레이어된 콘텐츠(Visual Effect View의 contentView에 추가된 뷰)에 흐림 효과를 적용하는 개체입니다.
Visual Effect View의 콘텐츠 뷰 뒤에 추가하는 뷰는 흐림 효과의 영향을 받지 않습니다.

 

UIBlurEffect는 init(style: UIBlurEffect.Style) 생성자로 생성할 수 있으며, style 파라미터에 지정된 스타일에 맞는 흐림 효과를 반환합니다.

 

UIBlurEffect에는 아래의 21가지 흐림 스타일을 적용할 수 있습니다.

 

enum Style: Int {
    // 적응형 스타일
    case systemUltraThinMaterial = 6
    case systemThinMaterial = 7
    case systemMaterial = 8
    case systemThickMaterial = 9
    case systemChromeMaterial = 10
    // 라이트 스타일
    case systemUltraThinMaterialLight = 11
    case systemThinMeterialLight = 12
    case systemMaterialLight = 13
    case systemThickMaterialLight = 14
    case systemChromeMaterialLight = 15
    // 다크 스타일
    case systemUltraThinMeterialDark = 16
    case systemThinMaterialDark = 17
    case systemMaterialDark = 18
    case systemThickMaterialDark = 19
    case systemChromeMaterialDark = 20
    // 추가 스타일
    case extraLight = 0
    case light = 1
    case dark = 2
    case extraDark = 3
    case regular = 4
    case prominent = 5
}

 

UIBlurEffect의 Style은 크게 적응형 스타일, 라이트 스타일, 다크 스타일, 추가 스타일의 4 종류로 나눌 수 있는데, 라이트 스타일과 다크 스타일은 각각의 스타일을 지정했을 때 항상 같은 흐림 효과를 볼 수 있지만, 적응형 스타일을 적용했을 때는 디바이스의 디스플레이 모드에 따라 라이트 모드일 때는 라이트 스타일, 다크 모드일 때는 다크 스타일의 모양을 보여줍니다.

 

추가 스타일은 extraLight, light, dark, extraDark를 적용한 경우 항상 같은 흐림 효과를 보여주지만, regular를 적용한 경우에는 디스플레이 모드에 따라 light와 dark 효과를, prominent를 적용한 경우에는 extraLight와 extraDark 효과를 보여줍니다.

 

단, extraDark의 경우 tvOS에서만 사용할 수 있으므로 디스플레이 모드가 다크 모드인 tvOS를 제외한 OS에서는 regular와 마찬가지로 dark 효과를 보여줍니다.

 

각각의 효과를 적용했을 경우 결과는 아래와 같습니다.

 

Blur 효과 미적용 (원본)	extraLight	light	dark
systemUltraThinMaterialLight	systemThinMaterialLight	systemMaterialLight	systemThickMaterialLight	systemChromeMaterialLight
systemUltraThinMaterialDark	systemThinMaterialDark	systemMaterialDark	systemThickMaterialDark	systemChromeMaterialDark

 

UIVibrancyEffect

UIVibrancyEffect는 Visual Effect View 뒤에 레이어된 콘텐츠의 색상을 증폭하고 조정하는 개체입니다. UIBlurEffect로 구성된 UIVisualEffectView의 하위 뷰로 사용하거나 그 위에 레이어드하기 위해 사용됩니다.

 

Vibrancy 효과를 사용하면 contentView 안에 배치된 콘텐츠가 더욱 생생하게(선명하게) 보일 수 있습니다. 이 효과는 색상에 따라 달라집니다.
contentView에 추가하는 모든 하위 뷰는 tintColorDidChange() 메서드를 구현하고, 그에 따라 자체적으로 업데이트해야 합니다. 하지만 렌더링 모드가 UIImage.RenderingMode.alwaysTemplate인 이미지가 있는 UIImageView 객체와 UILabel 객체는 자동으로 업데이트 됩니다.

 

UIVibrancyEffect는 init(blurEffect: UIBlurEffect, style: UIVibrancyEffectStyle)과 init(blurEffect: UIBlurEffect)의 두 가지 생성자를 이용해 생성할 수 있습니다.

 

이 때 사용되는 blurEffect 파라미터는 특정 흐림 효과에 생동감 효과를 생성하기 위한 것으로, 생동감 효과가 적용되기 위한 흐림 효과가 적용된 뷰에 사용되는 UIBlurEffect입니다.
이 때, 새로운 생동감 효과를 만들 기 위해 기존에 사용된 UIBlurEffect와 동일한 흐림 효과를 파라미터로 사용해야 합니다. 다른 UIBlurEffect를 사용한다면 원하지 않는 시각 효과 조합이 발생할 수 있습니다.

style 파라미터는 콘텐츠에 적용할 생동감의 종류를 결정합니다.

 

UIVibrancyEffect의 Style에는 아래의 8가지를 사용할 수 있습니다.

 

enum UIVibrancyEffectStyle: Int {
    // 레이블 스타일
    case label = 0
    case secondaryLabel = 1
    case tertiaryLabel = 2
    case quaternaryLabel = 3
    // fill 스타일
    case fill = 4
    case secondaryFill = 5
    case tertiaryFill = 6
    // separator 스타일
    case separator = 7
}

 

각각의 Style을 적용했을 경우 결과는 아래와 같습니다.

 

Vibrancy 효과 미적용 (원본)	Style 자동 적용 (init(blurEffect:) 생성자를 사용한 경우)	separator
label	secondaryLabel	tertiaryLabel	quaternaryLabel
fill	secondaryFill	tertiaryFill

 

UIVisualEffectView

UIVisualEffectView는 복잡한 시각 효과를 구현하는 객체로, 원하는 효과에 따라 뷰 뒤에 레이어된 콘텐츠, 또는 Visual Effect View의 contentView에 추가된 콘텐츠에 영향을 줄 수 있습니다.
UIVisualEffectView는 흐림(Blur) 처리를 위한 UIBlurEffect와 생동감(Vibrancy) 효과를 위한 UIVibrancyEffect를 적용할 수 있습니다.

 

Visual Effect를 적용하기 위해서는 UIVisualEffectView를 뷰 계층 구조에 추가해야 하는데, 이 때, Visual Effect를 적용할 뷰를 UIVisualEffectView 자체에 하위 뷰로 직접 추가하면 원하지 않는 결과가 발생할 수 있으므로, UIVisualEffectView의 contentView 속성에 하위 뷰를 추가해야 합니다.

 

UIVisualEffectView의 생성

UIVisualEffectView는 init(effect: UIVisualEffect?)라는 생성자를 사용하여 생성할 수 있습니다.
생성자의 effect 파라미터에 뷰에 제공할 흐림 또는 생동감 효과에 따라 UIBlurEffect 또는 UIVibrancyEffect의 UIVisualEffect를 사용하여, 지정된 시각 효과가 포함된 새 뷰를 생성합니다.

 

마무리

이번 시간에는 뷰에 흐림 효과 및 생동감 효과를 줄 수 있는 UIVisualEffect에 대해 알아보았습니다.
아이폰의 잠금화면에서 알림 등을 볼 때, 단순히 알림 블록을 흐리게 보이게 하는 것 뿐만 아니라 글자가 뒷 배경과 비슷하게 보이는 효과는 어떻게 만들어 줄 수 있을까 궁금했는데, Vibrancy를 사용하면 비슷하게 만들 수 있을 것 같네요.

 

후기

개인적으로 이 내용을 공부하면서 꽤 많은 시행착오를 겪었고, 정리하기 위해 많은 시간을 썼는데, 결과적으론 거의 공식 문서 번역글이 된 것 같아 조금 아쉽습니다.

 

참고자료

https://www.figma.com/community/file/1248375255495415511/apple-design-resources-ios-17-and-ipados-17

Apple Design Resources – iOS 17 and iPadOS 17 | Figma Community

https://developer.apple.com/documentation/uikit/uivisualeffect

UIVisualEffect | Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uiblureffect

UIBlurEffect | Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uivibrancyeffect

UIVibrancyEffect | Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uivisualeffectview

UIVisualEffectView | Apple Developer Documentation