본문으로 건너뛰기

블렌드 모드

블렌드 모드 이해하고 쓰기 (디자이너용)​

이 문서는 Grida에서 블렌드 모드를 어떻게 쓰면 되는지, 페인트(필/스트로크)들이 어떤 순서로 섞이는지, 그리고 Pass Through 같은 특수 레이어 동작을 언제 써야 하는지 쉽게 설명합니다. 수식은 없고, 결과를 예측하는 데 필요한 느낌 위주로 적었습니다.

한 줄 요약 (TL;DR)​

  • 페인트는 아래에서 위로 쌓입니다. 목록의 마지막 항목이 화면에서 가장 위(Top)입니다.
  • 각 페인트는 자신만의 블렌드 모드와 불투명도를 가지고, 자신보다 아래에 있는 결과 위에 섞입니다.
  • 첫 번째 페인트의 블렌드 모드도 배경과 제대로 섞입니다. (아무것도 없는 것과 섞는 게 아님)
  • 레이어에는 레이어용 모드가 따로 있습니다. Pass Through는 “그냥 평소처럼 배경과 섞이게” 하는 것이고, 특정 레이어 블렌드를 고르면 “레이어 전체를 하나로 만든 뒤” 배경과 섞습니다.
  • UI에서는 편의상 위에 있는 페인트가 먼저 보이지만, 엔진은 항상 “아래→위” 순서로 그립니다.

딱 하나만 읽어야 한다면

  • 순서가 중요합니다. 맨 위 페인트가 불투명하면 그 아래는 가려집니다.
  • 레이어는 기본적으로 Pass Through를 쓰세요. 정말 레이어 전체를 하나로 묶어 섞고 싶을 때만 레이어 블렌드를 선택하세요.

비하인드 신 (선택)​

Grida는 “페인트 스택” 모델을 씁니다.

  • 아래 → 위 순서: 엔진은 “그릴 순서”로 보관합니다. 첫 페인트가 먼저, 그 위에 다음 페인트가 차례대로 섞입니다. (UI는 보기 편하게 위에 있는 페인트부터 보여줄 수 있어요.)
  • 페인트별 블렌드: 각 페인트의 blend_mode가, 이미 그려진 결과와 어떻게 섞일지를 정합니다.
  • 첫 페인트도 정상 작동: 스택의 첫 페인트도 배경과 그 모드대로 섞입니다. (예: 첫 페인트가 Multiply면 배경을 자연스럽게 어둡게 만듭니다.)

실전 규칙: 맨 위 페인트가 완전 불투명하면 그 부분은 아래가 보이지 않습니다. 섞이게 하려면 투명도를 주거나, 섞이는 느낌의 모드를 쓰세요.

레이어 블렌드 vs 페인트 블렌드​

디자이너 요약: “페인트 모드”는 오브젝트 내부의 각 항목이 서로 섞이는 방식이고, “레이어 모드”는 오브젝트 전체가 배경과 섞이는 방식을 정합니다.

  1. 페인트 블렌드 모드 (필(Fill)/스트로크(Stroke)의 각 항목)
  • 해당 페인트가 “이미 그려진 것” 위에 어떻게 얹힐지 결정합니다.
  1. 레이어 블렌드 모드 (오브젝트 전체)
  • 특정 모드(예: Normal, Multiply 등)를 고르면, “레이어를 하나로” 만든 뒤 그 결과를 배경과 섞습니다.
  • Pass Through를 고르면, 레이어를 따로 떼어내지 않고 내부 페인트들이 배경과 자연스럽게 서로 영향을 주고받습니다.

언제 뭘 쓰나요?

  • 기본은 Pass Through. 내부 페인트가 배경과 자연스럽게 상호작용합니다.
  • 레이어 블렌드는 “전체를 하나로 굳힌 다음에” 섞고 싶을 때 선택하세요. (배경과의 예기치 않은 상호작용을 막고 싶을 때 유용)

블렌드 모드 모아보기 (쉽게 설명)​

예시 썸네일 이미지는 나중에 추가할 예정입니다.

Pass Through (레이어)​

  • 무엇을 하나요: 레이어를 따로 떼지 않습니다. 내부 페인트/자식들이 배경과 그대로 섞입니다.
  • 안쪽 이야기: 임시 레이어를 만들지 않습니다. 페인트 단위의 섞임이 그대로 적용됩니다.
  • 언제 쓰면 좋을까요: 대부분의 경우 기본값으로 적합. 그룹/컨테이너가 배경과 자연스럽게 어울리게 하고 싶을 때.

