데이터 테이블 디자인 방법

 

1. 테이블은 언제 사용하며 어떤 이점이 있나요?

데이터 테이블은 많은 수의 항목에 대해 많은 정보를 표시해야 할 때 훌륭한 솔루션입니다. 예를 들어 고객 목록, 상태, 연락처, 마지막 활동 등을 데이터 테이블로 표시하는 것이 가장 좋습니다. 공간 활용도, 확장성, 개발 용이성, 그리드 작업에 익숙한 사용자(대부분 이미 수년간 Excel로 작업한 경험이 있음) 등 많은 이점이 있습니다. 무언가를 쉽게 찾고 변경할 수 있습니다.

하지만 데이터를 표현하는 방법에는 여러 가지가 있다는 점을 기억하세요. 그리드를 사용할지 말지는 사용자의 필요에 따라 결정해야 합니다. 개요/요약을 제공해야 할 때는 표보다 그래프를 더 많이 사용하는 것이 좋습니다. 예를 들어, 특정 주식의 1년간 주가 추이를 큰 표로 표시할 수 있지만 이 모든 정보를 담는 데는 차트가 훨씬 더 효과적일 수 있습니다.

 

 

2. 어떤 정보를 표시할 것인가요?

그리드에 표시하는 정보와 사용자에게 표시되는 순서가 중요합니다. 따라서 어떤 값을 어떤 순서로 표시할지 결정하는 것은 결국 중요한 역할을 합니다. 이는 사용자가 작업을 완료하는 데 필요한 시간과 노력의 양에 영향을 미칩니다. 데이터 포인트의 선택은 사용자 페르소나와 시나리오, 이전 애플리케이션 버전 및 로직의 상당 부분을 기반으로 이루어져야 합니다. 

테이블이 비어 있어 보이더라도 바늘 열을 추가하는 것은 의미가 없으며 중요한 값에서 사용자의 집중을 분산시킬 뿐입니다. 하지만 대부분의 시나리오에서 가장 오래되고 가장 작은 모니터에 23개의 열을 넣으라는 이해관계자의 요청이 있는 경우는 거의 없습니다. 하지만 좋은 것도 지나치면 나쁘다고 생각하세요. 열을 많이 추가할수록 사용자가 스캔하기가 더 어려워집니다. 엄격하게 선택하고 불필요한 것은 모두 제거하는 것이 좋습니다. 사용자가 목록 항목에 관심이 없는 한 보조 정보는 숨겨두세요.

 

 

3. 가장 중요한 것에 집중하기

주요 열을 왼쪽에서 오른쪽으로 배치하세요(디자인을 만드는 지역에 따라 반대일 수도 있습니다) 이는 우리가 정보를 읽는 방식에 기반한 것입니다. 왼쪽에 있는 열은 가장 많은 주의를 끌게 되며 관심이 있는 경우에만 다른 열을 확인하게 됩니다.

 

 

4. 텍스트 정렬

정렬은 표 가독성, 머릿속으로 얼마나 쉽게 계산할 수 있는지, 서로 다른 행을 비교하는 데 큰 역할을 합니다.

 

간단한 세 가지 규칙이 있습니다.

• 오른쪽 정렬된 숫자 열
• 왼쪽 정렬 텍스트 열
• 열 콘텐츠에 맞춰 정렬된 열 이름

이러한 지침을 따르면 그리드의 텍스트가 매력적이고 읽기 쉽게 보이도록 만드는 데 도움이 됩니다. 텍스트가 사용자에게 전달하는 내용이 중요합니다.

 

 

5. 크기 중요성

표의 형태는 사용자의 필요와 능력에 따라 달라져야 합니다. 더 많은 정보를 표시하는 표일수록 화면 접힌 부분 위에 더 많은 행을 표시하기 위해 글꼴과 행 높이가 작아지고 있습니다. 반면에 장바구니의 품목 목록과 같이 행 수가 많지 않은 경우에는 너무 작게 만들지 않아야 합니다.

아주 작은 크기가 가장 좋은 방법입니다. 항목 목록이 방대한 경우 스크롤이나 상호 작용 없이 표시할 수 있는 항목 수가 매우 중요합니다. 행 높이를 줄이면 접힌 부분 위에 표시되는 항목 수가 두 배로 늘어나는 경우가 있는데 이는 큰 문제입니다. 일반적으로 행 높이는 깔끔해 보이고 정보가 한데 섞이지 않을 정도로 얇게 만드는 것이 좋습니다.

하지만 화면 공간을 최대한 많이 채우라고 권하는 것이 아니라는 점을 오해하지 마세요. 공백을 두 배로 늘리세요. 데이터 테이블에 많은 정보가 있더라도 적절한 여백이 있으면 디자인이 무겁지 않게 보일 것입니다.

 

 

6. 타이포그래피

디자인에서 타이포그래피는 작품을 훌륭하게 만들거나 평범하게 만들거나 심지어 끔찍하게 만드는 핵심 요소 중 하나입니다. 테이블 디자인도 다르지 않습니다. 다음은 몇 가지 팁입니다.

 

• 읽기 어려운 대문자는 사용하지 마세요.
• 세리프 글꼴은 추가적인 시각적 노이즈를 유발하므로 사용하지 마세요.
• 굵게 및 이탤릭체 사용 피하기
• 좋은 글꼴만 사용하세요

 

7. 불필요한 것은 모두 제거하세요

이 글을 읽기 전에 깔끔한 디자인이라는 용어를 자주 들어보셨을 겁니다. 전달하고 싶은 의미는 '적을수록 좋다'는 것입니다. 사용자 인터페이스는 가능한 한 눈에 띄지 않아야 합니다. 특히 대량의 데이터를 다룰 때는 이미 제품을 다루는 사람에게 많은 부담을 주고 있으므로 시각적 방해 요소를 추가할 필요가 없습니다. 콘텐츠를 감싸는 것이 아니라 콘텐츠를 빛나게 하는 것이 목표입니다.

 

• 불필요한 구분 기호 제거
• 행이 제거된 배경 제거
• 그림자, 3D 효과, 글로우 등을 제거합니다.

 

8. 중복 방지

UI 디자인에서 불필요한 중복을 자주 봅니다. 아무런 가치도 없는 항목을 추가로 광고하기 때문에 가독성에 큰 영향을 미칩니다.

 

 

9. 디자인 패턴과 일반적인 상호 작용

UX 디자이너는 패턴을 추구하는 사용자의 성향을 쉽게 활용할 수 있습니다. 핵심은 사용성 문제에 대한 재사용 가능한 솔루션인 디자인 패턴에 있습니다. 또한 시간을 절약할 수 있습니다. 패턴은 새로운 것을 발명할 시간이 없을 때 사람들이 가장 먼저 찾는 해결책입니다. 그리고 많은 “그냥 되는” 솔루션과 마찬가지로 패턴도 오래 지속되는 경향이 있습니다.

 

 

 

 

 

출처:

https://taras-bakusevych.medium.com/data-tables-design-3c705b106a64