5.4.7 리플로우

요구 사항

콘텐츠는 화면 크기에 따라 손실 없이 표시되어야 합니다. 화면을 확대하거나 크기를 조정하더라도 가로·세로 양방향으로 스크롤할 필요 없이 콘텐츠를 읽고 이용할 수 있어야 합니다.

예외 — 사용상 또는 의미상 2차원 레이아웃이 필요한 콘텐츠(예: 지도, 다이어그램, 비디오, 게임).

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

왜 필요한가요

텍스트를 크게 확대해 쓰는 저시력 사용자가 여러 방향으로 스크롤하지 않고도 콘텐츠를 원활하게 읽을 수 있습니다.

도움받는 사용자

• 저시력인
• 고령자
• 작은 화면·분할 화면 사용자

적용 방법

고정 폭 레이아웃 대신 화면 폭에 맞춰 줄바꿈되는 레이아웃을 쓰고, 큰 글꼴·디스플레이 크기 설정이나 분할 화면에서 가로 스크롤이 생기지 않게 합니다.

// 폭이 좁아지면 줄바꿈되는 칩 목록
FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    tags.forEach { AssistChip(onClick = {}, label = { Text(it) }) }
}

// 큰 글꼴에서는 가로 배치를 세로 배치로 전환
@Environment(\.dynamicTypeSize) var size
var body: some View {
    let layout = size.isAccessibilitySize ? AnyLayout(VStackLayout()) : AnyLayout(HStackLayout())
    layout { Text("배송비"); Text("3,000원") }
}

사례

본문 영역 폭 400dp 고정 → 큰 글꼴·디스플레이 크기에서 가로 스크롤 발생

자주 하는 실수

• 본문이나 표를 고정 폭으로 만들어 확대 시 가로·세로 모두 스크롤해야 합니다.
• 큰 글꼴에서 가로로 나란히 놓인 요소가 화면 밖으로 밀려 보이지 않습니다.

검사 방법

• 글꼴 크기와 디스플레이 크기(화면 확대) 설정을 크게 하고, 분할 화면에서도 주요 화면을 확인합니다.
• 지도·게임 등 예외 콘텐츠를 제외하고 양방향 스크롤 없이 읽고 조작할 수 있는지 확인합니다.

다른 지침의 대응 항목