SlideShare une entreprise Scribd logo
1  sur  28
프로그레시브 웹앱
Progressive Web App(PWA)
2017/02/21
UX팀
2015년 6월 Alex Russell이 Google 개발자 컨퍼런스에서 제안합니다.
프로그레시브 웹앱: 우리의 영혼을 잃지
않고 탭에서 벗어나기
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
Alex Russell
이 앱(프로그레시브 웹앱)은
패키징 처리되지 않고 앱스토어를 통해
배포되지 않으며 기존 웹사이트를 기반으로 움직입니다.
이 프로그레시브 웹앱은 점차 “앱”이 되어 간다고
보시면 됩니다.
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
모바일웹은 도달율은 높지만 참여도(engagement)가 낮다는 것이 이미 알려진 사실입니다
월간 순 방문자수 방문자당 평균 머무르는 시간
모바일앱 모바일웹
상위 100개의 모바일웹과 모바일앱 비교(comScore Mobile Metrix, U.S., Age 18+, June 2015)
왜냐하면 모바일 웹사이트는
네이티브 어플리케이션보다 현저히 느리며,
터치 인터랙션(제스쳐)의 제약 등으로 인해 필요한 정보획득은 가능하더라도
사용자경험의 질이 떨어지며,
하드웨어 기능에 대한 접근도 어렵습니다.
하지만 HTML5 표준기술 기반의
웹 고속화 기술로 많은 변화가 진행되고 있습니다.
프로그레시브 웹 앱(Progressive Web App)은 아래의 특징이 있습니다.
 빠르다.
 단 한번의 클릭으로 콘텐츠 접근이 가능하다.
 부드러운 애니메이션과 매끄러운 내비게이션으로 동작한다.
 웹 푸시로 참여도를 높일 수 있다.
 불안정한 네트워크에서도 좋은 경험을 제공할 수 있다.
 모든 브라우저에서 일관적인 사용자 경험을 제공할 수 있다.
프로그레시브 웹앱은 모바일 웹사이트와 모바일 어플리케이션에서 진화한
새로운 접근방식이며
모바일 사용자 경험의 장점과 모바일 웹브라우져의 특징을 결합한
새로운 어플리케이션 모델입니다.
프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
캐시된 쉘은 재 방문 시 즉시 로드됩니다.
속도에 포커싱되어 있습니다.
동적인 내용이 뷰를
채우게됩니다.
1
프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
 자바 스크립트로 작성된 클라이언트 측 프록시
 웹에서 네이티브 앱과 같은 동작을 재현하기 위한
장치기능 액세스
 네이티브앱과 동일한 앱 접근성을 구현하기 위한 설정
목록을 가진 파일
 디바이스 홈스크린에 추가될 앱 아이콘 설정
 풀스크린 모드 설정(standalone or fullscreen)
 디바이스 회전에 따른 세로/가로모드 설정
 인트로 이미지 설정
 백그라운드/테마(System Status 영역 등) 색상 설정
2 3
프로그레시브 웹 앱은 아래의 표준기술을 사용합니다.
프로그레시브 웹 앱을 한번 생성해 보겠습니다.
#슬라이드쇼 상태에서 클릭하시면 YouTube를 통해 재생됩니다.
[특징1] 네이티브 모바일앱의 사용자 경험을 제공합니다.
 모바일앱과 마찬가지로 컨텐츠가
로드되는 동안 스플레시 이미지를
보여줄 수 있습니다.
 웹 브라우저 영역(URL 입력영역)
도 없습니다.
[특징2] 네트워크가 불안정할 때도 기존에 캐시된 화면을 보여줍니다.
[특징3] 기존 모바일웹과 차원이 다른 부드럽고 빠른 내비게이션을 제공합니다.
 3G 네트워크 환경에서 첫 방문 시 10초 이내로 페이지를
로드합니다.
 페이지 재방문 시 500 밀리세컨트 이내로 페이지를 로드
합니다.
 초당 60 프레임을 스크롤할 수 있습니다.
 이미지가 로드되는 동안 컨텐츠가 점프되지 않습니다.
[특징4] Web Push를 발송할 수 있습니다.
 기존 어플리케이션 푸시와 마찬가지로 푸시 메시지를
발송할 수 있습니다.
 프로그레시브 웹앱이 닫힌 상태에서도 마찬가지로 푸
