1.
실 사례로 보는
고객 디지털 경험 지키기
손영수 CPO
Copyright © 2022 by ONYCOM Inc. All Rights Reserved.

2.
디지털 경험을 해치는
5마리의 두더지
느린 로딩, 끊김, 버벅거림, 발열, 백화
현상 등 모바일 앱에서 발생하는
다양한 오류!
IMQA 뿅망치로 내리치자 땅굴 속으로
들어가는 문제의 두더지들!
https://www.youtube.com/watch?v=e706tmmHtJ0

3.
장애가 났을때..
우리의 대처 방법
traceroute 찍어봐요.
어 재현되지 않네요?
Network 문제도 아니네?
CPU도 별 문제 없는데?
내가 만든
어플리케이션 문제인가봐..
Top
2nd Level
1st Level

4.
개발자/운영자가 그럴수 밖에 없는 이유!!
mDev: Network: Network: Network: Dev: SysAdmin: Back-end: DBA:
Data
Caching
Latency &
Loss
Encrypt,
Compress.
Load Bal.
Algorithm
Resource
Usage
Server
Config.
Pooling &
Threading
DB Indexes
& Logs
Platforms &
Versions
2G, 3G, 4G
Cellular
Screen Sizes
Internet Browsers
Firewalls
VPNs
CDNs & CoLo.
Web
Services
Mobile
Components
3rd Party
Cloud Services
Load
Balancers
Web
Servers
App
Servers
DB
Servers
Storage
Carriers
LANs
ISPs
Device Features

5.
모니터링 영역

6.
순서
성능 개요
01
사용자
경험이란
02
RUM > DEM (앱,
웹 최적화 기법)
03
DEM 모니터링
사례
04

7.
디지털 경험의
중요성
01

8.
디지털 경험이란..
Digital Experience is…

9.
디지털 경험은 소비자 우연히 체험하는 것이 아니라
기업이 의도한 디지털 경험을 제공하는 것으로
고객 요구를 철저히 분석하고, 시나리오를 검증하여
경쟁사와 차별화된 경험을 제공함.
디지털 경험이란..

10.
코로나 이후 디지털 경험이
중요성이 대두됨!
이전에는 오프라인 고객 경험이 크고,
디지털 경험이 작은 채널이었다면,
CDX
Customer Digital
Experience
CX
Customer
Experience
DX
Digital
Experience

11.
아모레 퍼시픽
- [2021 실적] "온라인이 다했다”
…아모레퍼시픽, 2021 영업이익 3434억원…전년 ⽐ 140%↑

12.
'온라인' 웅진씽크빅
'오프라인' 대교…순위 뒤집어졌다.
https://www.inews24.com/view/1423112

13.
디지털 경험 모니터링 영역

14.
User
UI 렌더링
시간
낮은 전력
소모량 시간
모바일 에서 디지털 경험을 고려한 성능이란
Mobile

15.
비용 절감 = Web App/ Hybrid App으로 가자.
Android, iOS, Web 언제 다 따로 만들어..
3~4년 전
프론트엔드 (웹/모바일)
한국의 Enterprise
시장에서는 무슨 일이?
다양한 디바이스에서 WI(Web Identity)를 동일하게 유지
가변그리드, 가변이미지, 미디어쿼리 등을 기반으로 하는 반응형 웹 컴포넌트(Responsive
Web Component) 샘플과 개발 가이드 제공으로 보다 쉬운 반응형 웹 개발

16.
안드로이드 4.4 버전 이후부터
- Android Native 와 Chrome WebView의 분리.
안드로이드 5.0 이후부터.
- 타사 쿠키 차단, 혼합된 컨텐츠 차단
- HTML 문서 최적화를 통해 그릴 수 있는 부분만 지능적 선택(??)
WebView 컴포넌트 배포 권한은 구글이..
- 왜 네이버는 별도의 브라우저를 만들었을까?
대형 사건…

17.
WebView가 가져오는 악재들

18.
Hybrid App의 수호자 AirBnb의 메세지..
https://medium.com/braus-blog/airbnb-is-dropping-react-js-should-you-too-dcbff36def5c
Go
Native!!!

19.
왜 카카오 뱅크는 Native로 개발했나..

