CSS Box Shadow 마스터하기 - 자연스러운 깊이감 만드는 그림자 가이드

그림자가 만드는 시각적 깊이감

웹 인터페이스는 평면이지만 사용자가 보기엔 입체적으로 느껴져야 할 때가 많습니다. 카드가 배경 위에 떠 있는 느낌, 모달이 페이지 위로 올라온 느낌, 버튼이 눌리는 듯한 느낌은 모두 그림자로 표현해요. 그림자가 잘 만들어지면 클릭 가능한 영역인지, 어떤 요소가 위에 있는지, 어디에 사용자의 시선이 가야 하는지가 자연스럽게 안내됩니다. 반대로 그림자 없이 모든 요소가 평면으로만 그려지면 화면이 답답하고 평평하게 느껴져요. CSS의 box-shadow는 한 줄로 그림자를 만들 수 있지만, 자연스러움을 만들려면 몇 가지 원리를 알아야 합니다.

box-shadow의 4가지 파라미터

box-shadow는 다음 형식으로 작성합니다: box-shadow: x-offset y-offset blur spread color;. 각 값의 역할은 다음과 같아요.

• x-offset: 그림자가 가로로 이동한 거리. 양수면 오른쪽, 음수면 왼쪽.
• y-offset: 세로 이동. 양수면 아래쪽, 음수면 위쪽. 보통 그림자는 위에서 빛이 비추는 가정이라 y-offset이 양수입니다.
• blur-radius: 그림자가 퍼지는 정도. 0이면 선명한 사각형, 값이 클수록 부드러운 흐림.
• spread-radius: 그림자가 사방으로 확장되는 정도. 양수면 그림자가 더 크게 보이고, 음수면 안쪽으로 줄어듭니다.

가장 중요한 건 blur입니다. blur=0이면 칼처럼 딱딱한 그림자가 만들어져 만화 같은 느낌이고, blur가 커질수록 부드럽고 자연스러워져요. 일반적으로 y-offset의 1.5~3배 정도의 blur를 주면 자연스럽습니다.

inset - 안쪽으로 들어간 그림자

box-shadow 값 앞에 inset 키워드를 붙이면 그림자가 박스 안쪽으로 들어가요. 입력 필드가 눌린 듯한 느낌, 카드 안에 다른 카드가 들어간 듯한 느낌을 만들 때 유용합니다. 예: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);. 버튼을 클릭하는 순간 inset 그림자로 변경하면 실제로 눌리는 듯한 인터랙션을 만들 수 있어요. inset과 일반 그림자를 같이 사용해 가장자리는 살짝 들어가고 바깥쪽은 살짝 떠 있는 효과도 가능합니다.

다중 그림자 - 자연스러움의 비밀

가장 큰 차이를 만드는 건 그림자를 여러 겹 쌓는 것입니다. 자연 광원에서 만들어지는 그림자는 가까운 물체일수록 진하고 좁고, 멀어질수록 옅고 넓어져요. 한 줄짜리 box-shadow는 이 둘을 동시에 표현할 수 없어 인공적인 느낌이 납니다. 대신 두세 개를 쉼표로 이어붙이면 자연스러워져요.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.04),
  0 4px 8px rgba(0, 0, 0, 0.06),
  0 12px 24px rgba(0, 0, 0, 0.08);

이렇게 하면 가까운 진한 그림자와 멀리 퍼지는 옅은 그림자가 함께 작동해, 카드가 정말 떠 있는 듯한 느낌이 됩니다. 검은색을 그대로 쓰는 대신 불투명도(rgba) 로 표현하는 것도 핵심이에요. #000으로 진한 그림자를 만들면 페이지 배경과 어울리지 않고 답답해 보입니다.

elevation 시스템 - Material Design의 8단계

구글의 Material Design에는 elevation이라는 깊이 시스템이 있습니다. 카드·버튼·모달·앱바 등 요소마다 0dp부터 24dp까지 정해진 높이가 있고, 그에 따라 그림자의 강도가 결정돼요. 이 시스템을 따라가면 같은 페이지 안에서 그림자가 일관되게 보입니다.

• 0dp: 그림자 없음. 배경과 같은 평면.
• 1~2dp: 카드, 메뉴.
• 4~8dp: 활성화된 버튼, FAB, 알림.
• 12~16dp: 사이드바, 메뉴 패널.
• 24dp: 모달, 다이얼로그.

디자인 시스템을 직접 만들 때는 이렇게 4~5단계로 나누고, 각 단계의 box-shadow를 미리 정의해두면 일관성이 유지됩니다. Tailwind CSS의 shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl도 비슷한 단계 시스템이에요.

다크 모드에서의 그림자

밝은 배경에서는 검은색 그림자가 자연스럽지만, 다크 모드에서는 그림자가 거의 보이지 않습니다. 검은 위에 검은 그림자라 대비가 안 생기는 거예요. 다크 모드에서는 두 가지 전략이 있어요.

• 그림자를 더 진하게: 일반 모드의 0.05 → 다크 모드 0.4~0.6 수준으로 알파를 올립니다.
• 밝은 테두리(highlight) 활용: 그림자 대신 위쪽에 흰색 1px 테두리를 살짝 넣으면 떠 있는 느낌이 살아나요. box-shadow: inset 0 1px 0 rgba(255,255,255,0.05).

다크 모드에서는 그림자보다 카드 배경색을 살짝 밝게 만드는 방식이 더 자연스러운 경우도 많습니다.

도구로 그림자 빠르게 만들기

툴박스의 Box Shadow 생성기는 슬라이더로 x/y/blur/spread/color를 조정하면서 즉시 미리보기를 보여줍니다. 다중 그림자도 추가할 수 있고, 완성된 CSS 코드를 한 번에 복사할 수 있어요. 디자인 시스템을 만들 때 elevation 단계마다 box-shadow를 미리 정의해두면, 새 컴포넌트를 만들 때 디자이너와 개발자가 같은 그림자를 공유하게 됩니다. 그림자는 한 번 잘 정의해두면 두고두고 쓰니, 처음 시안 단계에서 시간을 들여 정리해두는 게 가성비가 좋아요.

관련 가이드

kimgoon.kr

kimgoon 생활정보 가이드

tools.kimgoon.kr

디자인·CSS 가이드 더 보기

tools.kimgoon.kr

툴박스 도구 모음