SwiftUI - blendMode

안녕하세요. 그린입니다 🍏

이번 포스팅에서는 SwiftUI의 blendMode라는 뷰 모디파이어를 알아보겠습니다 🙋🏻

 

바로 이전 포스팅인 compositingGroup에 대해 다룰때 슬쩍 blendMode를 통해 겹쳐지는 컴포넌트들의 시각 효과를 다룰 수 있다고 언급했습니다.

그렇기에 이번 포스팅에서 이 blendMode가 무엇인지 어떻게 사용되는지 알아보시죠!

 

---

blendMode?

혼합 모드라고 직역이 되며 어떠한 뷰를 겹치는 뷰와 합성하기 위한 모드 방식을 설정하는것입니다.

즉, 겹쳐지는 뷰에 대해 시각적 효과를 제어하는것이죠.

iOS 13 이상이니 SwiftUI를 사용하는 미니멈 타겟 환경이라면 모두 이 뷰 모디파이어를 사용할 수 있습니다.

 

func blendMode(_ blendMode: BlendMode) -> some View

 

선언은 이러하며 아주 평범한 뷰 모디파이어처럼 사용할 수 있는데요.

여기서 BlendMode라는 enum 타입을 인자로 받죠.

해당 값에는 컨텐츠가 겹치는 뷰를 합성하는 모드를 고를 수 있습니다.

실제적으로 이 모드에 따라 어떻게 시각적으로 표현되는지 다르겠죠!

 

이 BlendMode 타입을 들어가면 아주 다양하게 있는걸 볼 수가 있습니다.

 

 

이걸 다 어떤 사용인지 외울수도 매번 알고 있는것에 무리가 있으니, 필요할때 적용해보면서 해당 효과를 원했던것이 맞는지 확인해보는게 좋겠어요 🥲

 

그럼 공식문서의 간단한 예제 코드를 통해 이제 어떻게 사용되는지 알아볼까요?

---

blendMode 사용하기

우선 blendMode를 사용하지 않고 베이스가 되는 간단한 코드를 보겠습니다.

 

import SwiftUI

struct ContentView: View {
  var body: some View {
    HStack {
      Color.yellow.frame(width: 50, height: 50, alignment: .center)
      
      
      Color.red.frame(width: 50, height: 50, alignment: .center)
        .rotationEffect(.degrees(45))
        .padding(-20)
    }
  }
}

 

노란 정사각형 하나가 아래 깔리고 그 위에 빨간 마름모가 겹쳐서 표현되는 코드입니다.

 

 

즉, 이렇게 예상대로 표현되겠죠?

 

그런데 여기서 이 겹치는 포인트들을 우리는 blendMode로 여러 시각적 효과로 보여질 수 있도록 다뤄줄 수 있습니다.

 

우선, 가장 기본적으로 default인 normal은 뷰 위에 그리니 지금과 같은 형태입니다.

 

그럼, 공식문서에서 먼저 소개된 colorBurn이라는 값으로 설정하면 어떻게 될까요?

 

import SwiftUI

struct ContentView: View {
  var body: some View {
    HStack {
      Color.yellow.frame(width: 50, height: 50, alignment: .center)
      
      
      Color.red.frame(width: 50, height: 50, alignment: .center)
        .rotationEffect(.degrees(45))
        .padding(-20)
        🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻🙋🏻
        .blendMode(.colorBurn)
    }
  }
}

 

코드는 이러하고 적용하고 싶은 뷰에 blendMode 뷰 모디파이어를 인자를 넣어줘서 호출하면 됩니다!

위 코드는 이렇게 그려지게 됩니다.

 

 

colorBurn은 Darkening 종류로 적용시킨뷰가 깔려있는 뷰에 따라 환해져서 날아가는것 같은 효과를 줍니다.

실제로는 두 레이어를 합칠 때 하위 레이어의 색상을 상위 레이어의 색상으로 태워서 더 어두운 톤을 만든다고 합니다.

즉, 색상의 대비를 강조할때 유용하게 사용되는것 같아요.

공식문서에 설명이 없어 유추해보니 그러한것 같아요 🥲

 

