Elevation and Depth System

고도 및 깊이 시스템

목적

고도 및 깊이 시스템은 웹 인터페이스의 수직 차원(Z축)을 관리하기 위한 방법론을 제공합니다. 그림자, 표면 처리, 쌓임 순서와 같은 시각적 단서를 사용하여 레이어의 명확한 계층 구조를 설정합니다. 이 시스템은 사용자가 겹치는 요소 간의 관계를 이해하고, 상호작용 가능한 표면을 식별하며, 실제 세계의 깊이를 모방하는 예측 가능하고 촉각적인 환경을 경험할 수 있도록 보장합니다.

사용 사례

• 디자인 시스템을 위한 일관된 그림자 척도 정의.
• 대시보드나 IDE와 같은 복잡한 다중 레이어 인터페이스 설계.
• UI "충돌"을 방지하기 위한 쌓임 순서(z-index) 표준 수립.
• 상호작용 상태에 대한 촉각적 피드백 제공 (예: 호버 시 버튼이 떠오르는 효과).
• 영구적인 페이지 콘텐츠와 임시 오버레이 구분.

사용하지 말아야 할 경우

• 플랫/브루탈리스트 디자인: 의도적인 미학이 2D이고 그림자나 깊이가 부족한 경우.
• 순수 텍스트 기반 콘텐츠: 겹치는 레이어나 상호작용 가능한 표면이 없는 간단한 기사나 문서.
• 성능이 중요한 저사양 기기: CSS 필터나 복잡한 box-shadow를 많이 사용하면 심각한 렌더링 지연이 발생할 수 있는 경우.

입력

1. 브랜드 미학: 깊이가 "물리적/재질적"(현실적인 그림자)인가 아니면 "그래픽적"(단단한 오프셋)인가?
2. 컴포넌트 인벤토리: 고도가 필요한 모든 UI 요소 목록 (카드, 내비바, 모달, 버튼).
3. 주 광원: 일반적으로 위쪽 또는 위쪽 중앙에서 오는 것으로 가정.
4. 간격 시스템: 레이아웃 여백과 그림자 확산을 정렬하기 위한 fluid-spacing-system.

출력

1. 고도 척도 (그림자): 5-6개의 표준화된 box-shadow 토큰 세트 (예: elevation-sm에서 elevation-xl까지).
2. 쌓임 맥락 맵 (Z-Index): 레이어 기능별로 분류된 정의된 z-index 값 척도.
3. 표면 팔레트: 고도에 따라 변하는 배경색 정의 (예: 어두운 표면은 "가라앉고", 밝은 표면은 "떠오름").
4. 상호작용 사양: 호버, 활성, 포커스 상태에서 고도가 어떻게 변하는지에 대한 규칙.

워크플로우

1. 쌓임 계층 설정

인터페이스를 아래에서 위로 기능적 레이어로 나눕니다:

• 레벨 0 (기본): 페이지 배경/캔버스.
• 레벨 1 (평면): 기본 위에 있는 콘텐츠 (예: 평면 카드, 구분선).
• 레벨 2 (돌출): 미묘하게 "떠 있는" 상호작용 요소 또는 기본 카드.
• 레벨 3 (고정/부유): 글로벌 헤더, FAB(플로팅 액션 버튼).
• 레벨 4 (오버레이): 모달, 드로어 및 해당 배경.
• 레벨 5 (시스템): 툴팁, 토스트, 중요 알림.

2. 그림자 척도 정의

기본으로부터의 거리에 해당하는 그림자 진행 생성:

• 작음 (2dp): 버튼이나 작은 카드를 위한 미묘한 분리.
• 중간 (4dp-8dp): 드롭다운 및 탐색을 위한 표준 고도.
• 큼 (12dp-24dp): 모달 및 부유 레이어를 위한 높은 고도.
• 매우 큼 (32dp+): 임시 초점 또는 시스템 알림을 위한 극적인 깊이.

참고: 보다 현실적이고 고품질의 효과를 위해 여러 그림자 레이어(예: "날카로운" 그림자와 "부드러운" 그림자)를 사용하십시오.

3. 표면 색상 할당

깊이는 그림자뿐만 아니라 빛 반사에 관한 것이기도 합니다:

