배너는 중요한 정보를 사용자의 눈에 띄는 방식으로 제공해야 하는 경우에 사용합니다.
Usage
조건, 상태, 공지 등의 중요한 정보를 알리고 싶을 때 사용합니다.
•
섹션 헤더 아래 또는 페이지 최하단에 배치하여 사용합니다.
•
한 페이지에는 하나의 배너만 사용합니다.
•
목적에 따라 형태를 달리하여 사용할 수 있습니다.
Variants
Layer banner
페이지 섹션 헤더 아래에 레이어 팝업 형태로 노출하는 배너입니다.
보통 이미지를 함께 사용하며 여러 개의 배너를 캐러셀(carousel) 형태로 사용할 수 있습니다.
1.
Header
닫기 버튼을 배치합니다. 필요에 따라 로고 등을 위치하여 사용할 수 있습니다.
2.
Body
내용 영역에는 사용자 컨트롤 요소를 사용할 수 있습니다.
3.
Button
링크나 다른 피드백 구성요소를 호출할 수 있습니다.
다른 구성요소를 호출 할 때는 해당 배너는 닫습니다.
4.
Carousel
여러 개의 배너를 사용할 때는 캐러셀 형태로 만들어 사용합니다.
시간에 따라 자동 로테이트 기능을 제공하고 현재 배너 화면을 도트의 순서와 맞추어 표시합니다.
5.
Footer
’오늘 하루 그만 보기 기능’을 제공할 경우에 표시합니다.
Text banner
페이지 최하단에 띠 형태로 노출하는 배너입니다. 간단한 텍스트만으로 정보를 전달할 때 사용합니다.
1.
띠 배너 형태로 페이지 최하단에 위치하여 노출합니다. 페이지 위에 띄워 표시합니다.
2.
링크나 다른 피드백 구성요소를 호출하는 버튼을 사용할 수 있습니다.
3.
닫기 버튼을 제공합니다.
Guidelines
배너는 일반적으로 사용자 경험에 좋지 않은 영향을 미칩니다. 최대한 사용을 자제하고 꼭 사용해야 하는 경우에는 다음의 지침을 따릅니다.
•
전체 사이트에 걸쳐 2 페이지 이상 배너를 노출하지 않습니다.
•
한 페이지에 2개 이상의 배너를 사용하지 않습니다.
•
레이어 배너에서 ‘오늘 하루 그만 보기’ 기능은 반드시 제공하고 해당 요소를 클릭하면 바로 배너를 닫습니다.
•
각 화면 중단점에 대응하도록 레이어 배너를 제작해 사용합니다.
•
모바일 환경에서는 띠 배너 사용을 하지 않습니다. 필요한 경우 레이어 배너로 대체하여 사용합니다.
•
경고나 오류 등 부정적인 메시지의 배너는 사용하지 않습니다.
•
사용자의 시간을 낭비하지 않도록 내용은 최대한 간결하게 작성합니다.
Accessibility
저시력 사용자를 위한 컨텍스트를 제공합니다.
•
텍스트 배너의 경우 저시력자나 색맹 사용자가 명확히 인지할 수 있는 색상을 사용해야 합니다.
•
기본적으로 status의 role을 가지며 aria-live 속성을 가집니다.
•
배너 컨테이너는 tabindex=0으로 설정하고 키보드 포커스를 표시합니다.
