웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



GUESTROOM
IT Information & News
HOME GUESTROOM IT Information & News
프로그레시브 웹 앱스(PWA)
Posted by kimdirector | 2017.03.24 | Hit : 3819
프로그레시브 웹앱스 PWA AMP 구글 크롬 모바일
목록보기이전보기
‘프로그레시브 웹 앱스(Progressive Web Apps. PWA)’는 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념으로 알려졌다. PWA는 앱 수준으로 점진적으로 발전해 나가는 웹을 지향한다. 궁극적으로는 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적이다.
 

 

확장성 좋은 웹, 깊이 있는 앱
 
모바일을 중심으로 하는 인터넷 서비스는 크게 모바일 웹과 모바일 앱(응용프로그램)의 형식을 띤다. 각각 장단점이 있다. 모바일 웹은 확장에 유리하다. 사용자가 앱을 설치하려면 스토어에 들어가서 앱을 내려받는 지난한 과정을 거쳐야 한다. ‘굳이 앱을 별도로 설치할 필요가 있을까’라는 생각의 허들도 넘어야 한다. 이에 비해 모바일 웹은 웹주소만 있으면 누구나 접근해서 사용할 수 있다. 스마트폰의 저장공간을 잡아먹는 것도 아니다. 다양한 플랫폼을 통해서 홍보도 진행할 수 있다.
 
하지만 모바일 웹은 사용자를 묶어두기 어렵다. 한 번 가기는 쉽지만, 반복해 찾아가게 만들기 어렵다. 반면 앱은 사용자를 묶어두는 데 좀 더 유리한데, 필요할 때마다 푸시 알림을 보내는 형식으로 사용자에게 ‘이 앱을 사용하라’는 주문을 끊임없이 넣을 수 있다. 조금 더 매끄러운 사용자 경험을 제공하는 것도 장점이다.
 
PWA는 웹과 앱의 장점을 모두 취하고자 한다. 본질은 ‘웹’이다. PWA는 ‘앱 같은 웹’을 지향한다. 물론 스마트폰 초창기에도 ‘웹앱’이라는 개념은 있었지만, PWA는 그 이름에서 알 수 있듯 더 진보한 개념이다. 정말 ‘네이티브 앱’에 가까운 경험을 제공하는 웹을 목표로 한다. PWA는 ‘서비스 작업자(service worker)’로 불리는 새로운 API를 활용해 웹앱의 중요한 부분을 캐싱하고, 사용자가 다음에 열 때 즉시 로딩하는 방식을 취한다. 그 덕분에 네트워크 환경이 좋지 않아도 빠르게 구동되며, 사용자에게 푸시 알림을 보내기도 한다.



모바일 웹이지만 푸시 알림을 보낼 수 있다. <출처: 구글 개발자 블로그>

 
PWA의 특징
 
PWA의 특징은 크게 3가지다. 첫 번째는 ‘안정성’이다. 불안정한 네트워크 환경에서도 PWA는 안정적으로 동작해야 한다. 두 번째는 ‘빠른 속도’다. 사용자 인터랙션에 빠르고 부드럽게 반응해야 한다. 마지막으로 ‘관여(Engaging)’다. 마치 진짜 앱처럼 몰입감 높은 사용자 경험을 제공해야 한다. 이 같은 특징을 가지는 PWA는 사용자에게 더 나은 사용자 경험을 제공할 뿐 아니라, 인터넷 속도가 느린 지역에서도 비교적 쾌적한 웹 활용을 돕는다는 장점도 있다.
 
 
■ 프로그레시브 웹앱이란?
 
진화 : 점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관없이 모든 사용자에게 적합하다
반응형 : 데스크톱, 태블릿, 모바일 등 모든 폼팩터에 맞다
연결 독립적 : 오프라인이나 느린 네트워크에서 작동(로컬 기기의 캐시에서 로드)
앱과 유사 : 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공
최신 상태
안전 : HTTPS를 통해 제공됨
검색 가능
재참여 가능 : 푸시 알림 같은 기능 가능
설치 가능 : 앱 스토어 등록이 필요 없음
링크 연결 가능 : URL을 통해 손쉽게 공유할 수 있음


프로그래시브 웹앱을 구현한 ‘알리익스프레스’ <출처 : 구글 개발자 블로그>
 
PWA를 활용하는 서비스로는 세계 최대 규모의 전자 상거래 사이트인 중국의 ‘알리익스프레스’가 있다. 알리익스프레스는 PWA를 구축한 후 신규 사용자 전환율이 104%까지 증가했으며, 세션 당 2배의 페이지 방문이 생겼고, 74%의 시간을 더 많이 보낸다고 알려졌다. 알리바바도 PWA로 전환 이후 76%의 전환율 상승을 확인했다.


PWA 파트너사 <출처: 구글 개발자 한국 블로그>
 
 
AMP와 PWA
 
PWA와 비슷한 기술로는 구글의 ‘AMP’(Accelerated Mobile Pages) 프로젝트가 있다. 우리말로 옮기면 ‘가속 모바일 페이지’쯤 되겠다. AMP는 2015년 10월부터 구글이 전세계 30곳 이상의 매체 및 기술 파트너들과 함께 발표한 오픈소스 이니셔티브(Open Source Initiative, OSI)다. AMP의 핵심은 모바일 웹 로딩 시간 단축에 있다. 일반 웹사이트와 비교했을 때 4배 정도 빠르다고 알려져 있다.


PWA로 제작된 ‘Jalan Tikus’ <출처: 구글 개발자 한국 블로그>


두 기술 모두 웹 환경 개선을 목적으로 한다는 점에서 공통된 목표를 지녔다. 엄청나게 거대해진 구글은 이미 대다수 나라에서 웹과 거의 동일한 말로 쓰이고 있다. 웹 환경 개선은 곧 구글을 사용하는 경험의 개선을 의미한다. 물론 사용자에게도 좋다. 구글이 AMP나 PWA를 강조하는 이유다.
 
※ 참고자료
Dan Rowinski, 『Why Progressive Web Apps Are The Future Of Web Development』, (Applause, 2015.11.30)
Pete LePage, 『여러분의 첫 Progressive Web App』, (Google Developers Blog, 2017.03.03)
Rahul Roy-chowdhury, 『모바일 웹은 영업 중』, (Google Developers Korea Blog, 2016.06.05)
Posted by kimdirector | 2017.03.24 | Hit : 3819
Origin http://www.bloter.net/archives/274549
Tags 프로그레시브 웹앱스 PWA AMP 구글 크롬 모바일
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=windowstip&no=440

COMMENT
목록보기 이전보기
GUESTROOM
Leaders Story
Download Review
Practical Use Tip
IT Information & News
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
웹사이트 사용자 경험 로고 하이터치 그래픽디자인 모바일 플래시 MS Office 디자인 태그클라우드 홍보 UI CSS 로고디자인 경험 홈페이지 디자인 관리자 사람 자질 아이폰 무료 AMP 브라우저 HTML5 웹표준 프레임 혁신 폰트 오렌지 비즈니스 싸이월드 셀렉트박스 솔루션 소모품 유저빌리티 GUI 우버 MS 비주얼 인스펙터 서비스