20.
S 은행은 발빠르게 2채널 전략
- 많은 기능, 다양한 상품은 Native로
- 간단한 것들은 Web View 로…
다른 은행들의 차세대의 중심이 모바일로 재편
- K은행
- G은행 등 차세대 준비.
2, 3 금융권은 웹뷰와 네이티브가 병행
다른 은행
(1 금융권)들은..

21.
모바일 플랫폼의
상이한 철학..
02

22.
잘못된 만남.. (철학의 부조화)

23.
앱 UI Rendering

24.
Vsync 란 (60fps = 16ms의 중요성)
1 2 3 4
1 2 3 4
VSync VSync VSync VSync
Display
GPU
CPU
0 4
1 2 3
Time

25.
Web Browser 랜더링 프로세스
Display
Attachment
HTML
Parser
CSS
Parser
CSS
HTML
Render
Tree
DOM
TREE
Style
Rules
Painting
Layout
DOM

26.
DOM TREE 구성
Bytes
Characters
Tokens
Nodes
DOM

27.
DOM TREE 구성
HTML을 파싱하고 DOM 트리를 만드는 메인 스레드

28.
CSS SOM 구성

29.
Render Tree 만들기
안보여도 되는 객체는 Visibility:invisible 보다는
Display:none 사용 권장
Display
Attachment
HTML
Parser
CSS
Parser
CSS
HTML
Render
Tree
DOM
TREE
Style
Rules
Painting
Layout
DOM

30.
Layout ‒ 레이어를 구성한다

31.
Layout ‒ 브라우저 화면 어느 위치에 그려질지 계산하는 단계

32.
Layout ‒ 계산된 스타일이 있는 DOM 트리를 돌며 레이아웃 트리를 생성

33.
Paint (GPU 개입)
각 요소에 배경색, 글자 색과 같이 픽셀을 채우는 과정입니다.
레이아웃 트리를 순회하며 페인트 기록을 생성

34.
핵심 ‒ 변경을 흡수
DOM 구성부터 페인팅 까지 열심히 작업해서
화면에 표시.
브라우저를 스크롤하거나 줌하거나
자바스크립트 코드로 문서를 변경해버리면,
다시 이미지를 렌더링
그래서 다 그리지 않고, 변경된 내용만
다시 그리는 것이 필요
Reflow ‒ Render Tree 부분 재구성
We now have a complete pipeline.
But what if state can change?
• Scrolling
• Zooming
• Animations
• Incremental Loading
• Java Script
• …
(in memory)
DOM
Style
Layout
Paint
Raster
Gpu

35.
핵심 ‒ 변경을 흡수
Reflow (Render Tree 재구성) 가 일어나는 대표적인 경우
- 페이지 초기 렌더링 시(최초 Layout 과정)
- 윈도우 리사이징 시 (Viewport 크기 변경시)
- 노드 추가 또는 제거
- 요소의 위치, 크기 변경
(left, top, margin, padding, border, width, height 등..)
- 폰트 변경 과(텍스트 내용) 이미지 크기 변경(크기가 다른 이미지로 변경 시)
Repaint (Render Tree를 다시 화면에 그려주는 과정)
- 레이아웃에는 영향을 주지 않는
스타일 속성만 변경 시 Repaint만 수행 (background-color, visibility..)

36.
문제는 이러한 업데이트가 16ms(60fps)안에 실행하도록 권고.

37.
Enter: compositing
더 성능을 끌어올리기 위해
Composition 도입
유효성 검사로만으로는 성능개선의 어려움
화면을 구성하는 요소를 레이어 별로 쪼개서
이미지를 만든 뒤 화면에 합쳐서 표현하는 방법을
'레이어 합성’.
일부 이미지 변경으로 전체를 다시 그리기보다 일부
레이어만 다시 그리기

38.
화면을 거의 차지하는 스크롤 레이어가 있다면
레이어가 너무 커서 레이어 합성의 효과가 미미
한개의 레이어를 더 작은 단위인 타일로 쪼개고
타일의 위치나 특성에 따라 우선순위를 매겨
각 타일별 이미지를 만듭니다
꽉찬 화면 이면 어떻게 하나?
(Tiling ‒ 타일링/
Layer Tiling)
Tiling 타일링

