Status indicators

Status indicators (상태 인디케이터)

상태 인디케이터는 사용자에게 심각도 수준 정보를 전달하는 중요한 방법이에요. 서로 다른 모양과 색상은 사용자가 상태를 빠르게 평가하고 식별하며 그에 따라 대응할 수 있게 해줍니다.

출처: Status indicators

본문

개요 (Overview)

인디케이터는 사용자가 페이지의 중요한 변경이나 문제를 알아차리도록 도와줘요. 알림, 우선순위 태스크, 상태, 업데이트를 보여주는 데 자주 사용됩니다. 특정 요소에 주의를 끌어봄으로써 인디케이터가 사용자를 집중해야 할 곳으로 안내합니다.

이 패턴에서는 다음을 탐구합니다.

  • 맥락에 가장 좋은 상태 인디케이터 선택
  • 서로 다른 상태 인디케이터 변형
  • 그것들이 어떤 요소로 구성되고 각 요소가 어떻게 전달하는지

변형 (Variants)

Variant Usage Use cases
Icon indicator 레이아웃이 충분한 공간을 제공하고 콘텐츠가 최대 주의를 요구할 때 사용됩니다. 아이콘, 모양, 의미 있는 색상, 설명적 인라인 라벨이 필요해요. 알림, 프로그레스 인디케이터, 데이터 테이블, 태스크 리스트, 대시보드 위젯에서 가장 자주 사용
Shape indicator 더 작은 공간이나 사용자가 많은 양의 데이터를 훑어봐야 할 때 유용해요. 리스트, 대시보드, 데이터 테이블, 데이터 시각화, 네트워크 다이어그램에서 가장 자주 사용
Badge indicator (with number) 새롭거나 업데이트된 항목의 개수를 사용할 수 있고, 사용자가 업데이트 수를 아는 것이 중요할 때 유용해요. 헤더의 알림 창에서 가장 자주 사용되며 아바타나 아이콘과 함께 사용
Badge indicator (without number) 새롭거나 업데이트된 항목을 사용할 수 있고 알림 수가 알려지지 않거나 사용자에게 무관할 때 유용해요. 점 배지도 더 콤팩트하고 세심합니다. 헤더의 알림 창과 툴바의 아이콘 버튼에서 가장 자주 사용
Differential indicator 사용자가 큰 통계 리스트에서 차이를 모니터링하고, 유형 이외의 것이 너무 눈에 띄게 될 때 유용해요. 델타를 강조하는 금융 대시보드나 다른 유형의 데이터 시각화에서 가장 자주 사용

아이콘 인디케이터와 모양 인디케이터 (Icon indicators versus shape indicators)

상태와 모양 인디케이터는 제품 내 피드백과 안내를 제공하는 데 핵심 역할을 해요. 그러나 서로 다른 상황에서 사용되며 제품의 필요에 따라 뚜렷한 목적을 제공합니다.

아이콘 인디케이터는 시스템 상태를 반영해, 모든 것이 원활히 실행되는지 또는 폼 제출 후 태스크가 완료되거나 실패할 때 같은 문제가 발생하는지 사용자에게 알립니다. 시스템 차원의 알림을 통해 제품의 전반적인 상태에 대한 피드백을 제공합니다.

모양 인디케이터는 보조 인디케이터 집합으로 제품에 따라 다르게 정의될 수 있어요. 사용 사례에는 높은 우선순위 태스크를 나타내는 빨간 삼각형처럼 태스크에 우선순위를 두도록 돕거나, 활성화·비활성화 같은 컴포넌트 수명 주기의 현재 단계를 보여주는 것 등이 있습니다. 항상 긴급도를 나타내는 것은 아닙니다.

구조 (Anatomy)

1. 아이콘 인디케이터

A. 텍스트 라벨 B. 아이콘 (모양, 색상, 기호)

2. 모양 인디케이터

A. 텍스트 라벨 B. 아이콘 (모양과 색상)

3. 배지 인디케이터

A. 숫자 있거나 없는 모양 (색상) B. 아이콘 (외곽선)

4. 차이 인디케이터

A. 텍스트 라벨 B. 기호 (선택적 색상)*

*차이 인디케이터는 양수 또는 음수 값을 나타내기 위해 "+" 또는 "-" 기호, 캐럿, 또는 화살표 아이콘 중 하나가 있어야 합니다.

상태 인디케이터로 디자인하기 (Designing with status indicators)

맥락에 맞게 고르기 (Choosing for context)

맥락에 맞는 올바른 인디케이터를 고르는 것은 사용자가 정보를 빠르게 이해하고 적절히 대응하도록 보장하는 데 중요해요.

통합 상태 (Consolidated statuses)

여러 상태가 통합될 때는 그룹을 나타내는 데 가장 높은 주의 색상을 사용하세요. 예를 들어 밑바탕 컴포넌트의 상태가 초록, 노랑, 빨강이면 통합 인디케이터는 빨강이어야 합니다.

인지 부하 (Cognitive load)

사용자 동작이 필요 없거나 상태 정보가 강조할 만큼 중요하지 않을 때는 상태 인디케이터를 피하세요. 대신 평문을 사용해 인터페이스를 불필요한 인디케이터로 과부하시키지 마세요. 엄격한 한도를 두지는 않지만, 다섯 여섯 개 이상의 인디케이터는 사용자를 압도하고 집중을 어렵게 만들 수 있어요.

표준화 (Standardization)

제품 전반의 일관성을 보장하려면 모든 상태 아이콘이 아이콘 라이브러리에서 승인되고 게시되어야 해요. 이 안내는 가장 흔한 상태 인디케이터만 포함해 통합된 사용자 경험을 유지하고 디자인 시스템의 불필요한 변형을 방지합니다.

제품에 현재 이 패턴에 없는 아이콘이 필요하다면 Carbon 팀에 GitHub 이슈를 생성해 그 추가를 제안하세요.

심각도 수준 (Severity levels)

사용 편의를 위해 상태 인디케이터는 높음, 중간, 낮음 주의 같은 심각도 수준으로 분류될 수 있어요. 제품 팀은 각 수준이 사용자 응답에 어떤 영향을 줄 수 있는지 고려해 특정 필요와 사용 사례에 기반해 이 수준을 정의해야 합니다. 예를 들어 높은 심각도 수준은 즉각적인 조치를 촉구할 수 있는 반면, 낮은 수준은 더 수동적인 응답을 허용할 수 있습니다.

높은 주의 (High attention)

시스템 불규칙, 오작동, 또는 잠재적으로 파괴적인 동작 때문에 즉각적인 사용자 동작이 필요할 때 이 인디케이터를 사용하세요. 예시: 알림, 예외, 확인, 오류.

중간 주의 (Medium attention)

즉각적인 사용자 동작이 필요하지 않거나 사용자 동작에 피드백을 제공할 때 이 인디케이터를 사용하세요. 예시: 승인, 프로그레스 인디케이터.

낮은 주의 (Low attention)

무언가 볼 준비가 되었을 때, 시스템 피드백을 위해, 또는 마지막 상호작용 이후 무언가 변경되었음을 나타낼 때 사용하세요.

시각적 안내 (Visual guidance)

메시지를 전달하기 위해 인디케이터는 여러 형태를 취할 수 있습니다—아이코노그래피에 국한되지 않습니다. Carbon 상태 인디케이터를 구성하는 네 가지 기본 요소가 있어요. (참고: 이 패턴에서는 애니메이션과 사운드를 다루지 않습니다.) 그리고 WCAG 준수를 위해 이 요소 중 최소 세 가지가 있어야 합니다. 특정 상태 유형을 살펴보기 전에 이 요소들을 더 자세히 보겠습니다.

  • 기호 (Symbols)
  • 모양 (Shapes)
  • 색상 (Colors)
  • 유형 (Type)

상태 기호 (Status symbols)

아이콘은 아이디어, 객체, 동작을 나타내는 시각적 기호예요. 경고의 느낌표, 성공의 체크마크, 도움의 물음표처럼 메시지를 빠르게 전달하고, 상호작용을 장려하며, 중요한 정보를 강조하는 데 도움을 줍니다.

IBM 제품 전반에 아이콘을 일관되게 유지하기 위해 가장 널리 알려진 기호만 아이콘 라이브러리에 포함했어요. 일부 제품은 특정 수정이 있거나 더 광범위한 집합이 필요할 수 있습니다.

상태 모양 (Status shapes)

이 맥락에서 모양은 정사각형, 원, 직사각형 같은 기하 도형을 말하며, 작은 크기에서도 즉시 읽을 수 있기 때문입니다. 이 모양들은 사용자가 제품 흐름을 성공적으로 사용하도록 적용될 수 있는 강한 시각적 연관을 가져요. 예를 들어 직선과 90도 각도를 가진 모양은 보통 구조와 질서(그리드처럼)를 전달합니다. 곡선이 있는 모양은 더 친근하며 연속성과 연결을 상징합니다.

모양과 연결된 문화적 연관이 있을 수도 있어요. 예를 들어 교통과 길 찾기에서 육각형은 정지, 뒤집힌 삼각형은 양보를 의미합니다. 모양을 잘못 사용하면 배운 인식 패턴을 방해하고 사용자를 혼란스럽게 하여 전체 경험을 해칠 수 있습니다.

상태 컬러 팔레트 (Status color palette)

상태 팔레트에는 상태를 반영하는 데 사용될 수 있는 모든 색상이 포함됩니다. 일반적으로 빨강은 위험 또는 오류, 주황은 심각한 경고, 노랑은 일반 경고, 초록은 정상 또는 성공, 파랑은 보통 추가 정보와 워크플로우 진행을 포함하는 수동적 알림을 나타냅니다. 이 상태 컬러 팔레트에는 시스템에 더 깊이를 더하는 회색과 보라도 포함됩니다. 회색은 초안 또는 시작되지 않은 작업을, 보라는 이상치 또는 정의되지 않은 상태를 나타냅니다.

    1. Red 60 da1e28
    1. Green 50 24A148
    1. Orange 40 ff832b
    1. Orange 60 (outline) ba4e00
    1. Yellow 30 f1c21b
    1. Yellow 60 (outline) 8e6a00
    1. Blue 70 0043ce
    1. Purple 60 8a3ffc
    1. Gray 60 6f6f6f

확장 상태 팔레트 (Extended status palettes)

이 팔레트는 노랑과 주황을 사용할 때 추가 대비 접근성을 위해서만 있어요. IBM 브랜드 팔레트의 일부가 아니며 데이터 시각화와 특정 상태 인디케이터에서 아주 선택적인 사용을 위해 예약됩니다. 다른 어떤 맥락이나 레이아웃에서도 이 팔레트를 사용하지 마세요.

Yellow

  • Yellow 10 fcf4d6
  • Yellow 20 fddc69
  • Yellow 30 f1c21b
  • Yellow 40 d2a106
  • Yellow 50 b28600
  • Yellow 60 8e6a00
  • Yellow 70 684e00
  • Yellow 80 483700
  • Yellow 90 302400
  • Yellow 100 1c1500

Orange

  • Orange 10 fff2e8
  • Orange 20 ffd9be
  • Orange 30 ffb784
  • Orange 40 ff832b
  • Orange 50 eb6200
  • Orange 60 ba4e00
  • Orange 70 8a3800
  • Orange 80 5e2900
  • Orange 90 3e1a00
  • Orange 100 231000

상태 유형 (Status type)

상태 인디케이터는 제품에서 가장 잘 작동하는 특정 유형 크기와 짝을 이루고 있어요. 모양 인디케이터는 더 큰 크기와 짝을 이룰 수 있지만, 더 작은 공간이나 아이콘 인디케이터 집합 옆의 보조 인디케이터 집합으로 사용될 때는 14pt 또는 12pt를 권장합니다.

Variant Icon size Type size
Icon indicator 20px 16pt
16px 14pt
Shape indicator 16px 14pt
16px 12pt

아이콘 인디케이터 (Icon indicator)

아이콘 인디케이터는 아이콘, 모양, 의미 있는 색상, 설명적 라벨로 구성됩니다. 특히 콘텐츠가 많은 레이아웃에서 소통에 매우 효과적이고 훑어보기를 향상시켜요. 일반적인 사용에는 알림, 프로그레스 인디케이터, 데이터 테이블, 태스크 리스트, 대시보드 위젯이 있습니다.

알림이 이 유형의 상태 인디케이터의 가장 흔한 예입니다.

아이콘 인디케이터 상태 (Icon indicator statuses)

제안된 아이콘 인디케이터 상태 이름은 시스템 필요에 따라 상태 알림을 정의하는 데 도움이 되도록 제품 전반의 공통 사용 사례에 기반합니다. 이 이름은 제품의 최종 상태 이름을 지시하기 위한 것이 아닙니다.

Status name Token Description & usage
Failed $status-red 즉각적인 주의가 필요한 프로세스 실패를 나타냄. 실패한 프로세스, 비상, 긴급 알림에 사용
Caution major $status-orange, $black 임계값이 위반되었음을 나타냄; 중요 이벤트가 트리거되기 전에 사용자에게 경고('Caution'과 함께만 사용). 주요 경고, 심각한 상황, 중요 불안정에 사용
Caution minor $status-yellow, $black 더 심각한 고장을 방지하는 시정 조치가 필요한 서비스 영향 없는 고장 상태의 존재를 나타냄. 경미한 경고, 예방, 불안정에 사용
Undefined $status-purple 허용 범위 밖이거나 잘못 형식화된 값을 나타냄. 실험 작업, 이상치에 사용
Succeeded $status-green 프로세스 끝의 성공을 나타냄(보통 Carbon 컴포넌트 내의 인터랙티브 상태로 사용되어 색상이 변경). 성공, 완료, 안정에 사용
Normal $status-blue 안정 또는 하나 이상의 보고된 알람의 해소를 나타냄; 문제가 없음을 암시. 안정, 활성 상태에 사용
In progress $status-blue 프로세스가 시작되었지만 아직 실행이 끝나지 않았음을 나타냄(작업 상태가 변경되면 아이콘은 'checkmark' 또는 'warning' 아이콘으로 대체됨). 미완료, 실행 중 프로세스에 사용
Incomplete $status-blue 단계적 프로세스가 시작되었지만 아직 끝나지 않았음을 나타냄(Carbon의 Progress Indicator 컴포넌트에 아이콘이 나타남). 불완전한 태스크에 사용
Not started $status-gray 작업 또는 단계(Carbon의 Progress Indicator 내)가 아직 시작되지 않았음을 나타냄. 시작되지 않은 태스크 또는 비활성 프로세스에 사용
Pending $status-gray 작업이 시작되었지만 리소스 부족으로 예약할 수 없음을 나타냄. 무기한 보류에 사용
Unknown $status-gray 객체의 상태가 알려지지 않았음을 나타냄. 알 수 없음, 정의되지 않은 상태에 사용
Informative $status-blue 추가(비필수) 정보를 사용할 수 있음을 나타냄. 추가 정보, 예외에 사용

라벨링과 유형 짝짓기 (Labeling and type pairing)

아이콘 인디케이터는 "맥락적" 상태 인디케이터라고도 하며 특정 UI 요소나 콘텐츠와 연결되어 명확성을 위해 이런 요소 근처에 배치되어야 합니다. 라벨이 설명적이지 않거나 숫자와만 짝을 이룰 때는 상태 의도를 명확히 하는 제목이나 추가 콘텐츠를 제공하는 것이 모범 사례입니다.

알림 내의 상태 인디케이터는 알림 컴포넌트에 통합되어 인라인 간격 규칙을 따르지 않으므로 다른 간격을 가집니다.

아이콘 인디케이터는 각각 권장 유형 크기 짝이 있는 두 가지 크기로 제공됩니다.

정렬 (Alignment)

