지난 3월 25일 금요일에 SJ.KUNSTHALLE 에서 Google for Mobile App Bootcamp가 있었습니다.
오전에는 앱 개발사 내 개발 책임자를 대상으로 Develop 세션이 진행되었고, 오후에는 앱 마케팅 책임자 또는 기획 책임자를 대상으로 Grow,Earn 세션이 진행되었습니다. 행사 진행이 두 세션 중 하나의 세션만 참석할 수 있어서 오전에 진행된 Develop 세션을 다녀왔습니다.

IMG_0965IMG_0968IMG_0970

행사장 뒤 쪽에는 카드보드 룸이 준비되어 있어서 VR 체험을 할 수 있었습니다.

1부로 진행된 오전 행사는 4개의 세션으로 나뉘어서 진행되었습니다.

  • 안드로이드 앱 성능 개선을 위한 개발자 도구 활용
  • 구글 플레이가 바라본 고품질의 안드로이드 앱
  • 디자인 서포트 라이브러리를 활용한 머티리얼 디자인 구현 사례
  • 구글 클라우드 플랫폼을 활용한 사용자 데이터 분석방법

 

각 세션의 핵심 내용과 관련된 추가 정보를 정리해 보았습니다.

세션 1. 안드로이드 앱 성능 개선을 위한 개발자 도구 활용 양찬석 (Developer Advocate, Google)

해당 세션에서는 앱 성능에 영향을 미치는 UI 렌더링이 안드로이드 플랫폼에서는 어떠한 방식과 프로세스로 진행되는지, 이를 개선하기 위해서 어떤 툴(도구)을 사용하여 디버깅을 하고 그 사용법은 어떠한지에 대해 설명하였습니다.

안드로이드는 Jelly Bean(4.1~4.3) 버전의 OS(1)를 전후로 UI렌더링 방식이 크게 변경되었는데 관련한 프로젝트를 “Project Butter”라고 합니다.

l 프로젝트버터는

안드로이드의 전체적인 UI 성능을 버터처럼 부드럽게 만든다.
화면 렌더링 중간에 Drop frame 생기면 금방 인지하므로 60fps로 맞춘다. (1Frame을 16밀리세컨트 안에 그리면…)

스크린샷 2016-06-08 오후 6.30.23

“Project Butter” 이전과 이후 비교 영상

 

 

l UI 렌더링 프로세스
CPU를 통해 View의 드로잉 정보를 Display List1)에 담고 -> GPU(Open GL|ES2)이용)를 통해 -> 화면에 그립니다.

기본

처음 그릴 때와 속성만 변경 시

그림 변경과 레이아웃 변경 시


위와 같이 Display List를 이용하여 이전(HoneyComb)보다 성능이 향상 되었지만 뷰의 레이이아웃이 변경되었을 때에는 Measure 프로세스부터 다시 진행되어 속성이나 그림이 변경되었을 때 보다는 높은 자원이 소비됩니다.

 

l 개발자 도구 : 디버깅

 

개발을 위한 디버깅 툴로는

  • 개발 환경에서 사용할 수 있는 : Systrace, Hierarchy Viewer프로파일
  • 모바일 단말기에서 사용할 수 있는 : GPU 프로파일러, GPU 오버드로 디버깅

 

을 소개하였습니다.

개발 환경에서 사용되는 툴은 환경에 따라 툴 사용을 위해서 설정해야하는 부분이 상이해서 모바일 단말기에서 활용할 수 있는 방법인 GPU 프로파일러, GPU 오버드로 디버깅에 대한 설정과 사용법 그리고 추가로 디버깅 시 유용하게 사용할 수 있는 몇 가지 옵션을 정리해 보았습니다.

해당 옵션을 사용하기 위해서는 단말기의 개발자 모드를 활성화해야 합니다.

설정 -> 디바이스 정보 -> 소프트웨어 정보 -> 빌드번호 -> 6회 이상 선택

 

