한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
모바일 웹의 현재를 확인해 보세요.
2017년 6월 13일 화요일
<블로그 원문은
여기
에서 확인하실 수 있으며, 블로그 번역 리뷰는
문현경(Web Technologies GDE)
님이 참여해 주셨습니다.>
게시자: Rahul Roy-chowdhury, Chrome 제품 관리 부사장
한 해 동안 많은 것이 달라졌습니다. 작년에 열린 Google I/O에서 우리는 비즈니스용으로 모바일 웹이 공개된다는 사실을
공유했었죠
. AMP 및 PWA(프로그레시브 웹 앱)와 같은 새로운 기술은 새로운 기능, 향상된 성능 그리고 간소화된 워크플로를 모바일 웹에 안겨 주었습니다.
그로부터 1년 후, 현재 20억 개가 넘는 AMP 페이지가 생성되었고 "PWA"가 버즈워드(buzzword)보다 훨씬 더 뛰어난 것이 입증되어 이제는 이러한 새로운 기술이 전 세계 많은 기업들의 휴대기기용 빌드 작업 수행에 사용되는 방식으로 자리매김했습니다. 자세한 내용을 보려면 Google I/O에서 최신
모바일 웹 세계의 현황
에 대해 설명한 동영상을 보거나, 이러한 기술이 어떻게 오늘날의 모바일 웹을 주류로 만드는지에 대한 아래 내용을 읽어보시기 바랍니다.
모멘텀
전 세계에서 이루어지고 있는 훌륭한
성공사례
를 하나의 게시글에 모두 취합하기는 무리이지만, 몇 가지 주요 사항을 여기서 다루어 보도록 하겠습니다.
Wego는 자사의 모바일 사이트 성능을 향상시킬 목적으로 신속한 PWA 환경으로 전환하기 위해
amp-install-serviceworker
를 사용하여 AMP 페이지를 빌드했습니다. 평균 페이지 로드 시간이 12초에서 1초 미만으로 줄어들었으며 전환율은 95% 증가했습니다.
Forbes는 모바일 웹사이트를 PWA로 다시 빌드했으며 휴대폰에서 사용 환경이 어떤 식으로 보일 수 있을지에 대해 재고하기 시작했습니다. 기본 사이트를 최소한으로 업데이트하는 대신, Forbes는 PWA 기술을 통합하여 앱과 같은 몰입형 환경을 제공했습니다. 이 업체는 즉각적인 향상 효과를 보았으며 사용자 참여율이 출시한 이후로 2배 넘게 증가한 것을 확인했습니다.
인도 최고의 택시 서비스 회사인
Ola
는 PWA를 빌드했으며, PWA를 사용하여 택시를 예약하는 사용자 중 20%가 이전에 자사의 앱을 제거한 적이 있었다는 사실을 파악했습니다. 이 업체는 PWA를 사용하여 필요한 저장 공간을 줄임으로써 PWA가 없었다면 잃을 수 있었던 사용자의 재참여율을 효과적으로 높일 수 있었습니다.
성공사례를 하나 더 말씀드리자면,
Twitter Lite
를 들 수 있습니다. 이는 데이터 사용량을 최소화하는 PWA로, 불안정한 모바일 네트워크에서도 안정적으로 작동하고 기기에서 차지하는 공간이 1MB도 되지 않습니다. Twitter의 새로운 모바일 환경은 속도 측면에서도 최적화되었습니다. 실행 시간이 최대 30% 단축되었고 사이트 전체에 걸쳐 탐색 속도도 더 빨라졌습니다. Twitter는 사용자가 사이트에서 2.7배 더 많은 시간을 보내고 있으며, 그 결과 이전의 모바일 사이트에 비해 새 PWA에서 76% 더 많은 트윗을 본다는 것을 확인했습니다. 또한, Android 홈 화면에 추가된 아이콘을 통해 하루에 백만 건의 세션이 시작되는 것을 확인함으로써 재참여율이 상당히 향상된 것도 보고 있습니다.
세련된 경험
사용자는 휴대기기에서 많은 것들을 기대하죠. 그래서 우리는 지난 몇 년간 이러한 요구 사항에 부응하려고 수많은 API를 추가했습니다. 모바일 웹은 이전보다 훨씬 더 많은 사용 사례를 지원하고 훨씬 더 많은 작업을 수행할 수 있습니다. 몇 가지 주요 사항을 알려드리자면 다음과 같습니다.
향상된 Add to Homescreen:
올해 초에 우리는 PWA를 Android 운영체제에 더 긴밀하게 통합하는
향상된 Add to Homescreen
을 발표했습니다. 이제는 PWA가 홈 화면에 표시되는 것 외에도, 기본 앱과 함께 앱 런처 및 Android 설정에도 표시되며 Chrome 또는 기타 앱에서 링크를 클릭하는 사용자에 대한 응답으로 열릴 수도 있습니다.
결제:
체크아웃은 복잡한 과정일 수 있습니다. 웹에서의 결제 흐름을 향상시키기 위해 우리는
Payment Request
라고 하는 원탭(one-tap) 결제 API를 출시했습니다. 이 API를 사용하여 웹 앱은 신용 카드와 함께 Android Pay 등의 Google 결제 메커니즘을 지원할 수 있습니다. 우리는 이제 이 API를
추가 결제 앱
과 통합할 수 있다는 사실도 바로 얼마 전에 발표했습니다.
미디어 사용:
인터넷 트래픽 중 70% 이상을 동영상 트래픽입니다. 우리는 훌륭한 모바일 웹 미디어 환경을 구현하려고 사용자에게 Media Session API를 통해 재생을 더 세밀하게 제어할 수 있는 기능을 제공하고 있고, Screen Orientation API를 통해 전체 화면 재생 기능을 향상했을 뿐만 아니라, Background Fetch를 통해 다양한 오프라인용 기능과 콘텐츠를 채워나가고 있습니다. 자세한 내용을 알아보려면
모바일 웹 미디어 모범 사례
를 확인하고
미디어용 PWA 데모
에서 API가 어떤 식으로 함께 작동할 수 있는지를 알아보시기 바랍니다.
도구
우리는 웹에서 참여도가 높은 환경을 빌드하는 데 사용할 수 있는 일련의 도구를 개선하고 확장하는 노력도 게을리하지 않았습니다.
Lighthouse
는 웹 환경의 품질 측정에 사용할 수 있도록 자동화된 새로운 도구입니다. 이 도구는 웹 앱에 대해 거의 100번의 감사를 실행하여 페이지 성능에서 바이트 효율성, 접근성에 이르기까지 모든 사항을 검사하고 요약된 점수를 제공합니다. Chrome DevTools와의 새로운 통합으로 이제는 브라우저를 나가지 않고도 Lighthouse 감사를 실행할 수 있습니다.
Polymer 2.0
은 Polymer 라이브러리의 다음 주요 릴리스로, 오늘날의 웹 플랫폼이 제공하는 최고의 새로운 기능을 활용할 수 있도록 처음부터 다시 빌드되었습니다. 이 릴리스에서는 Chrome 및 Safari에서 제공되는 새로운 Web Component API를 사용합니다. 이 릴리스는 완전히 모듈식으로 구성되었으며 최고의 성능을 제공합니다. 현재 속도는 10% 더 빨라졌으며 규모는 80% 더 작아졌습니다.
Chrome은 손쉽게 개발하고 사용자와 교류하며 웹 환경에서 번창하는 사업을 일굴 수 있도록 하기 위해 노력하고 있습니다. 최신 소식을 받아보려면 Google의 YouTube 채널을
구독
하고 Twitter에서
@ChromiumDev
를 팔로우하세요.
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase
검색
Tag
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2023
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2022
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2021
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2020
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2015
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
3월
2월
1월
2011
12월
11월
Feed
