Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
프로그레시브 웹앱
Progressive Web App(PWA)
2017/02/21
UX팀
2015년 6월 Alex Russell이 Google 개발자 컨퍼런스에서 제안합니다.
프로그레시브 웹앱: 우리의 영혼을 잃지
않고 탭에서 벗어나기
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
Alex Russell
이 앱(프로그레시브 웹앱)은
패키징 처리되지 않고 앱스토어를 통해
배포되지 않으며 기존 웹사이트를 기반으로 움직입니다.
이 프로그레시브 웹앱은 점차 “앱”이 되어 간다고
보시면 됩니다.
#슬라이드...
모바일웹은 도달율은 높지만 참여도(engagement)가 낮다는 것이 이미 알려진 사실입니다
월간 순 방문자수 방문자당 평균 머무르는 시간
모바일앱 모바일웹
상위 100개의 모바일웹과 모바일앱 비교(comScore Mo...
왜냐하면 모바일 웹사이트는
네이티브 어플리케이션보다 현저히 느리며,
터치 인터랙션(제스쳐)의 제약 등으로 인해 필요한 정보획득은 가능하더라도
사용자경험의 질이 떨어지며,
하드웨어 기능에 대한 접근도 어렵습니다.
하지만 HTML5 표준기술 기반의
웹 고속화 기술로 많은 변화가 진행되고 있습니다.
프로그레시브 웹 앱(Progressive Web App)은 아래의 특징이 있습니다.
 빠르다.
 단 한번의 클릭으로 콘텐츠 접근이 가능하다.
 부드러운 애니메이션과 매끄러운 내비게이션으로 동작한다.
 웹 푸시로 ...
프로그레시브 웹앱은 모바일 웹사이트와 모바일 어플리케이션에서 진화한
새로운 접근방식이며
모바일 사용자 경험의 장점과 모바일 웹브라우져의 특징을 결합한
새로운 어플리케이션 모델입니다.
프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
캐시된 쉘은 재 방문 시 즉시 로드됩니다.
속도에 포커싱되어 있습니다.
동적인 내용이 뷰를
채우게됩니다.
1
프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
 자바 스크립트로 작성된 클라이언트 측 프록시
 웹에서 네이티브 앱과 같은 동작을 재현하기 위한
장치기능 액세스
 네이티브앱과 동일한 앱 접근성을 구현하기 위한 설정...
프로그레시브 웹 앱은 아래의 표준기술을 사용합니다.
프로그레시브 웹 앱을 한번 생성해 보겠습니다.
#슬라이드쇼 상태에서 클릭하시면 YouTube를 통해 재생됩니다.
[특징1] 네이티브 모바일앱의 사용자 경험을 제공합니다.
 모바일앱과 마찬가지로 컨텐츠가
로드되는 동안 스플레시 이미지를
보여줄 수 있습니다.
 웹 브라우저 영역(URL 입력영역)
도 없습니다.
[특징2] 네트워크가 불안정할 때도 기존에 캐시된 화면을 보여줍니다.
[특징3] 기존 모바일웹과 차원이 다른 부드럽고 빠른 내비게이션을 제공합니다.
 3G 네트워크 환경에서 첫 방문 시 10초 이내로 페이지를
로드합니다.
 페이지 재방문 시 500 밀리세컨트 이내로 페이지를 로드
합니...
[특징4] Web Push를 발송할 수 있습니다.
 기존 어플리케이션 푸시와 마찬가지로 푸시 메시지를
발송할 수 있습니다.
 프로그레시브 웹앱이 닫힌 상태에서도 마찬가지로 푸
시 수신이 가능합니다.
[특징4] Web Push를 발송할 수 있습니다.
 프로그레시브 웹앱의 표준기술은 최신버전의 모든 브라우저에서 작동시킬 수 있습니다.
 하지만 Service Worker는 현재는 크롬, 오페라, 파이어폭스에서 사용할 수 있으며 마이
크로소프트의 웹브라우저(in de...
[특징5] 그중 크롬 모바일웹 브라우저는 타사대비 앞서나가고 있죠.
구분 Chrome
(Ver 55.0.2883.91)
Chrome
(ver 56.0.2924.79)
Safari
(ver XXXXXXXX)
Native ...
앱스토어 로드
어플리케이션 검색
설치 선택
사용자정보 접근 설정
다운로드 진행
사용
[특징6] 앱스토어를 통한 앱 설치보다 사용자의 접근성/편의성이 우수합니다.
그렇다면
프로그레시브 웹앱을 적용한 사례와 그 효과를 확인해 보겠습니다.
[사례1_flipKart.com] 프로그레시브 웹 앱을 통해 고객 참여도가 상승했습니다.
참여도
3배
[사례1_flipKart.com] 프로그레시브 웹 앱을 통해 재방문하는 고객비율이 증가했습니다.
[사례2_Alibaba.com] 모바일웹 전환율과 활성 사용자 비율이 증가했습니다.
Allibaba.com은 프로그레시브 웹앱을 통해 약 76%의 모바일웹
전환율을 기록했습니다.
[사례3_washingtonpost.com] 페이지뷰 등 고객 참여도가 5배 이상 증가했습니다.
프로그레시브 웹앱은 네이티브앱과의 비교대상이 아닙니다.
프로그레시브 웹앱은 기존 모바일웹, 웹앱, 하이브리드앱과 비교될 수 있으며
기존대비 더 나은 사용자 경험, 접근성과 유연함 등을 제공할 수 있다는 점에서
주목할 수...
(웹고속화분과 웹고속화 기술)프로그레시브 웹앱_삼성전자_송정기
IBM 모바일앱 개발방식 비교_네이티브.웹.하이브리드
[참고자료]
감사합니다.
전문지식이 없어 오해한 부분도 있으므로 참고 바랍니다.
Nächste SlideShare
Wird geladen in …5
×

프로그레시브 웹앱(Pwa)

3.927 Aufrufe

Veröffentlicht am

Progressive Web App
PWA

Veröffentlicht in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

프로그레시브 웹앱(Pwa)

  1. 1. 프로그레시브 웹앱 Progressive Web App(PWA) 2017/02/21 UX팀
  2. 2. 2015년 6월 Alex Russell이 Google 개발자 컨퍼런스에서 제안합니다. 프로그레시브 웹앱: 우리의 영혼을 잃지 않고 탭에서 벗어나기 #슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
  3. 3. Alex Russell 이 앱(프로그레시브 웹앱)은 패키징 처리되지 않고 앱스토어를 통해 배포되지 않으며 기존 웹사이트를 기반으로 움직입니다. 이 프로그레시브 웹앱은 점차 “앱”이 되어 간다고 보시면 됩니다. #슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
  4. 4. 모바일웹은 도달율은 높지만 참여도(engagement)가 낮다는 것이 이미 알려진 사실입니다 월간 순 방문자수 방문자당 평균 머무르는 시간 모바일앱 모바일웹 상위 100개의 모바일웹과 모바일앱 비교(comScore Mobile Metrix, U.S., Age 18+, June 2015)
  5. 5. 왜냐하면 모바일 웹사이트는 네이티브 어플리케이션보다 현저히 느리며, 터치 인터랙션(제스쳐)의 제약 등으로 인해 필요한 정보획득은 가능하더라도 사용자경험의 질이 떨어지며, 하드웨어 기능에 대한 접근도 어렵습니다.
  6. 6. 하지만 HTML5 표준기술 기반의 웹 고속화 기술로 많은 변화가 진행되고 있습니다.
  7. 7. 프로그레시브 웹 앱(Progressive Web App)은 아래의 특징이 있습니다.  빠르다.  단 한번의 클릭으로 콘텐츠 접근이 가능하다.  부드러운 애니메이션과 매끄러운 내비게이션으로 동작한다.  웹 푸시로 참여도를 높일 수 있다.  불안정한 네트워크에서도 좋은 경험을 제공할 수 있다.  모든 브라우저에서 일관적인 사용자 경험을 제공할 수 있다.
  8. 8. 프로그레시브 웹앱은 모바일 웹사이트와 모바일 어플리케이션에서 진화한 새로운 접근방식이며 모바일 사용자 경험의 장점과 모바일 웹브라우져의 특징을 결합한 새로운 어플리케이션 모델입니다.
  9. 9. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다. 캐시된 쉘은 재 방문 시 즉시 로드됩니다. 속도에 포커싱되어 있습니다. 동적인 내용이 뷰를 채우게됩니다. 1
  10. 10. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다.  자바 스크립트로 작성된 클라이언트 측 프록시  웹에서 네이티브 앱과 같은 동작을 재현하기 위한 장치기능 액세스  네이티브앱과 동일한 앱 접근성을 구현하기 위한 설정 목록을 가진 파일  디바이스 홈스크린에 추가될 앱 아이콘 설정  풀스크린 모드 설정(standalone or fullscreen)  디바이스 회전에 따른 세로/가로모드 설정  인트로 이미지 설정  백그라운드/테마(System Status 영역 등) 색상 설정 2 3
  11. 11. 프로그레시브 웹 앱은 아래의 표준기술을 사용합니다.
  12. 12. 프로그레시브 웹 앱을 한번 생성해 보겠습니다. #슬라이드쇼 상태에서 클릭하시면 YouTube를 통해 재생됩니다.
  13. 13. [특징1] 네이티브 모바일앱의 사용자 경험을 제공합니다.  모바일앱과 마찬가지로 컨텐츠가 로드되는 동안 스플레시 이미지를 보여줄 수 있습니다.  웹 브라우저 영역(URL 입력영역) 도 없습니다.
  14. 14. [특징2] 네트워크가 불안정할 때도 기존에 캐시된 화면을 보여줍니다.
  15. 15. [특징3] 기존 모바일웹과 차원이 다른 부드럽고 빠른 내비게이션을 제공합니다.  3G 네트워크 환경에서 첫 방문 시 10초 이내로 페이지를 로드합니다.  페이지 재방문 시 500 밀리세컨트 이내로 페이지를 로드 합니다.  초당 60 프레임을 스크롤할 수 있습니다.  이미지가 로드되는 동안 컨텐츠가 점프되지 않습니다.
  16. 16. [특징4] Web Push를 발송할 수 있습니다.  기존 어플리케이션 푸시와 마찬가지로 푸시 메시지를 발송할 수 있습니다.  프로그레시브 웹앱이 닫힌 상태에서도 마찬가지로 푸 시 수신이 가능합니다.
  17. 17. [특징4] Web Push를 발송할 수 있습니다.
  18. 18.  프로그레시브 웹앱의 표준기술은 최신버전의 모든 브라우저에서 작동시킬 수 있습니다.  하지만 Service Worker는 현재는 크롬, 오페라, 파이어폭스에서 사용할 수 있으며 마이 크로소프트의 웹브라우저(in development)와 애플의 웹브라우저(under consideration) 에도 곧 적용될 예정입니다. [특징5] 프로그레시브 웹앱은 다양한 모바일웹 브라우저에서 동작합니다.
  19. 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. 20. 앱스토어 로드 어플리케이션 검색 설치 선택 사용자정보 접근 설정 다운로드 진행 사용 [특징6] 앱스토어를 통한 앱 설치보다 사용자의 접근성/편의성이 우수합니다.
  21. 21. 그렇다면 프로그레시브 웹앱을 적용한 사례와 그 효과를 확인해 보겠습니다.
  22. 22. [사례1_flipKart.com] 프로그레시브 웹 앱을 통해 고객 참여도가 상승했습니다. 참여도 3배
  23. 23. [사례1_flipKart.com] 프로그레시브 웹 앱을 통해 재방문하는 고객비율이 증가했습니다.
  24. 24. [사례2_Alibaba.com] 모바일웹 전환율과 활성 사용자 비율이 증가했습니다. Allibaba.com은 프로그레시브 웹앱을 통해 약 76%의 모바일웹 전환율을 기록했습니다.
  25. 25. [사례3_washingtonpost.com] 페이지뷰 등 고객 참여도가 5배 이상 증가했습니다.
  26. 26. 프로그레시브 웹앱은 네이티브앱과의 비교대상이 아닙니다. 프로그레시브 웹앱은 기존 모바일웹, 웹앱, 하이브리드앱과 비교될 수 있으며 기존대비 더 나은 사용자 경험, 접근성과 유연함 등을 제공할 수 있다는 점에서 주목할 수 있습니다.
  27. 27. (웹고속화분과 웹고속화 기술)프로그레시브 웹앱_삼성전자_송정기 IBM 모바일앱 개발방식 비교_네이티브.웹.하이브리드 [참고자료]
  28. 28. 감사합니다. 전문지식이 없어 오해한 부분도 있으므로 참고 바랍니다.

×