[Android] GPU 오버드로 디거깅을 통한 UI 최적화

[GPU 오버드로란?]
오버드로란 앱의 겹쳐진 레이아웃 횟수를 표시해주는 기능입니다. 많은 레이아웃으로 구성된 UI는 픽셀들을 렌더링하는데 부하를 발생시켜 앱이 느려지게 됩니다. 그래서 UI 디자인 시, 레이아웃을 최적화시켜 불필요하게 그려지는 오버드로(픽셀)를 줄여야 합니다.

 

개발자 옵션에서 GPU 오버드로 디버깅을 활성화하면 몇 개의 레이어로 겹쳐서 UI를 구성했는지 확인할 수 있습니다. 

- No overdraw
- Blue : 1X Overdraw
- Green : 2X Overdraw
- Pink : 3X Overdraw
- Red : 4X+ Overdraw

 

 

 

 

구글에서는 최대한 Red는 없게 구성하라고 제안하고 있어요. 하지만 여러 앱들을 확인해보면 Red 영역을 많이 확인할 수 있어요. 심지어 구글의 유튜브에서도 Red영역이 보입니다. UI 구조상 어쩔 수 없는 부분은 빈번하게 발생되는 것 같아요. 그래도 오버로드 개념을 알고 있는 상태에서 디자인하는 것과 모르고 디자인하는 것은 하늘과 땅 차이인 것 같아요.

 

특히 우리나라처럼 인터넷 속도가 빠른 나라는 체감을 못하겠지만 글로벌 서비스로 인터넷이 느린 나라에서는 확실히 효과를 볼 수 있을 것 같아요. 

 

[오버드로 줄이기]

- 불필요한 배경 제거

- UI 레이어 단순화

 

 

 

 

[GPU 오버드로 디버깅하는 방법]

GPU 오버드로 디버깅을 하기 위해서는 먼저 개발자 옵션을 활성화해야 합니다.

(구글에 자신의 디바이스명+개발자 옵션이라고 검색하면 쉽게 방법을 알 수 있어요)

 

활성화 방법 : 개발자 옵션 > GPU 오버드로 디버깅 > 오버드로 영역 표시

 

[오버드로로 바라본 디자이너와 개발자의 UI에 대한 시각 차이]

2021/03/03 - [소소한 생각] - UI에 대한 디자이너와 개발자의 시각 차이

UI에 대한 디자이너와 개발자의 시각 차이