카드 UI 시스템

카드 UI 시스템은(는) 무엇을 하나요?

목적

카드 UI 시스템은 관련 정보와 액션을 그룹화하는 모듈식 빌딩 블록인 카드를 설계하고 구조화하기 위한 방법론을 제공합니다. 카드는 검색 중심 인터페이스의 기본 구성 요소로, 사용자가 통합된 그리드나 목록 내에서 여러 개별 항목(제품, 기사, 프로필)을 스캔하고 비교할 수 있게 합니다. 체계적인 카드 접근 방식은 콘텐츠를 스캔 가능하게 하고, 시각적으로 일관되게 하며, 다양한 레이아웃 컨텍스트(그리드, 캐러셀, 스택)에서 우아하게 적응하면서 접근성과 명확한 의도를 유지하도록 보장합니다.

사용 사례

• 전자상거래 목록 페이지(PLP)를 위한 제품 그리드 설계
• 콘텐츠 허브를 위한 아티클 또는 블로그 게시물 미리보기 생성
• 랜딩 페이지의 '기능' 또는 '서비스' 섹션 만들기
• 대시보드 위젯, 기능 하이라이트 또는 데이터 요약 구성
• 페이지 하단의 '관련 콘텐츠' 섹션 구현
• 검색 또는 필터 보기를 위한 '결과' 컴포넌트 정의

사용하지 말아야 할 경우

• 밀집형 데이터 테이블: 사용자가 여러 행의 세부 데이터에서 특정 속성을 동시에 비교해야 하는 경우; 대신 responsive-data-tables를 사용하세요(단, 카드가 반응형 대체재가 될 수는 있음).
• 단일 내러티브 콘텐츠/단순 텍스트 흐름: 콘텐츠가 엄격한 선형 스토리나 표준 단락을 따르는 경우, 카드 래퍼가 불필요한 시각적 노이즈를 추가하거나 읽기 리듬을 방해할 수 있습니다.
• 미니멀리즘 액션 전용 UI: 단일 필드 검색창이나 간단한 로그인 양식과 같은 경우, 카드 래퍼가 불필요한 시각적 노이즈를 추가합니다.

입력

1. 콘텐츠 해부학: 필요한 요소 목록(예: 이미지, 제목, 카테고리, 가격, 설명, CTA).
2. 상호작용 의도: 전체 카드가 클릭 가능한가요, 아니면 특정 액션 타겟이 있나요?
3. 부모 컨텍스트: 카드가 어디에 위치하나요? (예: 3열 그리드, 사이드바, 가로 스크롤러?)
4. 콘텐츠 변동: 제목과 설명에 예상되는 최소 및 최대 텍스트 양은 얼마인가요?
5. 기존 시스템: 상위 디자인 시스템의 유체 간격, 타이포그래피 스케일 및 색상 팔레트

출력

1. 카드 해부학 명세: 정의된 영역(Header, Media, Body, Footer) 및 내부 간격
2. 카드 청사진: 카드 내부 레이아웃 및 레이어의 구조적 정의
3. 반응형 변형: 카드가 적응하는 방식에 대한 규칙(예: 모바일에서 세로에서 가로로 전환)
4. 상호작용 명세: 정의된 상태(Hover, Focus, Active) 및 클릭 가능 영역 정의
5. 접근성 맵: 제목 계층 구조 및 키보드 상호작용 패턴에 대한 지침

워크플로우

1. '세 가지 포인트 규칙' 적용 및 해부학 정의

모든 카드는 스캔 가능성을 보장하기 위해 세 가지 명확한 계층 구조 포인트를 가져야 합니다:

1. 앵커(시각적): 즉시 인식할 수 있는 고품질 이미지 또는 아이콘. 이미지의 종횡비를 정의합니다(예: 16:9, 1:1).
2. 컨텍스트(콘텐츠): 제목 및 핵심 메타데이터(예: 가격, 날짜, 카테고리).
3. 타겟(액션): 명확한 기본 액션(예: '장바구니에 담기', '더 읽기').

전체 내부 계층 구조를 매핑합니다: Header(태그/날짜와 같은 메타 정보), Media Area, Content/Body(제목 + 설명), Footer/Actions(CTA, 가격, 사회적 증거).

2. 내부 간격 및 내부 그리드 설정

