Data Table 설계 가이드

 

[UI/UX] 효과적인 데이터 테이블 설계에 관한  가이드

데이터 테이블들은 크기, 복잡성, 내용 및 목적에 따라 다르게 사용됩니다. 사용 케이스와 관계없이 잘 설계된 모든 데이터 테이블은 제시된 정보를 명확하게 제공하고 사용자가 통찰력을 얻고 조치를 취할 수 있도록 지원합니다.

이 문서는 각 어플리케이션에서 더 나은 데이터 테이블을 설계하는데에 도움이 되는 모범 사례 모음입니다.  테이블 스타일(Table Style)과 테이블 기능(Table Functionality)의 두 섹션으로 나누어 설명합니다.

 

 

---

 

Table Style

 

먼저, 테이블을 디자인하고 형식을 결정할 때에는 가독성을 우선시하고 시각적으로 산만할 수 있는 혼란을 주는 요소는 제거하는게 좋습니다.

 

1. Row Style(최상의 행 스타일)

테이블의 행(Row Style)은 사용자가 데이터를 검색, 읽기 및 구문 분석에 도움이 됩니다.  표에 담길 데이터 유형과 크기에 가장 적합한 스타일을 선택하도록 합니다.

Grid(그리드) : 가로선과 세로선을 모두 포함하면 데이터 지점(Data Point)감의 거리가 넓어져 잘 구분할 수 있지만, 시각적 노이즈가 과해져 방해가 될 수도 있습니다. 그래서 이 스타일은 데이터의 밀도가 높고, 양이 많은 테이블에 권장됩니다.

UI Prep의 테이블Grid example (table from UI Prep)

 

 

Horizontal Lines(가로선) : 가로 구분선만 표시하면 전체 그리드의 시각적 노이즈가 감소합니다. 이 스타일은 여백들을 포함하고 있고 사용자가 데이터를 읽는 동안 위치를 파악하는 데에 도움이 됩니다. 이 스타일은 모든 데이터세트 크기에 일반적으로 사용되는 스타일입니다.

Horizontal line example (table from UI Prep)

 

 

Zebra Stripes : 각 행마다 서로 다른 색 배경을 번갈아 사용하는 것은 사용자가 데이터를 읽는 동안 위치를 파악하는데 도움이 되는 또 다른 좋은 방법입니다. 이 스타일은 데이터의 교대 패턴이 명확하고 특정 행이 강조 표시되는 혼동을 일으키지 않는 대규모 데이터 세트에 주로 사용합니다.

Zebra stripe example (table from UI Prep)

 

Free Form : 모든 구분선(Dividers)을 제거하면 시각적 노이즈가 감소하고 미니멀한 스타일이 됩니다. 다만 이 스타일은 사용자가 읽는 동안 위치를 파악할 필요가 없는 작은 데이터 세트에 사용하는 것이 좋습니다.

Free form example (table from UI Prep)

 

 

 

2. Clear Contrast(명확한 대비 사용)

 

테이블에 다양한 대비를 추가하여 Hierrarchy를 설정합니다. 각기 다른 텍스트 스타일과 배경 등을 사용해서 대비를 주는 방법입니다.

 

 

Header Contrast(헤더 대비) : 무게감이나 컬러 변경을 통해 헤더와 열 텍스트를 구분합니다. 헤더에만 다른 색 배경을 적용하여 추가적인 대비를 줄 수 있습니다.

header text contrast, Bottom: header background contrast (table from UI Prep)

 

Column data(열 데이터) : 열 데이터는 행 식별자(첫 번째 열) 또는 단일 셀의 기본 데이터 포인트(예: 셀 데이터: 1,234 34%)와 같은 특정 데이터 강조를 위해 다른 가중치와 색상을 사용할 수도 있습니다 .

identifier contrast, Bottom: Data contrast (table from UI Prep)

 

 

3. 시각적 신호 추가

 

다른 색상의 배경을 사용하여 테이블에 조직적 맥락과 의미를 추가할 수 있습니다.이러한 시각적 단서는 데이터를 쉽게 스캔하고 이해할 수 있도록 합니다.

 

Row Background(행 배경): 전체 행의 색상을 변경하여 데이터 영역의 차이를 강조해서 표시합니다. (예: 단일 값과 합계 또는 평균 간 전환)

Row background example (table from UI Prep)

 

 

Cell Background(셀 배경): 셀의 색상을 변경하여 데이터 포인트의 상태를 강조해서 표시합니다. (예: 상승 추세, 하락 추세)

Cell background example (table from UI Prep)

 

 

4. Align Columns Properly (열의 바른 정렬)

