coastdigitalgroup/coastai-skills

뱃지 및 태그 시스템

목적

뱃지 및 태그 시스템은 빠른 컨텍스트, 상태 또는 분류를 제공하는 작은 정보 구성 요소를 설계하고 구현하기 위한 방법론을 제공합니다. 이 스킬은 이러한 요소가 기본 콘텐츠에 종속되면서도 웹사이트 전체에서 즉시 스캔 가능하고 접근 가능하며 논리적으로 구성되도록 보장합니다.

사용 사례

• 상태 표시기: 객체의 상태 표시 (예: "활성", "보류 중", "매진").
• 분류: 주제, 유형 또는 컬렉션별로 콘텐츠 레이블 지정 (예: "생산성", "튜토리얼", "신규").
• 수량/개수: 항목과 연결된 숫자 표시 (예: "알림 12개", "장바구니 5개").
• 필터 가시성: 사용자가 제거할 수 있는 활성 필터 표시.
• 우선 순위 신호: "베스트셀러" 또는 "긴급"과 같은 특정 속성 강조.

사용하지 말아야 할 경우

• 기본 작업: 뱃지나 태그를 기본 CTA(행동 유도)로 사용하지 마세요. interactive-state-system의 버튼을 사용하세요.
• 대형 콘텐츠 블록: 정보가 2-3단어 이상 필요한 경우 card-ui-system 또는 표준 타이포그래피를 사용하세요.
• 탐색: 태그가 필터링된 보기로 연결될 수는 있지만, 기본 site-navigation-system을 대체해서는 안 됩니다.
• 장식 전용 아이콘: 요소에 의미론적 의미가 없는 경우 iconography-system에 속합니다.

입력

1. 콘텐츠 의도: 상태(상태), 분류(메타데이터) 또는 개수(숫자)입니까?
2. 대화형 요구사항: 요소가 정적인가요, 아니면 제거 가능/클릭 가능한가요?
3. 계층 구조 컨텍스트: 상위 요소는 무엇인가요? (예: 카드, 헤더, 테이블 행).
4. 색상 토큰: 기존 의미론적 색상 스케일 (성공, 경고, 오류, 정보).

출력

1. 시각적 구조 사양: border-radius(알약 vs. 둥근 모서리), padding 및 타이포그래피에 대한 정의.
2. 의미론적 색상 매트릭스: 특정 의미에 대한 색상 매핑 (예: 녹색 = 성공).
3. 대화형 사양: 호버, 포커스 및 "제거"(X) 작업에 대한 시각적 처리.
4. 배치 규칙: 이러한 요소가 제목 및 이미지와 관련하여 위치해야 하는 위치에 대한 지침.

워크플로우

1. 뱃지와 태그 구분

먼저 기능적 역할 정의:

• 뱃지: 일반적으로 상태 (예: "라이브") 또는 개수 (예: "3")를 나타냅니다. 일반적으로 비대화형이거나 단일 상태로 연결됩니다.
• 태그: 일반적으로 분류 (예: "SaaS")를 나타냅니다. 종종 대화형으로 사용자가 콘텐츠를 필터링하거나 태그를 제거할 수 있습니다.

2. 시각적 구조 설정

버튼처럼 보이지 않도록 기본 스타일 정의:

• 타이포그래피: 더 작고, 종종 모두 대문자 또는 세미볼드체 사용 (예: 12px/0.75rem).
• 테두리 반경:
  • 알약(완전 둥근): 상태 및 개수에 가장 적합.
  • 둥근 모서리(4-8px): 분류 및 제거 가능한 태그에 가장 적합.
• 크기: 높이를 일관되게 유지 (예: 20px-24px)하여 텍스트와 잘 정렬되도록 합니다.

3. 의미론적 로직 할당 (색상 및 아이콘)

사용자가 읽지 않고도 의미를 전달하도록 색상 사용:

• 성공(녹색): "완료", "활성", "확인됨."
• 경고(노란색/주황색): "보류 중", "재고 부족", "초안."
• 오류(빨간색): "실패", "심각", "품절."
• 정보/중립(파란색/회색): "신규", "카테고리", "메타데이터."

규칙: 색맹 사용자를 위한 접근성을 보장하려면 항상 텍스트나 아이콘과 함께 색상을 사용하세요.

4. 대화형 상태 정의

태그가 대화형인 경우:

• 호버/포커스: 미묘한 배경 전환이나 테두리 변경 적용.
• 제거 가능: 최소 히트 영역 24x24px(WCAG 2.2 SC 2.5.8)의 명확한 "X" 아이콘 포함. 레이아웃이 허용하는 경우 편안한 터치 사용을 위해 44x44px까지 크기 조정.

5. 배치 및 계층 구조 결정

• 오버레이: 이미지의 상단 모서리에 "신규" 배지 배치.
• 인라인: page-header-system의 제목 바로 뒤에 상태 배치 배치.
• 그룹화: card-ui-system의 설명 아래에 여러 태그를 쌓습니다.

결정 규칙

• "가늘게 뜨고 보기 테스트": 배지가 너무 밝아 H1에서 주의를 산만하게 하는 경우 채도를 낮추거나 아웃라인 스타일을 사용하세요.
• 개수 제한: 시각적 혼란을 방지하기 위해 단일 카드에 3개 이상의 태그를 사용하지 마세요.
• 텍스트 길이: 레이블을 1-2단어로 유지하세요. 데이터가 동적이고 예측 불가능한 경우 잘라내거나 툴팁을 사용하세요.
• 버튼 구분: 배지는 기본 "제출" 또는 "구매" 버튼과 다른 시각적 처리(예: 더 작은 크기, 다른 반경)를 가져야 합니다.

제약 사항

• 접근성: 배지/태그 내 텍스트는 WCAG AA(4.5:1 대비)를 충족해야 합니다. 대화형 태그는 키보드로 탐색 가능해야 합니다.
• 반응형: 그룹의 태그는 컨테이너를 넘치지 않고 다음 줄로 줄바꿈(flex-wrap: wrap)되어야 합니다.
• 터치 대상: 제거 가능한 태그는 "닫기" 작업에 충분히 큰 대상 영역이 있어야 합니다(WCAG 2.2 SC 2.5.8 기준 최소 24x24px, 44x44px 권장).

일반적인 실패 패턴

• "버튼 모방": 태그가 버튼과 정확히 똑같이 보여 사용자가 기본 작업을 기대하게 만듭니다.
• 색상 과의존: 텍스트 레이블 없이 빨간색/녹색/노란색만 사용하여 색맹 또는 스크린 리더 사용자가 상태를 이해할 수 없게 만듭니다.
• 태그 수프: 하나의 카드에 10개 이상의 태그를 채워 넣어 어떤 태그도 유용하지 않게 만듭니다.
• 일관성 없는 반경: 동일한 UI에서 알약 모양 배지와 각진 모서리 태그를 혼용합니다.

검증 기준

• 배지와 태그가 버튼과 시각적으로 구별됩니다.
• 의미론적 색상이 일관되게 사용됩니다 (예: 녹색은 항상 성공을 의미).
• 대비 비율이 모든 색상 변형에 대해 WCAG AA(4.5:1)를 충족합니다.
• 대화형 태그에는 포커스 상태와 최소 24x24px(WCAG 2.2 SC 2.5.8)의 터치 대상이 포함됩니다.
• 요소가 모바일 뷰포트에서 우아하게 줄바꿈됩니다.
• 중요한 상태 표시기에는 색상과 함께 아이콘이 사용됩니다.