fluid-spacing-system을 카드 내부에 적용합니다:

• 패딩: 카드 가장자리와 콘텐츠 사이의 공간(일반적으로 --space-m).
• 스태킹 간격: 내부 요소 간의 세로 공간(일반적으로 --space-xs 또는 --space-s).

카드 내에서 콘텐츠가 어떻게 분배될지 결정합니다:

• 위에서 아래로(표준): 이미지가 위쪽, 콘텐츠가 중간, 액션이 아래쪽.
• 나란히(수평): 이미지가 왼쪽, 콘텐츠와 액션이 오른쪽(모바일 목록 또는 사이드바에 가장 적합).
• 오버레이: 콘텐츠가 이미지 위에 위치(가독성을 위해 고대비 처리가 필요).

3. 시각적 계층 구조 설계 및 콘텐츠 변동 처리

visual-hierarchy-system 레버를 적용하여 콘텐츠를 구분합니다:

• 가중치: 제목을 설명보다 굵게 그리고 더 크게 만듭니다.
• 대비: 메타 텍스트(예: '10월 24일에 게시됨')에 음영 처리된 색상을 사용합니다.
• 입체감: 테두리 또는 미묘한 상자 그림자를 사용하여 카드를 배경과 구분합니다.

'최악의 경우' 콘텐츠 시나리오를 설계합니다:

• 줄임표 처리 vs 줄 바꿈: 긴 제목을 줄임표로 자를지 아니면 여러 줄로 줄 바꿈할지 결정합니다.
• 정렬: 액션 컨테이너에 Flexbox margin-top: auto를 사용하여 그리드에서 높이가 다른 카드들 간에 버튼이 완벽하게 정렬되도록 합니다.

4. 상호작용 패턴 설정

상호작용을 위한 기능적 패턴을 선택합니다:

• 큰 상자: 전체 카드가 링크입니다(스크린 리더를 위한 신중한 접근성 처리가 필요).
• 중첩 액션: 특정 버튼이나 제목만 클릭 가능합니다.
• 하이브리드: 카드 표면에 호버 효과가 있지만, 특정 액션(예: '장바구니에 담기' vs '세부 정보 보기')은 다른 작업을 수행합니다.

호버 시 미묘한 변환(예: 살짝 들림, 테두리 색상 변경)을 사용하여 상호작용 가능성을 나타냅니다.

5. 반응형 적응 정의 및 접근성 확인

카드가 다양한 뷰포트에서 어떻게 작동하는지 계획합니다:

• 세로에서 가로로: 모바일의 경우, 카드는 세로 공간을 절약하기 위해 이미지 위쪽 레이아웃에서 이미지 왼쪽 레이아웃으로 전환될 수 있습니다.

서명 전에 접근성을 확인합니다:

• 제목 수준: 카드 제목이 페이지의 문서 개요를 유지하기 위해 적절한 제목 수준(일반적으로 H3 또는 H4)을 사용하는지 확인합니다.
• 터치 타겟: 카드 내의 모든 대화형 요소는 WCAG 2.2 SC 2.5.8(최소 24x24px, 더 작은 타겟이 불가피한 경우 적절한 간격 필요)을 충족해야 하며, 공간이 허락하는 경우 44x44px를 선호합니다.
• 대체 텍스트: 모든 앵커 이미지는 설명적인 대체 텍스트를 가지거나 장식용으로 표시되어야 합니다.
• 키보드 탐색: 카드 내부의 모든 대화형 요소는 Tab을 통해 접근 가능해야 하며, 포커스 표시기가 형제 카드나 고정 헤더에 의해 잘리거나 숨겨지지 않아야 합니다(WCAG 2.2 SC 2.4.11, Focus Not Obscured).

의사 결정 규칙

