속성 및 특성 시스템

속성 및 특성 시스템은(는) 무엇을 하나요?

목적

속성 및 특성 시스템은 단일 엔티티(예: 제품 사양, 부동산 특징, 사용자 세부정보)에 대한 "Key: Value" 메타데이터 쌍을 설계하고 구조화하는 방법론을 제공합니다. data-table-ui-system이 다중 항목 비교를 처리하는 반면, 이 시스템은 단일 객체에 속하는 속성의 내부 계층 구조와 공간적 구성에 중점을 둡니다. 중요 메타데이터가 스캔 가능하고, 서사 텍스트와 시각적으로 구별되며, 다양한 뷰포트 너비에서 구조적 무결성을 유지하도록 보장합니다.

사용 사례

• 제품 사양: 제품 상세 페이지(PDP)에 치수, 재료, 기술 세부 정보 표시.
• 부동산 목록: 부동산 특징(침실, 욕실, 평방피트, 건축 연도) 구성.
• 사용자 프로필: 계정 메타데이터(가입일, 역할, 구독 상태) 표시.
• 트랜잭션/감사 로그: 단일 이벤트나 주문의 특정 속성 표시.
• 프로젝트 개요: 헤더나 사이드바에 프로젝트 메타데이터 요약.

사용하지 말아야 할 경우

• 다중 항목 비교: 사용자가 여러 행의 속성을 비교해야 하는 경우; data-table-ui-system 사용.
• 서사 콘텐츠: 장문의 설명이나 이야기의 경우; article-layout-system 사용.
• 전역 탐색: 사이트 전체 구조의 경우; site-navigation-system 사용.
• 대화형 양식: 주요 목표가 데이터 입력인 경우; form-design-system 사용.

입력값

1. 속성 인벤토리: 표시할 키(레이블)와 값(데이터)의 목록.
2. 데이터 유형 매트릭스: 값이 문자열, 숫자, 부울, 아이콘 또는 링크인지 식별.
3. 우선순위 순위: "기본"(높은 가시성) 속성과 "보조"(세부/숨김) 속성 구분.
4. 레이아웃 컨텍스트: 이 속성들이 사이드바, 메인 콘텐츠 열, 또는 모달 창에 위치할지 결정.

출력값

1. 목록 구조 명세: 레이블(키)과 값 관계 정의(크기, 두께, 색상).
2. 정렬 매트릭스: 컨테이너 너비에 따른 가로 대 세로 쌓기 규칙.
3. 그룹화 전략: 대규모 속성 집합을 하위 섹션으로 분류하는 방법론.
4. 의미론적 청사진: 속성을 HTML 설명 목록(<dl>) 구조에 매핑.

워크플로우

1. 속성 분류 및 그룹화

5-7개 이상의 속성을 가진 엔티티의 경우 논리적 범주(예: "치수", "성능", "규정 준수")로 그룹화합니다. 이는 인지 부하를 줄이고 사용자가 관련 세부 정보로 바로 이동할 수 있게 합니다.

2. 레이아웃 패턴 선택

사용 가능한 가로 공간과 속성 밀도에 따라 패턴을 선택합니다.

• 가로(나란히): 레이블은 왼쪽, 값은 오른쪽. 넓은 컨테이너와 짧은 레이블에 가장 적합.
• 세로(쌓기): 레이블은 위쪽, 값은 아래쪽. 좁은 컨테이너(사이드바, 모바일)와 긴 값에 가장 적합.
• 그리드(다중 열): 속성을 2열 또는 3열 그리드로 배치. 고밀도 "빠른 확인" 통계에 가장 적합.

3. 시각적 계층 설정

"키"와 "값"을 구분합니다.

• 레이블(키): 설명자임을 나타내기 위해 음영 처리된 색상, 작은 글꼴 크기, 또는 대문자 스타일 사용.
• 값(데이터): 실제 데이터가 주요 초점이 되도록 더 높은 대비 색상, 굵은 두께, 또는 더 큰 크기 사용.
• 분리: 미세한 구분선이나 일관된 수직 리듬(--space-s에서 --space-m)으로 쌍을 분리.

