블렌드 모드

정의

블렌드 모드는 겹쳐 놓은 두 레이어의 색을 어떤 방식으로 섞을지를 정하는 규칙입니다. 보통 위 레이어가 아래 레이어를 그냥 가리지만, 블렌드 모드를 지정하면 두 색이 특정 계산식에 따라 섞여 겹친 부분의 색이 달라집니다. 대표적으로 곱하기(multiply)는 겹친 부분을 더 어둡게 만들고, 스크린(screen)은 반대로 더 밝게 만들며, 오버레이(overlay)는 밝은 곳은 더 밝게 어두운 곳은 더 어둡게 해 대비를 강화합니다. CSS에서는 mix-blend-mode 속성으로 지정하며, 이미지와 색, 텍스트를 자연스럽게 어우러지게 만들 때 쓰입니다.

왜 중요한가

블렌드 모드가 없으면 이미지 위에 얹은 색이나 글자는 늘 이미지를 덮어 버려, 어색하게 동동 떠 보이기 쉽습니다. 블렌드 모드를 쓰면 위 레이어가 아래 이미지의 명암과 질감을 머금으며 섞이기 때문에, 마치 원래 한 장이었던 것처럼 자연스럽게 녹아듭니다. 덕분에 이미지 위 텍스트를 배경과 어우러지게 얹거나, 사진에 색을 입히는 색 오버레이, 두 가지 색조로 사진을 물들이는 듀오톤 같은 효과를 코드 몇 줄로 만들 수 있습니다. 이미지 편집 도구 없이도 화면 안에서 실시간으로 다양한 분위기를 연출할 수 있다는 점이 큰 장점입니다. 다만 결과가 아래 레이어의 색에 따라 달라지므로, 어떤 배경 위에서도 의도대로 보이는지 직접 눈으로 확인하는 습관이 중요합니다. 위력이 큰 만큼 배경을 가리지 않고 절제해서 쓰는 감각도 함께 익혀 두어야 합니다.

흔한 실수

• 블렌드 모드로 얹은 글자의 가독성을 확인하지 않는 것입니다. 배경 이미지의 밝기에 따라 섞인 글자가 어떤 부분에서는 잘 보이다가 다른 부분에서는 사라질 수 있으니, 이미지 전체 위에서 글자가 읽히는지 점검해야 합니다.
• 효과에 취해 여러 블렌드 모드를 겹쳐 남발하는 것입니다. 섞임이 과하면 색이 탁하게 뭉개지고 화면이 지저분해집니다. 목적이 뚜렷한 한 곳에만 절제해서 쓰는 편이 좋습니다.
• 어떤 모드가 어떤 색을 낼지 외우려 드는 것입니다. 모드마다 결과가 배경 색에 따라 달라지므로, 값을 실제로 바꿔 보며 눈으로 확인하는 편이 이름을 외우는 것보다 훨씬 빠르고 정확합니다.

실무 팁

• 효과의 목적에 맞는 모드를 고르세요. 그림자나 잉크가 스민 듯한 어두운 느낌에는 곱하기를, 빛이 번지는 밝은 느낌에는 스크린을, 사진의 대비를 살리고 싶을 때는 오버레이를 쓰면 의도한 분위기를 정확히 낼 수 있습니다.
• 이미지 위 텍스트를 자연스럽게 얹거나 색 오버레이, 듀오톤을 만들 때는 CSS의 mix-blend-mode로 지정하세요. 별도의 이미지 편집 없이 화면 안에서 바로 효과를 적용하고 값을 조절하며 확인할 수 있습니다.
• mix-blend-mode는 지원이 넉넉한 편이지만, 중요한 화면이라면 @supports로 지원 여부를 확인하고 효과가 없어도 콘텐츠가 정상적으로 보이도록 대비책을 마련해 두세요. 글자나 버튼처럼 꼭 읽혀야 하는 요소는 블렌드 효과에만 의존하지 않도록 특히 조심해야 합니다.

관련 개념