200819 NAVER TECH CONCERT - 옥수환 100만 달러짜리 빠른 앱을 만드는 비법 전수

2. Naver | 옥수환
100만달러짜리
빠른앱을만드는비법전수

3. 발표자 소개
- 네이버 밴드 안드로이드 앱 개발자
- ‘아키텍처를 알면 앱 개발이 보인다’ 저자
- ‘찰스의 안드로이드’ 블로그 운영
- 핀테크 분야 스타트업 창업 경험
- 6년차 SW 엔지니어

4. 목차
1. 안드로이드 내부에서 일어나는 일들(feat. 렌더링)
2. View의 성능을 끌어올리는 팁
3. 앱 성능을 개선하기 위한 도구

5. 왜 우리는 빠른앱을 만들어야 하는가
앱 사용자의 이탈

6. 왜 내가 만든 앱은 빠르지 않을까?
- 복잡한 기능과 요구사항
- 화려한 디자인
- 애니메이션 기능

7. 아는 만큼 보인다!
OpenGL
Framework
Library
Testing
Java
Algorithm
Fast application…

8. 1.안드로이드내부에서일어나는일들(feat.렌더링)

9. 성능 개선을 위한 렌더링의 이해

10. 성능 개선을 위한 렌더링의 이해
렌더링이란?
하나의 프레임을 그려내는 과정을 의미한다.
프레임이란?
정지된 하나의 화면 또는 이미지

11. 프레임레이트
프레임레이트란?
1초에 볼 수 있는 프레임(이미지)의 갯수, 단위는 fps
안드로이드 화면은 60fps를 유지해야 부드럽고 빠른 앱이라고 인
지함!

12. 앱이 버벅거리는 이유
앱은 16밀리 세컨드 이내에 화면을 갱신해야 한다.
1000ms / 60frames = 16.666ms / frame

13. 앱이 버벅거리는 이유
16ms 이내에 화면을 갱신하지 못한다면
프레임 드랍 발생!

14. 도와줘! GPU!
GPU(Graphics Processing Unit)란?
-> 그래픽 처리를 위한 고성능 프로세서

15. GPU에는 ALU(Arithmetic Logic Unit, 산술 논리 장치)가 많음.
여러 명령을 동시에 처리하는 병렬 처리 방식에 특화된 구조를 가지고 있기 때문에 그래픽 작업을 빠르게 수행할
수 있다.
CPU vs GPU

16. 래스터화(Rasterization)
텍스트, 버튼 또는 도형과 같은 객체를 픽셀로 변환
시키는 과정
Rasterization

17. 렌더링 과정
화면
GPU래스터화
래스터화는 비용이 큰 작업이므로 GPU가 담당

18. 렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture CPU연산을 통해 폴리곤과 텍스쳐가 GPU로 전달된다.

19. 렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture 폴리곤 : 정점 3개가 모인 삼각형

20. 렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture 텍스처 : 가상의 3차원 물체에 세부적 질감을 묘사

21. 렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture OpenGL(Open Graphics Library)?
그래픽 하드웨어 제어를 위한 인터페이스로 높은 이식성 및 빠른 실행속도를 가진 3D
그래픽 라이브러리다.

22. 1. Button이 CPU에 의해 폴리곤-메시와 텍스처로 변환
2. 변환된 데이터는 OpenGL에 의해 CPU에서 GPU로 전달
3. 래스터화를 거쳐 화면에 나타남
Button이 화면에 나타나는 과정
즉, 렌더링 성능의 핵심은 GPU의 메모리 적재된 데이터 관리!

23. 2.View성능올리는꿀팁

24. 오버드로우?
오버드로우란 같은 픽셀에 여러번 덧 칠하는 것을 의미한다.
오버드로우를 줄이면 불필요한 GPU리소스를 줄이고
퍼포먼스를 끌어올릴 수 있다.
1. Overdraw란?

25. 불필요한 배경 제거 또는 중첩되는 색상의 배경 제거하면 오버드로우를 방지하여 성능을 개선할 수 있다.
1.1 오버드로우 줄이기 - 중첩된 배경 제거
<LinearLayout
android:id="@+id/parent"
android:width="match_parent"
android:height="match_parent"
android:background=“@android:color/black”>
<LinearLayout
android:id="@+id/child"
android:width="match_parent"
android:height="wrap_content"
android:background=“@android:color/black”>
...
</LinearLayout>
</LinearLayout>

26. 1.2 오버드로우 줄이기 - 투명도 사용 삼가하기
Grey
Vs
Black
투명도 50%

27. 1.2 오버드로우 줄이기 - 투명도 사용 삼가하기
Grey Black Alpha 0.5f+
부가적인 연산 필요
Vs

28. - onDraw() 등 생명주기 메서드에서 메모리를 할당하거나 초기화하는 작업
은 삼가한다.
- onDraw(), onMeasure(), onLayout() 메서드가 자주 호출 되지 않도록
한다.
- 무분별한 invalidate(), requestLayout() 호출 삼가하기
2. View의 간소화 및 갱신 빈도 낮추기

