SwiftUI - renderingMode

안녕하세요. 그린입니다🍏

이번 포스팅에서는 SwiftUI에서 Image를 사용함에 있어 renderingMode라는것에 대해 학습해보겠습니다🙌

 

오늘 도대체 뭐할거?!

프로젝트를 만들다보면 당연히 이미지 에셋이 필요할 경우가 있습니다.

대부분 아이콘 같은 것들을 SVG 파일 형식으로 에셋에 담아 사용하는 경우가 많은데요.

이때 이미지를 에셋에 담는다면 우측 Image Set의 Render As 항목을 볼 수 있습니다.

그럼 아래와 같이 3가지의 선택 옵션이 있습니다.

 

자 오늘 다뤄볼것이 이거에요!

렌더링 모드가 어떤것이 있고 어떤 의미를 갖는지와 매번 에셋 관리자에서 수정해주지 않아도 각 코드에서 변경할 수 있도록 renderingMode 메서드를 활용하는 방법과 실제 구동 시 어떤 차이가 있는지 알아보겠습니다🙌

 

자 그럼 가보자고~

 

renderingMode(_:) 란?

공식문서에서는 렌더링모드 메서드를 이렇게 설명하고 있어요.

SwiftUI가 이미지를 있는 그대로 렌더링하는지 또는 다른 모드를 사용하여 렌더링하는지 나타냅니다.

즉 선언은 이렇습니다.

func renderingMode(_ renderingMode: Image.TemplateRenderingMode?) -> Image

Image의 TemplateRenderingMode라는 열거 타입에 정의된 값을 선택해주게 되는 형식이죠.

 

그럼 잠깐! TemplateRenderingMode가 뭔지 아주 짧게 짚고 가겠습니다🕺🏻

 

TemplateRenderingMode 란?

SwiftUI가 이미지를 렌더링 하는 방법 유형을 말합니다.

enum TemplateRenderingMode

열거 타입으로 되어 있습니다.

값으로는 original과 template 두가지가 있습니다.

original은 비트맵 이미지의 픽셀 그대로 렌더링 해줍니다.

즉, 이미지 그냥 그~대로 나타나게 되죠.

template는 모든 불투명 픽셀을 전경색으로 렌더링 해줍니다.

즉, 이미지를 이미지 그대로가 아닌 다른 요소의 영향을 받아 이미지 색상이 변할 수도 있죠.

 

이 차이는 곧 있을 예제를 통해 알아보겠습니다😊

 

renderingMode의 3가지

그럼 다시 태초로 돌아와 에셋 카탈로그에서 render as 옵션을 선택할때 3가지가 나타났었죠?

default, original image, template image

그럼 이제 굳이 설명하지 않아도 다 차이를 아실거라 생각하지만..! 한번 더 짚고 가겠습니다ㅎㅎ

original image는 위 TemplateRenderingMode가 original 값과 같아요.

즉, 이미지 그냥 그~~대로 나타내죠.

template image는 마찬가지로 template 옵션 선택과 같으며 환경에 영향을 받아 이미지가 변할 수 있습니다.

그럼 마지막으로 default로 설정되는데 얜 모야?!

default는 아직 정해지지 않았으며 사용환경에 따라 혹은 코드에 따라 original, template으로 렌더링 할 수 있습니다.

즉, 특정 용도가 정해지지 않은 상태라 보시면 됩니다!

 

어..? 그럼 지정되지 않았을때 시스템에서 렌더링 모드를 어떻게 설정해줄까요?

 

렌더링 모드를 코드로써 지정해주지 않으면 시스템에서 이미지가 사용된 렌더링 모드에 따라 이미지 렌더링을 합니다.

각 뷰와 컨트롤에서는 정해진 렌더링 모드가 있습니다.

예시를 들어 아래 항목은 UIKit 세상입니다.

UIImageView	Original
UIButton(.system)	Template
UIButton(.custom)	Original
UITabBarItem	Template
UIBarButtonItem	Template

위와 같이 각 요소에 이미지가 들어갈 경우 분명 정해진 렌더링이 있고 별도 renderingMode로 지정해주지 않는다면 이 렌더링 방법을 따라가게 됩니다.

 

자-- 그럼 renderingMode를 사용해 차이를 봐보겠습니다👏

 

renderingMode 사용하기

해볼 예시는 간단합니다.

위에서 시스템 타입의 UIButton을 사용하고 별도 지정해주지 않는다면 Template를 따라간다고했습니다.

SwiftUI 환경에서 사용할 것이고 Button으로 대체됩니다.

이걸 가지고 original과 template의 차이를 확인해보겠습니다.

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      Button(
        action: { },
        label: {
          Image("bell")
            .renderingMode(.original)
        }
      )
      
      Button(
        action: { },
        label: {
          Image("bell")
            .renderingMode(.template)
        }
      )        }
    .padding()
  }
}

아주 간단히 Button에 동일 이미지가 들어가있습니다.

이걸 돌렸을때 어떻게 나올까요?

쨔란~ 다르게 나옵니다.

별도 색 설정을 하지도 않았는데 말이죠.

이것이 original과 template의 차이에요.

Button의 기본 렌더링 모드는 template이기에 내부 label에 들어가는 이미지도 template 환경이라면 시스템 컬러를 따라가게 됩니다.

만약 이미지 카탈로그에서 template 설정을 해준다면 renderingMode 코드가 없어도 마찬가지로 나타나요.

template으로 설정한다면 원하는 이미지 색상을 foregroundColor를 통해 마음대로 넣어줄 수 가 있습니다.

 

크리스마스가 벌써 온것 같기도 하고!!🎄

 

결국 이렇게 original과 template의 차이를 적절히 활용할 수 있습니다.

더 나아가서 이미지를 조금 더 부드럽게 해주고 싶다면 antialiased라는 메서드에 대해서도 있으니 알아보면 좋아요🙌

 

마무리

쉽게 지나칠 수 있는 쉬운 옵션들에 대해서도 왜 그런지 천천히 돌이켜보는 기회가 되었습니다!

UIKit 세상이라면 동일하게 withRenderingMode 메서드로 구현할 수 있습니다ㅎㅎ

핵심은 적재적소에 쓸 줄 아는것이겠지만요🚀

 

[참고 자료]

https://developer.apple.com/documentation/swiftui/image/renderingmode(_:) 

Apple Developer Documentation

https://sarunw.com/posts/what-is-image-rendering-mode-in-ios/

What is image rendering mode in iOS | Sarunw

https://developer.apple.com/documentation/uikit/uiimage/1624153-withrenderingmode

Apple Developer Documentation