데이터 표시
데이터 표시 (Data Display)
데이터를 적절한 방식으로 표시하면 사용자가 데이터를 빠르게 찾고 탐색하며, 더 효율적으로 협업할 수 있어요. 디자인할 때 주의할 점이 몇 가지 있어요.
출처: 문서
본문
적절한 데이터 표시 방식은 사용자가 데이터를 빠르게 찾고 탐색하며, 더 효율적으로 함께 작업할 수 있게 해요. 디자인할 때 주의할 점은 다음과 같아요:
- 정보의 중요도, 작업 빈도, 연관 정도에 따라 표시 순서를 정리해요.
- 극단적인 상황에서의 안내에 주의해요. 예를 들어 데이터 정보가 너무 길 때, 콘텐츠가 비어 있는 초기 상태 같은 경우예요.
테이블 (Table)
테이블은 데이터를 표현하는 가장 명확하고 효율적인 형태 중 하나로 인정받아요. 정렬, 검색, 필터링, 페이징 같은 다른 인터페이스 요소와 함께 자주 사용되며, 정보 수집과 표시, 데이터 분석과 귀납, 구조화된 데이터의 조작에 적합해요. 구조가 단순하고 분리와 귀납이 명확해서 정보 비교가 쉬워지고, 사용자의 수용 효율과 정보 이해도가 크게 향상돼요.
참고:
- 테이블 안의 시간, 상태, 작업 바는 여러 줄을 차지하지 않고 단어가 온전하게 유지돼야 해요.
- 테이블 셀이 비어 있으면
-를 사용해 데이터가 없음을 표시해요.
접기 (Collapse)
Collapse는 정보를 접고 정리함으로써 사용자가 정보를 점진적으로 얻도록 안내해서, 인터페이스를 깔끔하게 유지하고 공간을 효과적으로 활용해요.
이 컴포넌트들은 내비게이션에서 많이 사용되며, 길고 불규칙한 콘텐츠 관리에도 적합해요.
참고: 접힌 콘텐츠들이 서로 연관성이 적다면, 공간을 더 절약하는 "아코디언(accordion)" 모드를 사용할 수 있어요 — "아코디언"은 단 하나의 콘텐츠 영역만 펼칠 수 있게 하는 특수한 collapse예요.
카드 (Card)
카드는 정보를 담는 컨테이너예요. 담을 수 있는 콘텐츠 유형에 큰 제한은 없어요. 한 유형의 정보를 집중시키고, 블록감을 높이며, 더 쉽게 조작할 수 있게 해요. 카드는 보통 그리드나 매트릭스로 배치되어 서로의 계층 관계를 전달해요. 카드는 비교적 가볍고 개인화된 정보 블록 표시에 적합해요.
참고:
- 카드는 보통 그리드에 따라 배치하며, 최대 4열을 권장해요.
- 제한된 카드 공간에서는 정보 사이의 간격에 주의해야 해요. 정보가 너무 길면 잘라낼 수 있어요. 예를 들어 "Ant Design is suitable for the middle station..."처럼요.
캐러셀 (Carousel)
같은 계층의 콘텐츠를 병렬로 표시하는 방식으로, 주로 사진이나 카드 캐러셀에 사용되며, 사용자가 조작하거나 시스템이 자동으로 회전시킬 수 있어요. 공식 웹사이트 홈페이지나 제품 소개 페이지 같은 표시 블록에 적합해요.
참고:
- 캐러셀의 개수는 너무 많지 않아야 해요. 사용자 지루함을 피하려면 3~5개 사이로 조절하는 게 좋아요.
- 캐러셀의 개수와 방향을 사용자가 명확히 이해하도록 디자인에 힌트를 제공하는 걸 권장해요.
트리 (Tree)
"트리"는 단계별 아웃라인 형태로 정보의 계층 관계를 표시해요. 효율적이고 시각적 가시성이 뛰어나서, 전체 정보 구조가 한눈에 들어와요.
사용자는 여러 트리 레벨의 콘텐츠를 동시에 보고 처리할 수 있어요. 트리는 폴더, 조직 구조, 분류 체계, 국가 지역처럼 계층을 통해 조직할 필요가 있는 모든 정보 시나리오에 적용할 수 있어요.
타임라인 (Timeline)
타임라인은 시간 흐름의 정보를 세로로 표시하는 데 사용돼요. 일반적으로 플래시백으로 시간의 사건을 기록해서, 사용자가 지금 무엇을 하고 있고 과거에 무엇을 했는지 추적해요.
각 정보는 시간 기반이며, 콘텐츠는 주제, 유형, 관련 추가 콘텐츠 등을 담을 수 있어요. 사건, 작업, 캘린더 주석 등 관련 데이터 표시에 적합해요.