4. 정렬 및 스캔 가능성 정의

• 가로 정렬: 나란히 레이아웃의 경우 레이블을 왼쪽 정렬. 레이블 길이가 크게 다른 경우, 고정 너비 레이블 열을 고려하여 값에 대한 깔끔한 수직 "축"을 생성.
• 양끝 정렬: 넓은 컨테이너에서 "극단적 양끝 정렬"(레이블은 맨 왼쪽, 값은 맨 오른쪽)을 피하십시오. 눈이 너무 멀리 이동하게 만듭니다. 서로 가깝게 유지하십시오.

5. 반응형 변환 계획

속성 목록은 UI의 "변형자"입니다.

• 쌓기 전환: 텍스트 겹침이나 극단적인 줄바꿈을 방지하기 위해 가로(데스크탑)에서 세로(모바일)로 전환.
• 그리드 축소: 다중 열 그리드는 작은 화면에서 1열 또는 2열로 축소되어야 합니다.

의사 결정 규칙

• "축" 규칙: 가로 목록에서 값은 수직 정렬선(축)을 공유하여 눈이 점프하지 않고 데이터를 스캔할 수 있어야 합니다.
• 빈 값: 값을 비워두지 마십시오. "—" 또는 "없음"을 사용하여 속성이 시스템 오류가 아닌 의도적으로 비어 있음을 확인하십시오.
• 아이콘 사용: 아이콘이 즉각적인 의미 구분을 제공하는 경우에만 사용하십시오(예: 치수에 "자" 아이콘). 명확성 없이 시각적 노이즈를 추가하는 경우 아이콘을 피하십시오.
• 밀도 논리: 일반 프로필에는 "표준" 밀도(16px 간격)를 사용하고, 기술 사양 및 대시보드에는 "조밀" 밀도(8px 간격)를 사용하십시오.

제약 조건

• 접근성: 의미적 정확성을 위해 HTML <dl>(설명 목록) 요소를 사용하십시오(<dt>는 레이블, <dd>는 값). 이는 스크린 리더가 쌍 간의 관계를 전달하도록 보장합니다.
• 대비: 레이블과 값 모두 WCAG AA 대비 비율(4.5:1)을 충족해야 합니다. 레이블이 "음영 처리"되어 있어도 읽을 수 있어야 합니다.
• 반응형: 목록이 뷰포트를 넘치지 않아야 합니다. 텍스트 줄바꿈은 목록의 "축"을 깨지 않으면서 우아하게 처리되어야 합니다.

일반적인 실패 패턴

• "값/레이블 혼동": 레이블과 값의 두께와 색상을 동일하게 만들어 목록을 스캔할 수 없게 만듦.
• 극단적 양끝 정렬: 넓은 화면에서 값을 오른쪽 끝으로 밀어 레이블과 분리시킴.
• 테이블 남용: 단일 객체 속성 목록에 <table>을 사용하여 불필요한 마크업 오버헤드를 추가하고 반응형 스타일링을 어렵게 만듦.
• 일관성 없는 정렬: 명확한 논리적 구분 없이 동일한 목록에 가로 및 세로 쌓기를 혼합.
• 빈 상태 누락: 속성을 비워두어 사용자가 데이터가 로딩 중인지 단순히 누락된 것인지 혼란스럽게 만듦.

검증 기준

• 레이블과 값이 두께, 크기 또는 색상을 통해 시각적으로 구분됩니다.
• 속성이 <dl>, <dt>, <dd>를 사용하여 의미적으로 마크업됩니다.
• 모바일 뷰포트에서 목록이 가로 쌓기에서 세로 쌓기로 전환됩니다.
• 대규모 속성 집합이 논리적 하위 범주로 그룹화됩니다.
• 정렬이 데이터 값에 대한 명확한 수직 "축"을 생성합니다.
• 누락된 속성에 대해 빈 상태(예: "—")가 정의됩니다.
• 모든 텍스트의 대비 비율이 WCAG AA 표준을 충족합니다.