• '세 가지 포인트' 규칙: 카드는 일반적으로 3개 이상의 뚜렷한 우선순위를 가져서는 안 됩니다(예: 1. 이미지, 2. 제목, 3. 가격). 너무 많은 세부 사항은 '미니 페이지'를 만드는 것이지 카드가 아닙니다.
• 종횡비 규칙: 이미지에 대해 일관된 종횡비(예: 4:3, 16:9, 1:1)를 사용하여 그리드에서 '점프'하는 레이아웃을 방지합니다.
• 근접성 점수: 제목과 설명 사이의 간격은 설명과 CTA 사이의 간격보다 작아야 합니다.
• '고아 없음' 규칙: 카드가 그리드의 일부인 경우, 그리드는 남은 공간을 우아하게 처리해야 합니다(예: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))).
• 동일 높이: 그리드에서 동일한 행의 카드는 이상적으로 동일한 높이여야 합니다(Flexbox align-items: stretch 사용).
• 기본 vs 보조 액션: 하나의 액션만 시각적으로 지배적이어야 합니다(기본 CTA). 다른 액션(예: '위시리스트에 저장')은 아이콘이나 저대비 링크여야 합니다.
• 상호작용 어포던스: 카드가 클릭 가능한 경우, 가시적인 호버 상태가 있어야 합니다.

제약 조건

• 반응형: 카드는 뷰포트 너비를 초과하거나 고정 너비를 가져서는 안 됩니다. responsive-grid-system의 열에 걸쳐 있어야 하며, 작은 화면에서는 세로로 쌓이거나 가로 레이아웃으로 전환되어야 합니다.
• 접근성: 키보드 탐색(Tab을 통해 대화형 요소 탐색)을 지원하고 텍스트에 대해 최소 4.5:1의 대비 비율을 유지해야 합니다. 전체 카드가 클릭 가능한 경우, '늘어진 링크(stretched link)' 패턴을 사용하여 스크린 리더에 중복 링크가 생성되는 것을 방지합니다.
• 성능: 지나치게 큰 이미지를 피하고, srcset을 사용하여 카드 컨테이너에 적절한 크기의 에셋을 제공합니다.
• 레이아웃: 고정된 중단점보다는 auto-fill/auto-fit 및 clamp() 기반 간격이 있는 CSS Grid를 선호하여 카드가 자연스럽게 재배치되도록 합니다. 카드의 내부 레이아웃이 뷰포트가 아닌 자체 너비에 적응해야 하는 경우(예: 동일한 카드가 전체 너비 그리드와 좁은 사이드바에 있는 경우) 컨테이너 쿼리(@container)를 사용합니다.

일반적인 실패 패턴

• '계단 / 엇갈린 버튼' 효과: 제목 길이가 다양하여 버튼이 서로 다른 높이에 배치되어 그리드가 지저분해 보입니다.
• 과도한 장식: 너무 많은 테두리, 그림자 및 그라데이션을 사용하여 콘텐츠를 읽기 어렵게 만듭니다.
• 낮은 정보 밀도: 너무 적은 콘텐츠로 카드를 너무 크게 만들어 불필요한 스크롤을 유발합니다.
• 정보 과부하: 단일 카드에 너무 많은 세부 사항을 채워 넣어 세 가지 포인트 규칙을 위반하고 사용자를 혼란스럽게 만듭니다.
• 접근 불가능/보이지 않는 클릭 타겟: 모바일 장치에서 탭하기 어려운 작은 버튼이나 링크, 또는 실제 트리거가 작은 아이콘뿐인데 카드를 클릭 가능하게 보이게 만드는 경우.
• 패딩 부족: 텍스트를 카드 가장자리나 이미지에 바로 붙여 넣는 경우.

검증 기준

• '세 가지 포인트 규칙'(앵커, 컨텍스트, 타겟)이 명확하게 보입니다.
• 내부 간격(패딩/갭)이 유체 간격 시스템의 토큰을 사용합니다.
• 타이포그래피가 사이트의 확립된 스케일 및 계층 구조를 따릅니다.
• 기본 액션(버튼)이 그리드 행의 아래쪽에 정렬됩니다.
• 이미지 종횡비가 시스템의 모든 카드에서 일관됩니다.
• 상호작용 상태(Hover/Focus)가 정의되고 접근 가능합니다.
• 그리드의 카드가 올바르게 정렬되고 다양한 콘텐츠 길이를 우아하게 처리합니다.
• 제목 수준이 페이지 내에서 논리적인 계층 구조를 따릅니다.
• 터치 타겟이 WCAG 2.2 SC 2.5.8(최소 24x24px)을 충족합니다.
• 포커스 표시기가 겹치는 카드, 이미지 또는 고정 요소에 의해 가려지지 않습니다(WCAG 2.2 SC 2.4.11).