coastdigitalgroup/coastai-skills

아이콘 시스템

목적

아이콘 시스템 스킬은 아이콘을 기능적인 UI 요소로 선택, 크기 조정 및 구현하기 위한 방법론을 제공합니다. 단순히 '예쁜 그림'을 고르는 것을 넘어, 아이콘이 인지 부하를 줄이고 브랜드 정체성을 강화하며 모든 사용자에게 완전히 접근 가능하도록 일관되게 사용되도록 보장하는 체계적인 시스템으로 나아갑니다. 강력한 아이콘 시스템은 아이콘이 시각적 혼란이 아닌 명확한 이정표 역할을 하도록 보장합니다.

사용 사례

• 새 웹사이트의 아이콘 스타일(윤곽선, 채움, 듀오톤) 정의.
• 다양한 컨텍스트(버튼, 내비게이션, 기능 그리드)에서 아이콘의 표준 크기 및 간격 규모 설정.
• '아이콘 비대화' 또는 일관성 없는 시각적 은유에 대한 웹사이트 감사.
• 개발자를 위한 접근 가능한 SVG 또는 아이콘 폰트 워크플로 구현.
• 특정 브랜드 속성(예: '친근한' 둥근 아이콘 대 '기술적인' 날카로운 아이콘)에 맞는 아이콘 선택.

사용하지 말아야 할 경우

• 일러스트레이션 및 히어로 그래픽: 단일 기능적 개념보다는 이야기를 전달하는 크고 복잡한 내러티브 이미지. 대신 일반 레이아웃 또는 히어로 최적화 스킬을 사용하세요.
• 로고 및 브랜딩: 주요 브랜드 정체성은 일반적으로 고유한 양보할 수 없는 규칙이 있습니다. 아이콘은 UI를 지원하며 브랜드 로고를 대체하지 않습니다.
• 순수 장식용 배경 패턴: 의미 없는 배경 화면으로 아이콘을 사용하는 경우.

입력

1. 브랜드 보이스 및 스타일: 브랜드가 미니멀, 기술적, 장난기 또는 기업적입니까?
2. 기술 환경: 사이트가 SVG 컴포넌트, 스프라이트 또는 아이콘 폰트를 선호하는 프레임워크로 구축되었습니까?
3. 사용 컨텍스트: 아이콘이 어디에 나타납니까? (예: 기본 내비게이션, CTA 버튼, 기능 목록, 대시보드 상태).
4. 기존 디자인 토큰: 유동적인 간격 및 색상 시스템으로 정렬을 보장합니다.

출력

1. 아이콘 스타일 가이드: 선 두께, 모서리 반경 및 채움 유형에 대한 정의된 규칙.
2. 아이콘 크기 척도: 특정 픽셀 또는 rem 값에 매핑된 일련의 토큰(예: icon-sm, icon-md, icon-lg).
3. 의미론적 라이브러리: 특정 작업 또는 개념에 매핑된 엄선된 아이콘 세트(예: 드롭다운의 경우 'Chevron-down').
4. 접근성 사양: ARIA 레이블, role="img" 및 aria-hidden 속성에 대한 규칙.

워크플로

1. 시각적 은유 수립

보편적으로 이해되는 기호를 사용하는 아이콘을 선택하세요.

• 검색: 돋보기.
• 설정: 톱니바퀴 또는 슬라이더.
• 사용자: 실루엣 또는 원형 사용자. 사용자가 아이콘의 의미를 추측해야 하는 '영리한' 은유는 피하세요.

2. 시각적 스타일 정의

시스템의 모든 아이콘이 동일한 DNA를 공유하는지 확인하세요:

• 선 두께: 일관된 선 두께 사용 (예: 모든 24px 아이콘에 대해 2px).
• 모서리 처리: 둥근 모서리는 더 접근하기 쉽게 느껴지고, 날카로운 모서리는 더 기술적/정밀하게 느껴집니다.
• 세부 수준: 가독성을 유지하기 위해 아이콘이 작아질수록 단순화하세요.

3. 크기 및 간격 규모 구축

아이콘 컨테이너에 fluid-spacing-system을 적용하세요:

