page title

레이블은 정확한 내용으로 간결하게 제공한다.

사용자가 배지를 통해 정보를 빠르게 파악할 수 있도록 핵심 정보를 간결하게 요약하고 텍스트에 줄바꿈이 발생하지 않도록 해야 한다.

레이블과 컨테이너의 색상은 일반적인 의미 체계, 일관성을 고려하여 선택한다.

배지 레이블이 전달하는 정보가 특정 색상이 가진 일반적인 의미 체계와 일치하는 경우, 적절한 색상의 사용은 사용자가 더 빠르게 정보를 처리하는 데 도움된다(예 - 중요, 경고, 반대와 같은 정보에 빨간색 사용). 그러나 과도한 색상 사용은 오히려 사용자의 주의를 분산시킬 수 있다.

배지를 대화형 요소로 사용하지 않는다.

배지를 대화형 요소로 마크업(<a>, <button> 등) 또는 역할(role=link, role=button 등)을 부여하거나 부적절한 속성(0 이상의 속성값을 가진 tabindex 속성)을 적용하여 키보드 사용자, 스크린 리더 사용자가 배지의 용도와 목적을 혼동하지 않도록 해야 한다.

하나의 요소에 한 개의 배지를 사용한다.

배지는 사용자가 빠르게 정보를 훑어 보는 과정을 돕기 위해 사용된다. 만약 한 항목에 여러 개의 배지가 사용된다면 지나치게 많은 정보가 강조되어 있어 배지의 사용 효과를 감소시킨다. 배지는 데이터와 관련된 가장 중요한 특성을 표현하는 데 한 번만 사용하는 것이 적절하다.

배지의 배경색으로 서비스의 주조색을 사용하지 않는다.

배지의 배경색으로 주조색(Primary color)을 이용하게 되면 사용자는 배지를 버튼으로 오인할 수 있다.