기본적으로 대부분의 열 데이터는 왼쪽 정렬됩니다. 이렇게 하면 데이터를 쉽게 스캔하고 읽을 수 있으며 비교할 수 있습니다.한 가지 예외는 크기와 관련된 숫자 데이터입니다. 이 숫자는 사용자가 숫자 크기를 식별하는 데 도움이 되도록 오른쪽 정렬되어야 합니다.

 

Rules to follow:

• 텍스트 데이터를 왼쪽으로 정렬(예: 이름)
• 크기와 무관한 숫자 데이터 정렬(예: 날짜, 우편번호, 전화번호)
• 크기(예: 개수, 백분율)와 관련된 숫자 데이터 정렬
• 열 데이터에 따라 헤더 정렬

 

Alignment example (table from UI Prep)

 

 

5. Use Tabular Numerals (표식 숫자 사용)

숫자를 표시할 때  표 글꼴(Tabular or Monospace)을 사용하는 것이 좋습니다. 이것은 비례적 간격(즉, 영문의 경우 "W"가 "I"보다 넓음)을 가지기 보다는 각 글꼴도형의 너비를 동일한 것을 의미합니다. 이렇게 하면 사용자가 숫자 데이터 열을 더 쉽게 파악할 수 있습니다.

테이블에 기본적으로 공백 글꼴(Monospace font)를 사용할 수 있습니다.(예. Courier, Courier New, Lucida Console, Monaco, ect.) 또는 공백 숫자 집합이 비례 글꼴(Proportional fonts)에 포함되기도 합니다. 

Proportional vs tabular font example

 

 

 

 

 

6. Appropriate Line Height(적절한 라인 높이 선택)

 

테이블의 데이터 유형과 양에 가장 적합한 행의 높이(Row Height)를 선택합니다. 일반적이거나 여유있는 행 높이는 여백이 더 많아 큰 데이터 세트를 구분해서 읽는데에 더 편리합니다.

축약된 사이즈의 행 높이를 사용하면 사용자가 스크롤하지 않고도 한 번에 더 많은 데이터를 볼 수 있지만 테이블의 가독성이 떨어지고 구문 분석 오류가 발생할 수도 있습니다.

 

일반적인 행 높이(Row height) 예시

• 축약된 사이즈(Condensed): 40px
• 일반적인 사이즈(Regular): 48px
• 여유있는사이즈(Relaxed): 56px

 

Line height examples (table from UI Prep)

 

 

 

7. Include Enough Padding (충분한 패딩 포함)

각 열의 오른쪽과 왼쪽에 최소 16px 패딩을 유지하도록 합니다. 즉, 각 열 사이의 공간이 최소 32px이 되어야합니다.

 

Padding example (table from UI Prep)

 

 

8. Subtext (하위텍스트의 사용)

서브 텍스트는 공간을 차지하거나 표를 어수선하게 만들지 않고도 시기적절한 컨텍스트와 유용한 세부 정보를 보여줄 수 있습니다. 불필요하게 열을 늘리지 않고 열을 결합하는 한가지 방법으로 사용되기도 합니다. 예를 들어, 이메일은 별도의 열이 아닌 사용자 이름 아래에 서브 텍스트로 추가할 수 있습니다.

 

Subtext example (table from UI Prep)

 

 

 

---

 

 

 

Table Functionality(기능성 측면)

데이터 테이블은 사용자가 테이블 내의 정보를 스캔, 이해, 분석, 비교 및 조치할 수 있어야 합니다.

 

 

 

1. Maintain Context When Scrolling(스크롤 시 컨텍스트 유지)

사용자가 테이블을 세로 혹은 가로로 스크롤하거나, 테이블을 가로질러 스크롤 하는 동안 어떤 데이터를 보고 있는지 쉽게 이해할 수 있도록 상황별로 정보를 고정합니다.  이 기능은 데이터 세트가 크거나 화면 크기가 작은 테이블 설계 시 중요합니다.

 

 

 

Fixed Header(고정 헤더): 사용자가 세로(수직)로 스크롤하기 시작할 때 테이블 상단에 헤더를 고정합니다. 이렇게 하면 열 레이블을 항상 뷰에 유지하면서 컨텍스트를 제공합니다.

Fixed header example (table from UI Prep)

 

Fixed Column(고정 열) : 사용자가 가로로 스크롤하기 시작할 때 첫 번째 열(식별 정보 포함)을 테이블 측면에 고정합니다.  이렇게 하면 행 식별자(구분자)를 항상 뷰로 유지하여 컨텍스트를 제공합니다.

Fixed column example (table from UI Prep)

 

 

 