• 소형 (16px): 텍스트, 이동 경로와 인라인.
• 중형 (24px): 표준 버튼, 기본 내비게이션.
• 대형 (48px 이상): 기능 카드, 히어로 하이라이트.
• 광학적 중앙 정렬: 모양 때문에 중앙에서 벗어난 것처럼 보이는 아이콘을 수동으로 조정하세요 (예: '재생' 삼각형).

4. 색상 및 상태 로직 구현

아이콘을 interactive-state-system에 연결하세요:

• 활성/호버: 아이콘은 상위 요소와 함께 색상이나 두께가 변경되어야 합니다.
• 의미론적 색상: 삭제/오류 아이콘에는 빨간색, 성공에는 녹색을 사용하세요.
• 대비: 아이콘은 WCAG AA(그래픽 객체의 경우 3:1)를 충족해야 합니다.

5. 기술적 전달 및 접근성

• SVG vs. 아이콘 폰트: 더 나은 성능, 접근성 및 렌더링 품질을 위해 SVG를 선호하세요.
• ARIA 역할:
  • 장식용인 경우: aria-hidden="true"를 사용하세요.
  • 기능적인 경우(예: 아이콘만 있는 버튼): role="img"와 명확한 aria-label을 사용하세요.

의사 결정 규칙

• '레이블 우선' 규칙: 아이콘은 거의 항상 텍스트 레이블과 함께 사용해야 합니다. 보편적으로 인식되는 작업(검색, 닫기, 메뉴)에만 '독립형' 아이콘을 사용하고 접근 가능한 레이블이 있는 경우에만 사용하세요.
• 다양성보다 일관성: 여러 소스의 스타일을 혼합하지 말고 단일 아이콘 라이브러리(예: Lucide, Heroicons)를 사용하세요.
• 선 두께 조정: 아이콘이 확대되면 선 두께는 레이아웃 전체에서 시각적 '무게'를 유지하기 위해 크기에 비례해야 합니다.
• 광학적 균형: 모든 아이콘이 동일하게 생성되는 것은 아닙니다. 정사각형 아이콘은 같은 너비의 원형 아이콘보다 더 커 보입니다. '경계 상자' 방식을 사용하지만 균형을 위해 시각적 크기를 수동으로 조정하세요.

제약 조건

• 접근성: 링크 또는 버튼으로 사용되는 아이콘은 화면 판독기를 위한 텍스트 대체 수단이 있어야 합니다.
• 터치 대상: 버튼 내부의 아이콘은 히트 영역을 24x24px 미만으로 줄여서는 안 됩니다(WCAG 2.2 SC 2.5.8 최소). 기본 아이콘 전용 작업의 경우 44x44px가 선호됩니다.
• 반응형: 작은 화면에서 아이콘이 텍스트를 가리면 단순화하거나 제거해야 할 수 있지만, 종종 모바일 스캔에 도움이 됩니다.

일반적인 실패 패턴

• '미스터리 고기' 아이콘: 사용자가 인식하지 못하는 레이블 없이 아이콘 사용.
• 일관성 없는 두께: 같은 행에 1px 윤곽선 아이콘과 3px 굵은 아이콘 혼합.
• 과도한 복잡성: 저해상도 화면이나 작은 크기에서 '흐릿해지거나' 사라지는 너무 많은 가는 선이 있는 아이콘 사용.
• 접근성 누락: 제목이나 ARIA 레이블 없이 SVG 아이콘을 사용하여 화면 판독기 사용자가 작업을 인식하지 못하게 함.
• 깨진 광학적 정렬: 수학적으로 중앙에 있지만 광학적으로 중앙에 있지 않아 원의 왼쪽에서 미끄러지는 것처럼 보이는 '재생' 버튼.

검증 기준

• 모든 아이콘이 단일하고 응집력 있는 시각적 스타일에 속합니다.
• 아이콘에 정의된 크기 척도(예: 16, 24, 32, 48)가 있습니다.
• 독립형 아이콘(있는 경우)에 aria-label 또는 동등한 텍스트 대체 수단이 있습니다.
• 장식용 아이콘은 aria-hidden="true"로 표시됩니다.
• 아이콘은 배경에 대해 3:1의 대비 비율을 유지합니다.
• 아이콘 전용 대화형 요소가 WCAG 2.2 24x24px 터치 대상 최소 기준을 충족합니다(44x44px 선호).
• 시각적 은유가 명확하고 표준적입니다(추측 없음).