엘리베이션으로 높이를 나타내는 방법
구글이 엘리베이션을 사용하는 방법
Flighty의 다이얼로그화면은 평면처럼 보이지만, 그 안에는 깊이와 위계가 존재합니다. 버튼이 카드 위에 떠 있는 듯하거나 다이얼로그가 콘텐츠 위로 나타나는 이유는 바로 elevation(엘리베이션), 즉 높이 개념 때문입니다.
Material 3에서는 이 elevation을 z축을 따라 떨어진 거리(dp)로 정의해, 어떤 환경에서도 일관된 깊이를 유지할 수 있도록 합니다. elevation은 단순한 시각 효과가 아니라, 컴포넌트 간 관계와 사용자 주의를 안내하는 핵심 도구입니다.
이번 글에서는 Material 3에서 elevation이 어떤 원칙으로 정의되고, 디자인에 어떻게 적용할 수 있는지 살펴보겠습니다.
Chat GPT · Medium · RevoltElevation(엘리베이션)
모든 표면에는 엘리베이션 값(높이 값)이 있습니다. 서로 다른 높이의 요소들은 다음과 같은 역할을 합니다.
1️⃣ 앱 바(App bar): 콘텐츠가 앱 바 뒤로 스크롤 되는 것 처럼, 한 표면이 다른 표면 앞뒤로 이동할 수 있도록 합니다.
2️⃣ FAB: FAB의 그림자가 카드 모음과 분리되어 있음을 보여주며 공간적 관계를 반영합니다.
3️⃣ 다이얼로그(Dialog): 일시적으로 다른 표면 위에 나타나며 가장 높은 높이에 주의를 집중시킵니다.
엘리베이션 높이의 차이첫 번째는 밝은 보라색 사각형과 더 어두운 보라색 사각형을 보여주고, 두 번째는 이 사각형들을 측면에서 본 모습으로, 밝은 사각형이 어두운 사각형보다 더 낮은 높이에 있음을 나타냅니다.
1️⃣ 정면에서 볼 때: 하나의 표면은 1dp 높이, 다른 하나의 표면은 8dp 높이
2️⃣ 측면에서 볼 때: 두 표면 간의 높이 차이는 7dp
높이는 z축을 따라 구성 요소 사이의 거리를 밀도 독립 픽셀(dp) 단위로 측정합니다. 높이는 요소 간의 거리를 의미하며, 제품은 높이를 표현하기 위해 색상을 적용합니다.
의도적으로 엘리베이션의 단계를 제약엘리베이션 체계
Material 3의 높이 시스템은 의도적으로 몇 가지 단계만 제공됩니다. 이러한 창의적 제약은 UI의 높이 체계를 설계할 때 신중한 결정을 내려야 함을 의미합니다.
위 이미지는 다섯 개의 높이 단계와 해당 dp 값을 보여줍니다. Material은 총 여섯 단계의 높이를 사용하며, 각각은 UI 표면 위 상대적인 거리로 구분됩니다.
요소의 기본 상태는 0~+3 단계에 위치할 수 있고, +4와 +5는 호버(hover)나 드래그(dragged)와 같은 사용자 상호작용 상태를 위해 준비되어 있습니다.
서로 다른 톤, 그림자, 스크림을 통한 높이 차이높이를 주는 방법
높이는 그림자나 톤 차이를 둔 표면 채우기, 스크림(scrim)과 같은 시각적 단서를 사용해 표현할 수 있습니다. 높이를 효과적으로 표현하려면 표면은 다음을 보여주어야 합니다.
주변과 대비되는 표면의 가장자리
정지 상태이든 움직임 중이든 다른 표면과의 겹침
다른 표면과의 거리
1️⃣ 파란 사각형이 흰 사각형 위에 겹쳐 있는 모습 (서로 다른 톤 값을 가진 두 겹의 표면)
2️⃣ 파란 사각형이 또 다른 파란 사각형 위에 겹쳐 있으며, 위 사각형 아래에 그림자가 드리워진 모습 (같은 톤 값을 가진 두 겹의 표면이 그림자를 통해 분리된 경우)
3️⃣ 파란 사각형이 어두운 회색 사각형 위에 겹쳐 있는 모습 (같은 톤 값을 가진 두 겹의 표면이 스크림을 통해 분리된 경우)
톤 차이를 통한 엘리베이션
표면 간의 톤 차이는 머티리얼 표면의 촉각적 특성을 표현하는 데 도움이 됩니다. 톤 차이는 UI의 서로 다른 부분을 식별 가능한 컴포넌트로 분리하여, 한 표면이 어디서 끝나고 다른 표면이 어디서 시작하는지를 보여줍니다.
1️⃣ FAB의 높이는 본문 콘텐츠와 구분되도록 도와줍니다.
2️⃣ 모달 아래에는 스크림이 나타나 중요성을 전달합니다.
3️⃣ 상단 앱 바와 본문 콘텐츠 간의 톤 차이는 서로 다른 표면임을 나타냅니다.
그림자가 적용된 FAB과 적용되지 않은 FAB상호작용할 수 있는 컴포넌트의 경우, 표면 간의 구분이 명확히 보이도록 가장자리는 충분한 대비(접근성 대비 비율 충족 이상)를 만들어야 합니다.
✅ 그림자를 사용해 FAB을 아래 표면과 분리하고, 떠 있는 요소가 충분한 대비를 가지도록 합니다.
❌ 충분한 대비가 없는 색상을 사용하지 마세요. 표면 간의 관계는 명확히 드러나야 합니다.
작고 선명한 그림자와 크고 부드러운 그림자그림자를 통한 엘리베이션
그림자는 다른 기법으로는 표현하기 어려운 방식으로, 표면 간의 높이 차이를 드러낼 수 있습니다. 그림자의 크기와 부드러움(또는 확산 정도)은 두 표면 사이의 거리를 표현합니다.
예를 들어, 작고 선명한 그림자는 한 표면이 그 뒤의 표면과 매우 가까이 있음을 나타냅니다. 반대로, 크고 부드러운 그림자는 두 표면 사이의 거리가 더 멀다는 것을 보여줍니다.
작고 선명한 그림자는 표면이 배경과 가까움을 의미합니다.
크고 부드러운 그림자는 표면이 배경과 더 멀리 떨어져 있음을 의미합니다.
그림자를 적용할 때는 적을수록 더 효과적입니다. UI 내 높이 수준이 적을수록, 그림자는 주의를 집중시키고 행동을 유도하는 데 더 큰 힘을 발휘합니다.
이미지 위 그림자가 사용된 칩요소 보호하기
배경이 패턴이 있거나 시각적으로 복잡할 때, 헤어라인 스타일만으로는 충분히 구분되지 않을 수 있습니다. 이런 경우 카드, 칩, 버튼 같은 요소를 분리하고 강조하기 위해 높이를 사용합니다.
그림자를 가진 버튼들이 배경 이미지와 분리되어 있음
상호작용 요소가 높이를 통해 강조됨
상호작용 시 일시적으로 그림자가 생기는 요소상호작용 유도하기
요소는 포커스, 선택, 스와이프 같은 상호작용 시 일시적으로 들어 올려질 수 있습니다. 더 높은 요소가 나타날 경우, 들어 올려졌던 요소가 다시 낮아질 수도 있습니다.
대형 화면 뉴스 앱 예시스크림(딤)을 통한 엘리베이션
스크림(scrim)은 큰 레이어 표면에서 시각적 대비를 높여 특정 요소에 초점을 맞추도록 도와줍니다. 모달이나 확장된 내비게이션 메뉴 같은 요소 아래에 스크림을 사용합니다. 스크림은 스크림 색상 역할(scrim color role)을 32% 불투명도로 적용합니다.
위 이미지는 모달 내비게이션 드로어가 본문 콘텐츠와 스크림으로 분리되어 있으며, 내비게이션 드로어처럼 중요한 요소에 사용자의 시선을 집중시키는 데 도움을 줍니다.
마치며
Speak의 Dialog와 Extended FAB · Google Fit의 FAB엘리베이션(높이)은 UI에서 요소 간의 관계를 드러내고, 사용자 시선을 집중시키며, 상호작용을 유도하는 중요한 수단입니다. 그림자, 톤 차이, 스크림과 같은 시각적 기법과 함께 사용하면 정보 구조와 계층을 더욱 명확하게 전달할 수 있습니다.
그러나 높이를 과도하게 사용하면 오히려 혼란을 일으킬 수 있습니다. 단계가 많아질수록 화면은 복잡해지고, 사용자는 어디에 집중해야 할지 알기 어려워집니다. Material 3가 일부 제한된 높이 단계만 제공하는 이유도 여기에 있습니다. 최소한의 단계만으로도 충분히 명확한 구분과 효과적인 정보 전달이 가능하기 때문입니다.
따라서 디자이너는 높이를 적용할 때 몇 가지를 고려해야 합니다. 요소 간의 관계를 가장 단순하게 보여줄 수 있는 최소한의 높이를 사용하는지, 접근성 기준을 충족할 만큼 충분한 대비를 제공하는지, 그리고 상황에 따라 그림자·톤 차이·스크림을 적절히 조합하고 있는지를 살펴야 합니다.
구글 엘리베이션에 대한 자세한 내용은 아래에서 자세히 확인하실 수 있습니다.