Normal (기본)​

  • 무엇을 하나요: 위의 색이 불투명도만큼 아래를 덮습니다.
  • 언제 쓰면 좋을까요: 특별한 섞임 없이 투명도만 조절하고 싶을 때.

Multiply​

  • 무엇을 하나요: 어둡게 만듭니다. 흰색은 변화가 거의 없고, 검정은 검정이 됩니다.
  • 언제 쓰면 좋을까요: 그림자, 잉크/텍스처를 얹을 때, 색이 자연스럽게 섞여야 할 때.

Screen​

  • 무엇을 하나요: 밝게 만듭니다. Multiply의 반대 느낌. 검정은 영향이 거의 없고, 흰색은 하얗게 밀어 올립니다.
  • 언제 쓰면 좋을까요: 하이라이트, 빛 번짐, 글로우 효과.

Overlay​

  • 무엇을 하나요: 어두운 부분은 더 어둡게, 밝은 부분은 더 밝게 해서 대비를 키웁니다.
  • 언제 쓰면 좋을까요: 전체적으로 “팡” 하고 살아나게 만들고 싶을 때.

Darken / Lighten​

  • Darken: 더 어두운 쪽을 선택합니다. 더 밝은 픽셀은 교체됩니다.
  • Lighten: 더 밝은 쪽을 선택합니다. 더 어두운 픽셀은 교체됩니다.
  • 언제 쓰면 좋을까요: “무조건 더 어두운 것/더 밝은 것”을 고르고 싶을 때.

Color Dodge / Color Burn​

  • 무엇을 하나요: Dodge는 강하게 밝히고, Burn은 강하게 어둡게 합니다.
  • 언제 쓰면 좋을까요: 강렬한 하이라이트(번쩍)나 깊은 그림자(묵직함)가 필요할 때. 과하면 튈 수 있어요.

Hard Light / Soft Light​

  • Hard Light: 펀치감 있는 조명 느낌. 대비와 존재감이 확 살아납니다.
  • Soft Light: 부드러운 조명 느낌. 은은한 광택/분위기를 더합니다.
  • 언제 쓰면 좋을까요: 하드는 강한 임팩트, 소프트는 분위기/결을 살리고 싶을 때.

Difference / Exclusion​

  • Difference: 두 색의 차이를 강조해 반전된 듯한, 강한 효과를 만듭니다.
  • Exclusion: Difference의 부드러운 버전. 덜 거칠고 덜 하이콘트라스트.
  • 언제 쓰면 좋을까요: 실험적인 효과, 엣지/선 강조, 크리에이티브 합성.

Hue / Saturation / Color / Luminosity​

  • 이 모드들은 색의 성질을 나눠 가져옵니다:
    • Hue: 위(소스)의 색상만 가져오고, 아래의 밝기/디테일은 유지.
    • Saturation: 위의 채도 강도만 가져오고, 아래의 색 구조는 유지.
    • Color: 컬러라이징에 좋음. 위의 색상+채도를 쓰고, 아래의 밝기는 유지.
    • Luminosity: 위의 밝기를 쓰고, 아래의 색상/채도는 유지.
  • 언제 쓰면 좋을까요: 흑백 사진에 색 입히기, 톤은 유지하면서 색감만 바꾸기 등.

불투명도와 순서는 정말 중요해요​

  • 불투명도는 블렌드 효과와 함께 누적됩니다. Screen 50%가 생각보다 약할 수 있어요. 모드와 불투명도를 같이 만져보세요.
  • 순서가 다르면 결과도 달라집니다. Multiply 위에 Screen과, Screen 위에 Multiply는 다릅니다.
  • 맨 위 페인트가 완전 불투명하면 그 아래는 보이지 않습니다. 보이게 하려면 투명도를 주거나, 보이는 방식의 모드를 쓰세요.

UI 정렬 vs 엔진 정렬​

  • UI는 편하게 편집하려고 “위에 있는 것 먼저” 보여줄 수 있습니다.
  • 엔진은 항상 “아래 → 위” 순서로 저장/렌더합니다. 새 페인트를 추가하면 스택 맨 끝(=가장 위)에 붙습니다.
  • 결과가 생각과 다르면, “순서/불투명도/레이어 모드(Pass Through인지)”를 먼저 확인하세요.