시 수신이 가능합니다.
[특징4] Web Push를 발송할 수 있습니다.
 프로그레시브 웹앱의 표준기술은 최신버전의 모든 브라우저에서 작동시킬 수 있습니다.
 하지만 Service Worker는 현재는 크롬, 오페라, 파이어폭스에서 사용할 수 있으며 마이
크로소프트의 웹브라우저(in development)와 애플의 웹브라우저(under consideration)
에도 곧 적용될 예정입니다.
[특징5] 프로그레시브 웹앱은 다양한 모바일웹 브라우저에서 동작합니다.
[특징5] 그중 크롬 모바일웹 브라우저는 타사대비 앞서나가고 있죠.
구분 Chrome
(Ver 55.0.2883.91)
Chrome
(ver 56.0.2924.79)
Safari
(ver XXXXXXXX)
Native Behaviors
Local Notifications
Push Messages ●
Foreground Detection ● ● ●
Permissions ●
Seamless Experience
Offline Mode ●
Home Screen Installation
Background Sync ●
Inter-App Communication
Input
Touch Gestures ● ● ●
Speech Recognition ●
Clipboard(Copy&Paste) ● ● ●
Pointing Device Adaptation ●
Surroundings
Bluetooth 구현중
NFC 구현중
Proximity Sensors 구현중
Ambient Light 구현중
Camera & Microphone
Audio & Video Capture ●
Advanced Camera Controls
Recording Media ●
Real-Time Communication ●
Location & Position
Geolocation ● ● ●
Geofencing
Device Orientation ● ● ●
Device Motions ● ● ●
Device Feature
Network Type&Speed ●
Online State ● ● ●
Vibration ●
Bettery Status ●
Screen & Output
Fullscreen ●
Screen Orientation&Lock ●
Wake Lock
Presentation Features ●
Operating System
Offline Storage ● ● ●
File Access ● ● ●
Contacts
Storage Quotas ●
앱스토어 로드
어플리케이션 검색
설치 선택
사용자정보 접근 설정
다운로드 진행
사용
[특징6] 앱스토어를 통한 앱 설치보다 사용자의 접근성/편의성이 우수합니다.
그렇다면
프로그레시브 웹앱을 적용한 사례와 그 효과를 확인해 보겠습니다.
[사례1_flipKart.com] 프로그레시브 웹 앱을 통해 고객 참여도가 상승했습니다.
참여도
3배
[사례1_flipKart.com] 프로그레시브 웹 앱을 통해 재방문하는 고객비율이 증가했습니다.
[사례2_Alibaba.com] 모바일웹 전환율과 활성 사용자 비율이 증가했습니다.
Allibaba.com은 프로그레시브 웹앱을 통해 약 76%의 모바일웹
전환율을 기록했습니다.
[사례3_washingtonpost.com] 페이지뷰 등 고객 참여도가 5배 이상 증가했습니다.
프로그레시브 웹앱은 네이티브앱과의 비교대상이 아닙니다.
프로그레시브 웹앱은 기존 모바일웹, 웹앱, 하이브리드앱과 비교될 수 있으며
기존대비 더 나은 사용자 경험, 접근성과 유연함 등을 제공할 수 있다는 점에서
주목할 수 있습니다.
(웹고속화분과 웹고속화 기술)프로그레시브 웹앱_삼성전자_송정기
IBM 모바일앱 개발방식 비교_네이티브.웹.하이브리드
[참고자료]
감사합니다.
전문지식이 없어 오해한 부분도 있으므로 참고 바랍니다.

Contenu connexe

Tendances

