Swift에서 페이스북 사진의 배경색을 바꾸려면 어떻게 해야 할까요?
📢 : Template Image로 적용하고 tintColor를 적용해주면 됩니다.
그렇다면 Template Image가 뭔지 알아봐야 합니다.
이미지의 불투명한 부분만 나타내는 비트맵
불투명한 부분이라는 말이 잘 와닿지 않는데, 이 말은 alpha가 0이 아니라는 의미와 같습니다.
그렇다면 위의 사진을 Template Image로 적용해보겠습니다.
Template Image로 적용하는 법
Asset 파일에서 표시된 부분을 Template Image 로 변경해주면 됩니다.
Template Image로 적용하게 되면, 불투명한 비트맵을 tintColor로 모두 채우게 됩니다.
아무것도 설정하지 않으면 .systemBlue 가 기본적인 색상으로 불투명한 비트맵을 모두 칠하게 됩니다. systemGreen 으로 변경하고 결과를 한 번 볼까요?
페이스북 로고를 모두 .systemGreen 로 칠하게 된 것을 볼 수 있습니다. 기대한 것은 f 로고를 제외하고 배경만 초록색으로 나온 모습인데 왜 이런 결과가 나온 걸까요?
페이스북 로고 사진에서 문제점은 투명한 부분이 없습니다. f 로고가 흰색일 뿐 투명하지 않기 때문입니다.
투명해야 tintColor의 영향을 받지 않기 때문에 f 로고를 투명하게 만들 필요가 있습니다.
포토샵을 이용해서 다음과 같이 f 로고를 투명하게 만들어주고 저장합니다. 포토샵은 해당 블로그를 참조했습니다.
다시 사진을 적용하면 투명한 부분을 제외하고 불투명한 부분을 모두 tintColor로 채우게 됩니다.
UIImage.RenderingMode.automatic
렌더링 모드는 코드로도 변경이 가능합니다. 총 3가지의 열거형이 있는데 다음과 같습니다.
-
.alwaysTemplate
불투명한 부분을 비트맵으로 식별하고, tintColor로 채웁니다. -
.alwaysOriginal
이미지의 기존에 존재하는 색상으로 렌더링합니다. tintColor의 영향을 받지 않습니다. -
.automatic
Context의 기본 렌더링 모드를 통해서 이미지를 렌더링합니다.
매우 간단하지만 이번 기회를 통해 Template Image의 개념에 대해서 알게되었고, 사용할 일이 있을 때 상황에 맞게 잘 사용하면 될 거 같습니다🙂
참고문헌
https://developer.apple.com/documentation/uikit/uiimage/renderingmode-swift.enum/automatic
https://closed0402.tistory.com/70
