그림자의 빛 방향은 하나여야 한다Your Light Source Must Be One: The Rule of Shadow Consistency
UI 그림자 설계의 기본 원칙인 광원 일관성과 엘리베이션 시스템 구축 방법을 다룹니다.How to establish a unified virtual light source, build an elevation system, and avoid the subtle inconsistencies that make UI shadows look wrong.
- 가상의 광원을 하나 정하라
- 엘리베이션: 그림자로 높이를 표현하기
- 흔한 실수들
- 그림자 토큰 설계 예시
- 그림자 대신 쓸 수 있는 것들
- Define a single virtual light source
- Build an elevation system
- Shadows in dark mode
화면 속 그림자가 어색하게 느껴진다면 십중팔구 광원이 여러 개이기 때문입니다. 현실 세계에서 그림자는 빛의 반대편에 생깁니다. 어떤 카드는 그림자가 아래로, 어떤 버튼은 오른쪽으로 지고 있다면 사용자의 뇌는 무의식적으로 모순을 감지합니다.
가상의 광원을 하나 정하라
UI 디자인의 관례는 광원을 화면의 위쪽(약간 왼쪽 위)에 두는 것입니다. 따라서 그림자는 아래쪽으로 떨어지며, CSS로는 box-shadow의 Y 오프셋을 양수로, X 오프셋은 0이나 아주 작은 값으로 잡습니다. 예를 들어 0 2px 8px rgba(0,0,0,.12) 같은 형태입니다. 프로젝트의 모든 그림자가 이 방향을 공유해야 화면 전체가 하나의 공간처럼 느껴집니다.
엘리베이션: 그림자로 높이를 표현하기
머티리얼 디자인이 정립한 엘리베이션 개념은 그림자를 '높이의 언어'로 만듭니다. 표면에서 살짝 떠 있는 카드는 작고 진한 그림자, 화면 위에 떠 있는 모달이나 드롭다운은 크고 부드러운 그림자를 가집니다. 실무에서는 3~4단계면 충분합니다. 예컨대 1단계(카드) 0 1px 3px, 2단계(호버·버튼) 0 4px 12px, 3단계(드롭다운) 0 8px 24px, 4단계(모달) 0 16px 48px처럼 단계가 올라갈수록 오프셋과 블러를 함께 키우고 투명도는 낮추는 식입니다.
흔한 실수들
첫째, 순수 검정 그림자는 탁해 보입니다. 배경색의 색조를 살짝 섞거나(파란 배경이면 푸른 그림자) 투명도를 8~16% 수준으로 낮추세요. 둘째, 그림자 남용입니다. 모든 요소에 그림자를 주면 높이의 의미가 사라집니다. 떠 있어야 할 이유가 있는 요소에만 부여하세요. 셋째, 다크 모드에서 그림자는 거의 보이지 않습니다. 이때는 그림자 대신 표면 밝기 차이(밝은 표면 = 높은 엘리베이션)로 높이를 표현하는 것이 머티리얼의 권장 방식입니다.
그림자는 장식이 아니라 공간의 물리 법칙입니다. 광원 하나, 단계 3~4개. 이 두 가지만 정해 두면 그림자가 화면의 질서를 만들어 줍니다.
그림자 토큰 설계 예시
실무에서 바로 쓸 수 있는 4단계 그림자 토큰 예시입니다. --shadow-1: 0 1px 3px rgba(16,24,40,.08) — 카드, 입력란. --shadow-2: 0 4px 12px rgba(16,24,40,.10) — 호버된 카드, 떠 있는 버튼. --shadow-3: 0 8px 24px rgba(16,24,40,.14) — 드롭다운, 팝오버. --shadow-4: 0 20px 48px rgba(16,24,40,.20) — 모달, 다이얼로그. 검정 대신 짙은 남색 기운(16,24,40)을 쓰면 그림자가 더 맑아 보입니다. 토큰 이름을 elevation 단계로 정해 두면 "이 컴포넌트는 몇 층인가"라는 질문만으로 그림자가 결정됩니다.
그림자 대신 쓸 수 있는 것들
모든 구분을 그림자로 해결할 필요는 없습니다. 옅은 테두리(1px solid #eee)는 그림자보다 가볍게 영역을 구분하고, 배경색 차이(흰 카드와 회색 페이지 배경)는 그림자 없이도 표면을 분리합니다. 미니멀한 디자인일수록 그림자는 '정말 떠 있는 것'(모달, 드롭다운)에만 남기고 정적인 카드는 테두리나 배경 대비로 처리하는 경향이 있습니다. 그림자·테두리·배경 대비라는 세 가지 분리 수단을 상황에 따라 골라 쓰는 것이 표면 설계의 기술입니다.
If shadows in your UI look off, the most likely reason is multiple competing light sources. In the real world, shadows fall opposite the light. When one card casts a shadow downward while a button casts one to the right, the brain detects the contradiction subconsciously — and the UI feels untrustworthy.
Define a single virtual light source
UI convention places the light source above the screen, slightly to the left. Shadows fall downward: a positive Y offset, near-zero X offset. A value like 0 2px 8px rgba(0,0,0,.12) follows this convention. Every shadow in the project should share this direction. When the whole screen shares one light source, it reads as a coherent space.
Build an elevation system
Rather than hand-crafting each shadow, define elevation levels. Level 1 (subtle, e.g., cards): 0 1px 4px rgba(0,0,0,.08). Level 2 (floating, e.g., dropdowns): 0 4px 16px rgba(0,0,0,.12). Level 3 (overlays, modals): 0 8px 32px rgba(0,0,0,.18). Using CSS variables for these values lets you update the entire system in one place and ensures consistency by default.
Shadows in dark mode
In dark mode, dark shadows on dark backgrounds disappear. Compensate by adding a very faint colored inner glow or a subtle border — border: 1px solid rgba(255,255,255,.06) — to define elevation instead. Material Design calls this "surface tints": slightly lighter background colors for higher elevation. The principle of a single light source still applies; only the rendering technique changes.
Check your design system's shadows right now. Are they all pointing the same direction with the same blur-to-offset ratio? If not, standardizing them is one of the highest-leverage low-effort fixes available.