해당 마름모를 빨간색에서 blue로 변경하면 어떤 느낌인지 명확하게 더 추론이 가능해져요.

 

 

동일 코드에 마름모 색상만 변경시킨건데, 보이시는것처럼 해당 마름모 뷰의 색상이 밝아졌습니다.

뭔가 밝은 색상에서의 큰 변화는 없는것 같은데 어두운 영역에서 색상을 대조시켜줘서 효과를 더 부각시켜주는 느낌이 듭니다.

 

실제로 이 blendMode를 밑에 깔린 뷰에 적용하고 colorBurn을 적용해볼까요?

 

import SwiftUI

struct ContentView: View {
  var body: some View {
    HStack {
      Color.red.frame(width: 50, height: 50, alignment: .center)
        .rotationEffect(.degrees(45))
        .blendMode(.colorBurn)
      
      Color.yellow.frame(width: 50, height: 50, alignment: .center)
        .padding(-20)
      
    }
  }
}

 

 

자 신기하게 빨간 마름모가 날아가서 보이지 않습니다.

해당 red를 black으로 바꾸면 안보이지 않아요.

즉, 그렇기에 이 blendMode를 어떤 색상에 어떻게 적용하는지에 따라 천차만별로 보여질 수 있습니다. 

 

모든걸 다 다룰 수 없으니 하나 정도 더 알아볼까요?

Lightening 종류들 중 screen이라는것이 있어요.

상위 레이어와 하위 레이어의 색상을 합쳐서 밝게 만들어주는 역할을 가집니다.

screen 모드 자체가 RGB의 값을 반전시켜서 그 반전된 값들을 곱한 결과를 반전시켜 최종적인 색상을 결정하게 해줍니다.

그럼으로 색상을 밝게 변화시켜주면서도 두 레이어의 색상 정보를 유지해 자연스러운 합성 효과를 가지게 해줘요!

어두운 모드에서는 거의 영향을 받지 않지만, 밝은 모드에서는 전체적으로 요소가 더 밝아 보이기에 실제로 안보일 수도 있습니다.

밝은 부분을 강조하거나 어두운 모드에서 빛과 같은 효과를 줄 때 인상적으로 사용될 수 있어요..!

 

한번 볼까요?

 

ZStack {
  Circle()
    .fill(.red)
    .frame(width: 200)
    .offset(x: -50, y: -80)
    .blendMode(.screen)
  
  Circle()
    .fill(.green)
    .frame(width: 200)
    .offset(x: 50, y: -80)
    .blendMode(.screen)
  
  Circle()
    .fill(.blue)
    .frame(width: 200)
    .blendMode(.screen)
}

 

해당 RGB의 삼원색 빨강 / 초록 / 파랑 새 원이 있습니다.

각 원은 적절히 삼각 편대처럼 구성되도록 되어 있고, 사이 겹치는 색상들이 존재하죠.

 

blendMode는 screen으로 적용되어 있는걸 볼 수 있습니다.

 

여기서, 이 ZStack의 백그라운드가 하얀색이면 어떻게 나올까요?

 

 

밝아져서 아무것도 나타나지 않는것처럼 보입니다.

 

그런데 이 백그라운드를 어둡게 만들어보면 어떨까요?

 

 

자연스럽게 원색을 유지하며 나타나고 겹치는 부분의 색상도 자연스러운걸 볼 수 있어요.

 

이렇게, 해당 blendMode에 다양하게 값들을 넣어보시면 어떤 차이들을 가지는지 알 수 있을거에요 😃

 

---

마무리

모든 값들에 대해 어떤 효과를 가지는지 공식문서에도 자세하게까지 나와있지 않아서 실제로 해보면서 유추를 하는게 중요한것 같습니다!

진짜 너무 많고 유추가 안되는것도 있지만...

그래도 이런 시각적 효과를 blendMode를 적절히 사용하면 표현할 수 있다는걸 알고 있는것만으로도 도움이 많이 될것 같네요.

 

---

레퍼런스

blendMode(_:) | Apple Developer Documentation

 

BlendMode | Apple Developer Documentation

https://www.hackingwithswift.com/books/ios-swiftui/special-effects-in-swiftui-blurs-blending-and-more