SwiftUI) 이미지 색상 변경하기 (RenderingMode)

안녕하세요. 이번 포스팅에서는 SwiftUI에서 Image 색상 변경 방법에 대해 정리해보았습니다.

이미지 색상 변경

Apple에서 기본적으로 제공하는 SF Symbols의 경우는 .foregroundStyle(_ :) 모디파이어를 사용해서 색상을 변경할 수 있는데요

struct ContentView: View {
    var body: some View {
        Image(systemName: "swift")
            .resizable()
            .frame(width: 120, height: 120)
            .foregroundStyle(.red)
    }
}

하지만 프로젝트를 하다보면 애플에서 제공하는 아이콘으로만은 부족할 때가 있죠.
그럴 때는 이미지 Asset을 추가해서 사용하는 경우가 많은데요.
이러한 이미지를 .foregroundStyle(_ :) 모디파이어로 색상을 지정해주게 되면

struct ContentView: View {
    var body: some View {
        Image("Tree")
            .resizable()
            .frame(width: 120, height: 120)
            .foregroundStyle(.red)
    }
}

빨간색으로 설정했지만 색상이 변경되지 않았습니다. 이러한 이유는 각 이미지마다 렌더링 모드가 다르기 때문인데요. 이에 대해 알아보겠습니다.

renderingMode

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

애플 문서에서는 이를 "SwiftUI가 이미지를 그대로 렌더링하는지, 아니면 다른 모드를 사용하여 렌더링하는지를 나타냅니다." 라고 설명하고 있는데요.

Image.TemplateRenderingMode 열거 타입의 값을 설정해주어 이미지를 어떤 식으로 렌더링할지 선택할 수 있습니다.

enum TemplateRenderingMode

.original와 .template 두 개의 값이 있는데요.

.original은 이미지의 원본 색상을 그대로 유지하여 표시하고
.template은 이미지의 불투명한 부분을 전경색으로 변경하여 표시합니다.

즉 아래사진처럼 불투명한 부분만 전경색으로 변경하여 표시하는거죠

어릴 적 색칠놀이 비슷하게 생각하시면 되지 않을까요?

즉 Asset에 추가한 이미지의 색상을 변경하고 싶다면 렌더링모드를 .template로 변경 후 .foregroundColor(_ :)를 지정해주면 불투명한 부분을 색상 변경해줄 겁니다

struct ContentView: View {
    var body: some View {
        Image("Tree")
            .renderingMode(.template)
            .resizable()
            .frame(width: 120, height: 120)
            .foregroundStyle(.green)
    }
}

Assets에서 이미지 렌더링 모드 설정하기

렌더링 모드는 코드가 아닌 에셋 카탈로그에서도 변경할 수 있습니다.

전체소스 코드