coastdigitalgroup/coastai-skills

탭 UI 시스템

목적

탭 UI 시스템은 동일한 맥락 내에서 서로 관련된 콘텐츠 패널 사이를 사용자가 전환할 수 있도록 하는 탐색 요소인 탭을 설계하고 구조화하는 방법론을 제공합니다. 탭은 점진적 공개를 위한 핵심 패턴으로, 페이지를 다시 로드하지 않고 정보를 논리적 그룹으로 구성하여 인지 부하를 줄이는 데 도움을 줍니다. 체계적인 접근 방식은 탭이 명확한 활성 상태, 논리적 그룹화를 가지며 다양한 기기에서 원활하게 적응할 수 있도록 보장합니다.

사용 사례

• 제품 상세 페이지: 사양, 리뷰, 배송 정보, FAQ를 스캔 가능한 섹션으로 구성.
• 계정 설정: 사용자 프로필, 보안, 알림, 청구 설정을 그룹화.
• 대시보드: 여러 데이터 보기(예: "개요", "분석", "기록") 간 전환.
• 검색 결과: 결과를 유형별로 필터링(예: "전체", "이미지", "동영상", "뉴스").
• 복잡한 양식: 대규모 양식을 주제별 섹션으로 나눔(단계를 엄격한 순서대로 완료할 필요가 없는 경우).

사용하지 말아야 할 경우

• 순차적 단계: 사용자가 콘텐츠를 특정 순서로 완료해야 하는 경우 step-progress-system을 대신 사용하십시오.
• 글로벌 탐색: 탭은 페이지 내 콘텐츠를 관리하는 데 사용해야 합니다. 다른 페이지로 이동하려면 site-navigation-system을 사용하십시오.
• 정보 비교: 사용자가 두 섹션의 콘텐츠를 동시에 봐야 하는 경우 탭을 사용하지 마십시오. 아코디언이나 나란히 배치하는 레이아웃을 고려하십시오.
• 항목이 너무 적은 경우: 항목이 두 개뿐이고 콘텐츠가 짧은 경우, 둘 다 표시하거나 간단한 토글을 사용하는 것을 고려하십시오.
• 항목이 너무 많은 경우: 6-7개 이상의 탭이 있으면 인터페이스가 복잡해집니다. 사이드바 탐색 또는 드롭다운 기반 필터를 고려하십시오.

입력

1. 콘텐츠 목록: 레이블과 해당 콘텐츠 패널 목록.
2. 사용 맥락: 탭이 위치할 곳(예: 기본 콘텐츠 영역, 사이드바, 모달 내부).
3. 우선 순위: 페이지의 주요 초점인지, 부가적인 세부 사항인지.
4. 기존 시스템: 유동적 간격, 타이포그래피 스케일, 상호작용 상태 정의.

출력

1. 탭 구성 요소 명세: 트리거(탭), 탭 리스트(컨테이너), 패널(콘텐츠)에 대한 시각적 정의.
2. 상태 매트릭스: 기본, 호버, 활성, 포커스, 비활성화 상태에 대한 시각적 처리 정의.
3. 반응형 전략: 오버플로 처리 규칙(스크롤 가능, 줄 바꿈, 아코디언/선택 메뉴로 축소).
4. 접근성 청사진: ARIA 역할, 키보드 매핑, 포커스 관리 규칙.

작업 흐름

1. 콘텐츠 관계 정의

모든 탭이 동일한 계층 수준에 있고 동일한 상위 엔터티와 관련되어 있는지 확인하십시오. 레이블은 짧게(1-3단어) 유지하고 일관된 대소문자 표기법을 사용하십시오.

2. 시각적 구성 정의

visual-hierarchy-system을 적용하여 탭 리스트를 정의하십시오:

• 활성 탭: 가장 눈에 띄어야 합니다. 색상, 글꼴 두께, 시각적 표시기(예: 하단 테두리 또는 배경 채우기)를 조합하여 사용하십시오.
• 비활성 탭: 상호작용이 가능해 보이지만 부차적으로 보여야 합니다.
• 콘텐츠 패널: 일반적으로 활성 탭과 시각적 컨테이너 또는 정렬을 공유하여 "연결된" 느낌을 만듭니다.

3. 상호작용 로직 정의

• 즉시 전환: 상호작용 시 콘텐츠가 즉시 변경되어야 합니다.
• 호버 vs. 클릭: 탭은 호버 시 절대 전환되어서는 안 되며, 명시적인 클릭이나 탭이 필요합니다.
• 기본 상태: 사용자가 특정 상태로 돌아오는 경우가 아니면 일반적으로 첫 번째 탭이 기본적으로 활성화됩니다.

4. 간격 및 터치에 최적화

fluid-spacing-system 및 interactive-state-system을 적용하십시오:

