SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
Naver | 옥수환
100만달러짜리
빠른앱을만드는비법전수
발표자 소개
- 네이버 밴드 안드로이드 앱 개발자
- ‘아키텍처를 알면 앱 개발이 보인다’ 저자
- ‘찰스의 안드로이드’ 블로그 운영
- 핀테크 분야 스타트업 창업 경험
- 6년차 SW 엔지니어
목차
1. 안드로이드 내부에서 일어나는 일들(feat. 렌더링)
2. View의 성능을 끌어올리는 팁
3. 앱 성능을 개선하기 위한 도구
왜 우리는 빠른앱을 만들어야 하는가
앱 사용자의 이탈
왜 내가 만든 앱은 빠르지 않을까?
- 복잡한 기능과 요구사항
- 화려한 디자인
- 애니메이션 기능
아는 만큼 보인다!
OpenGL
Framework
Library
Testing
Java
Algorithm
Fast application…
1.안드로이드내부에서일어나는일들(feat.렌더링)
성능 개선을 위한 렌더링의 이해
성능 개선을 위한 렌더링의 이해
렌더링이란?
하나의 프레임을 그려내는 과정을 의미한다.
프레임이란?
정지된 하나의 화면 또는 이미지
프레임레이트
프레임레이트란?
1초에 볼 수 있는 프레임(이미지)의 갯수, 단위는 fps
안드로이드 화면은 60fps를 유지해야 부드럽고 빠른 앱이라고 인
지함!
앱이 버벅거리는 이유
앱은 16밀리 세컨드 이내에 화면을 갱신해야 한다.
1000ms / 60frames = 16.666ms / frame
앱이 버벅거리는 이유
16ms 이내에 화면을 갱신하지 못한다면
프레임 드랍 발생!
도와줘! GPU!
GPU(Graphics Processing Unit)란?
-> 그래픽 처리를 위한 고성능 프로세서
GPU에는 ALU(Arithmetic Logic Unit, 산술 논리 장치)가 많음.
여러 명령을 동시에 처리하는 병렬 처리 방식에 특화된 구조를 가지고 있기 때문에 그래픽 작업을 빠르게 수행할
수 있다.
CPU vs GPU
래스터화(Rasterization)
텍스트, 버튼 또는 도형과 같은 객체를 픽셀로 변환
시키는 과정
Rasterization
렌더링 과정
화면
GPU래스터화
래스터화는 비용이 큰 작업이므로 GPU가 담당
렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture CPU연산을 통해 폴리곤과 텍스쳐가 GPU로 전달된다.
렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture 폴리곤 : 정점 3개가 모인 삼각형
렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture 텍스처 : 가상의 3차원 물체에 세부적 질감을 묘사
렌더링 과정
화면
GPU래스터화
CPU
Polygon Texture OpenGL(Open Graphics Library)?
그래픽 하드웨어 제어를 위한 인터페이스로 높은 이식성 및 빠른 실행속도를 가진 3D
그래픽 라이브러리다.
1. Button이 CPU에 의해 폴리곤-메시와 텍스처로 변환
2. 변환된 데이터는 OpenGL에 의해 CPU에서 GPU로 전달
3. 래스터화를 거쳐 화면에 나타남
Button이 화면에 나타나는 과정
즉, 렌더링 성능의 핵심은 GPU의 메모리 적재된 데이터 관리!
2.View성능올리는꿀팁
오버드로우?
오버드로우란 같은 픽셀에 여러번 덧 칠하는 것을 의미한다.
오버드로우를 줄이면 불필요한 GPU리소스를 줄이고
퍼포먼스를 끌어올릴 수 있다.
1. Overdraw란?
불필요한 배경 제거 또는 중첩되는 색상의 배경 제거하면 오버드로우를 방지하여 성능을 개선할 수 있다.
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>
1.2 오버드로우 줄이기 - 투명도 사용 삼가하기
Grey
Vs
Black
투명도 50%
1.2 오버드로우 줄이기 - 투명도 사용 삼가하기
Grey Black Alpha 0.5f+
부가적인 연산 필요
Vs
- onDraw() 등 생명주기 메서드에서 메모리를 할당하거나 초기화하는 작업
은 삼가한다.
- onDraw(), onMeasure(), onLayout() 메서드가 자주 호출 되지 않도록
한다.
- 무분별한 invalidate(), requestLayout() 호출 삼가하기
2. View의 간소화 및 갱신 빈도 낮추기
레이아웃 계층을 평탄화하기
3. ConstraintLayout 사용하기
3.1 ConstraintLayout이 빠른 이유
레이아웃 계층이 깊을수록 연산량이 증가!
3.2 전통적인 방법 vs ConstraintLayout
ViewStub 특징
- 초기화 지연
- 경량화된 View로 보이지 않고, 아무것도 그리지 않음
- 복잡한 레이아웃에서 사용
4. ViewStub 사용으로 느리게 초기화하기
ViewStub
View
ViewStub
Adapter.notifyDataSetChanged() : 호출하여 전체를 갱신하는 대신 특정 아이템만 갱신하도록 한다.
5.1 RecyclerView 퍼포먼스 향상시키기 - 아이템 갱신 최소화하기
부분적으로 아이템들을 갱신하는 메서드
- notifyItemChanged
- notifyItemInserted
- notifyItemRemoved
- notifyItemMoved
- notifyItemRangeChanged
- notifyItemRangeInserted
- notifyItemRangeRemoved
DiffUtil이란?
두 리스트를 차이를 계산하고 변경된 부분만 갱신하도록 도와주는 유틸클래스
5.2 RecyclerView 퍼포먼스 향상시키기 - DiffUtil 사용하기
반드시 구현해야하는 DiffUtil.Callback 메소드
getOldListSize : 이전 리스트의 사이즈를 반환
getNewListSize : 새로운 리스트의 사이즈를 반환
areItemsTheSame : 두 아이템이 같은 아이템인지 검사한다.
areContentsTheSame : 두 아이템의 내용이 같은지 검사한다.
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;
}
...
}
RecyclerView.setItemViewCacheSize(int n) :
아이템 View가 Pool로 들어가기 전에 유지되는 캐시의 사이즈를 결정한다.
5.4 RecyclerView 퍼포먼스 향상시키기 - setItemViewCacheSize(int) 호출하기
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)
}
...
}
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();
}
}
3.앱성능을개선하기위한도구
Layout Inspector
레이아웃 세부정보를 검토 할 때 사용
Android Studio 4.0 new Features
- LiveUpdate
- 3D Rotation
Layout Inspector
Features
- View properties
- Isolate a View
프로파일러
앱의 CPU, 메모리, 네트워크 사용량 등을 면밀히 검사
Lint
안드로이드 스튜디오에서 기본적으로 제공하는

