안드로이드 앱 성능을 최적화 하는 방법 - (1) Render

다음은 Udacity의 Android Performance 강의를 듣고 정리한 내용이다.

안드로이드 앱 성능은 가장 중요하다! 유저들은 앱이 느리거나 1초라도 버벅되면 당장 앱을 삭제할 수도 있다.

그건 그 사람들의 인내심이 없기 때문이아니라 앱을 애초에 잘못만든 탓이다.

나는 내 앱의 성능을 최적화하고 유저들에게 원활한 사용 경험을 제공하기 위해 강의를 수강했다.

첫번째 섹션은 Render 부분이다.

안드로이드 기기의 CPU는 그려야 할 것들을 GPU로 보내

GPU에게 이러 이러한 것들을 그리라고 명령한다.

GPU는 drawable에 있는 파일들을 래스터화 시켜 그림을 그린다.

Overdraw

이럴때 발생할 수 있는 성능 낭비는 Overdraw가 있다.

글자 그대로, 과잉으로 그림을 그린 것이다.

태극기의 태극 문양을 그린다고 해보자.

overdraw는 태극 문양을 표현하기 위해 파란색 원을 그리고 그위에 빨간색 반쪽 쉼표모양을 덧칠한다.

overdraw가 아닌 방식은 태국 문양을 표연하기 위해 파란색 반쪽 쉼표모양을 그리고, 반대편에 빨간색  반쪽 쉼표모양을 그리는 것이다.

태극문양 그리기에서도 알 수 있듯 overdraw는 그림을 그리는 시간도 늘어나고, 물감의 소비도 많다.

안드로이드 앱 내에서도 overdraw를 줄이려 노력해야 한다.

앱에 있는 Overdraw를 확인하는 방법

1) 설정 - 개발자 옵션 - GPU 오버드로 켬

Overdraw보기 옵션을 켜자마자 괴상하게 변하는 디스플레이에 당황하지 말기...ㅋㅋㅋㅋ

그러고 나서 앱을 켜서 화면을 보면 Overdraw가 심하게 일어나는 부분이 빨갛게 보인다.

한 번만 렌더링된 픽셀은 원래의 색으로 보이지만, 한 번 두번 덧칠되면 그 심각성에 따라 위 사진 처럼 단계별로 틴트되어 표시된다.

나도 내 앱을 켜서 Overdraw가 있는지 살펴봤는데...왜 전부다 원래의 색으로 보이는지 모르겠다...

Overdraw가 없을리가 없는데 ㅋㅋㅋ 아시는 분 답변 부탁드립니다..

Overdraw를 줄이는 방법은 xml에서와 안드로이드에서 제공하는 Cavas 를 사용해 줄이는 방법 2가지가 있다.

xml에서 쓸데없는 background 값 삭제

당신의 앱 화면을 구성하는 layout xml 파일에서 쓸데없이 있는 background 값은 없는지 살펴보라.

xml 계층이 LinearLayout > LinearLayout2 > TextView, ImageView 이런식으로 되어 있다면

흰 화면을 표현하기 위해 제일 바깥 LinearLayout에 background 값을 #FFF(흰색)으로 주었다면

LinearLayout2나 TextView 또는 ImageView 안에서 background 값을 #FFF로 주는 것은 Overdraw다.

Canvas의 clipRect와 quickReject 활용하기

커스텀 뷰가 Canvas.onDraw()를 오버라이드 하고 있지 않다면 

그릴 필요가 없는 구역을 clipRect와 quickReject를 이용해 직접 지정해 줄 수 있다.

위의 사진과같이 카드를 여러장 겹쳐 놓는 View에서는 이러한 메소드를 이용해 그려지지 않아도 될 부분을 지정해주면 좋다.

CANVAS에 대한 API 문서 : https://developer.android.com/reference/android/graphics/Canvas.html

xml 계층 구조를 단순화, 평면화 하기

이 방법은 Overdraw와는 관련 없지만 레이아웃을 최적화하는 방법이다.

복잡하지 않게 짜여진 뷰는 렌더링하는데 시간이 덜 걸린다.

앞선 예제에서 설명한 LinearLayout > LinearLayout2 > TextView, ImageView 계층은 중첩된(Nested) 구조로 되어있다.

하지만 이럴경우에 대부분 RelativeLayout > TextView, ImageView 이렇게 단순화, 평면화 가능하다.

RelativeLayout을 최대한 활용하여 앱 레이아웃 구조를 단순화 시키면 성능향상에 큰 도움이 된다.