상태와 심각도
상태와 심각도 (Status and severity)
데이터 스트림이나 시스템에 대한 중요한 컨텍스트를 공유할 때, 사용자에게 명확하게 정의된 상태(status)와 심각도(severity) 상태를 제공하는 건 필수적이에요. 이 정보를 공유할 때 UI에서 접근성 표준을 충족하는 것도 매우 중요하죠.
출처: 문서
본문
상태와 심각도는 다음과 같이 구분돼요.
- 상태(Status): 연결된 데이터 소스, 시스템 또는 유사한 객체의 현재 상태를 의미해요.
- 심각도(Severity): 식별된 문제가 얼마나 심각한지를 의미해요.
상태와 심각도는 텍스트, 색상, 아이콘의 조합으로 가장 효과적으로 전달돼요.
둘 다 사용자에게 문제를 경고하는 데 쓰일 수 있지만, 심각도 아이콘과 상태 아이콘은 서로 바꿔 쓸 수 없어요. 상태는 문제가 가질 수 있는 영향 수준을 자동으로 전달하지 않아요.
콘텐츠 고려 사항 (Content considerations)
아이콘은 텍스트와 짝을 이룰 때 가장 의미 있는 경우가 많아요. 모든 사용자가 아이콘만으로 인식할지 확신이 없다면, 설명 텍스트 라벨이나 툴팁을 추가하세요. 아이콘 툴팁 관련 가이드는 저희 tooltips 작성 가이드를 참고하세요.
상태 아이콘 (Status icons)
상태 아이콘은 데이터 소스, 시스템 또는 유사한 객체의 상태를 전달해요. alert, banner, empty state처럼 텍스트 라벨 및/또는 추가 컨텍스트 없이 단독으로 사용해서는 안 돼요.
이 아이콘들은 메시지가 전달하려는 내용을 사용자가 더 잘 이해하도록 색상으로 구분돼요. 상태 색상과 상태 아이콘은 서로 바꾸거나 재배열해서는 안 돼요. 예를 들어, danger 색상을 info 상태 아이콘에 적용하면 안 돼요.
다음 표는 상태 유형, 아이콘, 색상 토큰의 올바른 조합을 정리한 거예요:
| 상태 | 아이콘 | 색상 토큰 | 용도 |
|---|---|---|---|
| Danger | --pf-t--global--icon--color--status--danger--default |
심각한 오류나 차단 오류가 발생했을 때 사용합니다. | |
| Warning | --pf-t--global--icon--color--status--warning--default |
심각하지 않은 오류가 발생했을 때 사용합니다. | |
| Success | --pf-t--global--icon--color--status--success--default |
작업이나 프로세스가 오류 없이 완료되었을 때 사용합니다. | |
| Info | --pf-t--global--icon--color--status--info--default |
일반적인 정보성 메시지에 사용합니다. | |
| Custom | --pf-t--global--icon--color--status--custom--default |
심각도와 무관한 일반 메시지에 사용합니다. 커스텀 색상을 쓸 수 있게 해줍니다. |
용도 (Usage)
다음과 같은 경우 상태 아이콘을 사용하세요.
- alert, modal, banner 또는 유사한 컴포넌트의 의미나 현재 상태에 더 많은 컨텍스트를 제공하기 위해.
- 공유되는 메시지 유형을 제대로 식별하기 위해(위 표의 용도 정의 기준).
다음과 같은 경우 상태 아이콘을 사용하지 마세요.
- 심각도를 전달하기 위해. 이 경우 심각도 아이콘을 사용하세요.
- 텍스트 라벨 없이 메시지를 전달하기 위해.
심각도 아이콘 (Severity icons)
데이터 소스와 관련된 문제나 사고가 있을 때, 상황의 심각도를 전달해서 사용자가 그 영향과 심각성을 측정하고 이해할 수 있게 하는 것이 중요해요. 효과적인 커뮤니케이션을 위해 일련의 심각도 아이콘을 제공해요.
이 아이콘들은 색상과 시각적 무게(visual weight)를 활용해서 아이콘이 전달하는 심각도의 느낌을 반영해요. 아이콘이 덜 심각한 것에서 더 심각한 것으로 진행될수록 시각적 무게가 이동하고 색상이 더 눈길을 끌게 돼요.
| 심각도 수준 | 아이콘 | 이름 | React 이름 | 색상 토큰 | 용도 |
|---|---|---|---|---|---|
| Critical | rh-ui-severity-critical-fill |
RhUiSeverityCriticalFillIcon |
--pf-t--global--icon--color--severity--critical--default |
가장 높은 심각도의 문제를 위해 아껴 둡니다. | |
| Important | rh-ui-severity-important-fill |
RhUiSeverityImportantFillIcon |
--pf-t--global--icon--color--severity--important--default |
위협 수준이 높은 문제에 사용합니다. | |
| Moderate | rh-ui-severity-moderate-fill |
RhUiSeverityModerateFillIcon |
--pf-t--global--icon--color--severity--moderate--default |
중간 위협 수준의 문제에 사용합니다. | |
| Minor | rh-ui-severity-minor-fill |
RhUiSeverityMinorFillIcon |
--pf-t--global--icon--color--severity--minor--default |
위협 수준이 낮은 문제에 사용합니다. | |
| None | rh-ui-severity-none-fill |
RhUiSeverityNoneFillIcon |
--pf-t--global--icon--color--severity--none--default |
보안 위협이 없을 때 사용합니다. | |
| Undefined | rh-ui-severity-undefined-fill |
RhUiSeverityUndefinedFillIcon |
--pf-t--global--icon--color--severity--undefined--default |
심각도 수준이 아직 결정되지 않았지만 나중에 변경되고 정의될 것으로 예상될 때 사용합니다. |
용도 (Usage)
다음과 같은 경우 심각도 아이콘을 사용하세요.
- 사용자가 문제의 영향을 빠르게 이해할 수 있도록 하기 위해.
다음과 같은 경우 심각도 아이콘을 사용하지 마세요.
- 어떤 것의 상태를 전달하기 위해. 이 경우 상태 아이콘을 사용하세요.
- 적절한 색상을 적용하지 않고. 심각도 색상 팔레트는 적절한 색상 접근성을 보장하면서 명확한 긴급성 범위를 전달하도록 신중하게 선택되었어요.
단일 문제 (Single issue)
단일하고 독립적인 문제에 대한 심각도 정보를 표시할 때는 적절한 심각도 수준 텍스트 라벨을 사용하세요.
집계된 문제 (Aggregated issues)
다양한 사용 사례 때문에 3~6개의 아이콘을 사용해 심각도 범위를 전달할 수 있어요. 여러 심각도 아이콘을 배열할 때는 가장 심각한 것에서 덜 심각한 순으로 정리하세요.
| 척도 | 수준 | 아이콘 |
|---|---|---|
| 6점 척도 | Critical, important, moderate, minor, none, undefined | |
| 5점 척도 | Critical, important, moderate, minor, none 또는 undefined (1개 선택) | 또는 |
| 4점 척도 | Critical, important, moderate, minor | |
| 3점 척도 | Critical, moderate, minor |
이 심각도 아이콘 그룹은 테이블이나 카드 같은 데이터 표시에서 특히 유용해요.
여러 심각도 아이콘을 사용할 때는 각 아이콘에 개수(count)를 포함하세요. 사용자가 문제에 대해 조치를 취할 수 있도록 개수를 다른 리소스에 연결할 수도 있어요.