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

box-shadow는 말 그대로 박스 형태의 shadow예요. 그런데 이번 디자인은 중앙이 더 두꺼운 타원형 shadow가 겹친 형태라, 일반 box-shadow만으로는 표현하기 어려웠어요. 또 하나 걸린 건 콘텐츠의 alpha였어요. shadow 위에 올라가는 콘텐츠가 투명도를 가지면 콘텐츠 뒤로 shadow가 비쳐 보였거든요. 그래서 shadow 이미지를 단순히 깔아두는 대신, 콘텐츠 영역은 비우고 가장자리 shadow만 남기는 구조가 필요했어요.

이미지 기반 shadow에서 보일 영역과 비울 영역을 분리하고, edge와 corner를 각각 다른 gradient mask로 다루는 방식으로 접근했어요. 제공받은 shadow asset을 그대로 깔지 않고, 콘텐츠 영역과 edge 영역을 나눠서 렌더링하기로 했어요. 비침 문제는 마스킹으로 풀었어요. 콘텐츠 중앙 영역을 mask에서 빼두면 그 뒤로 shadow가 새지 않거든요. 구현 범위는 단일 화면용 특수 처리가 아니라, 같은 효과를 여러 화면에서 쓸 수 있는 컴포넌트였어요.

콘텐츠 영역에 해당하는 중앙부는 마스크에서 제외해 투명하게 만들었어요. 상하좌우 edge 영역에는 linear-gradient 기반 mask를 썼어요. radius가 있는 코너 영역에는 radial-gradient 기반 mask를 썼어요. 상하좌우 edge와 radius corner를 나눠 처리해서 단순 사각형 clipping으로는 다루기 어려운 shadow 영역을 구성했어요.

box-shadow 대신 이미지 기반 shadow와 mask 조합을 골랐어요. 제공받은 이미지 기반 shadow를 쓰고 콘텐츠 중앙부를 mask로 비워 edge와 corner shadow만 남겼어요. 일반 box-shadow를 쓰면 구현은 훨씬 단순해요. 다만 박스 형태라서 디자인이 요구한 타원형 shadow의 미묘한 형태를 재현하긴 어려웠어요.

이미지 기반 shadow와 mask를 조합하면 구현은 더 복잡해져요. 상하좌우 edge와 코너 radius를 나눠 생각해야 해요. mask가 alpha를 어떻게 처리하는지도 이해해야 했죠. 복잡한 만큼, box-shadow로는 닿지 못한 타원형 형태와 재사용성을 둘 다 가져갈 수 있었어요.

디자인이 요구한 타원형 shadow를 그대로 살리면서, 한 번 만든 구현을 여러 화면에서 가져다 쓸 수 있게 정리됐어요. 콘텐츠가 반투명해도 그 뒤로 shadow가 새지 않았어요. 상하좌우와 코너 라운드에 맞는 edge shadow만 남길 수 있었어요.

이 작업을 하면서 CSS masking을 제대로 다시 이해하게 됐어요. clip-path처럼 영역을 딱 잘라내는 방식과 달리, mask-image는 이미지나 gradient의 alpha/luminance를 이용해 부드러운 투명도를 만들 수 있다는 걸 체감했어요.