설정 -> 개발자 옵션 안에서

디버깅 시 유용한 옵션
  • 화면 자동 꺼짐 방지
    켜진 상태로 유지 메뉴 : 충전하는 동안 화면을 계속 켜진 상태로 유지합니다.
  • 터치 영역 표시
    입력 – 터치 표시 : 터치에 대한 시각 피드백을 표시합니다.
  • 애니메니션 속도 조절
    그리기 – 창 애니메이션 배율 : Dialog, Toast 등 Window 레벨에 속하는 객체의 애니메이션 배율을 설정합니다.
    그리기 – 전환 효과 애니메이션 배율 : Activity 화면 전환 애니메이션 배율을 설정합니다.
    그리기 – Animator 길이 배율 : View 레벨의 객체 이동을 Animator로 구현한 경우 해당 Animator의 길이 배율을 설정합니다.

 

GPU 프로파일러(2)

모니터링 – 프로필 GPU 렌더링 : 화면을 겹쳐서 실시간으로 UI 렌더링 성능을 표시하여 확인할 수 있습니다.

 

스크린샷 2016-06-09 오후 4.02.45스크린샷 2016-06-09 오후 4.05.55

 

OS 버전별 컬러가 조금씩 다르지만
가로선이 16밀리초의 기준이 되고 그래프가 선보다 위로 올라가면 Jank Frames이 발생한 것입니다.

 

GPU 오버드로 디버깅(3)

하드웨어 가속 렌더링 – GPU 오버드로 디버깅 : 실시간으로 UI가 겹쳐서 렌러딩 되는 부분을 표시하여 확인할 수 있습니다.

 

스크린샷 2016-06-09 오후 4.03.01스크린샷 2016-06-09 오후 4.06.19

“앱의 대부분의 영역은 Overdraw가 전혀 발생하지 않거나, 파란색 (1X Overdraw)으로 되어 있어야 함.”

 

 

세션 2. 구글 플레이가 바라본 고품질의 안드로이드 앱 임성혁 (KR Solutions Consultant Lead, Google)

왜 고품질인가?
앱의 평점은 다운로드 수와 직결. 한번 평점이 떨어지고 나면 다시 올리기가 쉽지가 않습니다.

스크린샷 2016-06-09 오후 4.28.05

 

다양한 장치 대응과 현지화를 통해 고품질의 안드로이드 앱을 제작하기 위해서는 아래 사항들을 체크해야 합니다.

 

l 단말기의 다양성을 고려

  • 태블릿
    – 큰 화면의 단말기에 맞게 레이아웃 최적화, 가로모드 고려
    – 7인치/10인치 용 스크린샷 추가
    – 전화 기능 제거
  • 안드로이드 웨어
    – 다양한 알림 기능 활용
    – 웨어러블 고유 기능을 가진 앱
    – 둥근/사각 형태의 디스플레이 지원

 

l 발전 도상의 신흥 국가 공략

– APK 용량 최소화 (이미지포맷변환 – Webp3))
– 통신망을 적절히 제한하여 사용
– 오프라인 방식을 활용하고, 느린 접속 속도에 대처
– 저사양 단말기를 위해 메모리 사용 축소
– 대상 국가 내 인기 단말기로 빌드 테스트

 

스크린샷 2016-06-09 오후 4.28.47

 

l 플레이 스토어 내 제원

  • 기본
    – 앱타이틀
    – 설명
    – 스크린 샷 : 각 기기별 최소 한 장씩
    – 고행상도 아이콘 (512 X 512)
    – 피쳐 그래픽
    – 홍보용 이미지
    – 새로운 기능 : 업데이트 시
    – 스토어 내 제원의 현지화
  • 최적화
    – 개발자 콘솔 내 실험 기능 적극 활용
    – KONGREGATE, A/B테스팅 실험을 통해 사용자 설치수 39% 증가

 

l 품질 가이드라인 확인

– App Quality & Checklist : Essentials for a Successful App

 

