안드로이드 앱 성능 최적화 – 2. 최적의 레이아웃 구성 확인방법



안드로이드 플랫폼이 국내에 출시 된지도 약 3년이라는 시간이 지났습니다. 개발자들도 많은 경험이 축척되면서 앱의 퀄리티는 점점더 높아지고 있으나, 아직 해외 만큼의 퀄리티를 가진 국내앱은 손에 꼽힐 정도라고 생각합니다. 이런 퀄리티 높은 앱을 개발하기위해 좀 더 성능을 높이는 방법에 대해 소개 하기위해 “안드로이드 앱 성능 최적화”라는 주제를 가지고 연제글을 쓰게 되었습니다.

안드로이드 앱 성능 최적화 – 2. 최적의 레이아웃 구성확인 방법

레이아웃이 그려지기 위해서는 Main Thread에서 xml의 레이아웃을 파싱해서 해당 View를 그립니다. 레이아웃의 구조가 많거나 복잡하면 그리는 시간이 오래 걸리기때문에 사용자들은 반응이 느리다라고 느끼게 됩니다. 앱이 좀더 빠르게 작동되도록 하기위해서 레이아웃 구조 최적화는 필수 요소입니다.

최적화된 레이아웃인지 확인 하는 방법중 안드로이드 4.2부터 개발자 옵션에 불필요하게 드로잉 되는 영역을 알려주는 기능이 있습니다. Show GPU overdraw를 활성화 한다음 앱을 실행하면 드로잉 횟수를 색상으로 표현 해줍니다.

Blue 1번 

Green 2번 

Light Red 3번

Dark Red 4번 이상

구글에서는 Light Red인 3번 정도까지는 무리 없으며 Dark Red는 최대한 없게 만들어라고 제안해주고 있습니다. 

여기에서 Draw되는 영역은 테마의 윈도우 배경도 포함 됩니다.

레이아웃에서 특별히 배경을 따로 주었다면 테마의 윈도우 배경은 android:background=”@null”을 주어 없애도록 합시다. 간혹 android:background=”@android:color/transparent”를 주는 경우가 있는데 눈에는 보이지 않지만 실제 내부적으로 draw하게 되니 @null로 주어 그려지지 않게합시다.

이렇게 가이드라인이 잘 지켜지고 있나 보기위해 몇개의 앱을 실행 해보았습니다.

구글에서 만든 앱인 구글 플레이와 구글 플레이어를 실행 해보았습니다. 빨강색은 거의 찾아 볼수 없을 정도로 최소한으로 그려지게 레이아웃을 구성 한것을 볼 수있습니다. 

해외 유명한 앱들도 테스트 해보면, 빨강색이 거의 찾아 볼 수 없을 정도로 최적화된 레이아웃을 구성하고 있습니다.

국내 유명한 앱들도 테스트를 해보니, 빨강색이 아닌 부분을 찾아 볼 수가 없습니다. 필요이상으로 draw되고 있다는 것을 보여주고 있습니다.

이런식으로 Over Draw가 되는 곳에는 레이아웃을 단순하게 정리해야 될 필요가 있다는 것을 확인 해보 실수 있습니다.

다음 시간에는 이런 Over Draw된 영역을 어떤식으로 최적의 레이아웃을 구성하는지에 대해 알아보겠습니다. 

<

p style=”text-align: left; clear: none; float: none; “> 

  




안드로이드 앱 개발자가 제안하는 디자인 방법론 – ANDROID UI TIPS

안드로이드 앱 개발자가 제안하는 디자인 방법론 – ANDROID UI TIPS



1. 특정 해상도의 기준을 잡아 디자인을 하되, 보이는 것이 다가 아님을 주의하라.


안드로이드 기기는 다양한 해상도를 지원한다. 특정 해상도를 잡아서 작업을 하지만 실제 단말에서는 그 해상도를 사용 하는 사람은 많아야 20% 일것이다. 

항상 해상도보다 더 작거나 더 큰 경우가 있다는것을 생각 하고 디자인 하라.





2. 안드로이드 특성상 메뉴버튼과 백버튼은 하단에 위치 한다. 


하단에 하드웨어 방식뿐만 아니라 소프트웨어 방식의 버튼이 존재 한다는것을 기억하라. 소프트웨어 버튼일 경우 하단에 또다른 버튼을 배치 한다면 2단의 버튼이 생성되어 오작동을 불러 일으킬 수 있다.




3. 터치한 영역을 사용자에게 재확인 시켜라.


모바일 특성상 웹과는 다르게 화면이 작다. 사용자가 특정 콘텐츠를 눌렀으면 눌렀다는것을 확인 시켜줘야 한다. 터치한 버튼의 액션에 대한 Pressed이미지를 준비하라.






4. 이미지 파일 사이즈(용량)를 확인 하라.


안드로이드는 JAVA에 의해 구동된다. JAVA특성으로 인해 메모리 관리가 생각 보다는 힘들다. 예를 들어 4x4사이즈의 나인패치 이미지가 10KB씩 큰경우가 있다. 보통 1KB에 비해 10배나 커지게 된다. 이런 사이즈가 커질수록 메모리를 많이 잡아 먹게 되어 결국 성능저하, 누적되면 앱이 죽을 수도 있다.

 

 

 

 

 

5. UI 가이드의 dip단위 또는 이미지 크기는 짝수를 사용 하라.


dip단위는 px변환 과정에서 정수가 아닌 소수가 나올 수 있기때문에 화면에 디스플레이하는데 오차가 발생 하게 된다. 이런 오차를 최대한 줄이기 위해서는 특별한 경우가 아니라면 짝수 크기를 사용하라.

 

 

6. UI 가이드 라인작성시 절대적인 수치보다, 상대적인 표현을 하라.


해상도 별로 DIP이 다르기 때문에 절대적인 수치는 화면이 짤리거나, 줄어들 수 있다. 유동적이라는 생각으로 상대적인 표현으로 가이드하라. 단, 마진이나 패딩은 제외.