비교 및 매트릭스 시스템 (Comparison and Matrix System)

비교 및 매트릭스 시스템

목적

비교 및 매트릭스 시스템은 상세한 발견 및 평가 인터페이스를 설계하기 위한 방법론을 제공합니다. pricing-table-ui-system은 상위 수준의 요금제 계층을 처리하고 data-table-ui-system은 대규모 데이터 세트를 관리하는 반면, 이 시스템은 속성 밀도가 높은 소수 항목(보통 2~5개)의 비교에 중점을 둡니다. 이를 통해 사용자는 수십 개의 차원에 걸쳐 복잡한 제품이나 서비스를 평가할 때 위치를 잃거나 데이터에 압도되거나 반응형 레이아웃에 어려움을 겪지 않도록 합니다.

사용 사례

• 전자상거래 제품 비교: 전자제품, 가전제품, 차량의 기술 사양 비교.
• SaaS 기능 매트릭스: 상위 수준의 가격 카드를 넘어선 플랫폼 기능의 세부 분석.
• 서비스 비교: 다양한 보험 플랜, 여행 패키지 또는 교육 과정 평가.
• 내부 도구: 다른 시스템 버전 또는 구성을 나란히 감사.

사용하지 말아야 할 경우

• 상위 수준 가격: 간단한 3계층 구독 요약에는 pricing-table-ui-system을 사용하세요.
• 대규모 데이터 세트 탐색: 사용자가 수백 개의 항목을 정렬하고 필터링해야 하는 경우 data-table-ui-system을 사용하세요.
• 단일 항목 세부 정보: 개별 제품 페이지에는 article-layout-system 또는 card-ui-system을 사용하세요.
• 선형 진행: 단계별 흐름에는 step-progress-system을 사용하세요.

입력값

1. 비교 세트: 평가를 위해 선택된 2~5개의 항목.
2. 속성 분류 체계: 비교할 모든 기능, 사양 및 데이터 포인트의 분류된 목록.
3. 데이터 유형: 속성을 UI 유형(예: 부울/체크마크, 숫자, 평점, 텍스트 설명)에 매핑.
4. 선택 컨텍스트: 이것이 영구 페이지인가, 아니면 제품 목록 페이지에서 트리거된 임시 오버레이인가?

출력값

1. 매트릭스 구조 사양: 행 헤더(속성), 열 헤더(항목) 및 데이터 셀에 대한 정의.
2. 분류 프레임워크: 속성을 접을 수 있는 헤더가 있는 논리적 섹션으로 그룹화하는 규칙.
3. 고정 탐색 계획: 수직 및 수평 스크롤 중에 컨텍스트를 유지하기 위한 동작 규칙.
4. 반응형 전환 맵: 모바일에 매트릭스를 적용하기 위한 전략(예: 항목 교체 vs. 수직 쌓기).

워크플로우

1. 그리드 프레임워크 구조화

매트릭스의 기본 축을 정의합니다:

• 열: 비교 중인 항목을 나타냅니다.
• 행: 속성 또는 기능을 나타냅니다.
• 선행 열: 왼쪽의 첫 번째 열에는 속성 레이블/헤더가 포함됩니다.

2. 속성 분류 및 그룹화

"비교 피로"를 방지하기 위해 행을 논리적 클러스터로 구성합니다:

• 섹션: 관련 속성을 그룹화합니다(예: "성능", "연결성", "보증").
• 접기 가능: 사용자가 특정 기준에 집중할 수 있도록 섹션을 접거나 펼칠 수 있습니다.
• 시각적 구분: 미묘한 배경 변화나 테두리를 사용하여 섹션을 구분합니다.

3. 데이터 시각화 표준화

다양한 데이터 유형에 일관된 시각적 언어를 적용합니다:

• 부울: 포함에는 고대비 체크마크(✓)를, 제외에는 대시(—) 또는 빈 상태를 사용합니다.
• 평점: 일관된 아이콘 척도(예: 별 5개)를 사용합니다.
• 미묘한 텍스트: 설명에는 작고 읽기 쉬운 글꼴 크기를 사용하고 셀 내 줄 길이를 관리합니다.
• 하이라이트: 한 항목이 다른 항목보다 확실히 우수한 셀을 시각적으로 구분합니다(중립성을 유지하기 위해 주의해서 사용).

4. 고정 컨텍스트 구현 (길 찾기)

사용자가 보고 있는 것을 절대 잃지 않도록 합니다:

• 고정 열 헤더: 사용자가 행을 아래로 스크롤할 때 항목 이름과 사진을 뷰포트 상단에 계속 표시합니다.
• 고정 행 헤더: 데스크톱의 넓은 매트릭스에서 사용자가 수평으로 스크롤할 때 속성 레이블을 왼쪽에 계속 표시합니다.

5. 모바일 적응 계획

매트릭스는 본질적으로 수평적입니다. 수직 화면에 맞게 조정합니다:

• "선택기" 패턴: 속성 목록과 1~2개의 항목을 한 번에 표시하고 드롭다운 또는 스와이프 상호 작용을 사용하여 표시할 항목을 전환합니다.
• "수직 카드" 패턴: 매트릭스를 카드 시퀀스로 변환하고 각 카드에 대해 속성 레이블을 반복합니다(매우 간단한 비교에만 권장).

의사 결정 규칙

• 다섯 개 항목 규칙: 수평적 압박을 방지하기 위해 데스크톱에서 나란히 매트릭스의 최대 항목 수를 5개로 제한합니다.
• 속성 관련성: 세트 내 최소 두 항목 간에 차이가 있는 속성만 포함합니다. 모든 항목이 동일한 값을 가지면 해당 정보를 공유 "전역 기능" 섹션으로 이동하는 것을 고려하세요.
• 헤더 강조: 항목 헤더(열 1, 2 등)에는 제품의 작은 이미지를 포함하여 즉각적인 시각적 인식을 제공해야 합니다.
• 행 호버 상태: 열 전체를 가로질러 눈이 추적할 수 있도록 전체 행에 대해 뚜렷한 호버 배경을 사용합니다.

제약 사항

• 접근성: 행 헤더는 scope="row" 및 scope="col"을 사용하여 셀과 적절히 연결되어야 합니다. 체크마크와 아이콘에 대해 높은 대비를 보장합니다. 고정 열/행 헤더는 그 아래 셀 또는 컨트롤의 키보드 포커스 표시기를 가려서는 안 됩니다(WCAG 2.2 SC 2.4.11). 모바일의 모든 항목 전환기 또는 드롭다운 컨트롤은 최소 24x24px 대상 크기를 충족해야 합니다(SC 2.5.8).
• 반응성: 수평 스크롤은 의도적이어야 하며(예: 컨테이너 내에서) 전역 페이지 레이아웃을 깨뜨리지 않아야 합니다.
• 시각적 무게: "선행 열"(속성)은 데이터 열과 구분하기 위해 약간 다른 시각적 처리를 해야 합니다(예: 밝은 회색 배경 또는 굵은 텍스트).

일반적인 실패 패턴

• "헤더 분실" 문제: 긴 매트릭스를 아래로 스크롤하면서 어떤 항목이 무엇인지 잊어버림.
• 속성 과부하: 분류 없이 50개 이상의 행을 표시하여 특정 정보를 찾을 수 없게 만듦.
• 모바일 압축: 4개의 열을 모바일 화면에 억지로 넣어 텍스트를 읽을 수 없게 만듦.
• 모호한 기호: "예/아니오"에 사용자가 즉시 이해하지 못하는 사용자 지정 아이콘을 사용.
• 일관성 없는 정렬: 동일한 열 내에서 중앙 정렬 아이콘과 왼쪽 정렬 텍스트를 혼합.

검증 기준

• 항목 헤더는 수직 스크롤 중에 뷰포트 상단에 고정된 상태를 유지합니다.
• 속성은 논리적이고 접을 수 있는 섹션으로 그룹화됩니다.
• 데이터 유형(부울, 평점, 텍스트)은 일관된 시각적 언어를 사용합니다.
• "선행 열"은 데이터 열과 시각적으로 구분됩니다.
• 모바일 보기에는 항목 비교를 위한 명확한 메커니즘(예: 항목 전환)이 제공됩니다.
• 수평 추적을 지원하기 위해 행 호버 상태가 구현됩니다.
• 모든 아이콘과 텍스트는 WCAG AA(4.5:1) 대비 요구 사항을 충족합니다.
• 고정 헤더는 셀 또는 컨트롤의 포커스 표시기를 가리지 않습니다(WCAG 2.2 SC 2.4.11).
• 모바일 항목 전환기 컨트롤은 최소 24x24px 대상 크기를 충족합니다(WCAG 2.2 SC 2.5.8).