Top Banner
개개 3 개 / 개개 개개개개개 개개개개 개개개 개개 개개 개개개개개 < 개개개개개개 > 개개개개
37

안드로이드 리스트뷰 최적화 사례 연구

Apr 12, 2017

Download

Software

Hyun-Cheol
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 안드로이드 리스트뷰 최적화 사례 연구

개발 3 실 / 현철

안드로이드 리스트뷰 최적화 사례 연구라인플레이 < 기술월간회의 > 기술발표

Page 2: 안드로이드 리스트뷰 최적화 사례 연구

1. 리스트뷰란 ?2. 리스트뷰 사용시 자주 생기는 문제3. 문제 분석4. Case Study

1. Bad case2. Convertview3. ViewHolder4. AsyncTask5. AUIL6. 스크롤 상태에 따른 최적화

5. 성능평가6. 저장소 공유7. Q&A

Contents

Page 3: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

리스트 뷰의 기본

Page 4: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

1. 리스트뷰

Page 5: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

2. 어댑터

Page 6: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

3. 리스트뷰와 어댑터

Page 7: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

리스트뷰 사용시 자주 생기는 문제

Page 8: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

안드로이드 초보시절…

Page 9: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

개발 완료 !6 개월간 개고생했는데 이제야 끝났구나 .QA 넘기고 좀 쉬어야지 ..

개발 완료 !

Page 10: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

“ 리스트를 빠르게 움직이면 리스트뷰의 순서가 꼬여서 나옵니다 . 시간이 지나면 정상적으로 나오고요 . 그리고 스크롤 할 때 너무 버벅거려서 보기도 않좋구요 . 보통 이정도는 그냥 잘 되야 하는거 아닌가요 ? 아 이것 때문에 테스트를 진행할수 가 없네요 . 언제까지 수정 가능한가요 ? 바로되죠 ? 지금 보고를 들어가야 하는데 이것때매 보고를 못하네요 .”

QA 첫날의 피드백

자주생기는문제

Page 11: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

문제 분석

Page 12: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

비밀의 스크랩뷰 (ScrapView)

ListView 는 View 를 재활용한다 . 화면에 보여질 뷰를 inflate 한다음 스크롤시 재활용 하는 방식이다 .  View inflate 는 많은 비용이 드는 작업이며 , 화면에 보이지도 않은 View 를 미리그려 메모리의 문제가 생길 수 있기 때문에 한번 생성된 뷰를 재활용해서 데이터만 바꾸는 구조이다 .ListView 내부 코드를 보면 ScrapView 라는 화면에 보여질 View 배열이 존재 한다 . ListView 의 포지션에 따라 이 ScrapView 의 위치가 바뀌게되는 구조로 재활용 하게 된다 .Adapter 의 getView() 의 함수에서는 convertView 라는 이름을 사용

책에는 안나오고 기술문서에만 나옴

Page 13: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

1. Inflate 가 일어날때 ViewHolder 객체에 inflate 값을 저장하고2. 해당 row 에 ViewHolder 를 setTag() 함수를 통해 저장3. 다시 해당 row 를 사용할때 getTag() 함수를 통해 사용

ViewHolder

Page 14: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

AUIL(Android Universal Image Loader)

• 멀티 쓰레드 기반의 이미지 다운로더• Async 방식과 Sync 방식 둘다 지원• 쓰레드 개수 , 디코더 , 메모리 , 디스크 캐시 등을 설정할 수 있음• 이미지 캐싱을 메모리나 외장 SD 카드에 저장 할 수 있음• 다운로드 과정의 process 의 listener 를 지원함

Page 15: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

스크롤 상태에 따른 최적화

1. 스크롤 진행중일 때에는 이미지를 로딩하지 않고2. 스크롤이 멈추었을 때 이미지를 로딩한다 .3. 이미지 로딩전에는 기본이미지를 사용한다 .4. 단 , 사용 방식에 따라 사용자의 호불호가 갈릴 수 있다 .

Page 16: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

bad case

con-vertview

viewholder

AUIL

scrollstate

Case Study

Page 17: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

가장 나쁜 케이스

구글링으로 찾다가 적당히 복 & 붙한 코드

매번 inflate 한다 .

Page 18: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

ConvertView ConvertView 를 활용해서 inflate 비용을 줄여 리스트 뷰의 꼬임 현상과 스크롤 속도를 개선함

convertView 가 존재하면 inflate 하지 않고 재활용한다 .

Page 19: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

ViewHolder 적용

ViewHolder 패턴을 이용해서 한번 inflate 한 객체를 캐싱함

Inflate 할때 viewHolder 객체에 저장하고 viewHolder 객체를 tag 에 저장한다 .

convertView 가 존재하면 tag 에서 viewHolder 를 꺼내온다 .

viewHolder 에 포함된 뷰에 값을 업데이트 한다 .

