디지털 인터페이스에서 요소들의 계층 구조를 명확하게 표현하는 것은 사용자 경험(UX)을 향상시키는 중요한 요소입니다. KRDS에서는 이러한 시각적 계층을 효과적으로 전달하기 위해 엘리베이션(Elevation) 개념을 적용하고 있습니다. 이번 글에서는 엘리베이션이 무엇인지, 왜 중요한지, 그리고 KRDS에서 이를 어떻게 활용하는지 살펴보겠습니다.
🔹 엘리베이션이란?
엘리베이션(Elevation)은 UI 요소의 시각적 깊이와 계층 구조를 정의하는 디자인 개념입니다. 그림자, 색상, 경계선, 딤드 효과 등을 활용하여 사용자가 각 요소의 중요도와 상호작용 가능성을 쉽게 인식할 수 있도록 도와줍니다.
예를 들어, 팝업창이나 알림 메시지처럼 즉각적인 반응이 필요한 요소는 높은 엘리베이션을 적용하여 눈에 잘 띄도록 만들고, 기본적인 콘텐츠는 낮은 엘리베이션을 적용하여 사용자 경험의 흐름을 방해하지 않도록 설계할 수 있습니다.
🔹 KRDS의 엘리베이션 시스템
KRDS에서는 총 6단계의 엘리베이션 레벨을 제공하여 요소 간 계층을 명확히 구분합니다.
| 레벨 | 설명 | 적용 예시 |
|---|---|---|
| Level -1 | 배경보다 낮은 단계로, 리스트 컨테이너나 묶음형 요소에 사용 | 리스트 컨테이너, 배경 요소 |
| Level 0 | UI의 기본 배경으로 설정 | 기본 페이지 배경 |
| Level +1 | 기본적인 상호작용 요소 | 버튼, 카드, 사이드 메뉴 |
| Level +2 | 주요 상호작용 요소 | 드롭다운, 확장 메뉴, 모달 배경 |
| Level +3 | 주목도가 높은 요소 | 툴팁, 패널, 플로팅 버튼 |
| Level +4 | 가장 중요한 알림 및 긴급 메시지 | 팝업, 모달, 시스템 알림 |
이러한 단계별 설정을 통해 중요한 정보일수록 더 높은 엘리베이션을 부여하여 사용자 시선이 자연스럽게 집중될 수 있도록 디자인합니다.
🔹 엘리베이션 표현 방식
KRDS에서는 엘리베이션을 표현하기 위해 4가지 주요 기법을 활용합니다.
1️⃣ 그림자로 표현하기
가장 기본적인 방법으로, 요소의 깊이를 강조하여 부각하는 효과를 줍니다.
- 작은 그림자는 UI의 기본 요소(버튼, 카드 등)에 사용됩니다.
- 큰 그림자는 모달 창, 플로팅 버튼과 같이 중요한 요소에 적용됩니다.
2️⃣ 색상으로 표현하기
표면 색상을 다르게 적용하여 요소 간 계층을 시각적으로 구분합니다.
- 예를 들어, 높은 엘리베이션을 가진 요소일수록 더 밝거나 강한 색상을 사용할 수 있습니다.
3️⃣ 딤드(Dimmed) 효과 적용
배경을 어둡게 하여 사용자의 집중을 유도하는 방법입니다.
- 팝업창이나 중요 알림을 표시할 때 사용됩니다.
- 딤드 효과를 과하게 사용하면 시각적 피로감을 줄 수 있으므로, 중첩된 딤드 사용은 피하는 것이 좋습니다.
4️⃣ 경계선(Border)으로 구분하기
선명한 모드(고대비 모드)에서는 그림자가 잘 보이지 않을 수 있기 때문에, 경계선을 추가하여 요소를 명확히 구분할 수 있습니다.
- 카드 UI, 패널, 컨테이너 등에서 활용됩니다.
🔹 엘리베이션 적용 사례
KRDS에서 엘리베이션은 다양한 UI 요소에 적용됩니다.
- 버튼(Button): 기본 버튼(Level +1), 떠 있는 버튼(Level +2)
- 메뉴(Menu): 사이드 메뉴(Level +1), 확장 메뉴(Level +2)
- 툴팁(Tooltip): Level +3 적용하여 눈에 띄도록 설정
- 모달(Modal) & 팝업(Popup): Level +4 적용하여 최상위 레이어에서 표시
🔹 엘리베이션을 효과적으로 활용하는 방법
✔ 사용자의 시선 흐름을 고려하라
- 중요한 정보일수록 높은 엘리베이션을 적용하여 주목도를 높입니다.
✔ 너무 많은 그림자는 피하라
- 그림자가 과도하면 UI가 무거워 보일 수 있으므로, 필요한 곳에만 적절히 사용합니다.
✔ 접근성을 고려하라
- 선명한 모드(고대비 모드)에서는 그림자 대신 경계선을 활용하여 요소를 구분합니다.
✔ 일관된 레벨을 유지하라
- 동일한 유형의 UI 요소에는 일관된 엘리베이션 값을 적용하여 사용자 경험을 통일합니다.
🎯 결론: 더 직관적인 UI를 위한 엘리베이션 적용
KRDS의 엘리베이션 시스템은 사용자가 UI 요소를 쉽게 인식하고, 필요한 상호작용을 즉각적으로 수행할 수 있도록 돕는 중요한 역할을 합니다.
적절한 엘리베이션 적용을 통해 디자인의 일관성을 유지하면서도, 사용자 경험을 더욱 직관적으로 개선할 수 있습니다. 앞으로도 KRDS는 웹 접근성과 사용자 편의성을 고려한 디자인 시스템을 지속적으로 발전시켜 나갈 예정입니다. 🚀
👉 KRDS 엘리베이션 가이드라인 자세히 보기
🔗 KRDS 공식 사이트
📌 더 나은 디자인 시스템을 만들기 위해 고민하는 모든 디자이너와 개발자를 응원합니다! 💡
KRDS 관련 질문이나 의견이 있다면 언제든지 남겨주세요. 😊
