SlideShare a Scribd company logo
[24]안드로이드 웹뷰의 모든것
안드로이드 웹뷰의 모든 것
NAVER 웨일 이형욱 (TL)
발표자 소개
• 이형욱 (hyungwook.lee@navercorp.com)
• NAVER 웨일팀
• Tech Leader
• 웨일 브라우저 (데탑, 모바일) 개발
• 네이버앱 크로스워크 엔진 개발
• WebKit Committer
• Chromium Contributor
목차
Chapter 1. Android WebView overview
1. 안드로이드 웹뷰란 무엇인가?
2. 안드로이드 웹뷰의 역사
3. 안드로이드 웹뷰와 파편화
4. WebKit 브라우저 엔진의 역사
5. 안드로이드 웹뷰의 구조
6. 크롬과 크로미움의 차이점
Chapter 2. How chromium works
1. 브라우저는 어떻게 동작 하는가?
2. HTML Parser
3. CSS Parser
4. Java Script Engine
5. Render Tree
6. Layout
7. Paint
8. VSync 기반 멀티 쓰레드 렌더링
Chapter 3. How chromium powered WebView works
1. 안드로이드에서 크로미움은 어떻게 동작 하는가?
2. 웨일 브라우저의 뷰 구조
3. 크로미움 웹뷰의 구조적 차이점
4. 안드로이드 렌더링 파이프 라인 (KitKat 4.4 이하)
5. 크로미움 웹뷰 렌더링 파이프 라인 (KitKat 4.4 이하)
6. 안드로이드 렌더링 파이프 라인 (Lollipop 5.0 이상)
7. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)

Recommended for you

[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)

오픈소스 WAS 모니터링 솔루션인 Scouter에 대한 간략한 설치가이드입니다. JBoss 기준으로 작성되었으며, JBoss 관련된 스크립트는 github.com/OpenSourceConsulting/jboss-eap-6-scripts에서도 확인하실 수 있습니다.

scouter apmjboss apm
Webdriver.io
Webdriver.io Webdriver.io
Webdriver.io

This document discusses the webdriver.io framework for automated browser testing. The author needed a framework for blackbox testing of a web interface like a user would. Webdriver.io provides JavaScript bindings for Selenium that allow writing tests in a synchronous style using the browser object. Tests can run across multiple browsers and platforms. The framework is easy to set up and use, supports plugins, and allows custom commands. Under the hood, it communicates with Selenium using the WebDriver protocol to automate actual browsers.

#webdriver
안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기

Android의 Window와 WindowInsets에 대해서 알아봅니다. System UI 영역에 우리 앱을 draw하거나 풀스크린 모드로 화면을 구성 할 때, Display Cutout 대응 등 WindowInset이 활용되는 경우와 주의해야 할 점들에 대해 알아봅니다. Google 개발자 Chris Banes가 발표한 Becoming a master window fitters(Droidcon NYC 2017)를 기반으로 준비하였으며, 최신사항을 반영하였습니다.

Chapter 1. Android WebView overview
[Source: http://chittagongit.com//images/android-icon-transparent-background/android-icon-transparent-background-16.jpg]
Web content in a box
 Powers browsers such as AOSP Browser
 Displays almost all mobile banner ads
 Can be used to create portable HTML-based apps
 Often intermixed imperceptibly with native Views
<- Android View
<- Android WebView
1. 안드로이드 웹뷰란 무엇인가?
Android <= J: custom WebKit-based “classic” WebView
Android K: Chromium 30 / 33-based WebView
Android L: Unbundled Evergreen WebView
http://com.odroid.com/sigong/nf_file_board/nfile_board_view.php?keyword=&tag=ODROID-U3&bid=214 http://www.ibtimes.co.uk/moto-g-finally-tastes-android-5-0-lollipop-via-cyanogenmod-12-unofficial-build-1475895
2. 안드로이드 웹뷰의 역사
• 안드로이드 제조사에서 경쟁적으로 WebKit을 Customization
• 안드로이드 버전별 서로 다른 WebKit을 사용하�� 있음
1) Android 4.3 이전 버전은 WebKit 기반의 렌더링 엔진을 사용
2) Android 4.4 부터는 Blink 기반의 렌더링 엔진으로 교체
• 현재는 사용자 웹뷰 업데이트 유무에 따라 서로 다른 버전을 사용
HTML5 Test.com CSS3 Test.com
삼성 갤럭시 S4 472 59%
삼성 갤럭시 노트 2 404 47%
엘지 옵티머스 G 395 45%
엘지 옵티머스 뷰 395 45%
팬택 베가 No 6 318 45%
갤럭시 넥서스 (AOSP) 267 45%
3. 안드로이드 웹뷰와 파편화