Pass Through (레이어 합성)​

Pass Through는 레이어를 배경과 어떻게 섞을지 정하는 옵션입니다.

  • Pass Through: 레이어를 따로 떼지 않습니다. 내부 페인트/자식이 배경과 그대로 섞입니다. (기본값)
  • 특정 레이어 블렌드(예: Normal, Multiply, Overlay): 레이어 전체를 먼저 하나로 만든 뒤, 그 결과를 배경과 섞습니다.

언제 Pass Through?

  • 내부 페인트가 배경과 자연스럽게 상호작용해야 할 때.
  • 배경과의 실시간 어울림이 중요한 효과를 만들 때.

언제 레이어 블렌드?

  • 내부를 먼저 “굳혀” 하나로 만든 뒤, 배경과 깔끔하게 섞고 싶을 때.
  • 예측 가능한 결과(하나의 비트맵 같은 동작)가 필요한 경우.

팁: 두 개념은 함께 쓸 수 있습니다. 내부는 페인트 모드로 섞고, 레이어는 Pass Through인지 하나로 묶을지 선택하세요.

예시 시나리오 (이미지는 추후 추가)​

  1. Single Solid

    • Normal, 불투명도 78%: 단순 투명도 예시
    • [데모 이미지 자리]

  2. Single Linear Gradient (Normal)

    • 빨강 → 파랑, 불투명
    • [데모 이미지 자리]

  3. Solid + Solid (Multiply)

    • 바닥: 빨강(약 39%), 위: 파랑(Multiply 약 39%) → 보라빛 혼합
    • [데모 이미지 자리]

  4. Solid + Linear (Screen)

    • 바닥: 노랑, 위: 마젠타→시안(Screen 60%)
    • [데모 이미지 자리]

  5. Linear + Linear (Overlay)

    • 서로 다른 그라디언트 2개, 대비 강화
    • [데모 이미지 자리]

  6. Linear + Radial (Soft Light)

    • 선형 바닥 위에 은은한 원형 하이라이트
    • [데모 이미지 자리]

  7. Image + Solid (Multiply)

    • 체크무늬 이미지를 반투명 솔리드로 어둡게
    • [데모 이미지 자리]

  8. Image + Radial (Hard Light)

    • 이미지 위에 강한 중앙 광원 느낌
    • [데모 이미지 자리]

  9. All Mixed (Various Blends)

    • Solid + Linear + Radial + Image, 복합 스택 예시
    • [데모 이미지 자리]

팁 / 흔한 함정 / 빠른 디버깅​

  • 결과가 거꾸로 된 느낌이면 순서를 먼저 확인하세요. 맨 위가 제일 강합니다.
  • 전체가 “너무 납작”해 보이면 레이어가 Pass Through인지 확인하세요. (레이어 블렌드로 묶여 있으면 배경과 덜 상호작용합니다.)
  • Dodge/Burn이 과하게 튀면 불투명도를 낮추거나 바닥 톤을 조절하세요.
  • 컬러라이징은 Color/Luminosity에 적당한 불투명도를 섞어 쓰면 부드럽습니다.

자주 묻는 질문(FAQ)​

Q. 맨 위 페인트가 불투명할 때 왜 아래가 안 보이나요?

  • 그 부분은 완전히 덮이기 때문입니다. 보이고 싶다면 투명도를 주거나 보이게 섞이는 모드를 쓰세요.

Q. Multiply와 Screen은 왜 순서에 따라 결과가 다르죠?

  • 알파와 섞임 특성상 결합이 교환법칙처럼 동작하지 않습니다. “마지막에 섞인(위의) 페인트”가 최종 결과를 크게 좌우합니다.

Q. Pass Through와 레이어를 Normal로 두는 건 어떻게 다른가요?

  • Pass Through는 레이어를 따로 떼지 않아서 내부 페인트가 배경과 그대로 상호작용합니다. 레이어를 특정 블렌드(Normal 포함)로 두면, 먼저 하나로 합쳐진 뒤 그 결과가 배경과 섞입니다. 목적에 따라 선택하세요.

문제가 있어 보이면, 순서·불투명도·레이어 모드(Pass Through 여부)를 먼저 확인해 보세요.