Android edge-to-edge UI는 화면을 더 넓게 쓰기 위한 변화처럼 보이지만, 실제 구현에서는 status bar, navigation bar, WindowInsets 처리가 함께 따라옵니다.
핵심은 콘텐츠를 시스템 바 뒤까지 확장하되, 가려지면 안 되는 UI에는 적절한 inset을 적용하는 것입니다. 이 기준을 놓치면 버튼이 navigation bar에 붙거나, 상단 제목이 status bar에 가려질 수 있습니다.
Android edge-to-edge UI 빠른 기준
edge-to-edge는 전체 화면 모드와 다르다
Android Developers의 edge-to-edge 문서는 앱 콘텐츠가 system bars 뒤에 그려질 수 있도록 구성하는 흐름을 설명합니다. 이것은 무조건 status bar와 navigation bar를 숨기는 전체 화면 모드와 다릅니다.
시스템 바는 남아 있을 수 있고, 콘텐츠만 그 아래까지 확장됩니다. 그래서 화면은 넓어 보이지만, 중요한 UI가 시스템 바와 겹치지 않게 여백을 조정해야 합니다.
WindowInsets는 가려지는 영역을 알려주는 신호다
WindowInsets는 status bar, navigation bar, ime처럼 시스템 UI가 차지하는 영역을 앱이 알 수 있게 해줍니다. Compose에서는 insets 문서가 system bars와 IME에 맞춰 padding을 적용하는 방식을 설명합니다.
Scaffold(
modifier = Modifier.fillMaxSize()
) { innerPadding ->
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
.consumeWindowInsets(innerPadding),
contentPadding = WindowInsets.navigationBars.asPaddingValues()
) {
items(messages) { message ->
MessageRow(message)
}
}
}중요한 점은 padding을 어디서 한 번 적용했는지 추적하는 것입니다. Scaffold가 준 padding과 navigationBars padding을 무심코 중복 적용하면 화면 아래쪽 여백이 과하게 커질 수 있습니다.
Compose에서 자주 생기는 실수
- Scaffold의 innerPadding을 무시해서 하단 content가 navigation bar에 가려진다.
- systemBarsPadding과 contentPadding을 여러 곳에 중복 적용한다.
- LazyColumn 마지막 item이 navigation bar 뒤에 숨어도 테스트 화면에서는 놓친다.
- IME가 올라올 때 입력창과 키보드 사이의 inset 처리를 따로 확인하지 않는다.
XML/View 시스템에서는 fitsSystemWindows를 다시 봐야 한다
기존 XML 기반 화면에서는 fitsSystemWindows나 ViewCompat의 WindowInsets listener를 사용해 inset을 처리할 수 있습니다. Compose와 XML을 섞는 앱이라면 어느 층에서 inset을 소비했는지 더 조심해야 합니다.
ViewCompat.setOnApplyWindowInsetsListener(root) { view, insets ->
val bars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
view.setPadding(bars.left, bars.top, bars.right, bars.bottom)
insets
}이 코드는 개념 예시입니다. 실제 앱에서는 root 전체에 padding을 줄지, toolbar와 bottom bar 같은 특정 영역에 줄지 화면 구조에 따라 달라집니다.
스크롤 화면에서는 마지막 item이 navigation bar 뒤로 숨지 않는지도 함께 봐야 합니다. 리스트 상태와 item identity는 Compose LazyColumn key 글에서 다룬 안정성 문제와도 연결됩니다.
디자인과 개발이 같이 확인해야 할 것
- 상단 앱바 제목이 status bar와 겹치지 않는가?
- 하단 버튼이 gesture navigation 영역에 너무 붙지 않는가?
- 스크롤 마지막 item이 navigation bar 뒤에 숨어도 사용자가 접근할 수 있는가?
- 키보드가 올라올 때 입력창과 버튼이 자연스럽게 올라오는가?
- 밝은/어두운 테마에서 system bar icon 대비가 충분한가?
정리
Android edge-to-edge UI는 화면을 넓게 쓰는 장식 설정이 아닙니다. 시스템 바 뒤까지 콘텐츠가 확장되는 만큼, WindowInsets를 기준으로 안전한 영역을 직접 설계해야 합니다. Compose에서는 Scaffold padding, WindowInsets, LazyColumn contentPadding의 적용 위치를 확인하고, XML/View에서는 fitsSystemWindows와 WindowInsets listener 경계를 확인해야 합니다.