29. 레이아웃 계층을 평탄화하기
3. ConstraintLayout 사용하기

30. 3.1 ConstraintLayout이 빠른 이유
레이아웃 계층이 깊을수록 연산량이 증가!

31. 3.2 전통적인 방법 vs ConstraintLayout

32. ViewStub 특징
- 초기화 지연
- 경량화된 View로 보이지 않고, 아무것도 그리지 않음
- 복잡한 레이아웃에서 사용
4. ViewStub 사용으로 느리게 초기화하기
ViewStub
View
ViewStub

33. Adapter.notifyDataSetChanged() : 호출하여 전체를 갱신하는 대신 특정 아이템만 갱신하도록 한다.
5.1 RecyclerView 퍼포먼스 향상시키기 - 아이템 갱신 최소화하기
부분적으로 아이템들을 갱신하는 메서드
- notifyItemChanged
- notifyItemInserted
- notifyItemRemoved
- notifyItemMoved
- notifyItemRangeChanged
- notifyItemRangeInserted
- notifyItemRangeRemoved

34. DiffUtil이란?
두 리스트를 차이를 계산하고 변경된 부분만 갱신하도록 도와주는 유틸클래스
5.2 RecyclerView 퍼포먼스 향상시키기 - DiffUtil 사용하기
반드시 구현해야하는 DiffUtil.Callback 메소드
getOldListSize : 이전 리스트의 사이즈를 반환
getNewListSize : 새로운 리스트의 사이즈를 반환
areItemsTheSame : 두 아이템이 같은 아이템인지 검사한다.
areContentsTheSame : 두 아이템의 내용이 같은지 검사한다.

35. RecyclerView.setHasFixedSize(true) :
Adpater 내용이 변경 될 때 RecyclerView가 전체 레이아웃을 갱신하지 않도록 할 수 있다.
5.3 RecyclerView 퍼포먼스 향상시키기 - setHasFixedSize(true) 호출하기
//RecyclerView 내부 코드
@Override
protected void onMeasure(int widthSpec, int heightSpec) {
...
if (mHasFixedSize) {
mLayout.onMeasure(mRecycler, mState, widthSpec, heightSpec);
return;
}
...
}

36. RecyclerView.setItemViewCacheSize(int n) :
아이템 View가 Pool로 들어가기 전에 유지되는 캐시의 사이즈를 결정한다.
5.4 RecyclerView 퍼포먼스 향상시키기 - setItemViewCacheSize(int) 호출하기

37. RecyclerView.setRecycledViewPool(RecyclerViewPool) :
리싸이클러뷰간의 View pool을 공유하여 성능을 개선한다.
5.5 RecyclerView 퍼포먼스 향상시키기 - setRecycledViewPool(RecyclerViewPool) 호출하기
class OuterAdapter : RecyclerView.Adapter<OuterAdapter.ViewHolder>() {
...
override fun onCreateViewHolder(...): ViewHolder {
val innerLLM = LinearLayoutManager(...)
innerRv.apply {
layoutManager = innerLLM
recycledViewPool = sharedPool
}
return OuterAdapter.ViewHolder(innerRv)
}
...
}

38. Adapter.setHasStableIds(true):
아이템에 대해 고유 식별자를 부여하여 동일한 아이템에 대해 onBindViewHolder 호출을 방지하여 성능을 개선한다.
5.6 RecyclerView 퍼포먼스 향상시키기 - setHasStableIds(true) 호출하기
public class MyAdapter extends RecyclerView.Adapter<...> {
...
@Override
public long getItemId(int position) {
return viewModels.get(position).getId();
}
}

39. 3.앱성능을개선하기위한도구

40. Layout Inspector
레이아웃 세부정보를 검토 할 때 사용
Android Studio 4.0 new Features
- LiveUpdate
- 3D Rotation

41. Layout Inspector
Features
- View properties
- Isolate a View

42. 프로파일러
앱의 CPU, 메모리, 네트워크 사용량 등을 면밀히 검사

43. Lint
안드로이드 스튜디오에서 기본적으로 제공하는
정적 코드 스캔 도구

44. Lint
빌드 이전에 잠재적인 문제 원인을 파악할 수 있다.

45. GPU 렌더링 속도 프로파일링
- 개발자 옵션 > 모니터링 섹션에서 활성화
- 세로막대는 단일 프레임이 렌더링에 소요된 시간을 나타냄
- 녹색 가로선은 16ms를 의미
- 각 세로 막대의 색상을 렌더링 파이프라인의 단계를 의미

46. GPU 오버드로우 시각화
GPU 오버드로우 디버그 옵션 활성화 하기 :
개발자 옵션 > 하드웨어 가속 렌더링 > GPU 오버드로우 디버그

47. GPU 오버드로우 시각화

48. 마치며…

49. 감사합니다