CSS 박스 그림자 생성기

box-shadow 속성의 구조

하나의 box-shadow는 정해진 순서를 따르는 값들의 목록입니다. 가로 오프셋, 세로 오프셋, 흐림 반경, 확산 반경, 그리고 색상이며, 선택적으로 inset 키워드가 붙습니다. 두 오프셋과 색상만 필수이고, 흐림과 확산은 기본값이 0입니다. 그래서 0px 4px 12px rgba(0, 0, 0, 0.15)로 읽히는 단축형은 가로 이동 없음, 아래로 4픽셀, 흐림 12픽셀, 확산 없음, 그리고 15퍼센트 검정을 뜻합니다. 이 도구의 슬라이더가 바로 그 문자열을 대신 적어 주지만, 순서를 이해해 두면 직접 손보기가 수월해집니다.

오프셋은 박스를 기준으로 그림자를 배치합니다. 세로 오프셋이 양수이면 그림자가 아래로 내려가는데, 이는 요소 위에 광원이 있다는 흔한 착시를 만들 때 원하는 바입니다. 음수이면 위로 올라갑니다. 가로 오프셋은 좌우로 같은 방식으로 작동합니다. 오프셋은 어떤 요소가 얼마나 높이 떠 있는지 판단할 때 뇌가 사용하는 가장 큰 단서이므로, 다른 무엇보다 먼저 손대는 것이 좋습니다.

흐림과 확산: 사람들이 헷갈려 하는 두 반경

흐림 반경은 가장자리가 얼마나 부드러운지를 조절합니다. 0이면 박스를 그대로 복제한 또렷한 가장자리가 나오고, 흐림이 커지면 그림자가 더 넓은 띠에 걸쳐 사라지며 실제로 퍼지는 빛처럼 보입니다. 가장 자연스러운 그림자는 대개 세로 오프셋의 두세 배쯤 되는 흐림을 씁니다. 흐림은 음수가 될 수 없다는 점에 유의하세요.

확산은 거의 아무도 설정하지 않는 값이지만 강력합니다. 양의 확산은 흐림이 적용되기 전에 그림자를 모든 방향으로 부풀려 박스보다 크게 만들고, 음의 확산은 줄입니다. 작은 음의 확산을 아래로 향하는 오프셋과 넉넉한 흐림에 짝지으면, 옆으로 새어 나가는 대신 카드 아래에 바짝 붙는 그림자를 만드는 고전적인 비법이 됩니다. 확산은 또한 단색 테두리를 그리는 방법이기도 합니다. 오프셋 0, 흐림 0, 양의 확산 몇 픽셀, 그리고 단색이면 됩니다.

눌리고 움푹 들어간 표면을 위한 inset 그림자

inset 키워드를 더하면 그림자가 요소 뒤가 아니라 안쪽에 그려져, 표면이 파인 것처럼 보입니다. 이렇게 하면 텍스트 입력란을 우물처럼, 토글을 눌린 것처럼, 패널을 페이지 안으로 들어간 것처럼 만들 수 있습니다. 이제 오프셋은 그림자를 받는 안쪽 가장자리를 향하므로, 아래로 향하는 오프셋은 위쪽 안쪽 가장자리를 어둡게 하여 빛이 위에서 들어오는 모습을 흉내 냅니다. 이 도구에서 inset 옵션을 켜고 끄며 바깥 그림자와 안쪽 그림자를 오가 보면, 같은 숫자가 의미를 뒤집는 모습을 볼 수 있습니다.

여러 그림자 겹치기

box-shadow 속성은 쉼표로 구분된 목록을 받아들이며, 브라우저는 첫 번째 것을 맨 위에 두고 각 그림자를 순서대로 칠합니다. 이는 사실적인 깊이를 만드는 가장 유용한 한 가지 기법입니다. 실제 물체는 그림자 하나만 드리우지 않습니다. 가장자리 바로 아래에는 좁고 더 진한 접촉 그림자를, 그 바깥으로는 더 넓고 흐릿한 주변 그림자를 드리웁니다. 흐림이 작은 그림자를 흐림이 큰 그림자 위에 쌓으면 이를 재현할 수 있고, 그 결과는 어떤 단일 그림자보다 훨씬 그럴듯하게 읽힙니다.

