[iOS] RenderingMode (Original Image & Template Image)

RenderingMode

RenderingMode는 말 그대로 이미지에 대해 가능한 렌더링 모드를 지정하는 것

RenderingMode는 autoMatic, alwaysOriginal, alwaysTemplate이라는 3가지의 case를 가짐

 

 

 

 

 

 

 

 

 

 

RenderingMode의 세 종류

automatic : context의 기본 랜더링 모드를 이용해 이미지를 그림

alwaysOriginal: 템플릿으로 다루지 않고 항상 오리지널 이미지를 그림

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

RenderingMode 사용 이유

각 모양 스타일에 맞는 이미지 자산 관리 밎 올바른 이미지를 프로세스를 간소화시키기 위함

비트맵 이미지를 만드는 대안으로 템플릿 이미지나 심볼 이미지를 사용함으로써 다크모드를 지원하는 프로세스를 단순화 한다.

또한 위 두형의 이미지는 앱과 함께 옮겨져야 하는 이미지 에셋의 수를 줄여줌

비트맵 이미지 VS 템플릿 이미지 VS 심볼 이미지 

비트맵 이미지 

- jpg, png, jpeg와 같은 확장자를 가진 일반적으로 알고 있는 이미지

 

템플릿 이미지

- 그릴 모양을 지정하지만 관련 색상 정보를 지정하지 않는 이미지

- 이미지의 불투명성이 중요함(ex: 미디어 앱의 재생 버튼)

-  틴트 색상을 통해 색상변경이 가능

 

심볼 이미지

- 템플릿 이미지와 유사하며 벡터기반이므로 다른 크기로 확장됨

- 벡터기반이기 때문에 확대 시 깨지지 않음

 

Rendering Mode  - alwyasOriginal, alwaysTemplate

위가 오리지널이미지(원본 색 유지)

아래가 템플릿이미지(틴트 컬러로 색상을 채움, 기본 컬러가 파란색)

@IBOutlet var weatherImageView: UIImageView!
@IBOutlet var weatherImageView2: UIImageView!

 override func viewDidLoad() {
    super.viewDidLoad()
    weatherImageView.image = UIImage(systemName: "cloud.sun.fill")?.withRenderingMode(.alwaysOriginal)
    weatherImageView2.image = UIImage(systemName: "cloud.sun.fill")?.withRenderingMode(.alwaysTemplate)
}

위와 같이 이미지를 설정해줄 때 withRenderingMode로 랜더링 모드를 지정해줄 수 있음

weatherImageView2.tintColor = .green

템플릿 이미지는 tintColor를 통해 채워지는 색을 지정함으로 tintColor로 색을 변경가능

이미지를 항상 alwaysOriginal 또는 alwaysTemplate으로 사용하기

이미지뷰마다 renderingMode를 지정하기 힘들 때 asset을 통해 항상 동일한 모드로 이미지가 랜더링 되게 할 수 있음

Assets.xcassets에서 해당하는 이미지 클릭 후 Render As 항목을 원하는 모드로 지정

 

 

참고

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

https://developer.apple.com/documentation/uikit/uiimage/providing_images_for_different_appearances#3234548

https://dev-mandos.tistory.com/63