목록은 의미적으로 관련 있는 다수의 데이터를 연속적으로 배열한 색인이다. 사용자는 목록에서 특정한 항목을 찾고 항목과 관련된 기능을 수행한다. 사용자가 목록에서 원하는 정보를 효과적으로 탐색할 수 있도록 목록의 항목은 일관성 있는 형식과 배치를 유지하고 논리적 순서에 따라 배열되어야 한다.
이 페이지의 구성
표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다.
아코디언은 한 화면에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현된다.
구조화 목록은 유사하거나 관련된 콘텐츠 집합을 표현하기 위한 형식으로 목록에 제공된 데이터에 대한 상세 정보 탐색 수단 또는 관련 기능 실행 수단으로 활용된다.
중요한 항목은 목록의 상단에 배치한다.
사용자는 목록의 좌측 상단 영역에 먼저 주의를 기울인다. 그러므로 먼저 보여주어야 할 중요한 내용은 좌측 상단에 배치한다.
항목을 의미 있는 단위로 구분하고 논리적인 순서에 따라 정렬한다.
논리적인 순서에 따라 정렬하면 사용자가 내용을 빠르게 훑어보고 쉽게 이해할 수 있다.
항목을 명확하게 구분한다.
목록을 구성하고 있는 항목들이 서로 명확하게 구분될 수 있도록 항목 간에 충분한 간격을 제공해야 한다. 필요한 경우 구분선을 사용하거나 항목 컨테이너에 테두리, 배경색을 표현할 수 있으나 목록 유형, 데이터 복잡성에 따라 시각적 복잡성을 증가시킬 수 있으므로 유의한다.
강조를 위한 시각적 표현을 과도하게 사용하지 않는다.
아이콘, 배지, 태그 등의 컴포넌트를 적절하게 사용하면 사용자의 효율적인 정보처리를 도울 수 있지만 지나치면 오히려 주의가 분산될 수 있다.
긴 목록은 페이지 등으로 단위를 나누어 제공한다.
긴 목록은 페이지로 구분하는 등 적절하게 단위를 나누어, 한 번에 지나치게 많은 정보를 제공하지 않아야 한다. 긴 화면을 스크롤 하는 것보다 페이지네이션을 이용하여 분할된 화면을 탐색하는 것이 더욱 효과적이다. 페이지네이션이 포함된 긴 목록은 사용자들이 다음 행동을 결정하기 위해 각 항목에 제공되는 정보를 확인하고 비교할 수 있도록 최소 10개 이상의 항목을 기본으로 표시해야 한다.
필터링 또는 검색 기능을 제공한다.
항목 개수가 많은 경우, 페이지네이션만으로 정보를 탐색하는 데 한계가 있으므로 필터링이나 검색 기능을 제공하여 빠른 내용 탐색이 가능하도록 만들어야 한다.
정보 전달을 위해 아이콘 이미지를 사용하는 경우 대체 텍스트를 제공한다.
공지사항, 새 게시글, 공유 등 정보를 표현하기 위해 사용되는 아이콘 이미지에는 적절한 텍스트를 제공하여 보조 기술 사용자가 이미지의 의미를 이해할 수 있도록 해야 한다.
첨부파일 아이콘 이미지에 적절한 대체 텍스트를 제공한다.
목록에서 직접 다운로드 할 수 있는 첨부파일을 아이콘 이미지로 표시한 경우, 아이콘 이미지의 대체 텍스트는 정확한 첨부파일 명으로 제공해야 한다.
시각적으로 표현된 데이터의 구조 정보가 프로그램적으로 전달되도록 한다.
스크린 리더 사용자가 목록형 정보임을 인지하고 각 항목이 포함하고 있는 세부 정보의 논리적 구성을 이해할 수 있도록 목록 관련 컴포넌트 가이드라인을 참조하여 적절한 마크업을 사용한다.
| 변경일자 | 변경 내용 | 리소스 |
|---|---|---|
| 2025년 1월 15일 |
|