# UI 밀도(Density)의 의미와 디자인 방법

> Clean Markdown view of GeekNews topic #14932. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14932](https://news.hada.io/topic?id=14932)
- GeekNews Markdown: [https://news.hada.io/topic/14932.md](https://news.hada.io/topic/14932.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-05-22T09:43:52+09:00
- Updated: 2024-05-22T09:43:52+09:00
- Original source: [matthewstrom.com](https://matthewstrom.com/writing/ui-density/)
- Points: 13
- Comments: 1

## Topic Body

### 인터페이스 밀도가 낮아지고 있음  
- 현재의 웹사이트와 애플리케이션을 2000년대와 비교하면 소프트웨어가 퍼져 있는 경향을 무시하기 어려움.  
- **UI 밀도란 무엇인가?**  
  - UI 밀도는 특정 순간의 인터페이스 모양이 아님  
  - 인터페이스가 여러 순간에 걸쳐 제공하는 정보의 양과 관련이 있음  
  - 디자인 결정이 이러한 순간들을 어떻게 연결하는지, 소프트웨어가 제공하는 가치와 어떻게 연결되는지에 대한 것임  
  
### 시각적 밀도 (Visual density)  
- 밀도는 눈으로 먼저 생각하게 됨  
- 시각적 밀도는 주어진 공간에서 얼마나 많은 것을 볼 수 있는지를 의미함  
- 시각적으로 밀도가 높은 소프트웨어 인터페이스는 화면에 많은 요소를 표시함  
- 시각적으로 밀도가 낮은 인터페이스는 화면에 적은 요소를 표시함  
- **예시: Bloomberg 터미널**  
  - Bloomberg 터미널은 시각적 밀도의 대표적인 예임  
  - 단일 화면에 주요 시장 지수의 스파크라인, 세부 거래량 분포, 수십 개의 행과 열이 있는 테이블, 최신 뉴스 헤드라인, 키보드 단축키와 빠른 작업 UI 표지판 등이 표시됨  
- **예시: Craigslist와 McMaster-Carr**  
  - Craigslist는 수백 개의 단순한 링크와 검색 및 필터 인터페이스로 시각적으로 밀도가 높음  
  - McMaster-Carr 웹사이트도 비슷한 디자인 요소를 공유하며, 작은 공간에 많은 제품 변형의 세부 정보를 나열함  
- **밀도 인식의 직관적 판단**  
  - 이러한 웹사이트의 밀도에 대한 의견은 단 몇 초 만에 형성됨  
  - 이러한 판단은 잠재의식에서 빠르고 직관적으로 이루어짐  
  - 그러나 이런 빠른 판단은 편향적이고 신뢰할 수 없을 수 있음  
- **시각적 밀도의 예시 이미지**  
  - 두 개의 직사각형 예시:  
    - 왼쪽: 무작위로 배열된 많은 점들  
    - 오른쪽: 동일한 수의 점들이 행과 열로 깔끔하게 배열됨  
    - 대부분의 사람들은 오른쪽 이미지가 더 밀도가 높다고 느낌  
  - 또 다른 예시 이미지:  
    - 왼쪽: 행과 열로 깔끔하게 배열된 많은 점들  
    - 오른쪽: 두 개의 그룹으로 나뉘어 깔끔하게 배열된 동일한 수의 점들  
    - 같은 수의 점이라도, 그룹으로 나누면 밀도에 대한 우리의 인식이 달라짐  
- **시각적 밀도의 불확실성**  
  - 디자인에서는 완전히 객관적일 수 없음  
  - 그러나 밀도에 대한 대화를 나누려면 일관성 있고 의미 있으며 유용한 정의를 목표로 해야 함  
  
### 정보 밀도(Information density)  
- 에드워드 터프티(Edward Tufte)는 《The Visual Display of Quantitative Information》에서 차트와 그래프의 디자인을 다룸  
  > 모든 그래픽의 잉크는 이유가 있어야 하며, 그 이유는 새로운 정보를 제공해야 함.  
- **데이터 잉크(Data-ink)**  
  - 데이터 잉크는 주어진 시각화에서 유용한 부분을 의미함.  
  - 데이터가 아닌 시각적 요소는 제거해야 함.  
  - 데이터 잉크는 차트가 차지하는 공간과는 다름. 정보 밀도에 관한 것임.  
- **정보 밀도 계산**  
  - 정보 밀도는 차트에 있는 데이터 잉크의 양을 차트를 인쇄하는 데 필요한 전체 잉크 양으로 나누어 계산할 수 있음.  
  - 데이터 잉크의 정의는 주관적일 수 있지만, 중요한 점은 비율을 가능한 1에 가깝게 만드는 것임.  
  - 비율을 높이는 방법:  
    - 데이터 잉크 추가: 추가적인 유용한 데이터를 제공.  
    - 비데이터 잉크 제거: 데이터를 전달하지 않는 그래픽 부분을 지움.  
- **예시**  
  - 초과 잉크가 많은 그래픽 예시와 적은 잉크로 많은 정보를 전달하는 개선된 예시.  
  - 정보 밀도에는 상한선이 있으며, 너무 많은 잉크를 제거하거나 너무 많은 정보를 추가할 수 있음.  
  - 청중도 중요함: 고급 사용자는 높은 밀도를, 초등학생은 낮은 밀도를 선호할 수 있음.  
- **정보 밀도와 시각적 밀도의 관계**  
  - 정보 밀도가 높을수록 시각적으로 밀도가 높아 보이는 경향이 있음.  
  - 예: 1885년 E.J. Marey의 기차 시간표 시각화. 도착 및 출발 시간이 작고 밀도 높은 공간에 표시됨.  
  - 터프티는 데이터 밀도와 데이터를 합리적으로 최대화할 것을 주장함.  
- **Shrink Principle**  
  - 그래픽은 크게 축소될 수 있음.  
  - 정보 밀도는 차트와 그래프에 유용함.  
  - 인터페이스에도 적용할 수 있을까?  
- **인터페이스에서 정보 밀도 적용**  
  - 정보는 화면에 적용 가능함.  
  - 인터페이스 각 부분이 최대한 많은 정보를 보여줘야 함.  
  - 잉크를 픽셀로 생각하는 것은 유혹적이지만, 인터페이스에는 요소 간의 관계를 이해하도록 돕는 구분선, 구조적 요소, 표지판이 필요함.  
  - Shrink Principle을 따라 모든 공백을 제거하려는 유혹이 있음.  
  - 그러나 일부 공백은 시각적 요소만큼 중요한 의미가 있음. 그림자, 그라디언트, 색상 강조의 역할도 고려해야 함.  
- 정보 밀도는 유용한 개념이지만, 전체 그림의 일부에 불과함.  
  - 인터페이스의 모든 디자인 결정을 더 객관적이고 정량적으로 이해할 방법을 모색해야 함.  
  
### 디자인 밀도 (Design Density)  
- 디자인 결정의 관점에서 밀도를 정의하는 첫 번째 도전은 무엇이 결정인지 판별하는 것임.  
- **디자인 결정을 이해하기**  
  - UI, UX, 제품 디자인에서 우리는 정보를 전달하기 위해 의식적 또는 무의식적으로 많은 결정을 내림.  
  - 왜 특정 선택이 의미를 전달하는지, 어떤 선택이 단순히 미학적인지, 어떤 선택이 실제로 중요한지 질문이 필요함.  
- **게슈탈트 원리**  
  - 20세기 독일 심리학자들이 연구한 인간이 형태와 패턴을 이해하는 방법.  
  - 게슈탈트(Gestalt)라는 용어는 "형태"를 의미함.  
  - 이 연구에서 몇 가지 기본적인 디자인 법칙을 발견함:  
    - **근접성(Proximity)**: 가까이 있는 것들을 하나의 그룹으로 인식함.  
    - **유사성(Similarity)**: 모양, 크기, 색상 등에서 유사한 객체들이 서로 관련되어 보임.  
    - **폐쇄성(Closure)**: 디자인의 틈을 메워 전체 형태를 인식함.  
    - **대칭성(Symmetry)**: 대칭적인 형태들을 중심점을 기준으로 그룹화함.  
    - **공통 운명(Common Fate)**: 동일한 방식으로 움직이는 객체들을 함께 그룹화함.  
    - **연속성(Continuity)**: 겹쳐져 있는 객체들을 별개로 인식함.  
    - **과거 경험(Past Experience)**: 익숙한 형태와 패턴을 낯선 상황에서도 인식함.  
    - **전경-배경 관계(Figure-Ground Relationship)**: 2D 이미지에서 전경과 배경 요소를 구분함.  
- **게슈탈트 원리가 UI 디자인에 미치는 영향**  
  - 유사성 원리 덕분에 동일한 크기, 글꼴, 색상의 텍스트는 같은 목적을 나타냄.  
  - 근접성 원리는 차트가 헤드라인과 가까이 있을 때 헤드라인이 차트를 설명한다는 것을 나타냄.  
  - 과거 경험과 전경-배경 원리 덕분에 사용자에게 토글 스위치가 어떻게 작동하는지 즉시 알 수 있음.  
- **디자인 밀도의 개념**  
  - 픽셀에 집중하는 대신, 게슈탈트 원리를 사용하여 의도적으로 의미를 전달하는 디자인 결정을 생각함.  
  - 터프티의 데이터-잉크 비율이 차트에 필요한 잉크와 전체 잉크를 비교하는 것처럼, 디자인 밀도는 필요한 디자인 결정과 전체 결정의 비율을 비교함.  
  - 주관적이지만, 사용자 인터페이스에서는 데이터나 잉크의 양을 세는 것보다 디자인 결정을 세는 것이 더 유용함.  
- **디자인 밀도의 한계**  
  - 사용자 인터페이스는 작업, 즐거움, 시간 낭비, 이해 생성, 개인적 연결 촉진 등을 위해 존재함.  
  - 사용자가 여정을 통해 취하는 모든 행동을 포함해야 함.  
  - 밀도는 구성 요소, 레이아웃, 화면을 넘어 공간과 시간에서 사용자가 취하는 모든 행동을 고려해야 함.  
  
### 시간적 밀도  
- 주어진 시간 내에 사용자가 할 수 있는 작업의 양이 시간적 밀도를 결정함.  
- 로딩 시간은 시간적 밀도의 가장 큰 요인임. 인터페이스가 빠르게 반응하고 새로운 페이지나 화면을 로드할수록 UI가 더 밀도 높음.  
- Bloomberg 터미널은 데이터를 거의 즉각적으로 로드하여 시간적 밀도가 매우 높음.  
- **시간적 밀도를 높이는 방법**  
  - 로딩 시간을 최대한 줄임으로써 시간적 밀도를 높일 수 있음.  
  - 그러나 모든 로딩 시간을 줄일 수는 없음. 예를 들어, 사용자의 인터넷 연결 속도나 CPU 속도를 변경할 수 없음.  
  - 일부 작업(파일 업로드, 고객 지원 응답 대기, 결제 처리 등)은 복잡한 시스템과 예측할 수 없는 변수와 관련됨.  
- **시간 지각을 변화시키는 방법**  
  - **100밀리초 이내**: 두 동작 사이의 시간이 100밀리초 이내이면 동시에 발생한 것처럼 느껴짐. 이 경우 애니메이션이 오히려 앱을 느리게 느끼게 할 수 있음.  
  - **100밀리초에서 1초 사이**: 두 동작 사이의 연결이 끊어지기 시작함. 애니메이션과 전환 효과가 이 지각적 간극을 메워줄 수 있음.  
  - **1초에서 10초 사이**: 애니메이션만으로는 부족함. 10초 이내에 사용자가 페이지를 떠날 가능성이 높아짐. 이 경우 불확정 로딩 표시기를 사용하여 시스템이 정상 작동 중임을 알려야 함.  
  - **10초에서 1분 사이**: 불확정 로딩 표시기는 10초 이상 지속되면 정적이라고 느껴지기 시작함. 이 경우 명확한 로딩 표시기(예: 진행 막대)를 사용하여 남은 시간을 명확하게 표시해야 함.  
  - **1분 이상**: 사용자가 페이지를 떠나거나 다른 작업을 할 수 있게 하여야 함. 1분 이상 아무 작업도 하지 않으면 좌절감을 줄 수 있음. 긴 프로세스는 오류 발생 가능성도 높음.  
- **시간과 공간의 밀도**  
  - UI의 밀도는 단지 수단에 불과함. UI의 가치는 그 외형이 아니라, 달성할 수 있는 결과에 있음.  
  - 밀도는 최소한의 시간, 공간, 픽셀, 잉크로 최대한의 가치를 제공하는 것에 있음.  
  
### 가치 밀도 (Density in Value)  
- 가치 밀도는 사용자가 얻는 결과의 가치와 관련됨.  
- 예: 긴 양식을 작은 조각으로 나누고 마법사형 인터페이스로 구성하는 것이 좋음. 부분적으로 채워진 양식은 가치가 없기 때문임.  
- 모든 질문을 한 페이지에 넣는 것이 시각적으로 밀도가 높아 보일 수 있지만, 작성하는 데 시간이 오래 걸리면 많은 사용자가 제출하지 않음.  
- **양식 예시**  
  - 여러 부분으로 나누고, 오류와 해결 방법을 명확하게 표시한 양식.  
  - 오류를 줄이고 사용자가 양식을 끝까지 작성하게 하는 것이 디자인에 더 많은 공간과 시간이 필요할 수 있음.  
  - 그러나 시각적, 시간적 밀도의 희생이 결과를 더 가치 있게 만들면 전체 가치 밀도가 증가함.  
- **가치 밀도 증가**  
  - 양식을 더 작고 빠르게 로드하고 오류를 줄임으로써 시각적, 시간적 밀도를 높일 수 있음.  
  - 사용자의 가치나 비즈니스의 가치를 감소시키지 않는다면 전체 밀도가 증가함.  
  - 터프티의 접근 방식을 따라 최대한 가치 밀도를 높이려고 노력해야 함.  
- **최적화 문제**  
  - 최적화 문제를 해결하면 역설적인 결과가 나올 수 있음.  
  - 초기 인터넷에서는 Craigslist와 같은 회사가 정보를 집계하고 페이지 링크로 표시하여 가치 밀도를 높임.  
  - Yahoo와 Altavista는 정보를 검색할 수 있게 했지만 여전히 집계를 중시함.  
  - Google은 다른 접근 방식을 취해 인터넷의 링크 체인을 통해 얻은 정보를 검색 상자에 활용함.  
  - 정보가 스스로 집계되었으며, 사용자에게 필요한 것은 단일 텍스트 입력만으로 웹 전체에 접근하는 것이었음.  
- **Google과 Yahoo의 접근 방식**  
  - Google의 초기 화면(2001년)과 2024년의 화면을 비교하면 시각적 밀도는 낮지만, 가치 밀도는 매우 높음.  
  - 결과: Google의 가치는 2004년 $23B에서 현재 $2T 이상으로 증가함. Yahoo는 2000년 $125B에서 현재 $4.8B로 하락함.  
- 시각적 밀도보다 가치 밀도가 중요한 경우가 많음.  
- 사용자가 얻는 가치를 최대화하기 위해 디자인과 기능을 최적화하는 것이 중요함.  
  
### 결론  
- UI 밀도를 고려한 디자인은 인터페이스의 시각적 측면을 넘어서야 함.  
- 우리가 내리는 모든 명시적, 암시적 디자인 결정과 화면에 표시하는 모든 정보를 포함함.  
- 사용자가 소프트웨어에서 가치를 얻기 위해 취하는 모든 행동과 시간을 포함해야 함.  
- **UI 밀도의 구체적 정의**  
  - UI 밀도 = 사용자가 인터페이스에서 얻는 가치 / 인터페이스가 차지하는 시간과 공간  
- **중요한 요소**  
  - 속도  
  - 사용성  
  - 일관성  
  - 예측 가능성  
  - 정보의 풍부함  
  - 기능성  
- **성공적인 인터페이스의 이유** : 이러한 모든 요소를 고려하면 일부 인터페이스가 성공하고 다른 인터페이스가 실패하는 이유를 이해할 수 있음.  
- **디자인 목표**  
  - 밀도를 고려한 디자인을 통해 사람들이 우리가 만든 소프트웨어에서 더 많은 가치를 얻을 수 있도록 해야 함.

## Comments



### Comment 25450

- Author: neo
- Created: 2024-05-22T09:43:52+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40428386) 
##### 해커뉴스 댓글 모음 요약

* **레스토랑 메뉴의 물리적 형태가 모바일 사이트 메뉴보다 더 나은 이유**  
  - 모바일 사이트 메뉴는 UI가 너무 복잡해서 구글 맵에서 메뉴 사진을 찾는 경우가 많음.  
  - "밀도"를 재정의하려는 시도보다는 시각적 중요성을 잃지 않고 정보를 최대한 많이 제공하는 것이 중요함.

* **형식보다 기능을 중시하는 데이터의 중요성**  
  - SS El Faro 사건에서 선장은 예쁜 그래픽을 가진 상업적 날씨 데이터를 사용하다가 허리케인에 휘말림.  
  - 데이터의 시각적 아름다움보다는 정확성과 최신성이 중요함.

* **시간적 밀도의 개념**  
  - JIRA는 시각적으로 밀도가 높지만, 속도와 다양한 화면 전환 때문에 실제로는 드문드문한 느낌을 줌.

* **모바일 인터페이스의 희소성 이유**  
  - 사람들의 손가락이 상대적으로 두껍고 부정확함.  
  - 데스크탑보다 느려서 로드를 여러 부분으로 나눔.  
  - 세로 스크롤 형식과 화면 크기가 제한적임.  
  - 데스크탑에서 유용한 기능들이 모바일에서는 어려움.

* **UI의 희소성 증가에 대한 비판**  
  - 웹 디자인 세계가 공백을 더 많이 사용하는 방향으로 가고 있음.  
  - Hulu와 같은 앱은 많은 공백을 사용하여 정보 접근을 어렵게 만듦.  
  - 디자이너들이 트렌드를 따르기보다는 실제로 좋은 것을 고민해야 함.

* **복잡한 UI와 트렌드의 문제**  
  - 디자이너들이 트렌드를 따르는 것이 제품의 판매에 도움이 된다고 생각함.  
  - 유명한 사람이나 브랜드를 모방하려는 경향이 있음.  
  - UI 디자이너들이 고객이 트렌드와 유행을 중시한다고 잘못 생각할 수 있음.

* **전통적인 UI의 장점**  
  - 오래된 Windows B2B 애플리케이션은 많은 정보를 한눈에 볼 수 있게 함.  
  - 웹 기반 시스템은 여러 페이지를 사용해야 하는 반면, 전통적인 시스템은 한두 개의 창에서 모든 데이터를 볼 수 있음.

* **정보 밀도의 불균형**  
  - 프레젠테이션 슬라이드의 간단한 내용이 고해상도 사진으로 찍히는 경우가 많음.  
  - LaTeX로 작성된 논문은 작은 용량의 PDF 파일이지만, MS Word로 작성된 논문은 매우 큰 용량을 차지함.

* **모바일 UI의 문제점**  
  - 작은 화면에서 처방전을 리필하는 것이 불가능해짐.  
  - React로 최적화된 UI가 작은 화면에서 제대로 작동하지 않음.  
  - 기술의 발전이 사용자 경험을 해치고 있음.

* **밀도가 부족한 UI의 예시**  
  - [Vanguard 투자 상품 페이지](https://investor.vanguard.com/investment-products/mutual-funds/profile/vtmsx)는 밀도가 부족한 UI의 예시임.