한 줄 요약
mix-blend-mode 9종을 즉시 갈아끼우며 같은 이미지·텍스트·도형이 어떻게 합성되는지 5분 안에 체득하는 갤러리.
이럴 때 필요해요
mix-blend-mode는 알면 강력한데 모드별 결과를 머릿속에 담아두기가 어렵다. Multiply·Screen·Overlay·Difference를 문서로 읽으면 다 같아 보인다. 같은 소스에 모드만 갈아끼우며 보면 감이 잡히고, Apple·Linear 사이트 헤더가 쓰는 difference 트릭의 원리도 자연스럽게 이해된다.
어떻게 동작하나
- 좌우 2열 그리드 — 왼쪽은 사진 위 큰 텍스트, 오른쪽은 세 컬러 원 겹침. 텍스트 합성과 도형 합성을 동시에 확인.
- 모드 전환은 라운드 필 버튼 그룹 — 클릭 즉시 인라인
style={{ mixBlendMode: mode }}갱신 (Tailwind 클래스는 정적이라 부적합). - 각 figure에
isolation: isolate— 없으면 자식 블렌드가 페이지 배경과 합성된다. 자식끼리만 블렌드되게 하려면 필수.
놓치기 쉬운 것
difference는 밝은 배경 위 흰 텍스트를 검정으로, 어두운 영역에선 흰색으로 보여 가독성이 자동 보정된다 — Apple·Linear 헤더 트릭의 핵심.hue·color·luminosity같은 HSL 기반 모드는 회색·검정 위에선 효과가 거의 없다 — 컬러풀한 배경이 필수.- GPU 합성 비용 — 매 프레임 변하는 애니메이션 위에 블렌드 모드를 깔면 페인트가 비싸진다. 정적 영역에만.
- Photoshop 블렌드 모드와 정확히 같은 수식 — 인쇄 매체 경험이 있다면 그대로 대입하면 된다.
이런 곳에 써요
- 다크/라이트 배경 양쪽에서 자동 가독성 보정되는 헤더 텍스트 (difference)
- 사진 위 컬러풀한 카피·워터마크 (screen)
- 컬러 오버레이 hover 효과 (multiply·overlay)
- 아트워크풍 hero 섹션의 컬러 합성