모바일 앱에서 Overdraw: 개념, 원인 및 최적화

모바일 그래픽에서 Overdraw란?

Overdraw는 동일한 화면 픽셀이 단일 렌더링 프레임 내에서 여러 번 다시 그려지는 상황입니다. 이상적인 시나리오에서는 각 픽셀이 정확히 한 번만 기록되어야 하지만, 실제 인터페이스에서는 중첩된 View, 배경 이미지 및 투명 레이어로 인해 GPU가 반복적인 쓰기를 수행합니다.

각 추가 다시 그리기는 프레임 렌더링 시간을 증가시킵니다. 표준 60 FPS 속도에서 각 프레임은 약 16.6ms를 받습니다. Overdraw로 인해 이 제한을 초과하면 프레임 속도가 30 FPS 이하로 떨어져 인터페이스의 부드러움이 현저히 저하됩니다.

Google의 Android Performance Patterns에 따르면, 3x overdraw 팩터를 가진 앱은 1x overdraw 앱보다 프래그먼트 셰이더에 3배 더 많은 시간을 소비합니다. 저성능 GPU 장치에서는 스크롤 및 애니메이션 중에 눈에 띄는 지연이 발생합니다.

모바일 개발자에게 overdraw를 이해하는 것은 매우 중요합니다. 이 요소는 많은 수의 중첩 요소가 있는 겉보기에 단순한 화면에서 끊김 있는 스크롤과 낮은 프레임 속도를 가장 자주 유발합니다.

Overdraw가 GPU 성능에 미치는 영향

GPU 파이프라인은 정점 셰이더, 래스터화 및 프래그먼트 셰이더의 여러 단계로 구성됩니다. 프래그먼트 셰이더는 모든 기본 요소의 모든 픽셀에 대해 실행되기 때문에 가장 비용이 많이 드는 부분입니다. 2x overdraw에서 프래그먼트 셰이더는 두 배의 픽셀을 처리하여 프레임 시간이 직접 증가합니다.

Qualcomm Adreno 및 Apple GPU와 같은 최신 모바일 GPU는 Early-Z 테스트 및 Hidden Surface Removal 메커니즘을 갖추고 있어 overdraw를 부분적으로 보상합니다. 그러나 이러한 최적화는 특정 조건에서만 작동하며 하드웨어 가속에만 의존해서는 안 됩니다.

예를 들어, 반투명 요소를 렌더링할 때 하드웨어 Early-Z는 효과적이지 않으며 각 픽셀이 완전히 처리됩니다 — 이러한 시나리오에서 overdraw는 5x 이상에 도달할 수 있습니다.

과도한 다시 그리기의 주요 원인

다중 레이어 배경은 모바일 앱에서 overdraw의 주요 원인 중 하나입니다. Activity나 ViewController가 배경색을 설정하면 각 중첩된 View가 자체 배경을 추가할 수 있으며, 픽셀은 모든 계층 수준에서 다시 그려집니다.

Uber Engineering의 연구에 따르면 Android 앱에서 과도한 배경을 제거하면 overdraw가 32%, 화면 렌더링 시간이 25% 감소했습니다. iOS에서도 비슷한 상황입니다. 불투명 View에 opaque = true를 설정하면 알파 블렌딩이 제거되고 여러 픽셀 쓰기가 방지됩니다.

• 투명 오버레이 — 다른 요소 위에 알파 채널이 있는 요소는 항상 overdraw를 유발합니다.
• ClipChildren=false — 하위 요소의 클리핑을 비활성화하면 보이지 않는 영역이 렌더링됩니다.
• ShapeDrawable 사용 — 단순한 색상 대신 ShapeDrawable을 사용하면 프래그먼트 셰이더의 부하가 증가합니다.
• 과도한 중첩 — 각 View 계층 수준은 잠재적인 다시 그리기 레이어를 추가합니다.

iOS 플랫폼에서는 투명한 UIStackView, shouldRasterize가 있는 CALayer 및 겹치는 UIBlurEffect 사용으로 인해 overdraw가 자주 발생합니다. Apple은 XCode의 Core Animation 도구를 통해 overdraw를 확인할 것을 권장합니다 — 다시 그리기 영역을 빨간색 오버레이로 표시합니다.

Overdraw 진단 방법: 도구 및 방법