Recommended for you

마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법

Micro Service Architecture (MSA)의 특징과 구현하는 방법을 간략히 소개합니다. Nginx 에서 소개한 MSA 구조를 담고 있으며 API Gateway, Service Discovery Pattern 등의 설명이 있습니다.

마이크로서비스아키텍쳐nginxcloud
Angular 9
Angular 9 Angular 9
Angular 9

Presentation about new Angular 9. It gives introduction about angular framework. Provides information about why we use angular, additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages. It will also explain about the key components like angular architecture, routing, dependency injection etc.,

angular9angularweb design
Android chromium web view
Android chromium web viewAndroid chromium web view
Android chromium web view

The document discusses the history and architecture of Android's WebView. It describes how WebView has transitioned from using a custom WebKit implementation to being based on the Chromium rendering engine. It also summarizes the threading models of Chrome and WebView and explains how rendering occurs in two phases of painting and compositing layers.

blinkerwebviewchromium
4. WebKit 브라우저 엔진의 역사
KHTML, KJS (1999.05 ~)
Blink (2013.04 ~)
WebKit (2001 ~)
Open Source in 2005
Apple Forks KHTML, KJS in 2001
Google Forks WebKit in 2013
5. 안드로이드 웹뷰의 구조
Blink
(웹엔진)
Content
(멀티 프로세스 지원 레이어)
Content API
Blink
Chromium
Android
WebView
Framework
Browser
Framework
Google Chrome Chromium
Logo Colorful Blue
Crash reporting Yes, if you turn it on None
User metrics Yes, if you turn it on No
Video and audio tags AAC, MP3, Vorbis and Theora Vorbis and Theora by default
Adobe Flash
custom (non-free) plugin
included in release
supports NPAPI plugins,
including the one from Adobe
PDF support
custom (non-free) plugin
included in release
downloads and displays with
system PDF viewer
Code Tested by Chrome developers May be modified by distributions
Sandbox Always on Depending on the distribution
Quality Assurance
New releases are tested before
sending to users
Depending on the distribution
6. 크롬과 크로미움의 차이점
Chapter 2. How chromium works
[Source: http://alien.slackbook.org/blog/watch-netflix-video-in-your-chromium-browser-this-time-for-real/]

Recommended for you

Reactjs
ReactjsReactjs
Reactjs

The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.

reactnpxnpm
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js

The document outlines the agenda for a presentation on Node.js, which includes defining what Node.js is, how it works, examples of its use, how to learn Node.js, and what problems it is well-suited to solve. Key points are that Node.js is a JavaScript runtime built on Chrome's V8 engine, uses non-blocking I/O, and is well-suited for building microservices and real-time applications that require high throughput and scalability. Recommended resources for learning more include nodeschool.io, codewars.com, and nodeup.com.

node.js
Express node js
Express node jsExpress node js
Express node js

The document provides an overview of middleware in Node.js and Express. It defines middleware as functions that have access to the request and response objects and can run code and make changes to these objects before the next middleware in the chain. It discusses common uses of middleware like logging, authentication, parsing request bodies. It also covers Connect middleware and how Express builds on Connect by adding features like routing and views. Key aspects covered include the middleware pipeline concept, error handling with middleware, and common middleware modules.

1. 브라우저는 어떻게 동작 하는가?
DOM: Document Object Model
• Document = HTML, well-formed XML
• Object Model = Data + Method
Standard way for accessing and manipulating
2. HTML Parser
CSSOM: CSS Object Model
• DOM과 비슷하게 CSS도 CSSOM이 있음
• CSS는 HTML Element의 스타일을 정의
• 외부 링크로 정의된 경우 렌더링이 블로킹 됨
• Cascade down 개념을 구현하기 위해 트리 구조
3. CSS Parser
4. Java Script Engine

Recommended for you

Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course

Build over 20 mini JavaScript Projects with full source code https://skl.sh/3yJdYM0 Web Developer Setup use of Editor for JavaScript Code JavaScript Projects DOM Interactive Dynamic web pages Introduction web development Course Resource Guide. Getting started with JavaScript DOM coding and development Web Developer Setup use of Editor for JavaScript Code JavaScript Resources to explore more about JavaScript JavaScript DOM Object Selecting Page elements and more JavaScript querySelectorAll Get Page Elements Select ALL Page Events Element Event Listener access page content with JavaScript JavaScript and Page Input Values from Page Elements How to use JavaScript Request Animation Frame JavaScript Starter Projects DOM Simple Projects to Start Coding How to make Interactive DOM list saving to localstorage JavaScript Component Create a Star Rating Project JavaScript Game within the DOM Coin Toss Game Project JavaScript Typing Challenge Game with JavaScript DOM JavaScript DOM fun with Page Elements Moving Storing Keypress JavaScript Combo Guessing Game Exercise JavaScript Shape Clicker Game Click the shape quickly to win JavaScript Number Guessing Game with Game Logic JavaScript DOM Interactive Components and Useful Projects Pure JavaScript Accordion hide and show page elements JavaScript Drag and Drop Simple Boxes Component Dynamic Drag and Drop JavaScript Email Extractor Mini Project Create a Quiz with Javascript JSON quiz tracker JavaScript Image Preview File Reader Example JavaScript Interactive Dice Game with Page elements JavaScript Dice Game Challenge Lesson JavaScript DOM Fun Projects Interactive DOM Elements JavaScript Tip Calculator Project Tip Calculator Project Part 1 Tip Calculator Project Part 2 Pure JavaScript Calculator DOM page elements Project JavaScript Calculator Part 1 JavaScript Calculator Part 2 JavaScript Calculator Part 3 JavaScript Bubble Popping DOM Game Coding project How to move a Page Element With JavaScript DOM Mover Example Collision Detection between Page elements with JavaScript DOM JavaScript DOM Interactive Game

javascriptgameswebsite
Jenkins for java world
Jenkins for java worldJenkins for java world
Jenkins for java world

The document provides an overview of Jenkins, a popular open source continuous integration (CI) tool. It discusses what CI is, describes Jenkins' architecture and features like plugin extensibility. It also covers installing and configuring Jenkins, including managing plugins, nodes and jobs. The document demonstrates how to set up a sample job and outlines benefits like supporting Agile development through continuous integration and access to working software copies.

jenkinscontinuous integration
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js

Vue.js의 깊은 곳을 알아봅시다. 1. Vue.js Architecture 2. Observing 3. Rendering 4. Vue.js Package * 이 자료는 VUE.TIFULE KOREA 6회에서 발표한 자료입니다.

vuejsvuejs-corejavascript
Recalculate Style의 결과
• Render Tree = DOM Tree + CSSOM Tree
• DOM Tree와 Render Tree는 1:1 관계가 아님
• 화면에 보이는 요소들을 중심으로 구성
5. Render Tree (1/2)
5. Render Tree (2/2)
DOM CSSOM
Render Tree
[Source: Critical Rendering Path By llya Grigorik]
Layout 알고리즘
• 각 박스의 넓이는 viewport (ICB)기준
• 각 박스의 높이는 contents (fonts)를 기준
• 윈도우 사이즈를 변경 하거나 폰트 변경 시 Global Layout
• Dirty bit system으로 incremental layout
6. Layout
1024
768
7. Paint

Recommended for you

Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.

javascriptvuejs
k8s practice 2023.pptx
k8s practice 2023.pptxk8s practice 2023.pptx
k8s practice 2023.pptx

The document provides instructions for setting up Kubernetes on two VMs (master and worker nodes) using VirtualBox. It describes the minimum requirements for the VMs and outlines the steps to configure networking and install Kubernetes, container runtime (containerd), and CNI (Flannel). The steps covered include setting up NAT and host-only networking in VirtualBox, configuring the hosts file, installing Kubernetes packages (kubeadm, kubelet, kubectl), initializing the master node with kubeadm, joining the worker node to the cluster, and deploying a sample pod.

쿠버네티스 설치
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test

자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test 송의초경 N Tech Service/ Contents QA ​NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.

8. VSync 기반 멀티 쓰레드 렌더링 (1/6)
[Source: Chrome Graphics - BlinkOn 1]
[Source: Chrome Graphics - BlinkOn 1]
8. VSync 기반 멀티 쓰레드 렌더링 (2/6)
[Source: Chrome Graphics - BlinkOn 1]
8. VSync 기반 멀티 쓰레드 렌더링 (3/6)
Scrolling
Animation
Pinch Zoom
[Source: Life of a pixel 2018]
8. VSync 기반 멀티 쓰레드 렌더링 (4/6)

Recommended for you

Docker로 서버 개발 편하게 하기
Docker로 서버 개발 편하게 하기Docker로 서버 개발 편하게 하기
Docker로 서버 개발 편하게 하기

Docker를 한 번도 써보지 않은 사람들을 위한 간단한 소개

devopsdocker
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드

katalonstudio 툴을 이용한 GUI 테스트 자동화 입니다(툴 가이드)

guitestautomationkatalonstudio
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
fennecopenwebmobile
[Source: Chrome Graphics - BlinkOn 1]
8. VSync 기반 멀티 쓰레드 렌더링 (5/6)
A modern 2D graphics library
SkPicture, SkPicturePlayBack:
Records and replay draw operations.
[http://www.dorothybrowser.com/parallelizing-canvas-rendering/]
8. VSync 기반 멀티 쓰레드 렌더링 (6/6)
Chapter 3. How chromium powered WebView works
[Source: https://play.google.com/apps/testing/com.google.android.webview ]
앱 프로세스
서비스 프로세스
SurfaveView
서비스 프로세스
1. 안드로이드에서 크로미움은 어떻게 동작 하는가?
[Source: Chrome Graphics - BlinkOn 1]

Recommended for you

[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효

[145]5년���의네이버웹엔진개발삽질기그리고 김효

deview2016
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond

A perspective on front-end dev trend and environment in 2016

gulpwebpackelectronics
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황

웹 고속화 기술과 킬러웹앱 컨퍼런스

html5webit
2. 웨일 브라우저의 뷰 구조
SurfaveView
FrameLayout
FrameLayout
Whale (Chrome)
 SurfaceView
 Vsync based rendering
 Async uploads using
EGLImage and
glTexSubImage2D()
Chromium powered webview
 “Draw functor”: inject draw calls into
system GL context.
 Android based rendering
 Private API. The WebView injects a
callback onto the display list.
3. 크로미움 웹뷰의 구조적 차이점 (1/2)
[Source: Android WebView rendering BlinkOn 3]
Graphics components
Whale (Chrome)
- Multi-process
 UI thread
 GPU Process
 Texture upload thread
 Per renderer process:
o Blink thread
o Compositor thread
o Raster thread
Chromium WebView
- Single-process (Multi-process)
 Combined UI + Compositor thread
 Android RenderThread (+in-process
GPU thread)
 Canvas/WebGL GPU thread
 Blink thread
 Raster thread
[Source: Android WebView rendering BlinkOn 3]
Architecture
3. 크로미움 웹뷰의 구조적 차이점 (2/2)
4. Android Rendering Pipeline <= Kit
[Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview]
[MainThread]
4. 안드로이드 렌더링 파이프 라인 (KitKat 4.4 이하)

Recommended for you

Web os 전략 0912
Web os 전략 0912Web os 전략 0912
Web os 전략 0912

2012년 9월 20일 DCC 2012에서 발표한 내용입니다.

html5web os
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010
webkit
5. 크로미움 웹뷰 렌더링 파이프 라인 (KitKat 4.4 이하)
6. 안드로이드 렌더링 파이프 라인 (Lollipop 5.0 이상)
[Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview]
7. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)
[Source: http://mail.cfanz.cn/index.php?c=article&a=read&id=210306]
8. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)

Recommended for you

W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017

This slides is about tech trend of HTML5 mostly focused on industry and W3C. It was presented in W3C HTML5 Conference 2017 in Seoul.

html5w3ctrends
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈 발표자료입니다.

[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...

Implementing Web Based Online MultiPlyaer Tetris with OpenSource

Thank You.

More Related Content

What's hot

[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
NAVER D2
 
What's new in selenium 4
What's new in selenium 4What's new in selenium 4
What's new in selenium 4
Knoldus Inc.
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
hyeonjae Cheon
 
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
Ji-Woong Choi
 
Webdriver.io
Webdriver.io Webdriver.io
Webdriver.io
LinkMe Srl
 
안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기
Myungwook Ahn
 
마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법
Young Soo Lee
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Android chromium web view
Android chromium web viewAndroid chromium web view
Android chromium web view
朋 王
 
Reactjs
ReactjsReactjs
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
Rob O'Doherty
 
Express node js
Express node jsExpress node js
Express node js
Yashprit Singh
 
Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course
Laurence Svekis ✔
 
Jenkins for java world
Jenkins for java worldJenkins for java world
Jenkins for java world
Ashok Kumar
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
선협 이
 
Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
Jonathan Goode
 
k8s practice 2023.pptx
k8s practice 2023.pptxk8s practice 2023.pptx
k8s practice 2023.pptx
wonyong hwang
 
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
NAVER Engineering
 
Docker로 서버 개발 편하게 하기
Docker로 서버 개발 편하게 하기Docker로 서버 개발 편하게 하기
Docker로 서버 개발 편하게 하기
Dronix
 
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
SangIn Choung
 

What's hot (20)

[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
 
What's new in selenium 4
What's new in selenium 4What's new in selenium 4
What's new in selenium 4
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
 
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
 
Webdriver.io
Webdriver.io Webdriver.io
Webdriver.io
 
안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기
 
마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법마이크로 서비스 아키텍쳐 소개 및 구현 방법
마이크로 서비스 아키텍쳐 소개 및 구현 방법
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Android chromium web view
Android chromium web viewAndroid chromium web view
Android chromium web view
 
Reactjs
ReactjsReactjs
Reactjs
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Express node js
Express node jsExpress node js
Express node js
 
Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course
 
Jenkins for java world
Jenkins for java worldJenkins for java world
Jenkins for java world
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
 
k8s practice 2023.pptx
k8s practice 2023.pptxk8s practice 2023.pptx
k8s practice 2023.pptx
 
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
 
Docker로 서버 개발 편하게 하기
Docker로 서버 개발 편하게 하기Docker로 서버 개발 편하게 하기
Docker로 서버 개발 편하게 하기
 
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
katalon studio 툴을 이용한 GUI 테스트 자동화 가이드
 

Similar to [24]안드로이드 웹뷰의 모든것

Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Channy Yun
 
[145]5년간의네이버웹엔진개발삽질기그리고 기��효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
NAVER D2
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
NAVER Engineering
 
Web os 전략 0912
Web os 전략 0912Web os 전략 0912
Web os 전략 0912
우일 권
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
draghome
 
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010
Joone Hur
 
W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017
Wonsuk Lee
 
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
Changhwan Yi
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
 
어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1
bingoori
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
NAVER D2
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
ssuser0e53c8
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
 
락플레이스 OpenShift Q&A 토크쇼 발표자료
락플레이스 OpenShift Q&A 토크쇼 발표자료락플레이스 OpenShift Q&A 토크쇼 발표자료
락플레이스 OpenShift Q&A 토크쇼 발표자료
rockplace
 
웹스트리밍동영상보안자료
웹스트리밍동영상보안자료웹스트리밍동영상보안자료
웹스트리밍동영상보안자료
시온시큐리티
 
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
NAVER D2
 
웹 IDE 비교
웹 IDE 비교웹 IDE 비교
웹 IDE 비교
Junyoung Lee
 

Similar to [24]안드로이드 웹뷰의 모든것 (20)

Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
Web os 전략 0912
Web os 전략 0912Web os 전략 0912
Web os 전략 0912
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
 
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010
 
W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017
 
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
락플레이스 OpenShift Q&A 토크쇼 발표자료
락플레이스 OpenShift Q&A 토크쇼 발표자료락플레이스 OpenShift Q&A 토크쇼 발표자료
락플레이스 OpenShift Q&A 토크쇼 발표자료
 
Front end engineer
Front end engineerFront end engineer
Front end engineer
 
웹스트리밍동영상보안자료
웹스트리밍동영상보안자료웹스트리밍동영상보안자료
웹스트리밍동영상보안자료
 
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
 
웹 IDE 비교
웹 IDE 비교웹 IDE 비교
웹 IDE 비교
 

More from NAVER Engineering

React vac pattern
React vac patternReact vac pattern
React vac pattern
NAVER Engineering
 
디자인 시스템에 직방 ZUIX
디자인 시스템에 직방 ZUIX디자인 시스템에 직방 ZUIX
디자인 시스템에 직방 ZUIX
NAVER Engineering
 
진화하는 디자인 시스템(걸음마 편)
진화하는 디자인 시스템(걸음마 편)진화하는 디자인 시스템(걸음마 편)
진화하는 디자인 시스템(걸음마 편)
NAVER Engineering
 
서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트
NAVER Engineering
 
BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호
NAVER Engineering
 
이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라
NAVER Engineering
 
날고 있는 여러 비행기 넘나 들며 정비하기
날고 있는 여러 비행기 넘나 들며 정비하기날고 있는 여러 비행기 넘나 들며 정비하기
날고 있는 여러 비행기 넘나 들며 정비하기
NAVER Engineering
 
쏘카프레임 구축 배경과 과정
 쏘카프레임 구축 배경과 과정 쏘카프레임 구축 배경과 과정
쏘카프레임 구축 배경과 과정
NAVER Engineering
 
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
NAVER Engineering
 
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
NAVER Engineering
 
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
NAVER Engineering
 
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
NAVER Engineering
 
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
NAVER Engineering
 
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
NAVER Engineering
 
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
NAVER Engineering
 
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
NAVER Engineering
 
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
NAVER Engineering
 
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
NAVER Engineering
 
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
NAVER Engineering
 
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
NAVER Engineering
 

More from NAVER Engineering (20)

React vac pattern
React vac patternReact vac pattern
React vac pattern
 
디자인 시스템에 직방 ZUIX
디자인 시스템에 직방 ZUIX디자인 시스템에 직방 ZUIX
디자인 시스템에 직방 ZUIX
 
진화하는 디자인 시스템(걸음마 편)
진화하는 디자인 시스템(걸음마 편)진화하는 디자인 시스템(걸음마 편)
진화하는 디자인 시스템(걸음마 편)
 
서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트
 
BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호BPL(Banksalad Product Language) 무야호
BPL(Banksalad Product Language) 무야호
 
이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라
 
날고 있는 여러 비행기 넘나 들며 정비하기
날고 있는 여러 비행기 넘나 들며 정비하기날고 있는 여러 비행기 넘나 들며 정비하기
날고 있는 여러 비행기 넘나 들며 정비하기
 
쏘카프레임 구축 배경과 과정
 쏘카프레임 구축 배경과 과정 쏘카프레임 구축 배경과 과정
쏘카프레임 구축 배경과 과정
 
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
 
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
 
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
 
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
 
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
 
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
 
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
 
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
 
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
 
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
 
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
 
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
 

[24]안드로이드 웹뷰의 모든것

  • 2. 안드로이드 웹뷰의 모든 것 NAVER 웨일 이형욱 (TL)
  • 3. 발표자 소개 • 이형욱 (hyungwook.lee@navercorp.com) • NAVER 웨일팀 • Tech Leader • 웨일 브라우저 (데탑, 모바일) 개발 • 네이버앱 크로스워크 엔진 개발 • WebKit Committer • Chromium Contributor
  • 4. 목차 Chapter 1. Android WebView overview 1. 안드로이드 웹뷰란 무엇인가? 2. 안드로이드 웹뷰의 역사 3. 안드로이드 웹뷰와 파편화 4. WebKit 브라우저 엔진의 역사 5. 안드로이드 웹뷰의 구조 6. 크롬과 크로미움의 차이점 Chapter 2. How chromium works 1. 브라우저는 어떻게 동작 하는가? 2. HTML Parser 3. CSS Parser 4. Java Script Engine 5. Render Tree 6. Layout 7. Paint 8. VSync 기반 멀티 쓰레드 렌더링 Chapter 3. How chromium powered WebView works 1. 안드로이드에서 크로미움은 어떻게 동작 하는가? 2. 웨일 브라우저의 뷰 구조 3. 크로미움 웹뷰의 구조적 차이점 4. 안드로이드 렌더링 파이프 라인 (KitKat 4.4 이하) 5. 크로미움 웹뷰 렌더링 파이프 라인 (KitKat 4.4 이하) 6. 안드로이드 렌더링 파이프 라인 (Lollipop 5.0 이상) 7. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)
  • 5. Chapter 1. Android WebView overview [Source: http://chittagongit.com//images/android-icon-transparent-background/android-icon-transparent-background-16.jpg]
  • 6. Web content in a box  Powers browsers such as AOSP Browser  Displays almost all mobile banner ads  Can be used to create portable HTML-based apps  Often intermixed imperceptibly with native Views <- Android View <- Android WebView 1. 안드로이드 웹뷰란 무엇인가?
  • 7. Android <= J: custom WebKit-based “classic” WebView Android K: Chromium 30 / 33-based WebView Android L: Unbundled Evergreen WebView http://com.odroid.com/sigong/nf_file_board/nfile_board_view.php?keyword=&tag=ODROID-U3&bid=214 http://www.ibtimes.co.uk/moto-g-finally-tastes-android-5-0-lollipop-via-cyanogenmod-12-unofficial-build-1475895 2. 안드로이드 웹뷰의 역사
  • 8. • 안드로이드 제조사에서 경쟁적으로 WebKit을 Customization • 안드로이드 버전별 서로 다른 WebKit을 사용하고 있음 1) Android 4.3 이전 버전은 WebKit 기반의 렌더링 엔진을 사용 2) Android 4.4 부터는 Blink 기반의 렌더링 엔진으로 교체 • 현재는 사용자 웹뷰 업데이트 유무에 따라 서로 다른 버전을 사용 HTML5 Test.com CSS3 Test.com 삼성 갤럭시 S4 472 59% 삼성 갤럭시 노트 2 404 47% 엘지 옵티머스 G 395 45% 엘지 옵티머스 뷰 395 45% 팬택 베가 No 6 318 45% 갤럭시 넥서스 (AOSP) 267 45% 3. 안드로이드 웹뷰와 파편화
  • 9. 4. WebKit 브라우저 엔진의 역사 KHTML, KJS (1999.05 ~) Blink (2013.04 ~) WebKit (2001 ~) Open Source in 2005 Apple Forks KHTML, KJS in 2001 Google Forks WebKit in 2013
  • 10. 5. 안드로이드 웹뷰의 구조 Blink (웹엔진) Content (멀티 프로세스 지원 레이어) Content API Blink Chromium Android WebView Framework Browser Framework
  • 11. Google Chrome Chromium Logo Colorful Blue Crash reporting Yes, if you turn it on None User metrics Yes, if you turn it on No Video and audio tags AAC, MP3, Vorbis and Theora Vorbis and Theora by default Adobe Flash custom (non-free) plugin included in release supports NPAPI plugins, including the one from Adobe PDF support custom (non-free) plugin included in release downloads and displays with system PDF viewer Code Tested by Chrome developers May be modified by distributions Sandbox Always on Depending on the distribution Quality Assurance New releases are tested before sending to users Depending on the distribution 6. 크롬과 크로미움의 차이점
  • 12. Chapter 2. How chromium works [Source: http://alien.slackbook.org/blog/watch-netflix-video-in-your-chromium-browser-this-time-for-real/]
  • 13. 1. 브라우저는 어떻게 동작 하는가?
  • 14. DOM: Document Object Model • Document = HTML, well-formed XML • Object Model = Data + Method Standard way for accessing and manipulating 2. HTML Parser
  • 15. CSSOM: CSS Object Model • DOM과 비슷하게 CSS도 CSSOM이 있음 • CSS는 HTML Element의 스타일을 정의 • 외부 링크로 정의된 경우 렌더링이 블로킹 됨 • Cascade down 개념을 구현하기 위해 트리 구조 3. CSS Parser
  • 16. 4. Java Script Engine
  • 17. Recalculate Style의 결과 • Render Tree = DOM Tree + CSSOM Tree • DOM Tree와 Render Tree는 1:1 관계가 아님 • 화면에 보이는 요소들을 중심으로 구성 5. Render Tree (1/2)
  • 18. 5. Render Tree (2/2) DOM CSSOM Render Tree [Source: Critical Rendering Path By llya Grigorik]
  • 19. Layout 알고리즘 • 각 박스의 넓이는 viewport (ICB)기준 • 각 박스의 높이는 contents (fonts)를 기준 • 윈도우 사이즈를 변경 하거나 폰트 변경 시 Global Layout • Dirty bit system으로 incremental layout 6. Layout
  • 21. 8. VSync 기반 멀티 쓰레드 렌더링 (1/6) [Source: Chrome Graphics - BlinkOn 1]
  • 22. [Source: Chrome Graphics - BlinkOn 1] 8. VSync 기반 멀티 쓰레드 렌더링 (2/6)
  • 23. [Source: Chrome Graphics - BlinkOn 1] 8. VSync 기반 멀티 쓰레드 렌더링 (3/6)
  • 24. Scrolling Animation Pinch Zoom [Source: Life of a pixel 2018] 8. VSync 기반 멀티 쓰레드 렌더링 (4/6)
  • 25. [Source: Chrome Graphics - BlinkOn 1] 8. VSync 기반 멀티 쓰레드 렌더링 (5/6)
  • 26. A modern 2D graphics library SkPicture, SkPicturePlayBack: Records and replay draw operations. [http://www.dorothybrowser.com/parallelizing-canvas-rendering/] 8. VSync 기반 멀티 쓰레드 렌더링 (6/6)
  • 27. Chapter 3. How chromium powered WebView works [Source: https://play.google.com/apps/testing/com.google.android.webview ]
  • 28. 앱 프로세스 서비스 프로세스 SurfaveView 서비스 프로세스 1. 안드로이드에서 크로미움은 어떻게 동작 하는가? [Source: Chrome Graphics - BlinkOn 1]
  • 29. 2. 웨일 브라우저의 뷰 구조 SurfaveView FrameLayout FrameLayout
  • 30. Whale (Chrome)  SurfaceView  Vsync based rendering  Async uploads using EGLImage and glTexSubImage2D() Chromium powered webview  “Draw functor”: inject draw calls into system GL context.  Android based rendering  Private API. The WebView injects a callback onto the display list. 3. 크로미움 웹뷰의 구조적 차이점 (1/2) [Source: Android WebView rendering BlinkOn 3] Graphics components
  • 31. Whale (Chrome) - Multi-process  UI thread  GPU Process  Texture upload thread  Per renderer process: o Blink thread o Compositor thread o Raster thread Chromium WebView - Single-process (Multi-process)  Combined UI + Compositor thread  Android RenderThread (+in-process GPU thread)  Canvas/WebGL GPU thread  Blink thread  Raster thread [Source: Android WebView rendering BlinkOn 3] Architecture 3. 크로미움 웹뷰의 구조적 차이점 (2/2)
  • 32. 4. Android Rendering Pipeline <= Kit [Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview] [MainThread] 4. 안드로이드 렌더링 파이프 라인 (KitKat 4.4 이하)
  • 33. 5. 크로미움 웹뷰 렌더링 파이프 라인 (KitKat 4.4 이하)
  • 34. 6. 안드로이드 렌더링 파이프 라인 (Lollipop 5.0 이상) [Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview]
  • 35. 7. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)
  • 36. [Source: http://mail.cfanz.cn/index.php?c=article&a=read&id=210306] 8. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)