본문 바로가기
Kor/UX&UI

Pass Through 레이어 혼합모드란?

by PD Miles 2024. 7. 2.
반응형

Pass Through와 그 외의 모드: 차이점과 활용법

그동안에는 레이어 혼합 모드에 따라 레이어 간의 영향을 끼치는 방식이 다르다는 점을 크게 인식하지 않고 사용했는데, 문득 Pass-Through 모드가 어떤 방식이고 왜 색상이나 이펙트 같은 곳에도 레이어 혼합모드를 설정할 수 있는 부분이 궁금해졌다.

Pass Through란?

Pass Through란 ‘통과’한다는 의미로 해석이 되는데, 아래의 이미지를 보면서 이해하면 좀 더 이해가 쉬울 것 같다.

 

1. 우선 도형과 텍스트가 하나로 묶인 그룹 레이어와 배경 레이어를 준비한다. 이때 그룹 레이어의 혼합 모드는 기본적으로 Pass Through로 되어있을 것이다.

 

2. 다음은 그룹 내의 텍스트의 혼합 모드를 Soft Light로 변경해보았다. 이때 함께 묶여있는 도형 뿐만 아니라 그룹 바깥의 배경에도 혼합 모드가 적용되는 것을 볼 수 있다.

Group Layer 혼합 모드 Soft Light일때 Pass through의 경우

 

3. 그럼 이때 그룹의 혼합모드를 Normal로 바꾸면 어떻게 될지 실험해봤고, 결과는 내부의 도형과의 상호작용은 남아있고 외부의 배경과의 상호작용은 없어지는 것을 알 수 있었다.

Group Layer 혼합 모드 Soft Light일때 Normal의 경우

 

이처럼 혼합 모드가 ‘Pass through’일 때는 그룹 내의 다양한 혼합 모드들이 외부와 자연스럽게 상호작용할 수 있도록 만들어주며, 'Normal'로 변경하면 그룹이 하나의 독립적인 레이어처럼 작동하여 그룹 내의 레이어끼리만 상호작용 하도록 만들어진다. (외부와의 상호작용이 없어진다.)

 

그 외의 Dissolve, Multiply 등으로 그룹 레이어의 혼합 모드를 설정하는 경우 그룹 레이어의 혼합모드와 함께 내부 레이어들의 혼합모드가 섞여서 작용된다.

 

그리고 조금 더 공부해봐야 하겠지만 Layer의 내부 요소별 혼합모드(Fill, Stroke 등)을 변경한 후에 Layer 혼합모드를 변경하면 내부 요소별 혼합모드는 무시된채로 Layer 혼합모드 효과가 적용되는 결과를 얻었다.

 

다만 내부 요소를 중첩해서 여러가지 혼합 모드를 사용하는 경우에는 각 요소끼리 상호작용하는 것을 알 수 있었다.

레이어 혼합모드의 위계를 정리하면 아래와 같다.

 

혼합 모드의 위계 정리

  1. Group Layer 혼합모드와 내부 Layer 혼합모드는 서로 상호작용한다.
  2. Layer의 내부 요소별 혼합모드(Fill, Stroke 등)는 Layer 혼합모드 및 Group Layer 혼합모드와 함께 적용되지 않는다.
  3. Layer의 내부 요소별 혼합 모드끼리는 상호작용한다. (ex. 한 도형에 컬러를 여러개 넣는 경우)

Fill, Stroke, effect 등의 요소 안에 있는 레이어 혼합모드

혼합 모드의 종류 정리

  • Normal (보통)
    • 기본 모드로, 레이어의 원본 색상을 그대로 유지합니다. 하위 레이어와의 상호작용이 없습니다.
  • Dissolve (해제)
    • 레이어의 픽셀을 무작위로 분포시켜 점묘화된 효과를 냅니다. 불투명도가 낮을 때 더 두드러집니다.
  • Darken (어둡게)
    • 하위 레이어의 색상과 비교하여 더 어두운 색상을 유지합니다.
  • Multiply (곱하기)
    • 레이어의 색상을 곱하여 어둡게 만듭니다. 검은색과 혼합되면 검은색이 되고, 흰색과 혼합되면 변화가 없습니다.
  • Color Burn (색상 번)
    • 하위 레이어의 색상을 더 어둡게 만들고 대비를 높입니다.
  • Linear Burn (선형 번)
    • Color Burn과 비슷하지만, 더 부드럽게 어둡게 만듭니다.
  • Lighten (밝게)
    • 하위 레이어의 색상과 비교하여 더 밝은 색상을 유지합니다.
  • Screen (스크린)
    • 레이어의 색상을 곱의 반대 연산으로 밝게 만듭니다. 검은색과 혼합되면 변화가 없고, 흰색과 혼합되면 흰색이 됩니다.
  • Color Dodge (색상 닷지)
    • 하위 레이어의 색상을 더 밝게 만들고 대비를 높입니다.
  • Linear Dodge (선형 닷지)
    • Color Dodge와 비슷하지만, 더 부드럽게 밝게 만듭니다.
  • Overlay (오버레이)
    • Multiply와 Screen을 결합한 효과를 냅니다. 중간 색상(회색)은 변하지 않고, 어두운 부분은 더 어둡게, 밝은 부분은 더 밝게 만듭니다.
  • Soft Light (부드러운 빛)
    • 부드러운 조명을 비춘 듯한 효과를 냅니다. Overlay보다 부드럽고 자연스러운 결과를 냅니다.
  • Hard Light (강한 빛)
    • 레이어에 강한 조명을 비춘 듯한 효과를 냅니다. Overlay의 역효과를 냅니다.
  • Vivid Light (선명한 빛)
    • Color Burn과 Color Dodge를 결합한 효과를 냅니다. 대비가 매우 강해집니다.
  • Linear Light (선형 빛)
    • Linear Burn과 Linear Dodge를 결합한 효과를 냅니다.
  • Pin Light (핀 빛)
    • 하위 레이어의 중간색을 제거하여 이상한 대비를 냅니다.
  • Hard Mix (강한 혼합)
    • 두 레이어의 RGB 값의 합이 255가 넘으면 흰색, 그렇지 않으면 검은색이 됩니다.
  • Difference (차이)
    • 두 레이어의 색상 차이를 계산하여 결과를 만듭니다. 극적인 효과를 냅니다.
  • Exclusion (제외)
    • Difference와 비슷하지만, 대비가 낮아 더 부드러운 효과를 냅니다.
  • Subtract (빼기)
    • 하위 레이어에서 상위 레이어의 색상을 뺍니다. 어둡게 만드는 효과를 줍니다.
  • Divide (나누기)
    • 하위 레이어의 색상을 상위 레이어의 색상으로 나눕니다. 밝게 만드는 효과를 줍니다.
  • Hue (색상)
    • 상위 레이어의 색상(Hue)을 하위 레이어의 색상에 적용합니다.
  • Saturation (채도)
    • 상위 레이어의 채도를 하위 레이어의 색상에 적용합니다.
  • Color (색상)
    • 상위 레이어의 색상과 채도를 하위 레이어의 색상에 적용합니다. 이미지의 명도는 유지됩니다.
  • Luminosity (명도)
    • 상위 레이어의 명도를 하위 레이어의 색상에 적용합니다.

 

반응형