39.
출처) 모질라 퀀텀 CSS 엔진 - https://cutt.ly/5maHEKM
Web Browser 렌더링 프로세스

40.
브라우저기준의 성능 측정하기
DOMContentLoaded 이벤트
• HTML과 CSS 파싱이 끝나는 시점
• 렌더 트리를 구성할 준비가 된(DOM 및 CSSOM 구성이 끝난) 상황
Load 이벤트
• HTML 상에 필요한 모든 리소스가 로드된 시점
Prompt
For
unload
redirect AppCache DNS TCP Response Processing Load
Request
(unloadEventstart)
(unloadEventEnd)
startTime
requestStart
responseStart
responseEnd loadEventstart
loadEventEnd
fetchStart
(redirectEnd)
(redirectStart)
connectEnd
secureConnectionStart
connectStart
domainLookupEnd
domainLookupStart
domComlete
domContentLoadedEventEnd
domContentLoadedEventStart
domInteractive
Resource Timing

41.
크롬 개발자 도구에서 보면..
DOM 구성 1.79초, 화면 리소스가 로드된 시점 2.3초

42.
Prompt
For
unload
redirect AppCache DNS TCP Response Processing Load
Request
(unloadEventstart)
(unloadEventEnd)
startTime
requestStart
responseStart
responseEnd loadEventstart
loadEventEnd
fetchStart
(redirectEnd)
(redirectStart)
connectEnd
secureConnectionStart
connectStart
domainLookupEnd
domainLookupStart
domComlete
domContentLoadedEventEnd
domContentLoadedEventStart
domInteractive
Resource Timing

43.
수집 지표와의 연관관계
Prompt
For
unload
redirect AppCache DNS TCP Response Processing Load
Request
(unloadEventstart)
(unloadEventEnd)
startTime
requestStart
responseStart
responseEnd loadEventstart
loadEventEnd
fetchStart
(redirectEnd)
(redirectStart)
connectEnd
secureConnectionStart
connectStart
domainLookupEnd
domainLookupStart
domComlete
domContentLoadedEventEnd
domContentLoadedEventStart
domInteractive
Resource Timing
Prompt
For
unload
redirect AppCache DNS TCP Response Processing Load
Request
(unloadEventstart)
(unloadEventEnd)
startTime
requestStart
responseStart
responseEnd loadEventstart
loadEventEnd
fetchStart
(redirectEnd)
(redirectStart)
connectEnd
secureConnectionStart
connectStart
domainLookupEnd
domainLookupStart
domComlete
domContentLoadedEventEnd
domContentLoadedEventStart
domInteractive
Resource Timing
Prompt
For
unload
redirect AppCache DNS TCP Response Processing Load
Request
(unloadEventstart)
(unloadEventEnd)
startTime
requestStart
responseStart
responseEnd loadEventstart
loadEventEnd
fetchStart
(redirectEnd)
(redirectStart)
connectEnd
secureConnectionStart
connectStart
domainLookupEnd
domainLookupStart
domComlete
domContentLoadedEventEnd
domContentLoadedEventStart
domInteractive
Resource Timing
waiting
fetch
redirect
response
request_sent
connect
Domain_Lookup
wait network server DOM content
total Loading

44.
사용자 입장에서는..
DOMContentLoaded, load 이벤트가 같은 시점에 발생했으나..
사용자 기준에서 다르게 느낀다..
Optimized
(progressive
rendering)
Unoptimized
Rendering

45.
FP(First Paint)
흰 화면에서 화면에 무언가가
처음으로 그려지기 시작하는 순간
FCP(First Contentful Paint)
텍스트나 이미지가 출력되기 시작하는 순간
FMP(First Meaningful Paint)
사용자에게 의미 있는 콘텐츠가 그려지기 시작하는 첫 순간. 콘텐츠를 노출하는데 필요한 CSS, 자바스크립트 로드가 시작되고
스타일이 적용되어 주요 콘텐츠를 읽을 수 있다.
TTI(Time to Interactive)
자바스크립트의 초기 실행이 완료되어서 사용자가 직접 행동을 취할 수 있는 순간
사용자 입장에서의 지표

46.
디지털 경험을 해치는
5마리의 두더지
03

