섀도우 프리셋: CSS box-shadow로 레이어와 깊이를 설계하는 실전 가이드

섀도우가 중요한 이유

섀도우는 단순히 “그림자”가 아니라, UI의 정보 구조를 시각적으로 설명합니다. 같은 컨텐츠라도 섀도우가 잘 잡혀 있으면 클릭 가능한 영역이 명확해지고, 섹션의 경계가 자연스럽게 드러납니다. 반대로 섀도우가 일관되지 않으면 화면이 어수선해 보이고, 요소가 떠 있는지 붙어 있는지 판단하기 어려워집니다.

• 레이어 분리: 카드/모달/드롭다운 같은 떠 있는 요소를 배경과 분리합니다.
• 상태 표현: hover/active에서 섀도우 변화로 인터랙션을 전달합니다.
• 브랜드 톤: 섀도우의 부드러움/강도로 제품의 “촉감”이 결정됩니다.
• 가독성: 테두리가 약한 디자인에서도 요소를 구분해 줍니다.

섀도우를 쓰는 컴포넌트 유형

섀도우는 모든 요소에 적용하는 것이 아니라, 레이어가 필요하거나 인터랙션이 중요한 요소에 선택적으로 적용하는 편이 좋습니다. 아래와 같은 경우에 특히 효과가 큽니다.

• 카드/패널: 섹션을 묶는 컨테이너, 대시보드 위젯
• 모달/드로어: 배경과 확실히 분리되어야 하는 레이어
• 드롭다운/툴팁: 작은 레이어이지만 떠 있는 느낌이 필요
• 버튼: hover/pressed 상태를 섀도우로 표현

경계가 필요한 경우 섀도우만으로 부족할 수 있습니다. 이때는 보더/라디우스 규칙과 함께 섞어 쓰면 더 안정적인 UI가 됩니다.

생성기 사용 방법(권장 흐름)

1. 레이어 수: 1~3 레이어로 시작합니다(대부분 2 레이어면 충분).
2. 큰 그림자: 멀리 퍼지는 부드러운 그림자로 “공기감”을 만듭니다.
3. 작은 그림자: 가까운 얕은 그림자로 “접지” 느낌을 만듭니다.
4. 투명도: 너무 진하면 더러워 보일 수 있어 낮은 알파로 여러 번 쌓습니다.
5. 미리보기 검증: 실제 배경색과 유사한 환경에서 확인합니다.
6. 복사/저장: 결과 CSS를 복사하고 프리셋으로 저장합니다.

섀도우를 적용할 컨테이너 폭과 간격이 일정하면 더 좋은 결과가 나옵니다. 레이아웃은 컨테이너, 간격은 스페이싱으로 같이 정리해 보세요.

다중 레이어 섀도우 설계(규칙)

좋은 섀도우는 “한 덩어리”가 아니라 “여러 층”입니다. 하나의 큰 그림자는 자연스럽지 않을 수 있어, 얕은 그림자 + 중간 그림자 + 넓은 그림자를 조합하면 훨씬 현실적인 느낌이 납니다.

• 근접 레이어: 작은 blur, 작은 spread로 가장자리 접지를 만듭니다.
• 중간 레이어: y-offset과 blur를 올려 부드러운 떠 있음 느낌을 줍니다.
• 원거리 레이어: 큰 blur로 배경과 자연스럽게 섞이게 합니다.
• 색: 완전한 검정 대신 약간의 색을 섞으면 더 고급스럽습니다(특히 다크 테마).

섀도우는 색 대비에도 영향을 줍니다. 얕은 보더를 함께 쓰면 경계가 더 또렷해지고, 섀도우를 과하게 올리지 않아도 됩니다.

다크/라이트 테마에서의 섀도우

다크 테마에서는 섀도우가 잘 보이지만, 과하면 탁해질 수 있습니다. 라이트 테마에서는 섀도우가 흐려지기 쉬워, 보더와 함께 사용하거나 색을 살짝 진하게 조정하는 것이 좋습니다. 따라서 테마별로 섀도우 토큰을 따로 두는 팀도 많습니다.

• 다크: 낮은 알파로 여러 레이어, 과도한 spread는 피하기
• 라이트: 보더 병행, 섀도우 색을 너무 회색으로 만들지 않기
• 일관성: 버튼/카드/모달의 섀도우 단계가 논리적으로 이어지게 구성

자주 묻는 질문(FAQ)

• Q. 섀도우가 더럽게 보여요. A. 한 레이어를 진하게 쓰면 탁해지기 쉽습니다. 알파를 낮추고 레이어를 2~3개로 나누어 쌓아 보세요.
• Q. 라이트 모드에서 섀도우가 안 보여요. A. 보더를 함께 쓰거나 섀도우 색을 조금 더 진하게 조정하는 것이 좋습니다.
• Q. hover/active는 어떻게 처리하나요? A. hover에서는 약간 더 떠 보이게(y-offset/blur 증가), active에서는 살짝 눌리는 느낌(y-offset/blur 감소)으로 규칙을 정하면 일관성이 생깁니다.