정보 밀도와 컴포넌트 스케일링
구글이 정보의 밀도를 조절하는 방법
정보와 컴포넌트의 밀도 조절 방법을 알아봅니다.정보의 밀도를 조절하는 방법
한 화면에 얼마나 많은 정보를 담아야 하는지 고려하는 것은 중요합니다. 사용자가 더 빠르게 정보를 스캔하거나 비교해야 하는 경우도 있고, 반대로 집중과 단순함이 더 필요한 경우도 있습니다. 이 균형을 조율하는 핵심 개념이 바로 정보 밀도와 컴포넌트 스케일링입니다.
Material 3는 이 두 가지 개념을 분리해서 정의하고 있으며, 동시에 적절히 조합해 사용할 것을 권장합니다. 이번 글에서는 구글이 정보의 밀도를 조절하는 방법에 대해 살펴보겠습니다.
정보 밀도와 컴포넌트 스케일링정보 밀도와 컴포넌트 스케일링
1️⃣ 정보 밀도(Information density)
정보 밀도는 화면에 표시되는 정보의 양을 고려하는 것입니다. 정보 밀도는 컴포넌트 스케일링을 사용하지 않고도 레이아웃과 디자인 결정만으로 달성할 수 있습니다. 사용자가 증가된 밀도의 혜택을 얻지 못할 수도 있습니다.
2️⃣ 컴포넌트 스케일링(Component scaling)
컴포넌트 스케일링은 컴포넌트의 크기를 조정해 사용자가 다양한 양의 정보를 탐색, 확인 또는 비교할 수 있도록 합니다. 대상 크기가 48*48 픽셀 이하로 줄어드는 경우 컴포넌트 스케일링을 기본적으로 적용하지 않습니다.
정보 밀도와 컴포넌트 스케일링을 통해 더 많은 정보를 제공할 수 있습니다.정보 밀도와 컴포넌트 스케일링은 함께 사용되어 더 많은 정보와 추가적인 사용자 제어 기능을 제공합니다.
사용자가 많은 정보를 탐색해야 할 때 더 높은 밀도의 정보 디자인을 사용하는 것을 고려해야 합니다.1️⃣ 정보 밀도 (Information density)
정보 밀도는 특정 화면 공간에 포함되는 콘텐츠(텍스트, 이미지, 비디오 등)의 양을 의미합니다.
레이아웃의 간격 요소, 즉 여백(margin), 패딩(padding), 그리고 스페이서(spacer) 조정에 따라 정보 밀도를 높이거나 낮출 수 있습니다. 데이터 테이블처럼 많은 정보를 한눈에 훑어보고 비교해야 하는 경우에는 높은 밀도의 레이아웃이 유용합니다. 리스트, 테이블, 긴 입력 양식의 밀도를 높이면 화면에 더 많은 콘텐츠를 표시할 수 있습니다.
밀도 설정은 사용하는 기기 환경을 고려해야 합니다. 사용자가 데스크톱에서는 조밀한 레이아웃을 선호할 수 있지만, 모바일에서는 그렇지 않을 수 있습니다. 밀도는 창 크기나 기기 방향 전환에 따라 자동으로 바뀌지 않아야 하며, 반드시 사용자가 직접 변경할 수 있어야 합니다.
심미성 · 쉬운 탐색을 우선시하는 낮은 밀도, 많은 정보를 빠르게 탐색하는 높은 밀도 1️⃣ 낮은 정보 밀도를 표시하는 경우
낮은 밀도는 심미성, 집중된 메시지, 적은 정보, 더 쉬운 탐색을 우선시하는 사이트에 더 적합할 수 있습니다.
2️⃣ 높은 정보 밀도를 표시하는 경우
더 높은 밀도는 뉴스, 금융 포털, 대시보드와 같이 사용자가 많은 정보를 빠르게 기대하는 데이터 중심 사이트에서 유용할 수 있습니다.
개별 컴포넌트의 내부 간격을 조정하는 컴포넌트 스케일링2️⃣ 컴포넌트 스케일링 (Component scaling)
컴포넌트 스케일은 개별 컴포넌트의 내부 간격을 제어합니다. 밀도 스케일은 컴포넌트의 기본 밀도를 0으로 시작합니다. 공간이 줄어들면서 음수(-1, -2, -3)로 이동하면 밀도가 높아집니다.
높은 밀도는 일반적으로 상하 패딩이나 전체 높이를 4dp 줄여 적용됩니다.
메뉴 및 스낵바에는 밀도를 크게 높이지 말아야 합니다.선택 가능한 공간이 줄어들어 사용성이 떨어지므로, 메뉴 선택과 같이 집중된 작업이 필요한 UI에서 밀도를 높이지 말아야 합니다. 사용자에게 변경 사항을 알리는 스낵바나 다이얼로그 같은 컴포넌트의 밀도 역시 높이지 말아야 합니다.
기본 대상 크기인 48*48 픽셀보다 작은 크기로 줄이는 레이아웃에 기본적으로 컴포넌트 스케일링을 적용하지 않습니다. 사용자가 더 높은 밀도의 레이아웃이나 테마를 선택할 수 있도록 허용하며, 기본 사례로 쉽게 되돌릴 수 있는 간단하고 접근 가능한 방법을 제공해야 합니다.
밀도 있는 레이아웃과 컴포넌트 선택사람들은 밀도 있는 레이아웃과 컴포넌트를 직접 선택할 수 있어야 합니다. 밀도 설정을 쉽게 되돌릴 수 있도록 설정 상호작용에서 대상 크기는 기본값(48*48 픽셀)을 따라야 합니다.
48*48dp 보다 줄어드는 곳에는 컴포넌트 스케일링 적용에 주의합니다. 밀도 적용 대상
조밀한 컴포넌트는 상호작용 가능한 요소가 더 작아져 접근성이 떨어질 수 있으므로, 정보 밀도를 높일 때는 주의해야 합니다.
상호작용 대상이 48*48 dp 보다 줄어드는 곳에 컴포넌트 스케일링을 적용할 때는 주의해야 하며, 사용자 경험이 더 나아지는 경우에만 밀도를 적용합니다.
아이콘 및 버튼에 대한 밀도 적용상호작용 대상에 밀도를 적용할 때는 주의해야 합니다. 모범 사례를 따르면 접근 가능한 대상은 최소 48*48 dp를 유지해야 하며, 아이콘 같은 시각적 요소가 더 작더라도 마찬가지입니다.
아이콘이 더 작더라도 대상은 48 × 48dp를 유지해야 합니다. 일반 버튼의 상호작용 대상은 더 클 수 있으며, 48*48 dp 최소 크기를 충족하기만 하면 됩니다.
저밀도 컴포넌트와 고밀도 컴포넌트픽셀 밀도 (Pixel density)
1인치에 들어가는 픽셀 수를 픽셀 밀도라고 합니다. 고밀도 화면은 저밀도 화면보다 인치당 픽셀이 더 많습니다. 그 결과 같은 픽셀 크기의 UI 요소라도 저밀도 화면에서는 더 크게, 고밀도 화면에서는 더 작게 보입니다.
픽셀 밀도 계산 방법
화면 밀도 = 화면 너비(또는 높이) 픽셀 수 ÷ 화면 너비(또는 높이) 인치
밀도 독립성을 갖춘 저밀도 화면 및 고밀도 화면밀도 독립 픽셀
밀도 독립 픽셀(dp)은 모든 화면에서 균일한 크기를 갖도록 스케일 되는 유연한 단위입니다. 이는 다양한 기기에서 디자인을 수용할 수 있는 유연한 방법을 제공합니다. Material Design은 서로 다른 밀도의 화면에서도 요소를 일관되게 표시하기 위해 밀도 독립 픽셀을 사용합니다. dp는 밀도가 160인 화면에서 하나의 실제 픽셀과 같습니다.
dp 계산 방법
dp = (픽셀 너비 × 160) ÷ 화면 밀도
사용자의 조건에 따라 정보 밀도와 크기를 조절해야 합니다.마치며
정보 밀도와 컴포넌트 스케일링은 단순히 화면을 꽉 채우는 것이 목적이 아닙니다. 사용자의 맥락에 따라 필요한 만큼의 정보와 효율적인 상호작용을 제공하는 것이 진짜 목적입니다. 사용자가 빠르게 스캔해야 하는 상황인지, 아니면 한 가지 액션에 집중해야 하는 상황인지, 데스크톱인지 모바일인지 조건들에 따라 밀도와 스케일을 조정해야 합니다.
결국 좋은 디자인은 화면에 정보를 얼마나 많이 담았느냐가 아니라, 사용자가 필요한 순간에 필요한 만큼의 정보를 무리 없이 얻을 수 있도록 돕는 데 있습니다. 정보 밀도에 대한 더 자세한 내용은 아래에서 확인하실 수 있습니다.
