Progressive Web Apps on the Desktop

데스크탑에서의 Progressive Web Apps(PWA)
https://developers.google.com/web/updates/2018/05/dpwa

위 글을 공부삼아, 구글번역기에 의존해서….

데스크탑 PWA는 사용자 디바이스에 네이티브앱과 같이 설치될 수 있고 빠르게 동작합니다. 다른 앱들과 같은 방식으로 동작되기 때문에 내장된 앱과 같이 느껴지고 주소표시줄이나 탭없이 완전한 하나의 윈도우 앱처럼 실행됩니다. 서비스 워커가 실행에 필요한 모든 정보들을 저장할수 있기 때문에 신뢰할 수 있고 사용자에게 즐거운 경험을 만들어 줍니다.

참고 / 필자의 Google I/O 발표
PWAs:building bridges to mobile,desktop,and native
desktop PWAs

Desktop usage is important

모바일은 PWA의 수많은 변화를 이끌어왔습니다. 모바일의 성장세는 매우 굳건하지만 데스크탑에서의 사용량은 여전히 성장하고 있습니다. 휴대전화의 주 사용시간은 아침과 저녁이고 태블릿은 저녁시간대의 사용량이 현저히 높습니다. 데스크탑에서의 이용율은 모바일에 비해 하루에 걸쳐 균등하게 분산됩니다. 대부분의 사람들이 일중이거나 책상에 머무를때 상당한 사용량을 가지고 있습니다.
사용자에게는 Native라는 느낌이 중요하기 때문에 설치되었다는것은 앱이 빠르고 통합적이며 신뢰할수있고 매력적으로 다가갑니다. 데스크탑 PWA는 다른 데스크탑 앱과 같은 위치에서 시작할 수 있지만 앱윈도우(app window)에서 실행되기 때문에 데스크탑의 다른 앱들과 같이 보여집니다.

Getting started

사족: 데스크탑 PWA는 Chrome OS 67에서 사용할 수 있습니다.(2018년 6월 2일 현재 정식버전) 다른 운영체제에서 Chrome의 데스크탑 PWA를 사용하려면 #enable-desktop-pwas 플래그를 사용설정해야 합니다.

Getting started는 이미 당신이 하고 있는것과 다르지 않습니다. 이것은 전혀 새로운 종류의 앱이 아닙니다. 기존 PWA에서 하던 모든 작업이 적용됩니다. Service workers는 빠르고 안정적으로 동작합니다. Web Push and Notifications는 사용자로 하여금 업데이트를 유지하게 해주며 홈화면에 add to home screen prompt로 ‘설치’할 수 있습니다. 유일한 차이점은 브라우저탭에서 실행하는 대신 app window에서 실행된다는것입니다.

Add to home screen

홈화면에 추가하기 위한 기준이 충족되면 크롬은 beforeinstallprompt 이벤트를 발생시킵니다. 이벤트 핸들러는 이벤트를 저장하고 홈화면에 앱을 추가할 수 있음을 사용자에게 알리기 위한 인터페이스를 업데이트합니다. 예를들면 Spotify의 데스크탑 PWA는 사용자 프로필 바로 위에 ‘앱설치’버튼을 추가해논걸 볼수있습니다.
이벤트 처리, UI 업데이트 및 홈화면에 추가 프롬프트 표시하기 위한 방법에 대한 자세한 내용은 Add to Home Screen을 참조하세요.

The app window

탭이나 주소창이 없는 app window를 이용한 당신의 앱입니다. 브라우저 탭에 비해 유연한 창 구성 및 조작으로 앱의 요구를 지원하도록 최적화되어 있습니다. app window를 이용하면 전체화면이나 여러개의 창을 열어 놓는 작업을 쉽게 할 수 있습니다. app window를 이용하면 앱전환기나 alt-tab과 같은 키보드 단축키를 이용해 앱간 전환을 쉽게 할 수 있습니다.
당신이 생각하는대로 app window는 표준 제목표시줄, 최소, 최대화 및 단기 아이콘이 있습니다. Chrome OS에서 제목표시줄은 app manifest에 정의된 theme_color를 기반으로 보여집니다. 그리고 앱은 윈도우의 전체 너비를 차지하도록 디자인(설계)되어야 합니다.
app window에는 앱에 대한 정보를 액세스하거나 URL에 쉽게 접근하고 페이지를 인쇄, 페이지의 확대/축소 혹은 앱을 브라우저에서 열도록 도와주는 app menu(세개의 점으로 된 버튼, 최소화버튼부근)가 있습니다.

Design considerations

데스크탑 PWA를 만들 경우 몇몇 특유의 디자인 고려사항이 있으며 이것은 모바일 PWA에서는 반드시 적용되진 않습니다.
데스크탑 앱은 훨씬 더 큰 화면 영역을 사용합니다. 여분의 공간에 내용을 덧대어 채우지 말고 더 넓은 화면을 위해 새로운 구분점을 만들어 추가공간을 사용하세요. 일부 앱은 더 넓은 공간에서 실제로 이점을 가집니다.
구분점에 대해 생각할때는 사용자가 어떻게 앱을 사용할지, 어떻게 앱 사이즈를 조정하는지에 대해 고려하세요. 날씨 앱을 예로 들면 큰창에서는 7일간의 일기예보를 표시할수 있지만 창이 작아지면 모든것(글자크기나 그림의 크기등)이 줄어들지 않고 5일간의 일기예보가 표시되어야합니다. 계속 작아지면 내용이 섞어 작은 화면에 최적화하여 표현되어야 합니다.
일부 앱에서는 미니모드가 도움이 될 수 있습니다. 이 날씨앱(예제의 화면, 원본이미지 참조)에는 현재 조건만 표시됩니다. 음악플레이어라면 현재곡을 표시하고 다음노래로 넘어갈수 있는 버튼만 표시되면 될것입니다.
Pixel북이나 Surface와 같은 컨버터블 기기를 지원하기 위해 이 반응형 디자인에 대한 아이디어를 채택할수도 있습니다. 태블릿모드로 전환되면 이 장치는 활성창을 전체화면으로 만들고 어떻게 들고 있느냐에 따라 가로모드나 세로모드가 되어야 합니다.
반응형 디자인에 집중하는것이 중요합니다. 사용자가 창크기를 조정했건 태블릿모드로 전환했건 상관없이 반응형 디자인은 성공적인 데스크탑 PWA에 매우 중요합니다.
데스크탑에서의 app window는 수많은 새로운 가능성을 열어줍니다. 더 큰 화면을 위한 중단점 설정, 가로/세로모드 지원, 전체화면이나 아니거나 가상 키보드와 함께 잘 작동하는 방식을 취하기 위해 디자이너와 협업할수 있습니다.

What’s next?

우린 이미 맥과 윈도우를 지원하기 위해 노력하고 있습니다. 이 모든 플랫폼에서 다음을 준비하고 있습니다:

  • 키보드 단축키 지원을 추가하여 사용자 고유의 기능을 제공할 수 있도록 하겠습니다.
  • 아이콘에 배지를 지정하여 전체알림을 표시하지 않고 중요한 이벤트에 대해 사용자에게 알릴수 있도록 합니다.
  • 사용자가 설치된 PWA에 대해 앱에서 처리하는 링크를 클릭하면 열도록 하는 링크캡처를 지원하도록 하겠습니다.

글쓴이

younoa

Computer Repair Programmer

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다