세로로 쌓을 때는 아이콘이 동반 텍스트와 왼쪽 정렬을 유지해 훑어보기를 쉽게 하세요.

반응형 그리드를 사용하든 스페이서를 사용하든 리스트와 데이터 테이블에서 아이콘과 유형을 왼쪽 정렬하세요. 라벨 길이로 아이콘 정렬을 밀어내지 마세요. 이 경우 오른쪽 정렬된 상태 인디케이터에서 두 자리 라벨이 아이콘을 정렬 밖으로 밀어내고 있습니다.

모양 인디케이터 (Shape indicator)

모양 인디케이터는 기호에 의존하지 않고 모양, 색상, 설명적 라벨을 사용해 장치, 기능, 또는 버전의 상태를 전달해요.

사용 사례에는 높은 우선순위 태스크를 나타내는 빨간 삼각형처럼 태스크 우선순위를 돕거나, 활성화·비활성화 같은 컴포넌트 수명 주기의 현재 단계를 보여주는 것 등이 있습니다. 항상 긴급도를 나타내는 것은 아닙니다. 모양 인디케이터는 다이어그램에서도 사용되며 작은 크기에서도 선명하게 유지되도록 설계됩니다.

모양 인디케이터 상태 (Shape indicator statuses)

제안된 모양 인디케이터 상태 이름은 시스템 필요에 따라 상태 알림을 정의하는 데 도움이 되도록 제품 전반의 공통 사용 사례에 기반합니다. 이 이름은 제품의 최종 상태 이름을 지시하기 위한 것이 아닙니다.

Status name Token Description & usage
Failed $status-red 즉각적인 주의가 필요한 심각한 프로세스 실패나 오류를 나타냄. 치명적 실패, 비상 긴급 알림, 지원 중단·취소에 사용
Critical $status-red 임계 심각도 위협, 임계 심각도 객체(예: IP), 또는 데이터 유출의 임계 위험을 나타냄; 1–10 척도 기반. 임계(10) 위협, 임계 위험, 임계 심각도 경고에 사용
High $status-red 높은 심각도 위협, 높은 심각도 객체(예: IP), 또는 데이터 유출의 높은 위험을 나타냄; 1–10 척도 기반. 높은 위협(7–9), 높은 위험, 높은 심각도 경고에 사용
Medium $status-orange, $status-orange-outline 중간 심각도 위협, 중간 심각도 객체(예: IP), 또는 데이터 유출의 중간 위험을 나타냄; 1–10 척도 기반. 중간 위협(4–6), 중간 위험, 중간 심각도 경고에 사용
Low $status-yellow, $status-yellow-outline 낮은 심각도 위협, 낮은 심각도 객체(예: IP), 또는 데이터 유출의 낮은 위험을 나타냄; 1–10 척도 기반. 낮은 위협(0–3), 낮은 위험, 낮은 심각도 경고에 사용
Cautious $status-yellow, $status-yellow-outline 보안 위험/심각도 척도를 사용하지 않을 때 서비스 영향 없는 고장 상태의 존재를 나타내는 데 사용될 수 있음. 경미한 경고, 예방, 불안정에 사용
Undefined $status-purple 허용 범위 밖이거나 잘못 형식화된 값을 나타냄. 실험 작업, 이상치에 사용
Stable $status-green 안정 또는 하나 이상의 보고된 알람의 해소를 나타냄; 문제가 없음을 암시. 성공, 완료, 안정, 활성 상태에 사용
Informative $status-blue 추가 정보를 사용할 수 있음을 나타냄(이 표에서 다루지 않는 상태에 적응적으로 사용될 수 있음). 추가 정보, 와일드 카드에 사용
Incomplete $status-blue 프로세스가 시작되었지만 아직 실행이 끝나지 않았거나 사용자 태스크가 미완료임을 나타냄. 미완료, 실행 중 프로세스에 사용
Draft $status-gray 작업이 시작되지 않았거나, 작업의 초안 상태이거나, 비활성 프로세스임을 나타냄. 시작되지 않은 태스크, 초안, 비활성 프로세스에 사용

