본문 바로가기

안드로이드 개발

Android 개발에서 Edge-to-Edge란?

반응형

Edge-to-Edge는 앱의 콘텐츠가 시스템 바(상태 바, 네비게이션 바) 영역까지 확장되어, 디스플레이의 끝에서 끝까지(Edge to Edge) 화면 전체를 활용하는 UI 방식을 의미합니다. 즉, 기존에는 시스템 UI가 차지하던 영역까지 앱 콘텐츠가 표시되어 더 넓은 화면과 몰입감 있는 사용자 경험을 제공합니다^1^5.


왜 Edge-to-Edge가 중요한가?

  • 화면 공간 최대 활용: 시스템 바 영역까지 콘텐츠를 표시해, 사용 가능한 화면을 극대화합니다.
  • 몰입감 있는 UX: 앱과 시스템 UI가 자연스럽게 통합된 느낌을 주며, 최신 트렌드에 부합하는 디자인을 구현할 수 있습니다.
  • 필수 적용: Android 15(API 레벨 35) 이상을 타겟팅하는 앱은 Edge-to-Edge가 기본적으로 적용됩니다. targetSdkVersion을 35 이상으로 올릴 경우 반드시 대응해야 합니다^1^4.

Edge-to-Edge 적용 방법

1. Android 15(API 35) 이상

  • targetSdkVersion이 35 이상이면 Android 15 이상 기기에서 자동으로 Edge-to-Edge가 활성화됩니다^1.

2. 하위 버전 호환 (Android 14 이하)

  • androidx.activity 라이브러리의 enableEdgeToEdge() 확장 함수를 사용하면 쉽게 적용할 수 있습니다^2^7.

build.gradle에 의존성 추가

dependencies {
    implementation("androidx.activity:activity-ktx:1.9.3")
}

Activity에서 적용

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge() // 시스템 바를 투명하게 만듦
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
}
  • 이 함수는 시스템 바를 투명하게 만들어주며, 3버튼 내비게이션 모드에서는 상태 바에 반투명 스크림이 자동 적용됩니다^1^5.

Edge-to-Edge 적용 시 주의사항

시스템 바와 콘텐츠 겹침(Overlap) 처리

  • Edge-to-Edge를 적용하면 앱의 콘텐츠가 시스템 바와 겹칠 수 있습니다.
  • 대표적으로 Floating Action Button(FAB), Bottom Navigation Bar, Top AppBar 등이 시스템 바와 겹쳐 터치 영역이 침범당할 수 있습니다^1^7.

Insets 활용

  • Insets는 시스템 UI가 차지하는 영역 정보를 제공합니다.
  • 시스템 바 영역만큼 뷰에 패딩을 주거나, 필요한 뷰에만 Insets을 적용해 겹침 현상을 방지할 수 있습니다^1^7.
// 예시: 시스템 바 인셋만큼 패딩 적용
ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->
    val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
    v.setPadding(0, systemBarInsets.top, 0, systemBarInsets.bottom)
    insets
}
  • Material Components를 사용한다면, 대부분의 컴포넌트가 자체적으로 Insets을 처리하므로 추가 작업이 최소화됩니다^1.

결론

Edge-to-Edge는 현대 안드로이드 앱 개발에서 필수적인 기술로 자리 잡고 있습니다. 화면 공간을 극대화하고, 몰입감 있는 UI를 제공하며, Android 15 이상에서는 강제 적용되므로 반드시 대응이 필요합니다. 적용 방법은 간단하지만, Insets를 통한 겹침 처리 등 세부적인 UI 조정이 중요합니다.

화면의 공간을 최대한 활용하므로 유저들에게 더 몰입감 있는 경험을 제공할 수 있으며, 앱의 콘텐츠와 시스템 UI가 더 통합된 느낌을 줘요.
— GC컴퍼니 Tech Blog^4


참고자료

반응형