[iOS] Image Rendering Mode

이번엔 Image Rendering Mode에 대해 알아보았다.

 

최근에 새싹 실습을 진행하며 Button에서 이미지가 파란색으로 보이는 경험을 자주 했다.

버튼의 타입이 System인 경우에 빌드 시, 왼쪽과 같은 결과가 나옴.

 

나는 분명 버튼에 이미지를 제대로 넣었는데 왼쪽과 같이 파란색으로 나왔다. 

 

오류를 해결하기 위해 알아낸 방법은 버튼의 type을 Custom으로 바꿔주는 방법이었다.

버튼의 타입이 Custom인 경우엔 이미지가 제대로 표시됨.

 

이는 Rendering Mode에 의한 결과인데, 공식문서에서 관련 글을 찾아보면 아래와 같은 설명이 나와있다.

 

"The rendering mode controls how UIKit uses color information to display an image."

"Rendering mode는 UIKit이 색상 정보를 이용하여 이미지를 보여주는 방법을 제어합니다."

-> 해석이 완벽하지 않을 수 있음.

 

색상 정보라는 말을 들으니 슬슬 감이 올 것이다.

 

문서를 이어서 보면, rendering mode에는 다음과 같은 세 가지 경우가 존재한다.

 

• automatic
  -> default rendering mode를 이용해 이미지를 그린다.
• alwaysOriginal
  -> template으로 취급하지 않고, 항상 원래의 이미지를 그린다.
• alwaysTemplate
  -> 색상 정보를 무시한채, 항상 template 이미지로 이미지를 그린다.

그렇다. 버튼의 타입이 system인 경우, 이미지가 파랗게 그려진 것은 template이미지로 그려졌기 때문이었다.

 

여기서 의문이 생긴다. 

 

왜 같은 버튼이어도 타입에 따라 이미지가 다르게 rendering되는 것일까?

 

이를 알아보기 위해 네비게이터 영역의 Assets으로 가서 추가했던 이미지 에셋의 Attributes inspector를 확인해보자.

 

눈에 띌만큼 익숙한 "Render As"를 드롭다운해보면 Default, Original, Template 세 가지의 선택지를 볼 수 있다.

 

위에서 이미 세 가지 렌더링 모드를 알아보았기 때문에 각각 어떤 것을 의미하는지 쉽게 파악할 수 있다.

 

분명 Default는 automatic, Original은 alwaysOriginal, 그리고 Template은 alwaysTemplate와 대응될 것이다.

 

오브젝트마다 default한 rendering mode가 있는데, 이미지 에셋의 "Render As"가 default라면 오브젝트들의 default rendering mode값에 따라 이미지가 렌더링된다.

 

즉, 타입이 System인 버튼의 이미지가 파랗게 나온 것은 버튼의 default rendering mode값이 Template이기때문이다.

 

아래의 사진을 보면 오브젝트들의 default rendering mode를 확인할 수 있다.

 

 

 

 

 

 

출처: https://sarunw.com/posts/what-is-image-rendering-mode-in-ios/#asset-catalog

 

 

지금까지의 내용을 통해 왜 버튼 별로 이미지가 다르게 나오는지 알 수 있었다.

 

그렇다면 항상 원본 이미지가 나오게 하려면 어떻게 해야할까.

 

위에 에셋에서 Render As를 Original로 바꿔주면된다. 

 

Template으로 렌더링을 하고 싶다면, 마찬가지로 Template으로 바꿔주면 오브젝트에 관계없이 설정된 렌더링 모드로 이미지가 나올 것이다.