라벨링과 유형 짝짓기 (Labeling and type pairing)

모양 인디케이터도 "맥락적" 상태 인디케이터예요. 위 상태 아이콘처럼 광학 정렬을 고려한 모양 인디케이터용 에셋이 만들어졌습니다.

모양 인디케이터는 아이콘의 추가 인식이 없으므로 상태 라벨과 짝을 이루는 것이 중요합니다.

모양 인디케이터는 한 가지 크기로 제공되지만 두 가지 권장 유형 크기와 짝을 이룹니다.

정렬 (Alignment)

세로로 쌓을 때는 아이콘이 동반 텍스트와 왼쪽 정렬을 유지해 훑어보기를 쉽게 하세요.

모양 인디케이터를 라벨 앞에 배치하세요; 문자 수 변동이 없는 경우에만 다른 텍스트 뒤에 배치할 수 있습니다. 정렬 밖으로 밀지 않도록 라벨 뒤에 모양 인디케이터를 배치하지 마세요.

모범 사례 (Best practices)

상태 모양은 상태 아이콘보다 해석에 더 많은 유연성을 제공합니다. 모양은 다양한 상황에 다른 색상을 가질 수 있기 때문이에요. 모범 사례로, 같은 경험 안에서 다른 색상과 같은 모양을 사용하는 것을 피하는 것을 고려하세요.

더 나은 훑어보기를 위해 모양, 색상, 상태 라벨을 사용하세요. 콘텐츠를 구분하기 위해 색상과 상태 라벨만 사용하는 것을 피하세요.

배지 인디케이터 (Badge indicator)

배지 인디케이터는 무언가 새롭거나 업데이트되었음을 사용자에게 알립니다. 배지 상태는 보통 헤더의 고스트 아이콘 버튼 위에 표시되어 활성 알림을 나타내며, 사용자가 알림을 확인한 후 지워집니다. 사용 사례에 따라 아이콘 버튼은 새 페이지를 열거나 모달, 창, 플라이아웃을 실행할 수 있습니다.

숫자 있는 배지 (Badge with number)

숫자 배지는 새롭거나 업데이트된 항목의 개수를 사용할 수 있고 사용자가 정확한 업데이트 수를 아는 것이 중요할 때 사용됩니다. 이 배지는 세 자리 숫자로 제한되며 마지막 문자는 더하기 기호를 사용합니다.

숫자 있는 배지는 UI 셸 헤더의 글로벌 동작으로 큰 아이콘 버튼(48px)에서만 사용될 수 있습니다.

숫자 없는 배지 (Badge without number)

숫자 없는 배지(또는 점 배지)는 새 알림을 사용할 수 있지만 정확한 알림 수가 알려지지 않거나 사용자에게 무관할 때 사용됩니다. 이 점 배지는 숫자 배지보다 더 미묘하지만 여전히 아이콘 버튼으로 사용자의 주의를 효과적으로 끕니다.

숫자 없는 배지는 툴바의 아이콘 버튼에서 흔히 볼 수 있습니다.

차이 인디케이터 (Differential indicator)

차이 인디케이터는 기호, 선택적 색상, 설명적 라벨로 구성되어 사용자가 정보의 변화나 움직임을 추적하도록 돕습니다. 더 복잡한 인디케이터가 너무 주의를 분산시킬 수 있는 큰 통계 집합의 차이를 모니터링하는 데 특히 유용해요. 일반적인 예로는 상당한 가격 변화를 반영하는 투자 계정의 색상 코드 주식 기호가 있습니다. 디자이너는 데이터 시각화에서 델타를 강조하는 데에도 차이 인디케이터를 사용합니다.

타이포그래픽 인디케이터는 플러스나 마이너스 기호만으로 작동할 수 있지만, 우리 시스템에서는 명확성을 위해 화살표나 캐럿 아이콘과 가장 자주 짝을 이룹니다.

색상 (Color)