Debug GPU Overdraw는 overdraw 팩터에 따라 화면을 다른 색상으로 표시하는 Android 내장 도구입니다. 보라색은 1x, 파란색은 2x, 녹색은 3x, 분홍색은 4x, 빨간색은 5x 이상을 의미합니다. 이상적인 화면은 대부분 보라색이어야 합니다.

iOS에서는 XCode Instruments의 Core Animation 도구로 유사한 진단을 수행합니다. 다시 그리기 영역을 시각화하고 Color Blended Layers 모드에서 픽셀 쓰기의 정확한 수를 표시합니다. 녹색 레이어는 불투명(최적)하고, 빨간색 레이어는 투명도를 포함하여 overdraw를 유발합니다.

• Profile GPU Rendering은 Android에서 렌더링 시간의 히스토그램을 표시합니다. 높은 녹색 막대는 overdraw 문제를 나타냅니다.
• Renderscript는 Android 10+ 장치에서 렌더링 파이프라인을 분석하기 위한 고급 도구입니다.
• Metal Debugger는 XCode에서 각 렌더 패스를 분석하고 프래그먼트 셰이더 호출의 정확한 수를 확인할 수 있습니다.

진단 후 최적화 전후의 FPS를 측정하는 것이 중요합니다. Overdraw를 수정할 때 10–15 FPS의 차이는 목록과 애니메이션이 있는 복잡한 화면에서 정상적인 결과입니다.

모바일 앱에서 Overdraw 최적화 기술

과도한 배경 제거는 가장 간단하고 효과적인 방법입니다. Android에서는 각 View가 아닌 Activity 또는 테마에만 android:windowBackground를 설정하세요. iOS에서는 모든 불투명 UIView에 opaque = true를 설정하면 해당 요소의 overdraw가 거의 0으로 줄어듭니다.

Google I/O 2019에 따르면, Google Maps의 overdraw 최적화는 레이어 병합 및 ClipRect를 사용한 드로잉 영역 제한을 통해 프레임 렌더링 시간을 40% 줄였습니다. Android 개발자를 위해 Google은 다음 방법을 권장합니다:

• ClipRect — Canvas 드로잉 영역을 제한합니다. 가시 영역 밖에 아무것도 없으면 GPU가 리소스를 낭비하지 않습니다.
• ViewStub — 거의 사용되지 않거나 초기 로드 시 보이지 않는 요소에 사용합니다. inflate가 호출될 때만 구성 요소가 렌더링됩니다.
• merge 및 include — View 계층의 깊이를 줄여 렌더 패스 수를 줄입니다.
• 플랫 버퍼 — 중첩된 Layout을 단일 ConstraintLayout 또는 RelativeLayout으로 대체합니다.

iOS에서는 CALayer 구성을 통해 최적화됩니다: masksToBounds = true를 설정하면 레이어 경계를 넘는 콘텐츠가 잘리고, shouldRasterize는 정적 레이어에 대한 비트맵 캐싱을 활성화합니다.

코드 예제: Android 및 iOS에서 Overdraw 제거

Kotlin 및 Swift의 실제 예제를 통해 일반적인 overdraw 제거 시나리오를 살펴보겠습니다. 첫 번째 예제는 Android에서 ClipRect를 통한 최적화를 보여줍니다:

class OptimizedView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onDraw(canvas: Canvas) {
        canvas.clipRect(
            paddingLeft.toFloat(), paddingTop.toFloat(),
            width - paddingRight.toFloat(), height - paddingBottom.toFloat()
        )
        // Draw content only within clipped area
        super.onDraw(canvas)
    }
}

Swift의 두 번째 예제는 요소가 반투명하지 않아야 하는 경우 레이어의 투명도를 비활성화하는 방법을 보여줍니다:

class OpaqueLabel: UILabel {
    override var isOpaque: Bool {
        get { true }
        set { }
    }

    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        super.draw(rect)
    }
}

세 번째 예제는 Android에서 지연된 지도 로딩을 위한 ViewStub 사용을 보여줍니다. ViewStub은 표시될 때까지 렌더링되지 않으므로 화면 초기화 단계에서 overdraw가 제거됩니다:

<!-- layout/activity_main.xml -->
<ViewStub
    android:id="@+id/map_stub"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inflatedId="@+id/map_container"
    android:layout="@layout/map_fragment" />

// Inflate on demand
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()