겹치기는 디자인 체계가 입체감 단계를 구축하는 방법이기도 합니다. Material 스타일의 입체감은 보통 함께 맞춰진 두세 개의 쌓인 그림자이며, 카드를 한 단계 올린다는 것은 숫자 하나를 미는 것이 아니라 그 묶음 전체를 통째로 바꾸는 것입니다. 같은 선언 안에서 inset 그림자와 바깥 그림자를 섞어, 빛이 닿은 가장자리와 드리워진 그림자를 한 번에 얻을 수도 있습니다.

예제 풀이: 부드러운 카드 그림자

거의 모든 밝은 표면에서 잘 어울리는 비법이 여기 있습니다. 그림자가 가운데에 머물도록 가로 오프셋은 없이 시작하고, 세로 오프셋은 약 8px, 흐림은 대략 24px, 확산은 카드 아래로 파고들도록 약 -6px로 둡니다. 거의 검정에 가까운 색을 쓰되 불투명도는 약 12퍼센트로 낮추어 rgba(0, 0, 0, 0.12)로 표현합니다. 음의 확산은 부드러운 가장자리가 모서리 밖으로 번지지 않게 하고, 낮은 불투명도는 그것이 얼룩처럼 보이지 않게 하며, 적당한 오프셋은 위에서 비치는 은은한 빛을 암시합니다. 한층 더 또렷한 결과를 원한다면, 오프셋 1px에 흐림은 거의 0, 약 6퍼센트 검정인 두 번째 그림자를 겹쳐 날카로운 접촉선을 흉내 내세요.

흔한 실수와 피하는 법

가장 잦은 잘못은 흐림이 큰 완전 불투명 순수 검정 그림자인데, 이는 빛이 아니라 탁하고 인위적으로 보입니다. 색이 있는 배경은 이를 더 나쁘게 만듭니다. 채도 높은 파랑 위의 검정 그림자는 지저분해 보이므로, 대신 그림자를 배경 색조 쪽으로 물들이세요. 또 다른 실수는 확산을 두 번째 흐림 조절기처럼 다루는 것입니다. 확산은 그것이 아니며, 확산을 0으로 둔 채 흐림만 키우는 것이 일부 그림자가 흐릿하면서도 너무 작게 느껴지는 이유입니다.

사람들은 box-shadow와 drop-shadow 필터도 혼동합니다. box-shadow는 border-radius를 포함해 언제나 요소의 직사각형 박스를 따르므로, 박스 안의 투명한 PNG도 여전히 직사각형 그림자를 얻습니다. filter의 drop-shadow는 실제로 투명하지 않은 픽셀을 따라가는데, 이는 불규칙한 모양이나 오려낸 이미지에 원하는 바입니다. 카드, 버튼, 패널에는 box-shadow를 쓰고, 윤곽이 직사각형이 아닐 때는 필터에 손을 뻗으세요.

성능과 큰 흐림의 함정

그림자는 브라우저가 그리며, 매우 큰 흐림 반경은 특히 애니메이션이 적용되거나 한 번에 여러 요소에 나타날 때 실제로 비용이 큽니다. 큰 그림자의 흐림이나 확산에 애니메이션을 주면 프레임마다 다시 그리기가 일어나 사양이 낮은 기기에서 끊길 수 있습니다. 호버 시 그림자를 키워야 한다면, 더 부드러운 방법은 더 큰 그림자를 의사 요소에 미리 렌더링해 두고 그 불투명도에 애니메이션을 주는 것입니다. 불투명도는 합성 비용이 싸기 때문입니다. 흐림 값을 합리적으로 유지하고, 화면에 그림자가 적용된 노드가 한꺼번에 수백 개 있는 상황을 피하면, 인터페이스가 매끄럽게 유지됩니다.