안드로이드를 만들며 12 — 광고 위 여백을 만든 두 겹의 Scaffold

들어가며

Pocket PDF의 설정 화면을 끝까지 내려도 마지막 줄과 광고 사이에 빈 띠가 남았습니다. 간격은 48dp였습니다. 광고 높이가 잘못 잡힌 것인지 확인하려고 먼저 광고 컨테이너를 쟀습니다.

Compose의 Box, AndroidView 안의 FrameLayout, AdView가 모두 1078 × 168 px이었습니다. 세 뷰의 크기는 1픽셀도 다르지 않았습니다. 광고 뷰가 자리를 더 차지한 것은 아니었습니다.

광고 위의 여백은 어디서 왔나

홈·보관함·설정 화면은 MainActivity의 Scaffold 안에 있었습니다. 바깥 Scaffold는 광고와 탭을 담은 하단 바, 시스템 인셋을 반영해 paddingValues를 내려보냈습니다.

안쪽 화면도 자체 Scaffold를 사용했습니다. 그런데 바깥에서 받은 공간을 적용한 뒤에도 안쪽 Scaffold가 기본 시스템 인셋을 다시 더하고 있었습니다. 설정 화면의 48dp는 의도한 여백 24dp에 하단 인셋 24dp가 겹친 값이었습니다.

광고 안의 빈 공간은 별개였습니다. 당시 테스트 광고는 320 × 50 크기여서 64dp 높이의 광고 칸을 채우지 않았습니다. 그 안에 남은 11dp와, 설정의 마지막 줄 아래에 추가된 24dp를 구분해야 했습니다.

안쪽 Scaffold의 시스템 인셋을 껐습니다

홈·보관함·설정의 Scaffold에 다음 설정을 추가했습니다. 바깥에서 이미 처리한 시스템 인셋을 안쪽에서 다시 적용하지 않도록 한 것입니다.

Scaffold(
    // topBar와 containerColor 등 기존 설정은 유지
    contentWindowInsets = WindowInsets(0, 0, 0, 0),
) { paddingValues ->
    // 화면 콘텐츠
}

각 화면의 상단 바는 그대로 두고 싶었으므로 안쪽 Scaffold는 남겼습니다. 시스템 인셋만 바깥에서 한 번 처리하게 했습니다.

수정한 뒤 에뮬레이터에서 설정 화면을 다시 쟀습니다. 마지막 줄과 광고 사이가 48dp에서 24dp로 줄었습니다. 남은 24dp는 화면에서 의도한 여백이어서 그대로 뒀습니다.

빈 화면의 가운데 정렬도 따로 확인했습니다

보관함의 빈 상태가 위로 치우친 데에도 중복 인셋이 영향을 주고 있었습니다. 다만 인셋을 고치는 것만으로 정렬 문제가 모두 끝나지는 않았습니다.

보관함은 빈 상태를 LazyColumn의 첫 항목으로 넣어 위에서부터 쌓고 있었습니다. 분할 화면은 세로 스크롤 안에서 weight와 Arrangement.Center로 가운데를 잡으려 했습니다. 스크롤 영역은 높이의 제약이 달라 같은 방식이 통하지 않았습니다.

두 화면의 빈 상태를 목록·스크롤 밖으로 꺼내고, 남은 공간을 채우는 Box 안에 가운데 정렬했습니다.

마치며

중복 인셋을 끄자 설정 화면의 간격은 48dp에서 의도한 24dp로 줄었습니다. 빈 상태의 정렬은 목록과 스크롤 밖에서 따로 고쳤습니다. 처음에 재 봤던 광고 뷰의 크기는 바꾸지 않았습니다.