데이터 테이블 UI 시스템

데이터 테이블 UI 시스템은(는) 무엇을 하나요?

목적

데이터 테이블 UI 시스템 스킬은 구조화된 다중 속성 데이터를 구성하고 표현하기 위한 방법론을 제공합니다. 정렬, 간격, 계층 및 테이블 형식 내 인터랙티브 요소에 대한 명확한 규칙을 수립하여 대규모 데이터 세트를 쉽게 스캔하고, 비교하고, 조치를 취할 수 있도록 합니다.

사용 사례

• 인벤토리, 사용자 관리 또는 청구를 위한 SaaS 대시보드 디자인
• 전자상거래 또는 마케팅 사이트를 위한 제품 비교 매트릭스 생성
• 기술 애플리케이션을 위한 로그 뷰어 또는 감사 추적 구현
• 재무 데이터 또는 성과 지표를 구조화된 보기로 구성
• "데이터 테이블" 또는 "데이터 그리드"에 대한 컴포넌트 라이브러리 표준 수립

사용하지 말아야 할 경우

• 단순 키/값 쌍: 열이 두 개뿐인 경우(예: 레이블: 값) 설명 목록(<dl>) 또는 단순 목록을 사용하세요.
• 내러티브 콘텐츠: 긴 분량의 텍스트나 이야기는 표준 타이포그래피와 섹션 구조를 사용해야 하며, 테이블을 사용하지 마세요.
• 레이아웃 그리드: 페이지 레이아웃에는 responsive-grid-system을 사용하세요. 테이블은 데이터 전용입니다.
• 저데이터 카드: 데이터가 시각적 요소가 많고 속성이 적은 경우 card-ui-system을 사용하여 더 나은 참여를 유도하세요.

입력

1. 데이터 스키마: 표시할 데이터 유형(문자열, 숫자, 날짜, 부울, 액션)
2. 열 우선순위: 식별에 필수적인 속성과 부가적인 세부 정보의 구분
3. 사용자 작업: 사용자가 특정 행을 찾아야 하는지, 여러 행에 걸쳐 값을 비교해야 하는지, 또는 대량 작업을 수행해야 하는지 여부
4. 볼륨 예상: 일반적인 보기에서 예상되는 행과 열의 수

출력

1. 테이블 구조 명세: 정의된 영역(헤더, 행, 셀, 푸터) 및 내부 간격
2. 정렬 매트릭스: 데이터 유형에 따른 가로 정렬 규칙
3. 밀도 변형: 간결형, 표준형, 여유형 행 높이에 대한 정의
4. 인터랙션 맵: 정렬, 필터링, 행 선택 및 인라인 액션에 대한 동작

워크플로우

1. 열 유형 및 정렬 정의

스캔 가능성을 보장하기 위해 "정렬 규칙 원칙"을 적용하세요.

• 텍스트/기본값: 왼쪽 정렬(시선이 단어의 시작 부분을 따라가도록 도와줍니다).
• 숫자/지표: 오른쪽 정렬(소수점을 정렬하고 빠른 크기 비교를 가능하게 합니다).
• 날짜/상태 레이블: 가운데 정렬 또는 왼쪽 정렬(열 너비에 따라 다름).
• 액션: 오른쪽 정렬(보통 마지막 열).

2. 시각적 계층 설정(헤더)

테이블 헤더는 데이터와 명확하게 구분되어야 합니다.

• 스타일: <th> 요소에 대해 다른 배경색, 굵은 체 또는 대문자 처리를 사용하세요.
• 고정: 긴 테이블의 경우 스크롤 중에도 사용자가 컨텍스트를 잃지 않도록 고정 헤더를 사용하세요.

3. 행 밀도와 리듬 설정

사용 사례에 따라 밀도 수준을 선택하세요.

• 간결형: 높은 데이터 밀도(예: 32px 높이). 파워 유저 및 대시보드에 가장 적합합니다.
• 표준형: 균형 잡힌 밀도(예: 48px 높이). 일반 용도에 가장 적합합니다.
• 여유형: 낮은 밀도(예: 64px 높이). 마케팅 또는 단순 목록에 가장 적합합니다. 얼룩말 줄무늬 또는 미묘한 테두리를 사용하여 행을 구분하고 "줄 건너뛰기"를 줄이세요.

4. 인터랙티브 데이터 설계

사용자가 데이터를 조작하는 방식을 정의하세요.