세션 3. 디자인 서포트 라이브러리를 활용한 머티리얼 디자인 구현 사례 김태호 (Google Developer Expert, Lezhin Comics)

구글에서 머티리얼 디자인을 구현하기 위해 제공되는 디자인 서포트 라이브러리에 대한 소개와 사용법, 그리고 실제 제품에는 어떻게 적용되었는지 Lezhin Comics 앱의 사례를 들어서 설명해 주었습니다.

구글의 머티리얼 디자인의 소개 영상입니다.

 

l 디자인 서포트 라이브러리는
안드로이드 Lollipop(5.0)부터 도입된 머티리얼 디자인 가이드에 맞춰 지원하는 컴포넌트(위젯)들을 이전 버전에서 사용가능하도록 지원하는 호환성 라이브러리입니다. 안드로이드 Eclair(2.1[API 7]) 이상에서 지원하지만 일부 기능은 Honeycomb(3.0[API 11]) 이상에서 동작합니다.

  • 지원 컴포넌트(위젯)
    – AppBar (Toolbar)
    – Navigation View
    – Foating labels for editing text
    – Floating Action Button
    – Snackbar
    – Tab
    – CoordinatorLayout
  • 주로 함께 사용되는 라이브러리
    – v7 appcompat library
    – v7 cardview library
    – v7 recyclerview library

 

“구글에서 디자인 서포트 라이브러리와 여러 추가 라이브러리를 제공하고 있지만
머티리얼 디자인 가이드의 모든 스타일 및 컴포넌트를 지원해 주는 것은 아니라서 머티리얼 디자인 가이드에 맞게 100% 적용하는 것은 쉽지가 않습니다.

 

l 안드로이드 버전별 점유율

스크린샷 2016-03-27 오후 6.12.43

Number of devices running a given of the Android platform

“Ice Cream Sandwich(4.0.3) 이상 사용자가 97.3% 인데
이제 4.0.3 이하 버전은 호환성 대응에서 제외해도 되지 않을까요?

 

세션 4. 구글 클라우드 플랫폼을 활용한 사용자 데이터 분석방법 최명근 (Sales Engineering, Cloud Platform, Google)

구글 클라우드 플랫폼만을 이용해서 빅데이터 Capture부터 Analyze까지 관리할 수 있다는 내용이었습니다.

 

16-03-25-12-07-25-553_photo

16-03-25-12-14-35-393_photo

 

참고사항

1) Display List
HoneyComb(3.0) OS 버전부터 도입된 요소로, draw를 최상위 계층부터 타고 내려오지 않기 위해 view 객체에서 가까운 곳에 누적된 드로잉 정보를 모아두는 것이다. 메모리는 더 많이 소모되지만 탐색 비용은 줄어들어 렌더링 시 부하를 최소화한다.
2) OpenGL|ES

OpenGL|ES(임베디드 단말을 위한 OpenGL)는 크로노스 그룹이 정의한 3차원 컴퓨터 그래픽스 API인 OpenGL의 서브셋으로, 휴대전화, PDA 등과 같은 임베디드 단말을 위한 API이다.

아이폰 SDK(아이폰 3GS와 아이팟 터치3세대 및 그 이후모델을 지원한다)의 3D 라이브러리 중 하나이다.
iOS 7.0 부터 OpenGL ES 3.0 를 지원한다.

안드로이드 플랫폼의 경우
1.0 버전부터 OpenGL ES 1.0 와 1.1를 지원하며,
2.2 버전(froyo) 부터 OpenGL ES 2.0 를 지원하고,
4.3 버전(jellybean mr2) 부터 OpenGL ES 3.0 를 지원한다.

 

3) Webp
구글에서 개발한 신규 오픈소스 이미지 포맷
안드로이드 4.0 이후 버전부터 플랫폼 자체 지원
이미지 품질 저하없이 JPEG, PNG 대비 최대 30% 정도 압축 가능
https://developers.google.com/speed/webp/