• 터치 대상: 각 탭 트리거는 WCAG 2.2 SC 2.5.8(최소 24x24px)을 충족해야 하며, 기본 탭 UI의 경우 44x44px를 선호합니다.
• 내부 간격: 탭 간에 일관된 간격을 사용하십시오(일반적으로 --space-s 또는 --space-m).
• 활성 표시기: "활성" 선 또는 배경이 선명하게 보일 수 있을 만큼 충분히 두꺼운지 확인하십시오.

5. 반응형 계획

좁은 뷰포트에서 탭 리스트가 처리하는 방식을 결정하십시오:

• 가로 스크롤: 가장 일반적인 모바일 패턴입니다. 탭 리스트가 수평으로 오버플로되도록 하고, 더 많은 콘텐츠가 있음을 나타내는 미세한 페이드 또는 화살표를 추가하십시오.
• 아코디언 변환: 긴 콘텐츠의 경우 모바일에서 탭을 아코디언 레이아웃으로 변환하십시오.
• 선택 메뉴: 유틸리티 중심의 탭인 경우 모바일에서 탭 리스트를 <select> 요소로 대체하십시오.

결정 규칙

• "레이블" 규칙: 레이블 길이가 크게 다른 경우 왼쪽 정렬 탭을 사용하십시오. 일관되고 적은 경우 중앙 정렬 또는 양쪽 정렬 탭을 사용하십시오.
• 가로 vs. 세로:
  • 가로: 콘텐츠 상단 구성의 표준입니다.
  • 세로: 긴 목록(설정)이나 가로 공간은 제한적이지만 세로 공간이 풍부한 경우에 가장 적합합니다.
• "일곱" 규칙: 가로 탭을 7개 항목으로 제한하십시오. 더 필요한 경우 정보 구조를 재평가하거나 세로 레이아웃을 사용하십시오.
• 활성 표시기: 활성 상태를 나타내기 위해 항상 색상 이상의 것을 사용하십시오(예: 2px-3px 밑줄 또는 굵은 글꼴 두께 변경).

제약 조건

• 접근성: ARIA APG 탭 패턴을 따르십시오. 컨테이너에는 role="tablist", 각 트리거에는 aria-selected 및 aria-controls와 함께 role="tab", 각 패널에는 해당 탭을 가리키는 aria-labelledby와 함께 role="tabpanel"을 사용하십시오. 활성 탭만 tabindex="0"을 가지며, 비활성 탭은 tabindex="-1"(로빙 tabindex)을 사용합니다.
• 활성화 모델: 빠르고 가벼운 패널의 경우 자동 활성화(화살표 키가 포커스를 이동하고 패널 콘텐츠를 즉시 전환)를 선호하십시오. 전환이 무거운 네트워크 요청을 트리거하는 경우 수동 활성화(화살표 키는 포커스만 이동, Enter/Space 확인)를 사용하십시오.
• 키보드 탐색: 왼쪽/오른쪽 화살표(세로 탭의 경우 위/아래)가 탭 사이를 이동하고, Home/End가 첫 번째/마지막 탭으로 이동하며, Tab이 포커스를 탭 리스트 밖의 활성 패널로 이동시킵니다.
• 대비: 활성 및 비활성 상태는 WCAG AA(텍스트의 경우 4.5:1)를 충족해야 합니다.
• 반응형: 탭으로 인해 페이지가 가로로 스크롤되어서는 안 됩니다. 탭 리스트 자체가 오버플로를 처리해야 합니다.

일반적인 실패 패턴

• 숨겨진 활성 상태: 보기 어려운 미묘한 색상 변경을 사용하여 사용자가 현재 보고 있는 섹션을 알 수 없게 만듭니다.
• 콘텐츠 점프: 높이가 크게 다른 탭 패널로 인해 사용자가 탭을 전환할 때마다 푸터가 위아래로 튀는 현상이 발생합니다.
• 탐색에 오용: 탭을 별도의 페이지에 연결하는 데 사용하면 즉각적인 콘텐츠 전환에 대한 사용자 기대를 깨뜨립니다.
• 모바일 잘림: 모바일에서 나머지 부분을 볼 수 있는 방법을 제공하지 않고 탭 레이블을 자릅니다.
• 포커스 상태 누락: 키보드 사용자를 위한 가시적 포커스 링 디자인을 잊어버립니다.

검증 기준

• 모든 탭이 동일한 맥락과 관련되어 있습니다.
• 활성 상태가 시각적으로 구별됩니다(색상 이상의 요소 사용).
• 각 탭 트리거가 최소 WCAG 2.2 24x24px 터치 대상(44x44px 선호)을 충족합니다.
• ARIA 역할(tablist, tab, tabpanel)이 올바르게 할당되었으며 aria-selected 및 로빙 tabindex가 구현되었습니다.
• ARIA APG 탭 패턴에 따라 키보드 탐색(화살표 키, Home/End)이 지원됩니다.
• 반응형 동작(스크롤, 아코디언, 또는 선택 메뉴)이 정의되었습니다.
• 콘텐츠 패널이 탭과 일관된 시각적 관계를 유지합니다.