CSS box-shadow 완벽 가이드: 그림자로 입체감 있는 UI 디자인하기

웹 페이지에서 버튼이나 카드가 화면 위로 살짝 떠 있는 듯한 입체감은 대부분 CSS의 box-shadow 한 줄에서 나옵니다. 그림자는 단순한 장식이 아니라 요소의 계층(depth)과 중요도를 사용자에게 전달하는 시각 언어예요. 잘 쓰면 인터페이스가 정돈되어 보이고, 과하면 촌스럽고 답답해집니다. 이 글에서는 box-shadow의 문법부터 실무에서 바로 쓰는 그림자 레시피, 그리고 흔한 실수까지 한 번에 정리합니다. 디자인과 개발 전반의 더 많은 팁은 kimgoon 라이프스타일 가이드에서 모아볼 수 있어요.

box-shadow란 무엇인가

box-shadow는 요소의 사각형 박스 주위에 그림자를 그리는 CSS 속성입니다. 그림자의 위치, 번짐 정도, 색을 자유롭게 지정할 수 있어서 카드, 버튼, 모달, 드롭다운 메뉴 등 거의 모든 UI 컴포넌트에 입체감을 부여할 때 사용합니다. 핵심은 "빛이 한 방향에서 들어온다"는 현실의 규칙을 화면에서 흉내 내는 것입니다. 현실의 그림자가 빛 반대쪽에 부드럽게 깔리듯, 웹의 그림자도 일정한 방향과 흐림을 유지해야 자연스럽게 보입니다. 방향이 제멋대로면 사용자는 무의식적으로 어색함을 느낍니다.

box-shadow 기본 문법 이해하기

가장 기본적인 형태는 box-shadow: offset-x offset-y blur-radius spread-radius color; 입니다. 각 값의 의미는 다음과 같습니다.

• offset-x: 그림자를 오른쪽(+)이나 왼쪽(-)으로 이동
• offset-y: 그림자를 아래(+)나 위(-)로 이동
• blur-radius: 값이 클수록 그림자가 부드럽게 흐려짐
• spread-radius: 그림자의 크기를 키우거나(+) 줄임(-)
• color: 그림자 색. rgba나 hsla로 투명도를 주는 것이 핵심

예를 들어 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 는 아래쪽으로 4px 내려가고 12px 흐려진, 검정 15% 투명도의 그림자를 만듭니다. 값이 많아 헷갈린다면 box-shadow 생성기에서 슬라이더를 움직이며 결과를 실시간으로 확인하고 코드를 복사하는 방법을 추천합니다.

자연스러운 그림자를 만드는 핵심 원칙

초보자가 가장 많이 하는 실수는 그림자를 진한 순검정으로 주는 것입니다. 현실의 그림자는 완전한 검정이 아니라 주변 색이 섞인 회색에 가깝습니다. 그래서 rgba(0,0,0,1) 대신 투명도를 0.1~0.2 수준으로 낮춰야 합니다. 또한 offset-y는 양수로, offset-x는 0이나 아주 작은 값으로 두어 "빛이 위에서 내려온다"는 일관성을 지키는 것이 좋습니다. 그림자 색에 약간의 색조(예: 파란빛이 도는 회색)를 넣으면 브랜드 톤과 더 잘 어울립니다. 색상 값을 다양하게 실험하고 싶다면 색상 변환 도구로 HEX·RGB·HSL을 바꿔가며 비교해보세요.

실전 예제: 카드, 버튼, 입력창 그림자

요소마다 어울리는 그림자 강도가 다릅니다. 아래 값을 출발점으로 삼아 미세 조정하면 됩니다.

• 카드: box-shadow: 0 2px 8px rgba(0,0,0,0.08); — 은은하게 떠 있는 느낌
• 떠 있는 버튼: box-shadow: 0 4px 14px rgba(0,0,0,0.18); — 클릭을 유도하는 강조
• 모달/팝업: box-shadow: 0 12px 40px rgba(0,0,0,0.25); — 배경에서 확실히 분리
• 입력창 포커스: box-shadow: 0 0 0 3px rgba(59,130,246,0.4); — 테두리처럼 강조

요소가 위로 올라올수록(모달 > 버튼 > 카드) 그림자를 더 크고 진하게 주면 자연스러운 계층이 만들어집니다. 같은 화면 안에서는 그림자 규칙을 통일해야 디자인이 흐트러지지 않습니다.

안쪽 그림자(inset)와 다중 그림자 활용

inset 키워드를 맨 앞에 붙이면 그림자가 박스 바깥이 아니라 안쪽으로 들어갑니다. 입력창이 눌린 느낌이나 토글 스위치의 홈을 표현할 때 유용합니다. 또한 box-shadow는 쉼표로 여러 개를 겹쳐 쓸 수 있습니다. 예를 들어 box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.12); 처럼 가까운 그림자와 먼 그림자를 함께 쓰면 훨씬 사실적인 깊이가 생깁니다. 구글 머티리얼 디자인의 elevation 단계도 이렇게 여러 겹의 그림자를 조합해 만들어집니다.

자주 하는 실수와 성능 주의점

첫째, 그림자를 너무 많은 요소에 동시에 큰 blur로 적용하면 스크롤 시 렌더링 성능이 떨어질 수 있습니다. 특히 모바일에서는 blur가 큰 그림자가 많으면 버벅임이 생깁니다. 둘째, hover 시 그림자를 키우는 애니메이션은 box-shadow 자체를 transition하기보다, 미리 두 그림자를 준비해 두고 opacity로 전환하면 더 부드럽습니다. 셋째, 다크 모드에서는 검정 그림자가 거의 보이지 않으므로, 밝은 테두리나 더 진한 배경 대비로 깊이를 표현해야 합니다. 색을 정확히 보려면 모니터 품질도 중요한데, 디스플레이 특가가 궁금하다면 핫딜 베스트도 참고하세요.