• 정렬: 정렬을 지원하는 헤더에 표시(갈매기 모양)를 추가하세요.
• 행 상태: 행에 대한 마우스 오버, 선택 및 포커스 상태를 정의하세요.
• 대량 액션: 필요한 경우 맨 왼쪽에 체크박스 열을 추가하세요.

5. 콘텐츠 변동 계획

데이터 길이의 예외 상황을 처리하세요.

• 줄임 처리: 식별에 중요하지 않은 긴 텍스트는 줄임표를 사용하세요.
• 줄 바꿈: 중요한 설명 텍스트는 줄 바꿈을 허용하세요.
• 고정 너비: 안정적인 열(예: 상태, 날짜)에는 고정 너비를 할당하고 기본 식별자(예: 이름)에는 유동 너비를 할당하세요.

결정 규칙

• 스캔 가능성 규칙: 첫 번째 열은 항상 가장 중요한 식별자(예: 이름, ID)여야 행의 앵커 역할을 합니다.
• 숫자 정렬: 값 비교가 주요 작업인 경우 숫자에 고정폭 글꼴을 사용하여 숫자가 완벽하게 정렬되도록 하세요.
• 얼룩말 줄무늬 vs 테두리: 매우 넓은 테이블의 경우 얼룩말 줄무늬를 사용하여 시선이 가로로 추적되도록 돕고, 짧고 단순한 테이블의 경우 테두리를 사용하세요.
• 액션 배치: 마지막 열에 액션을 함께 그룹화하거나 눈에 잘 띄는 "더 보기" 메뉴를 사용하여 인터페이스를 깔끔하게 유지하세요.
• 빈 셀: 셀을 절대 비워두지 마세요. 대시(—) 또는 "N/A"를 사용하여 데이터가 누락되었음을 확인하세요(로딩 오류가 아님).

제약 조건

• 접근성: 시맨틱 <table> 태그를 사용해야 합니다. 헤더에는 scope="col"이 있어야 합니다. 캡션은 컨텍스트를 위해 사용해야 합니다. 고정 헤더는 아래로 스크롤된 셀이나 행 액션의 포커스 표시기를 가려서는 안 됩니다(WCAG 2.2 SC 2.4.11). 인라인 액션 버튼/링크는 최소 24x24px 대상 크기를 충족해야 합니다(SC 2.5.8).
• 반응형: 뷰포트가 작아질 때 테이블은 responsive-data-tables의 패턴(스크롤, 스택 또는 토글)을 따라야 합니다.
• 대비: 헤더 텍스트와 상태 표시기는 WCAG AA(4.5:1)를 충족해야 합니다.

일반적인 실패 패턴

• 잘못 정렬된 숫자: 숫자를 왼쪽 정렬하면 한눈에 크기를 비교할 수 없습니다.
• 텍스트의 벽: 얼룩말 줄무늬나 명확한 헤더 구분 없이 고밀도 행을 사용하면 "눈의 피로"가 발생합니다.
• 보이지 않는 헤더: 헤더가 데이터와 너무 비슷해 보여 열이 무엇을 나타내는지 알기 어렵습니다.
• 액션 인식 부족: 셀 내부의 버튼이나 링크가 너무 작아 탭하기 어렵거나 인터랙티브해 보이지 않습니다.
• 빈 상태 없음: "결과를 찾을 수 없음" 메시지 없이 빈 테이블을 표시합니다.

검증 기준

• 열 정렬이 데이터 유형 규칙을 따릅니다(텍스트=왼쪽, 숫자=오른쪽).
• 테이블 헤더가 행 데이터와 시각적으로 구분됩니다.
• 기본 식별자가 첫 번째 열에 고정됩니다.
• 시맨틱 HTML(<table>, <th>, scope)이 구조에 사용됩니다.
• 빈 셀은 비어 있는 대신 자리 표시자(예: —)를 사용합니다.
• 인터랙티브 상태(마우스 오버/선택)가 명확하게 정의됩니다.
• 디자인이 긴 콘텐츠를 적절하게 처리합니다(줄임 또는 줄 바꿈).
• 고정 헤더가 행이나 셀 액션의 포커스 표시기를 가리지 않습니다(WCAG 2.2 SC 2.4.11).
• 행 액션이 최소 24x24px 대상 크기를 충족합니다(WCAG 2.2 SC 2.5.8).