2. Prioritize Common Actions(일반 적인 작업의 우선 순위)

사용자가 새 페이지로 이동할 필요 없이 일반적인 작업을 빠르게 완료할 수 있습니다. 이를 통해 사용자는 단순반복적인 작업을 완료해야 하는 시간과 번거로움을 줄일 수 있습니다.

 

Hover Action : 사용자가 해당 항목 위에 마우스 오버 시 작업가능한 일반적인 동작을 표시해줍니다. 이렇게 하면 시각적 혼란이 줄어들지만, 새로운 사용자는 해당기능을 찾지 못할 가능성도 있습니다. 

Hover action example (table from UI Prep)

 

Bulk Action(일괄/대량 작업) : 사용자가 한 번에 여러 항목을 선택하고 업데이트(변경)할 수 있습니다. 행을 선택하면 테이블 상단에서 일반 적인 작업을 할 수 있습니다. 이 기능은 반복적인 작업을 일괄 처리하여 사용자의 시간을 많이 절약할 수 있습니다.

Bulk action example (table from UI Prep)

 

 

3. 필터를 사용하여 표시될 데이터 조작

사용자가 테이블에 표시된 데이터를 변경 및 구성할 수 있도록 합니다. 데이터 필터링은 사용자가 원하는 것을 찾고 다양한 통찰력을 얻으며 비교하는 데에 도움이 됩니다.

 

Basic Filters(기본 필터) : 사용자가 데이터 세트에 사전 설정된 매개 변수를 적용할 수 있습니다. 이 기능은 매우 다용도적으로 대부분의 데이터 테이블에 적합합니다.

Basic filter example (table from UI Prep)

 

 

Complex Filters(복합 필터): 사용자가 특정 열에 사용자 정의 매개 변수를 적용할 수 있습니다.  이 고급 기능을 통해 사용자는 복잡한 숫자 데이터 테이블에 대한 더욱 구체적인 결과를 분석하고 비교할 수 있습니다.  또한 이 기능에는 "필터 세트"를 저장하여 사용자의 시간과 노력을 절약하기 위한 기능을 포함할 수 있습니다.

Complex filter example (table from UI Prep)

 

 

 

 

4. Include Pagination(페이지 표시 포함)

긴 테이블을 각 페이지에 행 수를 설정하여 여러 페이지로 나눕니다. 사용자가 현재 어떤 페이지에 있는지 확인하고 다른 페이지로 이동할 수 있어야 합니다. 또한 사용자는 각 페이지에 포함되는 행 수를 사용자 정의할  수 있습니다.

 

Pagination example (table from UI Prep)

 

 

 

 

5. Make Column Data Customizable(열 데이터 사용자 정의)

사용자가 테이블에 포함할 데이터를 선택할 수 있습니다. 이 기능을 통해 사용자는 자신의 사용 케이스에 따라 열을 추가, 제거 및 재정렬할 수 있습니다. 이 기능에는 반복 사용이 가능한 경우 열 환경 설정을 저장하는 기능을 포함할 수 있습니다.

 

Customizable column example (table from UI Prep)

 

 

6. Make Table Display Customizable(테이블 디스플레이 사용자 정의)

사용자가 사용 가능한 데이터의 순서와 표시를 사용자 정의할 수 있게합니다. 이러한 사용자 정의 기능은 다양한 작업 흐름을 제공하고 새로운 통찰력을 제공하며 보다 시력이 손상된 사용자 등에게 보다 다양하게 활용될 수 있습니다.

 

Sort Columns(열 정렬) :  사용자가 특정 범주별로 행을 구성할 수 있습니다. 열 레이블 옆에 있는 정렬 아이콘을 클릭하여 임의의 열을 알파벳순 또는 숫자순으로 정렬할 수 있습니다.

Sort column example (table from UI Prep)

 

 

Resizable Columns(열 크기 조절) : 사용자가 열의 너비를 확장 및 축소하여 가려진 데이터를 완전히 확인할 수 있게 합니다.

Resizable column (table from UI Prep)

 

Display Density(밀도 조절) : 사용자가 필요에 따라 행 높이를 변경할 수 있게합니다.

Display density example (table from UI Prep)

 

 

 

마치며...

우수한 데이터 테이블 설계는 사용자에게 복잡한 데이터에서 벗어나 탁월한 효용성과 가치를 제공합니다. 다양한 모범 사례들을 활용하여 기존 데이터 테이블 UX를 개선하거나 다음 설계 시 참고해보세요.

 

 

 

 

* 원본 자료의 글을 번역 및 가공한 글입니다. 

https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a

The Ultimate Guide to Designing Data Tables