차이 인디케이터는 양수 또는 음수 값을 표시합니다. 값 앞에 "+" 또는 "-", 쉐브론 아이콘, 또는 화살표 아이콘이 있다면 색상은 이 상황에서 선택사항이에요. 데이터가 온도를 포함하지 않는 한 양수 값은 초록 스펙트럼으로, 음수 값은 빨강 스펙트럼으로 표현됩니다.

차이 인디케이터는 대시보드에서 가장 자주 볼 수 있습니다.

접근성 (Accessibility)

요소 (Elements)

색상에만 의존하는 것은 불충분하다 (Relying only on color is insufficient)

상태를 전달하기 위해 색상에만 의존하는 것은, 특히 색각 결핍이 있는 사용자에게 불충분합니다(Use of Color 참조). 색상이 유용할 수는 있지만 텍스트나 다른 시각적 단서와 짝을 이루어야 합니다. 접근성 표준을 충족하고 비텍스트 대비를 통과하려면 상태 인디케이터에 사용되는 색상 사이와 인디케이터와 페이지 배경 사이에 최소 3:1 대비가 있는지 확인하세요. 대비가 충분하다면, 그레이스케일에서도 사용자는 색상에만 의존하지 않고 상태를 구분할 수 있어야 합니다.

결과적으로 상태 인디케이터는 색상, 모양, 기호 중 최소 두 가지 요소에 의존해야 합니다. 아이콘 자체가 접근성 표준을 충족할 때 텍스트와 짝을 이루면 사용자가 콘텐츠를 더 잘 이해하고 훑어볼 수 있습니다.

아이콘 단독 사용은 허용된다 (Using icons alone is acceptable)

우리는 명확성을 위해 아이콘과 라벨을 모두 포함하는 상태 인디케이터를 제공하기 위해 노력합니다. 아이콘 단독은 비텍스트 대비 요구사항(3:1 대비)을 충족하면 효과적일 수 있지만, 각 아이콘을 라벨과 짝을 이루면 시각 장애가 있는 사용자를 포함한 모든 사용자가 상태를 한눈에 이해할 수 있게 합니다.

외곽선 (Outlines)

현재 아이콘 인디케이터는 정적이며 인라인 또는 다른 컴포넌트와 함께 사용됩니다. 인터랙티브하지 않고 기호가 모양 색상에 대해 충분한 대비를 가지므로 외곽선은 필요하지 않습니다.

그러나 모양 인디케이터는 모양과 색상에만 의존하는데, 이는 스크린 리더와 낮은 색각을 가진 개인에게 충분한 접근성을 제공하지 못할 수 있습니다. 따라서 특히 Carbon 라이트 테마의 주황·노랑 같은 더 밝은 상태 색상에서 접근성을 높이려면 외곽선 사용과 모양 인디케이터와의 텍스트 짝짓기가 필수적입니다.

컴포넌트 (Components)

  • 로딩 (Loading)
  • 데이터 테이블 (Data table)
  • 알림 (Notification)
  • 프로그레스 인디케이터 (Progress indicator)

패턴 (Patterns)

  • 알림 (Notifications)

참고 자료 (References)

  • Nick Babich, 4 Ways To Communicate the Visibility of System Status in UI, (UX Planet, 2020)
  • Aurora Harley, Visibility of System Status (Usability Heuristic #1), (Nielsen Norman Group, 2018)
  • Miklos Philips, A comprehensive guide to notification design, (UX Planet, 2020)
  • Kim Salazar, Indicators, Validations, and Notifications: Pick the Correct Communication Option, (Nielsen Norman Group, 2015)

더 알아보기 (Learn more)

상태 인디케이터는 심각도 정보를 빠르게 전달하는 핵심 패턴이에요. 아이콘·모양·배지·차이라는 네 변형을 맥락에 맞게 고르고, 통합 상태에는 최고 주의 색상을 쓰며 필요 이상으로 인디케이터를 남용하지 마세요. 접근성은 색상·모양·기호 중 최소 둘에 의존하고 3:1 대비를 지키며, 모양 인디케이터에는 외곽선과 텍스트 라벨을 짝짓는 게 좋습니다.