EdgeShadow: 이미지 기반 Shadow와 마스킹

EdgeShadow는 box-shadow로 만들기 어려운 이미지 기반 shadow를 재사용 가능한 TDS 컴포넌트로 만든 작업이에요.

shadow 이미지를 그대로 깔아두는 대신, 콘텐츠 영역은 비우고 edge와 corner에 필요한 shadow만 남겨야 했어요. 콘텐츠에 alpha가 있으면 shadow가 내부에 비쳐 보일 수 있었기 때문이에요.

그래서 중앙부를 mask로 제외하고, 상하좌우 edge는 linear-gradient, radius가 있는 corner는 radial-gradient 기반 mask로 분리해 처리했어요. 일반 box-shadow로는 표현하기 어려운 타원형 shadow를 살리면서도 여러 화면에서 재사용할 수 있는 컴포넌트로 정리했어요.

box-shadow는 말 그대로 박스 형태의 shadow예요. 그런데 이번 디자인은 중앙이 더 두꺼운 타원형 shadow가 겹친 형태라, 일반 box-shadow만으로는 표현하기 어려웠어요.

또 하나 걸린 건 콘텐츠의 alpha였어요. shadow 위에 올라가는 콘텐츠가 투명도를 가지면 콘텐츠 뒤로 shadow가 비쳐 보였어요. 단순히 이미지 기반 shadow를 깔아두면 디자인 형태는 맞출 수 있지만, 콘텐츠 안쪽에 shadow가 새는 문제가 남았어요.

문제는 shadow를 어떻게 그릴지가 아니라, 어느 영역의 shadow를 남기고 어느 영역을 비울지 나누는 쪽에 가까웠어요. 단일 화면용 특수 처리보다 여러 화면에서 다시 쓸 수 있는 컴포넌트로 만드는 것도 중요했어요.

이미지 기반 shadow에서 보일 영역과 비울 영역을 먼저 나눴어요. 제공받은 shadow asset을 그대로 깔지 않고, 콘텐츠 영역과 edge 영역을 나눠서 렌더링하기로 했어요.

비침 문제는 masking으로 풀었어요. 콘텐츠 중앙 영역을 mask에서 제외해 투명하게 만들면, 그 뒤로 shadow가 새지 않아요. 상하좌우 edge 영역에는 linear-gradient 기반 mask를 쓰고, radius가 있는 corner 영역에는 radial-gradient 기반 mask를 썼어요.

edge와 corner를 나눠 처리한 이유는 단순 사각형 clipping으로는 radius가 있는 shadow 영역을 자연스럽게 다루기 어려웠기 때문이에요. mask의 alpha를 이용하면 잘라낸 듯한 경계가 아니라 부드러운 shadow 형태를 유지할 수 있었어요.

box-shadow 대신 이미지 기반 shadow와 mask 조합을 썼어요.

일반 box-shadow를 쓰면 구현은 훨씬 단순해요. 하지만 박스 형태라서 디자인이 요구한 타원형 shadow의 미묘한 형태를 재현하기 어려웠어요. 제공받은 이미지 기반 shadow를 쓰면 형태는 살지만, 콘텐츠 중앙부 비침 문제를 따로 해결해야 했어요.

이미지 기반 shadow와 mask를 조합하면 구현은 더 복잡해져요. 상하좌우 edge와 corner radius를 나눠 생각해야 하고, mask가 alpha를 어떻게 처리하는지도 이해해야 했어요. 그래도 이 방식이 box-shadow로는 닿지 못한 타원형 형태와 재사용성을 함께 가져갈 수 있는 선택이라고 봤어요.

디자인이 요구한 타원형 shadow를 살리면서, 한 번 만든 구현을 여러 화면에서 가져다 쓰도록 정리됐어요.

콘텐츠가 반투명해도 그 뒤로 shadow가 새지 않았고, 상하좌우와 코너 라운드에 맞는 edge shadow만 남겼어요.

이 작업을 하면서 CSS masking을 제대로 다시 이해하게 됐어요.

clip-path처럼 영역을 딱 잘라내는 방식과 달리, mask-image는 이미지나 gradient의 alpha/luminance를 이용해 부드러운 투명도를 만들 수 있어요. shadow처럼 경계가 자연스러워야 하는 표현에서는 이 차이가 꽤 중요하다는 걸 체감했어요.