[번역] 프로그레시브 웹 앱 : 탭에서 벗어나기

다음 글의 번역입니다. [Progressive Web Apps: Escaping Tabs Without Losing Our Soul - Alex Russell]

If writer does not want this article, please contact me.(han41858@gmail.com)

---

 웹에서 발표된 몇 가지 강력한 기술은 마케팅이나 포장의 혜택을 받지 못했다. 이 기술들은 대부분의 사람들에게 잊혀졌지만 일부에 의해 천천히 성장하고 있었다. 사람들이 이름을 붙이기 전에도.

 표준을 따라야 하고 브라우저 릴리즈가 통일되지 못하던 상황은 피할 수 없는 과정이었다. 우리가 원한다고 해도 새 기능들을 숨길 수는 없었겠지만, 그렇다고 모든 사람이 새 기능을 접할 수 있다는 뜻은 아니었다. XMLHTTPRequest 는 IE 5 와 Gecko 기반의 브라우저에서 2000년대 초반부터 넓게 도입되었지만, "AJAX" 는 5년 후에 일반화되었다.

 신기술로 인해 우리가 어떻게 만들고 경험을 전달해야 하는지에 대한 방법이 변화한다. 기존에 공유된 원칙을 유지한 기술들이 살아남게 되었고 이 원칙들은 아래와 같다.

• 시스템을 조직화하는 핵심으로써의 URL 과 링크 : 링크를 걸지 않는다면, 그것은 웹의 일부가 아니다.
• 사람과 검색 엔진 모두에게 접근성을 갖춘 마크업과 스타일
• 기능적 코어 추가가 자유로운 UI 의 풍부함과 시스템 가용성
• 별다른 허가나 지불 없이도 표준 기반에서의 자유로운 확장

 웹의 중요한 진화들은 기술적으로도 그렇지만 유행하는 것과 연관되어 있다.

 많은 플랫폼들은 개발자들이 클라이언트 기술을 활용할 수 있는 "외부의" 기술을 도입하려고 했었다. 그러기 위해 보통 무언가 하나 이상을 버려야 했었다. 이런 기술도 나쁘지는 않다 ㅡ 기술적으로는 뛰어난 것도 있기 때문에 ㅡ  그러나 웹을 구성하는 요소는 아니다.

• Adobe AIR 어플리케이션
• 윈도우즈 스토어 앱
• Chrome 패키징 앱
• Firefox OS 패키징 앱
• Cordova/PhonGap, Crosswalk 앱
• BlackBerry 웹워커 앱
• W3C 위젯 (몇 가지 확장 버전)
• WebOS 앱
• Chromium 임베디드 프레임워크
• Electron

 이것들은 사람들에게 크게 어필한 기술들이다. 다른 기술도 있겠지만 인기 있는 것은 이렇다. "앱다움 (appiness)" 을 생각하며 다음의 방식으로 동작하지는 못했다 : 오프라인에서 작업하거나, 홈 화면에 둘 수 있고, 시스템 API 에 접근하거나, 사용자의 요구에 맞게 앱을 다시 패키징 하고, 스토어에서 배포되며, 동작하기 이전에 전체를 다운받는 방식

 정보를 찾기 위해 직접 링크를 클릭하는 것 대신에(역주 : 순수한 웹 기술에서의 검색 방식을 지칭), 이런 시스템은 어플리케이션의 중간자로서 컨텐츠를 찾아서 중개해주는 역할을 했다. 하이브리드화 된 앱은 더이상 웹에서 동작하거나 웹으로 간주되지는 않았다. 한번에 이 기술들을 어떻게 담아야 할까? 그래도 여전히 빠른 이터레이션 페이스를 유지할 수 있는 것인가? 당신이 가정했던 것이나 인프라의 변화를 모두 따라가며 패키징할 필요가 있는 것인가? 오프라인과 스토어를 연결하면서도 빠른 이터레이션을 도입하는 것은 큰 기회비용을 동반했다.

탭에서 벗어나기 : 하이브리드가 아닌 프로그레시브

 하지만 이제 또다른 방법이 있다. 브라우저에서 큰 변화가 일어나고 있다.

 지난 저녁에 Frances 와 나는 새로운 유형의 어플리케이션의 몇가지 정의를 꼽아보았다.

