2022년 11월 18일 코엑스에서 개최한 공공솔루션마켓에서 발표한 강연 자료입니다.
디지털 전환이 가속화됨에 따라 더욱 중요해진 디지털 경험 모니터링과 장애 및 병목 등 성능을 개선한 실 사례를 공유드립니다.
생생한 강연 영상으로 확인해 보세요!
https://youtu.be/_Cdms2TxO3M
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
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 컴포넌트 배포 권한은 구글이..
- 왜 네이버는 별도의 브라우저를 만들었을까?
대형 사건…
20. S 은행은 발빠르게 2채널 전략
- 많은 기능, 다양한 상품은 Native로
- 간단한 것들은 Web View 로…
다른 은행들의 차세대의 중심이 모바일로 재편
- K은행
- G은행 등 차세대 준비.
2, 3 금융권은 웹뷰와 네이티브가 병행
다른 은행
(1 금융권)들은..
29. Render Tree 만들기
안보여도 되는 객체는 Visibility:invisible 보다는
Display:none 사용 권장
Display
Attachment
HTML
Parser
CSS
Parser
CSS
HTML
Render
Tree
DOM
TREE
Style
Rules
Painting
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..)
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초
45. FP(First Paint)
흰 화면에서 화면에 무언가가
처음으로 그려지기 시작하는 순간
FCP(First Contentful Paint)
텍스트나 이미지가 출력되기 시작하는 순간
FMP(First Meaningful Paint)
사용자에게 의미 있는 콘텐츠가 그려지기 시작하는 첫 순간. 콘텐츠를 노출하는데 필요한 CSS, 자바스크립트 로드가 시작되고
스타일이 적용되어 주요 콘텐츠를 읽을 수 있다.
TTI(Time to Interactive)
자바스크립트의 초기 실행이 완료되어서 사용자가 직접 행동을 취할 수 있는 순간
사용자 입장에서의 지표
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형 (개인 식별 불가)화면이 느리거나,
불편함을 겪었을 모집단의 상황을 트래킹 할수
있는 화면 제공
63. 성능 저하 후보군 (WebView 랜더링) - K사 사례
• 웹뷰 화면 로딩 시간이 오래 걸림
• 50%의 사용자는 2.2초 내에 응답을 받으나 하위 5% 사용자는 7초 이상의 화면 로딩 시간이 걸림
(즉 100명중에 5명은 7초 이상의 화면 랜더링 시간이 걸림)
67. 여러분이 알고 있는 보안 라이브러리 들..
APP 개발사
APP 파일
암호화 APP
파일
APP 개발사
암호화 APP
파일
APP 개발
APP
등
록
APP
복호화
APP
실행
스마트폰 APP 실행환경
배포&설치
실행
암호화, 키보드 보안, 난독화 서비스들
크래시 빈번히 발생
소스코드
난독화
바이너리
난독화
바이너리난독화
원본
소스코드
소스코드 난독화
암호화 서비스들은 서버 용량 증설 체크 필수!
공공 앱은 시작 화면에 정말 다수 발생
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