정적 코드 스캔 도구
Lint
빌드 이전에 잠재적인 문제 원인을 파악할 수 있다.
GPU 렌더링 속도 프로파일링
- 개발자 옵션 > 모니터링 섹션에서 활성화
- 세로막대는 단일 프레임이 렌더링에 소요된 시간을 나타냄
- 녹색 가로선은 16ms를 의미
- 각 세로 막대의 색상을 렌더링 파이프라인의 단계를 의미
GPU 오버드로우 시각화
GPU 오버드로우 디버그 옵션 활성화 하기 :
개발자 옵션 > 하드웨어 가속 렌더링 > GPU 오버드로우 디버그
GPU 오버드로우 시각화
마치며…
감사합니다
100만 달러짜리 빠른앱 만드는 비법

Contenu connexe

Similaire à 100만 달러짜리 빠른앱 만드는 비법

프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh
 
Xamarin android
Xamarin androidXamarin android
Xamarin androidHyungKuIm
 
5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹지수 윤
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기NAVER D2
 
18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상운용 최
 
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyTensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyModulabs
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh
 
권기훈_개인포트폴리오
권기훈_개인포트폴리오권기훈_개인포트폴리오
권기훈_개인포트폴리오Kihoon4
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인준극 김
 
권기훈_포트폴리오
권기훈_포트폴리오권기훈_포트폴리오
권기훈_포트폴리오Kihoon4
 
Pro android performance optimization 20171213
Pro android performance optimization 20171213Pro android performance optimization 20171213
Pro android performance optimization 20171213Changwook Jun
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
Java, android 스터티7
Java, android 스터티7Java, android 스터티7
Java, android 스터티7Heejun Kim
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)수보 김
 
안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상운용 최
 
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout) [NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout) YoungSu Son
 
모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)IMQA
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석Daum DNA
 

Similaire à 100만 달러짜리 빠른앱 만드는 비법 (20)

프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
 
Xamarin android
Xamarin androidXamarin android
Xamarin android
 
5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상18 안드로이드 리스트뷰_속도향상
18 안드로이드 리스트뷰_속도향상
 
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyTensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola Company
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
 
권기훈_개인포트폴리오
권기훈_개인포트폴리오권기훈_개인포트폴리오
권기훈_개인포트폴리오
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
권기훈_포트폴리오
권기훈_포트폴리오권기훈_포트폴리오
권기훈_포트폴리오
 
Pro android performance optimization 20171213
Pro android performance optimization 20171213Pro android performance optimization 20171213
Pro android performance optimization 20171213
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
Java, android 스터티7
Java, android 스터티7Java, android 스터티7
Java, android 스터티7
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 
안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상
 
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout) [NEXT] Android  개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
 
모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
 

100만 달러짜리 빠른앱 만드는 비법