47.
디지털 경험을 해치는 5마리의 두더지

48.
느린 화면 로딩 두더지
1. 복잡한 계층 구조를 가진 화면
2. 보안 라이브러리
3. Single Sign One 라이브러리
가장 큰 원인은?

49.
폰이 뜨거워! 발열 두더지
1. 과도한 CPU/GPU 사용을 요구하는 애니메이션
2. 빈번한 네트워크 통신
3. 장시간 사용하는 앱은 집중관리!
뮤직 플레이어 / 택시, 택배, AS 기사님 앱 / 네비게이션 앱
가장 큰 원인은?

50.
창백해 지는 백화 두더지!
1. 과도한 레이아웃 (특히 웹 앱)
2. Single Sign One 통신 오류
3. 가끔은 보안 키보드..
가장 큰 원인은?

51.
반응이 없어! 버벅 두더지
1. 네트워크와 연결된 UI
2. 과도한 UI 계층 구조를 가진 앱
3. 잘못된 설계 (제발 백그라운드 좀 쓰세요..)
가장 큰 원인은?

52.
앱 실행 중 멈춤!끊김!! 두더지!
1. 과도한 메모리 사용
2. 크래시를 유발하는 코드 결함
3. 네트워크 속도를 고려하지 않는 앱 설계. (큰 이미지 등)
가장 큰 원인은?

53.
“원인들을 정리하면”
복잡한 계층 구조의 화면 과도한 자원 사용(CPU, 메모리 등..)
너무나 큰 이미지
느린 / 빈번한 네트워크 통신
외부 라이브러리 (보안,키보드,지도, OpenID등)
잘못된 설계 코드의 결함
…

54.
IMQA를 이용한
디지털 경험
모니터링 실사례
04

55.
IMQA MPM 주요화면 및 기능
- 모바일 앱의 종합적인 성능을 한 눈에
파악할 수 있도록 구성
- 목적에 따라 A/B대시보드와 성능 대시보드 중
언제든지 선택 ∙ 변경하여 사용 가능
- 시각화된 성능 차트를 통해 종합적인 상황을
실시간으로 확인
- 성능 대시보드에서는 전체 화면 별
성능 현황 모니터링
- IMQA Crash와 연계한 크래시 발생 상위 정보,
응답시간 하위 URL목록, 발생 알림도 확인 가능
성능 대시보드의 상세화면

56.
IMQA MPM 주요화면 및 기능
A/B Dashboard의 상세화면 * 최근 30분 동안의 데이터를 확인할 수 있으며, 데이터는 1분마다 갱신
시계열 성능 정보
성능지표5가지(화면 로딩 시간, 응답 시간, CPU, 메모리, 크래시) 평균을시계열
그래프로표시하여성능이저하된구간및변동추이확인가능
앱 요약 정보
최근24시간의사용자수, 앱실행수/ 최근30분평균문제발생률확인및비교
* 평균 문제 발생률: 각 성능 지표의 기준치를 넘는 비율의 평균을 산출
성능 문제 발생률
A, B 프로젝트별성능지표5가지를위험도와함께확인
화면 별 성능 현황
사용자가방문한화면을분포로확인가능
* 버블 오버 시: 화면 별 방문자 수와 각 성능의 문제 발생률, 평균값 비교 가능
버블 클릭 시: ‘화면 별 성능 분석’ 페이지로 이동
최근 5분 성능 지표
최근5분간화면로딩시간, 응답시간, CPU, 메모리의변동추이확인
및밀착관리가능
최근5분간화면로딩시간과응답시간지표를통해분포상태파악,
비교가능
* 막대 클릭 시: 각 지표의 ‘성능 상세 분석’ 팝업 표시