viewHolder 객체를 정의한다 .

Page 20: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

AsyncTask 를 통해 이미지를 로딩

이미지 로딩을 AsyncTask 를 통해 수행한다 .

이미지를 로딩하는 Async-Task 를 정의한다 .

Page 21: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

AUIL 적용

AUIL 을 Initialize 한다 .

AUIL 을 통해 이미지를 로딩한다 .

Page 22: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

Scroll 이 멈추었을때만 Image FetchScroll 이 멈추었을 때만 이미지 로드 성능 많이 향상 , but 호불호가 있음

Page 23: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

1. 가상의 전화번호부를 작성

1. 브라운 , 코니 , 셀리 , 문 , 제임스 연락처가 있다고 가정을 함

2. 썸네일 이미지는 웹에 있는 이미지를 fetch 해서 사용

2. 5 개의 데이터를 반복 복사해서 50,100,200 개의 리스트 데이터를

구성

예제 데이터 구성

Page 24: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 측정 방법 – Step1

각 테스트 케이스를 시작할 수 있는 버튼을 배치한다 .

Page 25: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 측정 방법 – Step2

• 각 케이스의 엑티비에 진입하면• 최하단으로 자동 스크롤이 된다 .• 최하단까지 자동 스크롤이 되면 소요 시간과 단위 시간당 inflate 에 성공한 view 의 개수를 계산하여 성능을 측정한다 .• Row 의 개수를 50 개 ,100 개 ,200 개를 테스트의 범위로 한다 .

Page 26: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 테스트 결과 – 50 개

method Show count per sec Average1 2 3badcase 13.13 13.11 12.45 12.90 convertview 12.12 13.62 14.21 13.32 viewholder 12.93 13.37 13.24 13.18 AsyncTask 64.15 65.53 67.75 65.81 AUIL 68.3 67.65 66.84 67.60 scrollstate 66.93 68.68 67.11 67.57

Page 27: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 테스트 결과 – 50 개

badcase convertview viewholder AsyncTask AUIL scrollstate0

10

20

30

40

50

60

70

80

show count per sec

Show count per sec Series2 Series3 Average

Page 28: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 테스트 결과 – 100 개

method Show count per sec Average1 2 3badcase 0 0 0 0.00 convertview 11.16 11.28 11.16 11.20 viewholder 14.22 13.34 13.24 13.60 AsyncTask 62.65 62.65 62.9 62.73 AUIL 63.45 62.26 62.73 62.81 scrollstate 62.69 64.02 63.01 63.24

Crash 발생해서 Test 불가

Page 29: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 테스트 결과 – 100 개

badcase convertview viewholder AsyncTask AUIL scrollstate0

10

20

30

40

50

60

70

show count per sec

Show count per sec Series2 Series3 Average

Page 30: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 테스트 결과 – 200 개

method Show count per sec Average1 2 3badcase 0 0 0 0convertview 10.66 10.79 10.24 10.56333333viewholder 15.05 10.99 11.59 12.54333333AsyncTask 60.93 60.67 59.79 60.46333333AUIL 60.67 61.06 60.93 60.88666667scrollstate 60.95 60.49 61.12 60.85333333

Crash 발생해서 Test 불가

Page 31: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

성능 테스트 결과 – 200 개

badcase convertview viewholder AsyncTask AUIL scrollstate0

10

20

30

40

50

60

70

show count per sec

Show count per sec Series2 Series3 Average

Page 32: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

Demonstration

Page 33: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

결론

Page 34: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

1. ConvertView 를 사용하지 않으면 매번 inflate 하면서 성능이 떨어지고 리소스를 많이 사용한

다 . 데이터가 아주 많을 경우에는 Crash 가 날 수도 있다 .2. 리스트 최적화 시 가장 효과적인 것은 AsyncTask, AUIL 등으로 쓰레드를 사용해서 이미지를

별도로 로딩하는 방법이다 .3. 스크롤이 멈추었을 때만 쓰레드를 기동하는 방법은 호불호가 생길수 있다 .

Page 35: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

Further Study

1. 5 개의 한정된 이미지를 rotate 해서 쓰는 경우가 의미있는 갯수의 이미지를 활용한 성능평가가

필요

2. 라인스토어의 이미지가 아닌 별도의 테스트환경을 구축해야함 ( 언제 짤릴지 모름 --;;; )3. AUIL 외의 이미지 로딩 라이브러리도 연구대상

4. 단방향 스크롤이 아닌 양방향과 랜덤한 스크롤을 발생시킨 테스트가 필요함

Page 36: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

Share Information

https://github.com/Garbriel/AndroidListViewTuning

Page 37: 안드로이드 리스트뷰 최적화 사례 연구

© LINE PLAY Corp. All rights reserved2016 기술월간회의 워크샵

Q & A