[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Junsu Kim
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012Daum DNA
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복sung hwan Park
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page ApplicationSangmin Yoon
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER Engineering
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with AngularJT Jintae Jung
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기우현 김
 
GAE 위에서 DJANGO 사용하기
GAE 위에서 DJANGO 사용하기GAE 위에서 DJANGO 사용하기
GAE 위에서 DJANGO 사용하기Tae-lim Oh
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
Gae와cloud sql을이용한 전자결재 개발
Gae와cloud sql을이용한 전자결재 개발Gae와cloud sql을이용한 전자결재 개발
Gae와cloud sql을이용한 전자결재 개발지헌 선
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍Lee Ji Eun
 
푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스
푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스
푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스Hyun-Seok Lee
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망NAVER Engineering
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택Tai Hoon KIM
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_frameworkJT Jintae Jung
 

Tendances (20)

[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
GAE 위에서 DJANGO 사용하기
GAE 위에서 DJANGO 사용하기GAE 위에서 DJANGO 사용하기
GAE 위에서 DJANGO 사용하기
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
Gae와cloud sql을이용한 전자결재 개발
Gae와cloud sql을이용한 전자결재 개발Gae와cloud sql을이용한 전자결재 개발
Gae와cloud sql을이용한 전자결재 개발
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
 
푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스
푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스
푸시윙 - 앱이 없는 웹사이트를 위한 무료 푸시 알림 서비스
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
 
hexa core
hexa corehexa core
hexa core
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_framework
 

Similaire à 프로그레시브 웹앱(Pwa)

PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]Seulgi Choi
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용jinwook shin
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서logeo
 
[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)ri3box
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료JinHyuck Churn
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)Changhwan Yi
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기NAVER D2
 
(주)클라우다인 & Flamingo 소개서
(주)클라우다인 & Flamingo 소개서(주)클라우다인 & Flamingo 소개서
(주)클라우다인 & Flamingo 소개서BYOUNG GON KIM
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)NAVER D2
 
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016Jongwon Kim
 
ARGOS, 실제 사용자 체감 APM/EUM 솔루션
ARGOS, 실제 사용자 체감 APM/EUM 솔루션ARGOS, 실제 사용자 체감 APM/EUM 솔루션
ARGOS, 실제 사용자 체감 APM/EUM 솔루션ARGOS-LABS
 
I/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebI/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebHanboramRobinJang
 
Agados Function and Feature Overview
Agados Function and Feature OverviewAgados Function and Feature Overview
Agados Function and Feature OverviewYongkyoo Park
 
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서RSUPPORT
 
PWA 파헤치기
PWA 파헤치기PWA 파헤치기
PWA 파헤치기SangHun Lee
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신NAVER D2
 

Similaire à 프로그레시브 웹앱(Pwa) (20)

PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]PWA - overview [written in KOREAN]
PWA - overview [written in KOREAN]
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
 
Citrine소개서
Citrine소개서Citrine소개서
Citrine소개서
 
[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)[Seoultech] Mobile Security & Security Testing(Eng)
[Seoultech] Mobile Security & Security Testing(Eng)
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
(주)클라우다인 & Flamingo 소개서
(주)클라우다인 & Flamingo 소개서(주)클라우다인 & Flamingo 소개서
(주)클라우다인 & Flamingo 소개서
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
 
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016
 
ARGOS, 실제 사용자 체감 APM/EUM 솔루션
ARGOS, 실제 사용자 체감 APM/EUM 솔루션ARGOS, 실제 사용자 체감 APM/EUM 솔루션
ARGOS, 실제 사용자 체감 APM/EUM 솔루션
 
I/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebI/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in Web
 
Agados Function and Feature Overview
Agados Function and Feature OverviewAgados Function and Feature Overview
Agados Function and Feature Overview
 
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
RemoteCall+mobile pack 리모트콜 모바일팩 모바일 원격지원 제안서
 
Beta News
Beta NewsBeta News
Beta News
 
PWA 파헤치기
PWA 파헤치기PWA 파헤치기
PWA 파헤치기
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
 

Plus de Woncheol Lee

Material design update 3 Backdrop
Material design update 3 BackdropMaterial design update 3 Backdrop
Material design update 3 BackdropWoncheol Lee
 
Material design update 2: Bottom app bar
Material design update 2: Bottom app barMaterial design update 2: Bottom app bar
Material design update 2: Bottom app barWoncheol Lee
 
Material design_update 1_material system and motion
Material design_update 1_material system and motionMaterial design_update 1_material system and motion
Material design_update 1_material system and motionWoncheol Lee
 
사용자와의 커뮤니케이션을 위한 Haptic 기술
사용자와의 커뮤니케이션을 위한 Haptic 기술사용자와의 커뮤니케이션을 위한 Haptic 기술
사용자와의 커뮤니케이션을 위한 Haptic 기술Woncheol Lee
 
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측Woncheol Lee
 
바이오 정보보호 가이드라인
바이오 정보보호 가이드라인바이오 정보보호 가이드라인
바이오 정보보호 가이드라인Woncheol Lee
 