57.
IMQA MPM 주요화면 및 기능
통계·스택 분석·웹뷰 분석
통계
• 화면 로딩 시간과 응답 시간 데이터를 네이티브와 웹뷰 화면별로 확인 가능
• CPU와 메모리 데이터 확인 가능
• 앱 버전, 날짜, 시간별 통계 확인
스택 분석
• 네이티브 성능 저하의 원인을 소스 코드 레벨로 확인할 수 있어 문제를 빠르게 파악·해결 가능
• 특정 성능 구간에 수집된 호출 스택을 트리 구조로 확인 가능
* 호출 스택(Call Stack): 수집 시점에 호출되고 있는 함수를 의미
웹뷰 분석
• Android · iOS에서 동작하는 하이브리드 앱의 UI 반응성(응답 속도) 확인
• 앱 버전, OS 버전, 디바이스 종류 및 통신사와 지역(국가) 확인 가능
• 평균 페이지 로드 시간에 대한 상세 정보와 성능 정보 확인 가능

58.
IMQA MPM 주요화면 및 기능
성능 대시보드의 상세화면
설치형 특화 기능 (개인정보 이슈)특정 사용자를
지정해서, 사용자의 여정을 분석할수 있는 화면
SaaS형 (개인 식별 불가)화면이 느리거나,
불편함을 겪었을 모집단의 상황을 트래킹 할수
있는 화면 제공

59.
IMQA MPM 주요화면 및 기능
문제를 겪은 사용자를 추적하는 기능!

60.
IMQA MPM 주요화면 및 기능
문제를 겪은 사용자를 추적하는 기능! (설치형만 제공 > 개인정보 동의 이슈)

61.
IMQA MPM 주요화면 및 기능
문제를 겪은 사용자를 추적하는 기능!

62.
복잡한 계층을 가진 화면

63.
성능 저하 후보군 (WebView 랜더링) - K사 사례
• 웹뷰 화면 로딩 시간이 오래 걸림
• 50%의 사용자는 2.2초 내에 응답을 받으나 하위 5% 사용자는 7초 이상의 화면 로딩 시간이 걸림
(즉 100명중에 5명은 7초 이상의 화면 랜더링 시간이 걸림)

64.
과도한 자원 사용

65.
느린 그리고
빈번한 네트워크

66.
외부 라이브러리 이슈

67.
여러분이 알고 있는 보안 라이브러리 들..
APP 개발사
APP 파일
암호화 APP
파일
APP 개발사
암호화 APP
파일
APP 개발
APP
등
록
APP
복호화
APP
실행
스마트폰 APP 실행환경
배포&설치
실행
암호화, 키보드 보안, 난독화 서비스들
크래시 빈번히 발생
소스코드
난독화
바이너리
난독화
바이너리난독화
원본
소스코드
소스코드 난독화
암호화 서비스들은 서버 용량 증설 체크 필수!
공공 앱은 시작 화면에 정말 다수 발생

68.
너무나 큰 이미지

69.
잘못된 설계

70.
코드의 결함
개발자의 실수 + 운영체제 파편화

71.
디지털 경험 모니터링 영역

72.
레퍼런스
대한민국 대표 금융사, 공공, 물류, 이커머스 기업이 IMQA를 통해 모바일 앱의 성능을 고도화하고,
고객 만족도를 향상시키고 있습니다.
진행 사례
A사 진행 사례
이벤트 진행 전, 특정 SNS 채널을 통한 유입 시, 화면 로딩 속도가 길어지는 현상 확인
- 개선과 동시에 이벤트 진행 방법을 일부 수정하여 성능 이슈 없이 대규모 이벤트 진행
B사 진행 사례
특정 지역에서 성능 저하 이슈 확인 결과 해당 지역의 특정 통신사에서만 관련 이슈 발생
- SNS를 통해 관련 사항을 실시간으로 안내하여 고객 불편 및 CS 최소화
C사 진행 사례
서비스 특성상 다양한 연령대에서 모바일 앱을 이용
QA가 어려운 구형 모델에서 성능 저하 이슈가 생기는 것을 확인
- 해당 항목 반영하여 전체 업데이트 진행

73.
참고자료
• 렌더러 프로세스의 내부 동작 - https://d2.naver.com/helloworld/5237120
• 크롬 랜더링 이해하기 - https://cutt.ly/hmaGzHW
• Reflow, Repaint 성능 최적화 - https://boxfoxs.tistory.com/408
• 웹 성능 최적화 - https://ui.toast.com/fe-guide/ko_PERFORMANCE
• 성능 최적화 - https://ui.toast.com/fe-guide/ko_PERFORMANCE

74.
감사합니다
Mobile Performance Management Solution