[iOS] UIImage Rendering Mode에 대해 알아보자!

앱을 개발하면서, SF Symbols에 있는 이미지를 사용할 때가 있는데, 이미지의 색깔이 이상하게 나오는 경우가 있었을 것입니다.

UIImage의 Rendering Mode에 대해 알아봅시다.

간단하게 스토리보드로 ViewController에 UIImageView를 하나 추가하고, Outlet으로 연결해주었습니다.

이제 이 이미지뷰의 이미지를 "cloud.rain.fill"로 코드로 작성해주겠습니다.

SF Symbols에서 확인해보니 이렇게 생겼군요..!

실행된 시뮬레이터를 보면 초기로 셋팅된 틴트컬러로 이미지가 나오는 것을 확인하실 수 있습니다.

이제 UIImage의 Render Mode에 대해 확인해보겠습니다.
가장 먼저 공식문서를 살펴보겠습니다.

https://developer.apple.com/documentation/uikit/uiimage/renderingmode

Apple Developer Documentation

Render Mode

View의 배경색을 변경해준 후, 각각의 case에 대해서 실행시켜보겠습니다.

1. automatic

default 값이며 기본 렌더링 모드를 사용하여 이미지를 그림

• tintColor를 사용하니 그대로 불투명한 부분이 tintcColor로 나오는 것을 확인하실 수 있습니다.

2. alwaysOriginal

항상 원본 이미지를 템플릿으로 취급하지 않고 이미지를 그림

• 원본 이미지를 그대로 보여줍니다.
• SF Symbols에서의 팔레트 이미지를 보여줍니다.

3. alwaysTemplate

이미지의 색상 정보를 무시하고 항상 템플릿 이미지로 이미지를 그림

• 기존에 있는 원본 이미지의 색상을 무시하고, 불투명한 부분을 tintColor로 그립니다.
• SF Symbol의 이미지보단, Assert에 이미지를 하나 추가해서 예를 드는게 더 낫겠군요!

귀여운 고양이 사진을 하나 추가했습니다.

view의 배경색을 white로 바꿔주고, image도 바꿔주고, UIImageView의 tintColor를 yellow로 줘보겠습니다.
이번엔 renderingMode를 default 값인 automatic으로 사용할게요.

색상이 변경되지 않은 것을 확인하실 수 있습니다.

renderingMode를 alwaysTemplate으로 주면 어떨까요?

이제서야 잘 변경된 것을 확인하실 수 있습니다.

Asset에서도 Rendering Mode를 변경하실 수 있습니다.

이번 포스팅에서는 Image의 Rendering Mode에 대해서 알아보았습니다.

지적 댓글 환영입니다.