상품 및 제품 제시방법에 따른 사용자 태도조사
상품 및 제품 제시방법에 따른 사용자 태도조사상품 및 제품 제시방법에 따른 사용자 태도조사
상품 및 제품 제시방법에 따른 사용자 태도조사Woncheol Lee
 
스마트폰 앱 접근권한 개인정보보호 안내서
스마트폰 앱 접근권한 개인정보보호 안내서스마트폰 앱 접근권한 개인정보보호 안내서
스마트폰 앱 접근권한 개인정보보호 안내서Woncheol Lee
 
주의(Attention)에 따른 컨텐츠의 가치
주의(Attention)에 따른 컨텐츠의 가치주의(Attention)에 따른 컨텐츠의 가치
주의(Attention)에 따른 컨텐츠의 가치Woncheol Lee
 
Frog design & mobile entertainment system
Frog design & mobile entertainment systemFrog design & mobile entertainment system
Frog design & mobile entertainment systemWoncheol Lee
 
Floating action button
Floating action buttonFloating action button
Floating action buttonWoncheol Lee
 
조작 가능한 시간
조작 가능한 시간조작 가능한 시간
조작 가능한 시간Woncheol Lee
 
안드로이드 기본 컴퍼넌트 커스터마이징
안드로이드 기본 컴퍼넌트 커스터마이징안드로이드 기본 컴퍼넌트 커스터마이징
안드로이드 기본 컴퍼넌트 커스터마이징Woncheol Lee
 
2017 디자인 트렌드 from adobe
2017 디자인 트렌드 from adobe2017 디자인 트렌드 from adobe
2017 디자인 트렌드 from adobeWoncheol Lee
 
3D터치가 뭐길래!
3D터치가 뭐길래!3D터치가 뭐길래!
3D터치가 뭐길래!Woncheol Lee
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)Woncheol Lee
 
Wi-Fi certified miracast
Wi-Fi certified miracastWi-Fi certified miracast
Wi-Fi certified miracastWoncheol Lee
 

Plus de Woncheol Lee (19)

Material design update 3 Backdrop
Material design update 3 BackdropMaterial design update 3 Backdrop
Material design update 3 Backdrop
 
Material design update 2: Bottom app bar
Material design update 2: Bottom app barMaterial design update 2: Bottom app bar
Material design update 2: Bottom app bar
 
Material design_update 1_material system and motion
Material design_update 1_material system and motionMaterial design_update 1_material system and motion
Material design_update 1_material system and motion
 
사용자와의 커뮤니케이션을 위한 Haptic 기술
사용자와의 커뮤니케이션을 위한 Haptic 기술사용자와의 커뮤니케이션을 위한 Haptic 기술
사용자와의 커뮤니케이션을 위한 Haptic 기술
 
Placeholder
PlaceholderPlaceholder
Placeholder
 
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
 
바이오 정보보호 가이드라인
바이오 정보보호 가이드라인바이오 정보보호 가이드라인
바이오 정보보호 가이드라인
 
상품 및 제품 제시방법에 따른 사용자 태도조사
상품 및 제품 제시방법에 따른 사용자 태도조사상품 및 제품 제시방법에 따른 사용자 태도조사
상품 및 제품 제시방법에 따른 사용자 태도조사
 
스마트폰 앱 접근권한 개인정보보호 안내서
스마트폰 앱 접근권한 개인정보보호 안내서스마트폰 앱 접근권한 개인정보보호 안내서
스마트폰 앱 접근권한 개인정보보호 안내서
 
주의(Attention)에 따른 컨텐츠의 가치
주의(Attention)에 따른 컨텐츠의 가치주의(Attention)에 따른 컨텐츠의 가치
주의(Attention)에 따른 컨텐츠의 가치
 
Frog design & mobile entertainment system
Frog design & mobile entertainment systemFrog design & mobile entertainment system
Frog design & mobile entertainment system
 
Floating action button
Floating action buttonFloating action button
Floating action button
 
조작 가능한 시간
조작 가능한 시간조작 가능한 시간
조작 가능한 시간
 
안드로이드 기본 컴퍼넌트 커스터마이징
안드로이드 기본 컴퍼넌트 커스터마이징안드로이드 기본 컴퍼넌트 커스터마이징
안드로이드 기본 컴퍼넌트 커스터마이징
 
