brunch

You can make anything
by writing

C.S.Lewis

by 이승현 Jan 31. 2017

안드로이드 개발자 옵션 렌더링 #01

레이아웃 범위 표시, GPU 오버드로 디버깅, 오버드로 줄이기

레이아웃은 사용자 인터페이스에 대한 시각적 구조를 정의합니다.

이 레이아웃을 선언하는 방법은 크게 두 가지입니다.


UI 요소를 XML로 선언
Android는 위젯과 레이아웃 등과 같이 View 클래스와 서브클래스에 해당하는 간단한 XML 어휘를 제공합니다.

런타임에 레이아웃 요소 인스턴스화
애플리케이션이 프로그래밍 방식으로 View 및 ViewGroup 객체를 만들고 속성을 조작할 수 있습니다.


1. 레이아웃 범위 표시


이 두 가지 방법을 이용해 레이아웃을 구성해도 실제 결과물은 예상과 다르게 나오는 경우가 있습니다.

레이아웃 구성을 잘못했거나, 코딩 실수 혹은 안드로이드 기기 특성 등 다양한 이유에 의해서 나타나는 데,


"개발자 옵션 - 레이아웃 범위 표시" 기능을 통해 쉽게 확인할 수 있습니다.



직접 개발한 앱의 레이아웃 구성뿐만 아니라, 모든 앱의 레이아웃 구성을 볼 수 있기 때문에 유사한 UI를 가진 다른 앱은 어떻게 구성했는지도 파악할 수 있습니다.



예전에는 이 기능을 왜 몰랐을까 싶었는데 찾아보니 개발자 옵션은 OS 4.2 이상부터 지원하는 기능네요.




2. GPU 오버드로 디버깅


앱은 하나의 프레임 내에서 화면의 픽셀을 두 번 이상 그릴 수 있습니다. 이를 오버드로라고 합니다.


https://www.youtube.com/watch?annotation_id=annotation_2234848995&feature=iv&index=2&list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE&src_vid=wIy8g8yNhNk&v=T52v50r-JfE


레이아웃 구성이 복잡하고 많아지면 오버드로가 발생할 수 있습니다.

예를 들어 상황에 따라 숨겨져야 하는 UI의 경우 실제로 사용자 눈에 보이진 않지만, 시스템은 페인터의 알고리즘에 따라 렌더링 되기 때문에 숨겨진 UI도 그려야 합니다.

오버드로는 메인 스레드(UI 스레드)에서 픽셀들을 렌더링 하는데 부하를 주고 이로 인해 앱이 느려지게 됩니다.


결국 레이아웃을 최적화시켜 오버드로를 줄여야 합니다.


"개발자 옵션 - GPU 오버드로 디버깅"을 통해 오버드로를 확인할 수 있습니다.




오버드로를 아래와 같이 색상으로 시각화해서 표시해 줍니다.


True color : No overdraw

Blue : Overdrawn once

Green : Overdrawn twice

Pink : Overdrawn three times

Red : Overdrawn four or more times


#01 Overdraw 색상


유튜브에서도 빨간색 오버르도가 있듯이, 일부 레이아웃은 구성함에 있어 어쩔 수 없는 면이 있지만 구글에서는 이를 지양하기 권장합니다.


https://developer.android.com/studio/profile/dev-options-overdraw.html




아래와 같이 "레이아웃 범위 표시, GPU 오버드로 디버깅"을 동시에 사용할 수 도 있습니다.





3. 오버드로 줄이기


불필요한 레이아웃 배경 제거

기본적으로 레이아웃(layout)에는 배경이 없으므로 아무것도 렌더링 하지 않습니다. 그러나 레이아웃에 배경이 있으면 오버드로를 발생시킬 수 있습니다.

따라서 레이아웃의 불필요한 배경을 제거하는 것만으로 렌더링 성능을 향상할 수 있습니다.


뷰 계층 단순화

많은 뷰들을 쌓고 겹쳐서 구성하면 미려한 디자인을 쉽게 만들 수 있습니다.

하지만 이는 오버드로를 발생시켜 성능이 저하될 수 있습니다.

- 불필요한 중첩된 레이아웃 수정

- <merge>, <include> Tag 이용하기

- 경우에 따라서는 기존의 복잡한 뷰 계층을 수정하지 못할 수 있습니다. 이럴 때는 전혀 다른 유형의 레이아웃으로 바꿔서 해결할 수 있습니다. 예를 들어 N버전의 ConstraintLayout  클래스는 RelativeLayout과 비슷한 기능을 하지만 상대적으로 더 가볍습니다.



투명성(transparency) 줄이기

알파 렌더링이라고 알려진 투명 픽셀의 화면 렌더링은 오버드로의 주요 원인입니다.

기존 렌더링 방식과 달리 투명 객체를 그리는 방식은 내부적으로 다르게 처리하기 때문입니다.

투명한 애니메이션, fade-outs, drop shadows 같은 시각적 효과는 모두 투명성을 포함하므로 과도하게 오버드로를 발생시킬 수 있습니다.

결국 투명한 객체의 수를 줄임으로써 렌더링 성능을 향상할 수 있습니다.

자세한 내용은 아래 영상에서 확인할 수 있습니다. 

(뷰가 두배 더 빠르게 그려져도 전체적인 앱 실행 속도는 올라갈 수도 있고 아닐 수도 있다네요ㅠ)


https://www.youtube.com/watch?v=wIy8g8yNhNk


https://developer.android.com/topic/performance/rendering/overdraw.html




오버드로에 대해 가볍게 생각하고 글을 쓰다보니 생각보다 방대하고 신경쓸 부분이 많네요.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari