오늘날의 웹사이트와 애플리케이션은 2000년대와 비교해 훨씬 간결해졌습니다. UI 밀도가 낮아지면서 사용자 경험은 더욱 향상되었죠. 하지만 UI 밀도란 무엇일까요? 그리고 어떻게 디자인에 적용할 수 있을까요? 이번 글에서는 UI 밀도의 개념과 그 디자인 방법에 대해 알아보겠습니다.
1. UI 밀도란 무엇인가?
UI 밀도는 특정 순간의 인터페이스 모양이 아닌, 인터페이스가 여러 순간에 걸쳐 제공하는 정보의 양과 관련이 있습니다. 이는 소프트웨어가 제공하는 가치를 어떻게 연결하는지에 대한 문제이기도 하죠. UI 밀도는 시각적 밀도와 정보 밀도로 나눌 수 있습니다.
2. 시각적 밀도
시각적 밀도란?
시각적 밀도는 주어진 공간에서 얼마나 많은 것을 볼 수 있는지를 의미합니다. 예를 들어, Bloomberg 터미널은 주요 시장 지수의 스파크라인, 세부 거래량 분포 등 다양한 요소를 한 화면에 표시하여 시각적 밀도가 높습니다. 반면, 시각적 밀도가 낮은 인터페이스는 화면에 적은 요소를 표시하죠.
밀도 인식의 직관적 판단
사람들은 무의식적으로 시각적 밀도를 판단합니다. 예를 들어, 많은 점들이 무작위로 배열된 이미지와 행과 열로 깔끔하게 배열된 이미지를 비교하면 후자가 더 밀도가 높다고 느껴질 수 있습니다.
3. 정보 밀도
정보 밀도란?
에드워드 터프티는 그의 책 《The Visual Display of Quantitative Information》에서 정보 밀도를 다룹니다. 모든 그래픽의 잉크는 이유가 있어야 하며, 그 이유는 새로운 정보를 제공해야 합니다. 데이터 잉크는 차트에 실제 데이터를 나타내는 부분을 의미합니다.
정보 밀도 계산 방법
정보 밀도는 차트에 있는 데이터 잉크의 양을 차트를 인쇄하는 데 필요한 전체 잉크 양으로 나누어 계산할 수 있습니다. 비율을 가능한 1에 가깝게 만드는 것이 중요하죠.
4. 디자인 밀도
디자인 밀도란?
디자인 밀도는 UI, UX, 제품 디자인에서 정보를 전달하기 위해 내리는 의사결정의 비율을 의미합니다. 게슈탈트 원리, 근접성, 유사성, 폐쇄성 등 다양한 원리를 사용해 밀도를 결정합니다.
게슈탈트 원리의 적용
유사성 원리는 동일한 크기, 글꼴, 색상의 텍스트가 같은 목적을 나타낸다는 것을 의미합니다. 근접성 원리는 차트가 헤드라인과 가까이 있을 때 헤드라인이 차트를 설명한다는 것을 나타내죠.
5. 시간적 밀도
시간적 밀도란?
주어진 시간 내에 사용자가 할 수 있는 작업의 양이 시간적 밀도를 결정합니다. 로딩 시간이 시간적 밀도의 가장 큰 요인 중 하나입니다. 예를 들어, Bloomberg 터미널은 데이터를 거의 즉각적으로 로드하여 시간적 밀도가 높습니다.
시간적 밀도 높이는 방법
로딩 시간을 줄임으로써 시간적 밀도를 높일 수 있습니다. 100밀리초 이내에 두 동작이 발생하면 동시에 발생한 것처럼 느껴집니다. 1초에서 10초 사이에는 애니메이션이나 전환 효과가 필요합니다.
6. 가치 밀도
가치 밀도란?
가치 밀도는 사용자가 얻는 결과의 가치와 관련이 있습니다. 긴 양식을 작은 조각으로 나누고 마법사형 인터페이스로 구성하는 것이 예입니다. 시각적 밀도와 시간적 밀도의 희생이 결과를 더 가치 있게 만들면 전체 가치 밀도가 증가합니다.
7. 결론
UI 밀도는 사용자가 인터페이스에서 얻는 가치와 인터페이스가 차지하는 시간과 공간을 최적화하는 것을 목표로 합니다. 속도, 사용성, 일관성, 예측 가능성, 정보의 풍부함, 기능성 등 다양한 요소를 고려해 디자인해야 합니다.
UI 밀도를 고려한 디자인은 사용자가 소프트웨어에서 더 많은 가치를 얻을 수 있도록 돕습니다.
참고 자료: Matthew Ström, “UI Density”