디자인 시스템 - 쉐도우와 깊이 디자인 시스템을 구성하면서 종종 간과되기 쉬운 파운데이션 요소 중 하나가 바로 쉐도우(Shadow)와 깊이(Elevation)입니다. 하지만 이 요소는 UI의 계층구조, 시각적 명확성, 인터랙션 힌트를 전달하는 데 중요한 역할을 합니다.

쉐도우과 깊이의 개념 쉐도우(Shadow) 쉐도우는 UI 요소에 광원 효과를 시뮬레이션하여 요소가 떠 있는 것처럼 보이게 해주는 시각적 도구입니다. 기능 계층 구분 포커스 유도 인터랙션 강조 깊이(Elevation) 깊이는 UI 요소가 화면 상에서 얼마나 위에 떠 있는지를 의미하는 상대적 개념입니다.

Material Design에서는 Elevation 단계를 수치로 정의(0~24dp) 해서 표현하고 있습니다. 기능 요소의 중요도 전달 인터랙션 상태 반영(예 : hover → 강조된 그림자) 콘텍스트의 흐름 전달(모달, 드룹다운 등) 디자인 시스템에서 어떻게 정의해야 할까?

디자인 시스템에서는 쉐도우를 토큰(변수)처럼 ...