2017 디자인 트렌드 from adobe
2017 디자인 트렌드 from adobe2017 디자인 트렌드 from adobe
2017 디자인 트렌드 from adobe
 
대문(大門)
대문(大門)대문(大門)
대문(大門)
 
3D터치가 뭐길래!
3D터치가 뭐길래!3D터치가 뭐길래!
3D터치가 뭐길래!
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)
 
Wi-Fi certified miracast
Wi-Fi certified miracastWi-Fi certified miracast
Wi-Fi certified miracast
 

프로그레시브 웹앱(Pwa)

  • 1. 프로그레시브 웹앱 Progressive Web App(PWA) 2017/02/21 UX팀
  • 2. 2015년 6월 Alex Russell이 Google 개발자 컨퍼런스에서 제안합니다. 프로그레시브 웹앱: 우리의 영혼을 잃지 않고 탭에서 벗어나기 #슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
  • 3. Alex Russell 이 앱(프로그레시브 웹앱)은 패키징 처리되지 않고 앱스토어를 통해 배포되지 않으며 기존 웹사이트를 기반으로 움직입니다. 이 프로그레시브 웹앱은 점차 “앱”이 되어 간다고 보시면 됩니다. #슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
  • 4. 모바일웹은 도달율은 높지만 참여도(engagement)가 낮다는 것이 이미 알려진 사실입니다 월간 순 방문자수 방문자당 평균 머무르는 시간 모바일앱 모바일웹 상위 100개의 모바일웹과 모바일앱 비교(comScore Mobile Metrix, U.S., Age 18+, June 2015)
  • 5. 왜냐하면 모바일 웹사이트는 네이티브 어플리케이션보다 현저히 느리며, 터치 인터랙션(제스쳐)의 제약 등으로 인해 필요한 정보획득은 가능하더라도 사용자경험의 질이 떨어지며, 하드웨어 기능에 대한 접근도 어렵습니다.
  • 6. 하지만 HTML5 표준기술 기반의 웹 고속화 기술로 많은 변화가 진행되고 있습니다.
  • 7. 프로그레시브 웹 앱(Progressive Web App)은 아래의 특징이 있습니다.  빠르다.  단 한번의 클릭으로 콘텐츠 접근이 가능하다.  부드러운 애니메이션과 매끄러운 내비게이션으로 동작한다.  웹 푸시로 참여도를 높일 수 있다.  불안정한 네트워크에서도 좋은 경험을 제공할 수 있다.  모든 브라우저에서 일관적인 사용자 경험을 제공할 수 있다.
  • 8. 프로그레시브 웹앱은 모바일 웹사이트와 모바일 어플리케이션에서 진화한 새로운 접근방식이며 모바일 사용자 경험의 장점과 모바일 웹브라우져의 특징을 결합한 새로운 어플리케이션 모델입니다.
  • 9. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다. 캐시된 쉘은 재 방문 시 즉시 로드됩니다. 속도에 포커싱되어 있습니다. 동적인 내용이 뷰를 채우게됩니다. 1
  • 10. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다.  자바 스크립트로 작성된 클라이언트 측 프록시  웹에서 네이티브 앱과 같은 동작을 재현하기 위한 장치기능 액세스  네이티브앱과 동일한 앱 접근성을 구현하기 위한 설정 목록을 가진 파일  디바이스 홈스크린에 추가될 앱 아이콘 설정  풀스크린 모드 설정(standalone or fullscreen)  디바이스 회전에 따른 세로/가로모드 설정  인트로 이미지 설정  백그라운드/테마(System Status 영역 등) 색상 설정 2 3
  • 11. 프로그레시브 웹 앱은 아래의 표준기술을 사용합니다.
  • 12. 프로그레시브 웹 앱을 한번 생성해 보겠습니다. #슬라이드쇼 상태에서 클릭하시면 YouTube를 통해 재생됩니다.
  • 13. [특징1] 네이티브 모바일앱의 사용자 경험을 제공합니다.  모바일앱과 마찬가지로 컨텐츠가 로드되는 동안 스플레시 이미지를 보여줄 수 있습니다.  웹 브라우저 영역(URL 입력영역) 도 없습니다.
  • 14. [특징2] 네트워크가 불안정할 때도 기존에 캐시된 화면을 보여줍니다.
  • 15. [특징3] 기존 모바일웹과 차원이 다른 부드럽고 빠른 내비게이션을 제공합니다.  3G 네트워크 환경에서 첫 방문 시 10초 이내로 페이지를 로드합니다.  페이지 재방문 시 500 밀리세컨트 이내로 페이지를 로드 합니다.  초당 60 프레임을 스크롤할 수 있습니다.  이미지가 로드되는 동안 컨텐츠가 점프되지 않습니다.
  • 16. [특징4] Web Push를 발송할 수 있습니다.  기존 어플리케이션 푸시와 마찬가지로 푸시 메시지를 발송할 수 있습니다.  프로그레시브 웹앱이 닫힌 상태에서도 마찬가지로 푸 시 수신이 가능합니다.
  • 17. [특징4] Web Push를 발송할 수 있습니다.
  • 18.  프로그레시브 웹앱의 표준기술은 최신버전의 모든 브라우저에서 작동시킬 수 있습니다.  하지만 Service Worker는 현재는 크롬, 오페라, 파이어폭스에서 사용할 수 있으며 마이 크로소프트의 웹브라우저(in development)와 애플의 웹브라우저(under consideration) 에도 곧 적용될 예정입니다. [특징5] 프로그레시브 웹앱은 다양한 모바일웹 브라우저에서 동작합니다.
  • 19. [특징5] 그중 크롬 모바일웹 브라우저는 타사대비 앞서나가고 있죠. 구분 Chrome (Ver 55.0.2883.91) Chrome (ver 56.0.2924.79) Safari (ver XXXXXXXX) Native Behaviors Local Notifications Push Messages ● Foreground Detection ● ● ● Permissions ● Seamless Experience Offline Mode ● Home Screen Installation Background Sync ● Inter-App Communication Input Touch Gestures ● ● ● Speech Recognition ● Clipboard(Copy&Paste) ● ● ● Pointing Device Adaptation ● Surroundings Bluetooth 구현중 NFC 구현중 Proximity Sensors 구현중 Ambient Light 구현중 Camera & Microphone Audio & Video Capture ● Advanced Camera Controls Recording Media ● Real-Time Communication ● Location & Position Geolocation ● ● ● Geofencing Device Orientation ● ● ● Device Motions ● ● ● Device Feature Network Type&Speed ● Online State ● ● ● Vibration ● Bettery Status ● Screen & Output Fullscreen ● Screen Orientation&Lock ● Wake Lock Presentation Features ● Operating System Offline Storage ● ● ● File Access ● ● ● Contacts Storage Quotas ●
  • 20. 앱스토어 로드 어플리케이션 검색 설치 선택 사용자정보 접근 설정 다운로드 진행 사용 [특징6] 앱스토어를 통한 앱 설치보다 사용자의 접근성/편의성이 우수합니다.
  • 21. 그렇다면 프로그레시브 웹앱을 적용한 사례와 그 효과를 확인해 보겠습니다.
  • 22. [사례1_flipKart.com] 프로그레시브 웹 앱을 통해 고객 참여도가 상승했습니다. 참여도 3배
  • 23. [사례1_flipKart.com] 프로그레시브 웹 앱을 통해 재방문하는 고객비율이 증가했습니다.
  • 24. [사례2_Alibaba.com] 모바일웹 전환율과 활성 사용자 비율이 증가했습니다. Allibaba.com은 프로그레시브 웹앱을 통해 약 76%의 모바일웹 전환율을 기록했습니다.
  • 25. [사례3_washingtonpost.com] 페이지뷰 등 고객 참여도가 5배 이상 증가했습니다.
  • 26. 프로그레시브 웹앱은 네이티브앱과의 비교대상이 아닙니다. 프로그레시브 웹앱은 기존 모바일웹, 웹앱, 하이브리드앱과 비교될 수 있으며 기존대비 더 나은 사용자 경험, 접근성과 유연함 등을 제공할 수 있다는 점에서 주목할 수 있습니다.
  • 27. (웹고속화분과 웹고속화 기술)프로그레시브 웹앱_삼성전자_송정기 IBM 모바일앱 개발방식 비교_네이티브.웹.하이브리드 [참고자료]
  • 28. 감사합니다. 전문지식이 없어 오해한 부분도 있으므로 참고 바랍니다.