5.4.4 콘텐츠 간의 구분

요구 사항

앱을 구성하는 모든 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 합니다. 구분 방법의 예는 다음과 같습니다.

• 테두리 사용
• 콘텐츠 사이에 구분선 삽입
• 서로 다른 무늬 사용
• 콘텐츠 배경색 간 명도대비(채도)를 다르게 함
• 줄 간격이나 글자 간격 조절
• 기타 시각적으로 구분할 수 있는 방법

개정 내역: 2025년 개정에서 새로 추가된 검사 항목입니다.

WCAG에는 같은 내용의 A·AA 기준이 없으며, 표준 대응표는 AAA 기준인 1.4.8(시각적 표현)에 대응시킵니다.

왜 필요한가요

이웃한 콘텐츠 사이에 경계와 간격이 있으면 저시력인과 인지장애인이 내용을 구분하기 쉽고, 터치스크린에서도 콘텐츠를 식별하고 조작하기 쉽습니다.

도움받는 사용자

• 저시력인
• 인지장애인
• 고령자

적용 방법

목록 항목 사이에는 구분선이나 여백을, 카드에는 테두리나 배경색 차이를 둡니다.

LazyColumn {
    items(posts) { post ->
        PostRow(post, Modifier.padding(vertical = 12.dp))
        HorizontalDivider()   // 항목 간 구분선
    }
}

List(posts) { PostRow(post: $0) }   // 기본 구분선 유지
    .listStyle(.insetGrouped)

사례

공지1 제목공지1 날짜공지2 제목공지2 날짜 (여백·구분선 없음)

자주 하는 실수

• 목록 항목이나 카드 사이에 여백, 구분선, 배경 차이가 없어 경계를 알 수 없습니다.
• 구분선의 대비가 너무 낮아 사실상 보이지 않습니다.

검사 방법

• 주요 화면에서 이웃한 콘텐츠(목록 항목, 카드, 영역)가 테두리, 구분선, 배경색, 간격 등으로 시각적으로 구분되는지 눈으로 확인합니다.

다른 지침의 대응 항목