• 반응성 : 어떠한 폼 팩터에도 맞을 것
• 네트워크 연결과 독립적 : Service Worker 를 통해 오프라인에서도 동작할 것
• 앱과 비슷한 동작 : 앱과 같은 네비게이션과 동작을 하기 위해 Shell 과 컨텐츠를 합친 어플리케이션 모델을 사용
• 싱싱함 (Fresh) : Service Worker 를 통해 보이지는 않지만 언제나 최신 버전을 유지할 것
• 안전함 : TLS (Service Worker 의 요구사항)를 통해 스누핑을 방지할 것
• 발견 가능할 것 (Discoverable) : W3C Manifest 를 도입하여 "어플리케이션" 으로써 인식되고 검색 엔진에 의해 등록 가능할 것
• 사용자를 다시 끌어오기 (Re-engageable) : OS 의 UI 를 활용하여 사용자를 다시 사로 잡기, 예를 들면 Push 알림과 같이
• 설치 가능할 것 : 앱 스토어를 번거롭게 찾지 않아도 가장 효율적으로 앱을 홈 화면이자 브라우저 기반의 어떤 곳에 둘 수 있는 것
• 연결 가능할 것 : 설치조차도 귀찮다면 앱 설치 없이도 사용 가능하고 공유하기 편할 것. 소셜 네트워크에서도 URL 의 힘은 강력하다.

 이런 앱은 패키징되거나 스토어를 통해 배포되지 않는, 만병통치약과 같은 웹사이트가 될 것이다. 웹의 "원하면 요청할 수 있는" 권한 모델을 가지면서, 작업 관리자의 최상위 레벨에 존재하고(역주 : 크롬의 경우 탭 단위가 아닌 프로세스의 단위로 존재한다는 의미), 홈 화면이나 알림 영역에 존재할 수도 있다. 사용자는 무거운 최신 앱을 설치하거나 링크를 클릭하는 것으로 생길 수 있는 위험한 무언가에 노출되지 않아도 된다. 사이트는 당신에게 어떤 알림을 보내거나, 홈 화면에서 사용할 수 있도록 무언가를 종종 제공하려고 할 것이다. 웹이 지속적으로 "앱" 이 되가는 것이다.

 중요한 것은, 이런 앱들이 전통적인 웹 앱과 비교해서 더 나은 유저 경험을 제공할 수 있다는 것이다. 지속적인 개선을 통해 성능은 계속 나아질 수 있기 때문에, "앱다운" 한계를 신경쓰지 않고도 눈에 보이는 개선을 달성할 수 있다.

 Frances 는 이것을 "프로그레시브 오픈 웹 앱" 이라고 불렀고, 우리는 "프로그래시브 앱" 으로 의견을 모았다. 이러한 앱은 이전에도 있었지만 이제 이름을 갖게 되었다.

프로그레시브 앱은 어떤 모양인가

 작년에 있었던 Chrome Dev Summit 를 참고해서, 이러한 유형의 앱에 대한 전체 흐름을 볼 수 있다.

1. 사이트는 일반적인 탭으로 시작한다. 뭔가 대단하진 않지만, TLS, Service Worker, Manifest, 반응형 디자인을 갖춘 프로그래시브 앱이다.
2. 두 번째(혹은 세 번째나 네 번째) 이 사이트를 방문하면 (당신이 자주 사용하는 브라우저를 기준으로) 브라우저에 알림 (prompt)이 표시된다.
3. 사용자는 홈 화면이나 앱 런처에 이 앱을 둘 것인지 정할 수 있다.
4. 홈 화면에서 실행되면 이 앱은 혼합된 환경을 사용한다. 최상위 레벨에 존재하며, 전체 화면이 가능하고 오프라인에서도 동작 가능하다. 당연히 1 단계 이후에 오프라인으로 가능하지만, "앱처럼" 하는 것이 이것을 가능하게 한다. (역주 : 홈 화면에 앱처럼 등록하는 것으로 웹과 OS 환경을 공유할 수 있다는 의미)

 Flipboard 에서도 같은 흐름을 볼 수 있다.

1. 프로그레시브 앱은 웹앱이며, 탭에서 생명 주기를 시작한다. 안드로이드 Chrome 에서 flipboard.com 를 열었고 일반적인 탭으로 간주하는 것을 볼 수 있다.

2. 사용자가 프로그레시브 앱을 충분히 이용하면 알림(prompt)이 나타나 홈화면에 등록할 것인지 묻는다. 광고성으로 보이지 않기 위해 이것은 첫 로드에서는 나타나지 않는다.

3. 사용자가 수락하더라도, 사용자의 사용 흐름은 중단되지 않는다.

4. 앱 바로가기가 홈 화면이나 OS 런처에 등록된다.

5. 프로그레시브 앱은 전체화면으로 실행될 수도 있다.

6. 프로그레시브 앱은 최상위 액티비티를 가지며 작업 관리자에 존재한다.

미래

 현재 웹 개발 툴이나 방식은 아직 프로그레시브 앱을 자연스럽게 지원하지 못하지만, 많은 프레임워크과 서비스들이 프로그레시브 앱을 만드는 데에 충분히 연관되어 있다. 예를 들어, 서버 렌더링을 지원하는 클라이언트 측의 프레임워크를 도입하면 재방문 이후의 오프라인 실행을 자연스럽게 도입할 수 있다.

 이것은 사용자를 배려하는 어플리케이션 디자인이나 구조에 대한 영역이며, 새로운 것을 도입하려는 사람들에게는 몇가지 중요한 이점을 줄 것이다. 프로그레시브 앱이 완벽히 지원된다면 재방문을 유도하는 방식이나 경험을 제공하는 방식이 "기존의 웹" 과는 다를 것이다. 프로그레시브 앱은 기존의 방식이나 툴들을 크게 바꿔야 하겠지만, 하나의 코드로 디바이스를 통합하여 좀 더 나은 경험을 제공하는 쪽으로 디자인 되어 있다.

 사용자 친화적인 앱을 만드는 데에 더이상 웹 기술을 포기할 필요가 없어졌다. 프로그레시브 앱은 탭에서 벗어나는 티켓이며, 당신이 원하기만 하면 된다.

 이 글을 검토하고 제안을 해준 Frances Berriman, Brian Kardell, Jake Archibald, Owen Cambpell-Moore, Jan Lehnadt, Mike Tsao, Yehuda Katz, Paul Irish, Matt McNulty, John Allsopp 에게 고마움을 전한다.