PWA

웹과 앱은 오랫동안 서로 가진 것이 정확히 반대였습니다. 웹은 주소만 있으면 누구나 바로 열 수 있고 고치면 즉시 반영되지만, 홈 화면에 아이콘이 없고 네트워크가 끊기면 아무것도 안 되고 알림을 보낼 수 없었습니다. 앱은 그 셋을 다 갖췄는데 운영 체제마다 따로 만들어야 하고 고칠 때마다 심사를 거쳐야 했습니다.

페이지덱도 그 사이에서 선택해야 했습니다. 기업 고객 미팅에서 앱이 없느냐는 질문이 반복해서 나왔습니다. 태오가 추산해 보니 두 운영 체제용 앱을 따로 만들려면 개발자를 더 뽑고도 여섯 달이 필요했습니다. 정작 고객이 원한 것은 전체 기능이 아니라 이동 중에 문서를 열어 보고 댓글을 남기는 것이었습니다.

PWA는 이미 있는 웹을 고쳐 앱처럼 쓰이게 만드는 쪽을 고른 결과입니다. 새로 만드는 것이 아니라 지금 웹에 몇 가지 장치를 더해 홈 화면에 설치되고 오프라인에서 열리고 알림을 보낼 수 있게 합니다. 지현과 태오가 3주를 들여 그것을 했습니다.

웹이 갖지 못했던 네 가지를 채웁니다. 채우는 방식이 각각 다릅니다.

1. 홈 화면 설치 — 아이콘과 이름과 시작 화면을 적어 둔 설명 파일을 사이트에 둡니다. 웹 앱 매니페스트라고 부르는 파일인데, 이것이 있으면 브라우저가 설치할 수 있는 대상으로 인식합니다. 설치한 뒤에는 주소창 없이 전체 화면으로 열려서 겉모습이 앱과 구분되지 않습니다.
2. 오프라인과 불안정한 네트워크 — 브라우저와 네트워크 사이에 끼어 요청을 가로채는 작은 프로그램을 둡니다. 서비스 워커라고 부릅니다. 이 프로그램이 한 번 받아 둔 화면과 데이터를 저장해 두고, 네트워크가 없으면 저장해 둔 것으로 응답합니다. 한 번 만든 결과를 재사용하려고 저장해 두는 캐싱을 이 자리에서 직접 다루는 셈입니다. 지하철에서 문서가 열리는 것이 이 장치 덕입니다.
3. 알림 — 기기에 직접 띄우는 앱 푸시를 웹에서도 보낼 수 있습니다. 다만 사용자가 설치하고 알림을 허용한 경우로 제한됩니다.
4. 갱신과 배포 — 스토어 심사가 없습니다. 웹을 고치면 다음에 열 때 반영되므로, 급한 수정을 몇 분 안에 내보낼 수 있습니다. 설치 용량도 작습니다. 설치되는 것은 껍데기이고 내용은 네트워크로 받습니다.

전제 조건이 둘 있습니다. 사이트가 암호화된 연결로 제공되어야 하고, 위에 적은 설명 파일과 요청을 가로채는 프로그램이 함께 있어야 합니다. 셋 가운데 하나라도 없으면 브라우저가 설치 대상으로 보지 않습니다.

같은 문제를 푸는 길이 셋 더 있습니다.

1. 네이티브 앱 — 운영 체제가 정한 방식으로 따로 만든 모바일 앱입니다. 스마트폰에 설치해 쓰는 애플리케이션인데, 카메라나 블루투스처럼 기기 기능을 깊이 쓰는 제품과 스토어 검색으로 사용자가 들어오는 제품에서는 이쪽이 맞습니다. 대신 두 운영 체제용을 따로 만들고 각각 심사를 거칩니다.
2. 하나의 코드로 두 앱을 만드는 도구 — 앱을 한 번 만들어 두 스토어에 내보내는 방식입니다. 네이티브에 가까운 결과를 얻으면서 만드는 비용을 줄이지만, 기기 기능을 쓸 때마다 중간 계층을 거쳐야 해서 새 기능이 나오면 지원을 기다려야 합니다.
3. 지금 웹을 그대로 두기 — 화면 크기에 맞춰 배치만 조정하는 선택입니다. 설치와 오프라인과 알림이 필요 없다면 이쪽이 가장 싸고, 실제로 그 셋이 다 필요하지 않은 제품이 많습니다.

고를 때 보는 것은 셋입니다. 기기 기능을 얼마나 깊이 써야 하는지, 스토어 검색으로 들어오는 사용자가 필요한지, 그리고 오프라인이 실제 사용에 걸리는지입니다. 하나도 해당하지 않으면 3번이 맞습니다.

운영 체제별 차이도 확인합니다. 한쪽 계열에서는 설치 흐름이 브라우저 메뉴 안에 숨어 있고 알림 지원도 뒤늦게 들어왔습니다. 그래서 설치를 안내하는 화면을 따로 만들어야 하는 경우가 생깁니다.

"앱을 새로 만들지 말고 지금 웹을 PWA로 바꾸죠. 3주면 됩니다."

이미 있는 웹을 고쳐 설치와 오프라인을 얻자는 제안입니다.

"지하철에서 문서가 안 열려요. 캐시 전략을 다시 봐야 합니다."

오프라인 동작을 담당하는 장치가 제대로 걸리지 않았다는 보고입니다.

"이 기능은 PWA로 안 됩니다. 기기 쪽 접근이 필요해요."

웹 기술의 한계를 확인하고 다른 길을 보자는 정정입니다.

페이지덱은 3주 동안 설명 파일을 만들고 요청을 가로채는 프로그램을 붙였습니다. 문서 목록과 최근에 연 문서 열 개를 저장해 두어 네트워크가 없어도 읽을 수 있게 했고, 그 상태에서 남긴 댓글은 연결이 돌아올 때 보내도록 만들었습니다.

한 달 뒤 기업 고객 세 곳이 사내 안내에 설치 방법을 넣었습니다. 앱이 없느냐는 질문은 줄었지만 완전히 사라지지는 않았습니다. 스토어에서 검색해 찾는 것을 기대한 고객에게는 설치 링크를 따로 보내야 했습니다.

PWA면 네이티브 앱을 대체한다고 보는 경우가 가장 많습니다. 설치되고 알림이 오고 오프라인에서 열리니 다 된 것처럼 보입니다. 하지만 기기 안쪽에 닿는 기능에는 여전히 벽이 있고, 무엇이 되는지가 브라우저와 운영 체제 버전마다 다릅니다. 스토어 검색으로 들어오는 유입도 얻지 못합니다. 대체라고 보고 시작하면 출시 뒤에 안 되는 기능 목록이 쌓이고, 그때는 두 가지를 다 만들어야 합니다. 겹치는 부분이 넓어서 많은 제품에 충분하다는 것이 정확한 표현입니다.

요청을 가로채는 프로그램만 붙이면 오프라인이 된다고 보는 것도 흔합니다. 장치를 넣는 일 자체는 어렵지 않아서 그렇게 느껴집니다. 그런데 무엇을 얼마 동안 저장하고 언제 새로 받아 올지를 정하는 것이 실제 작업입니다. 다 저장하면 기기 용량을 먹고 오래된 내용을 보여 주게 되고, 아무것도 저장하지 않으면 오프라인에서 빈 화면이 나옵니다. 저장한 것을 언제 버릴지 정하지 않으면 사용자가 며칠 전 문서를 최신으로 착각하는 일이 생깁니다.