• 라이트 모드: 더 높은 고도 요소는 약간 더 밝아지거나 기본이 오프화이트인 동안 순수 흰색을 유지합니다.
• 다크 모드: 더 높은 고도 요소는 빛에 더 가까이 있는 것을 시뮬레이션하기 위해 반드시 더 밝아져야 합니다 (반투명 흰색 오버레이 사용).
• 구현: 각 고도 계층의 표면 색상을 프로그래밍 방식으로 생성하기 위해 수동으로 계층당 새로운 16진수 값을 선택하는 대신 color-mix(in oklch, var(--surface-base) 100%, white X%) (또는 이에 상응하는 OKLCH 기반 토큰 함수)를 사용하십시오. OKLCH는 단순한 16진수 조정으로는 보장할 수 없는, 색상 전반에 걸쳐 인지된 명도 단계를 균일하게 유지합니다.

4. 상호작용 "리프트" 생성

interactive-state-system을 Z축에 적용합니다:

• 호버: 요소가 사용자 쪽으로 들어 올려지는 것을 시뮬레이션하기 위해 그림자 흐림 및 확산을 증가시킵니다.
• 활성 (클릭): 요소가 표면에 눌려지는 것을 시뮬레이션하기 위해 그림자를 감소시키거나 제거합니다.

5. 쌓임 전략 문서화 (Z-Index)

10단계 또는 100단계 척도를 사용하여 "Z-Index 전쟁"을 방지합니다:

• 0: 기본
• 100: 탐색/헤더
• 500: 배경
• 600: 모달/드로어
• 1000: 툴팁/토스트

결정 규칙

• 광원 규칙: 시스템의 모든 그림자는 시각적 논리를 유지하기 위해 동일한 암시적 광원(일반적으로 위에서 아래로)을 공유해야 합니다.
• 고도 = 중요도: 가장 중요한 임시 정보(예: 알림)는 가장 높은 고도와 가장 극적인 그림자를 가져야 합니다.
• 그림자 대 테두리: 구조(레벨 0-1)에는 테두리를 사용하고 깊이(레벨 2+)에는 그림자를 사용하십시오. 브랜드가 고도로 "스큐어모픽"이 아닌 이상 동일한 요소에 둘 다 많이 사용하지 마십시오.
• 다크 모드 고도: 다크 모드에서는 어두운 배경에 어두운 그림자를 절대 사용하지 마십시오. 기본 깊이 신호로 표면 색상 밝게 하기(명도 이동)를 사용하십시오.

제약 조건

• 접근성: 고도 신호(그림자)는 구조적 신호를 보조해야 하며 대체해서는 안 됩니다. 그림자 없이도 식별할 수 있도록 요소에 충분한 대비나 테두리가 있는지 확인하십시오. 고도 오버레이(모달, 드롭다운)는 포커스 표시기를 잘라내거나 숨기는 방식으로 그 위에 렌더링되어서는 안 됩니다 (WCAG 2.2 SC 2.4.11).
• 성능: 자주 애니메이션되는 요소나 고주파 스크롤 컨테이너 내부에 있는 요소에는 box-shadow를 피하십시오.
• 반응형: 큰 그림자는 모바일에서 화면 밖으로 "넘칠" 수 있습니다. 작은 뷰포트에서는 그림자 확산을 줄이거나 테두리로 전환하십시오.

일반적인 실패 패턴

• 일관성 없는 광원: 일부 그림자는 오른쪽으로, 다른 그림자는 아래로 향하게 하여 "취한" 또는 파편화된 인터페이스를 만드는 경우.
• Z-Index "매직 넘버": 문제를 해결하기 위해 z-index: 99999를 사용하여 결국 유지 관리가 불가능한 코드로 이어지는 경우.
• 탁한 그림자: 표면 색상이나 어두운 중성색의 투명 버전 대신 순수 검정(#000)을 그림자에 사용하는 경우.
• 평면 오버레이: 그림자나 배경 없이 모달을 설계하여 뒤의 콘텐츠와 혼합되게 만드는 경우.
• 과도한 고도: 모든 카드에 두꺼운 그림자를 주어 아무것도 눈에 띄지 않게 되어 계층 구조가 평평해지는 경우.

검증 기준

• 일관된 5-6단계 고도 척도가 정의되고 사용됩니다.
• 모든 그림자가 단일하고 일관된 광원을 공유합니다.
• Z-index 값이 논리적이고 문서화된 계층으로 그룹화됩니다.
• 다크 모드에서 표면 명도 변화를 사용하여 깊이를 나타냅니다.
• 상호작용 상태(호버/활성)에 수직 이동 또는 그림자 변화가 포함됩니다.
• 그림자가 모바일에서 수평 또는 수직 오버플로를 일으키지 않습니다.
• 그림자를 제거해도 요소를 구별할 수 있습니다 (접근성 확인).
• 더 높은 고도 레이어가 그 아래 또는 내부에 있는 요소의 포커스 표시기를 가리지 않습니다 (WCAG 2.2 SC 2.4.11).