오프라인에서도 열리는 웹

1. 터널에 들어가면 하얗게 멈추는 화면

지하철이 터널에 들어가는 순간 보던 웹페이지가 하얗게 멈출 때가 있습니다. 반면 앱은 신호가 약해도 최소한 화면은 열립니다. 이 차이를 좁히려고 나온 게 PWA(Progressive Web App)입니다. 웹사이트에 몇 가지 장치를 더해 앱처럼 설치하고, 오프라인에서도 열리고, 알림까지 보낼 수 있게 만드는 방식입니다. 새로운 기술 하나라기보다는 브라우저가 이미 가진 기능들을 묶어 부르는 이름에 가깝습니다. 앱 스토어 심사 없이 주소 하나로 배포하면서도 사용자 휴대폰 홈 화면에 아이콘으로 자리 잡을 수 있다는 점 때문에, 앱을 따로 만들 여력이 없는 팀에게 꾸준히 거론되는 선택지이기도 합니다.

2. 매니페스트와 서비스 워커, 두 개의 부품

PWA를 이루는 부품은 크게 두 가지입니다. 하나는 웹 앱 매니페스트라는 작은 JSON 파일로, 앱 이름과 아이콘, 시작 주소, 주소창 없이 띄울지 같은 정보를 담습니다. 홈 화면에 추가했을 때 앱처럼 보이게 만드는 건 이 파일이 하는 일입니다. 다른 하나는 서비스 워커입니다. 페이지와 네트워크 사이에 서서 요청을 가로채는 스크립트인데, 한 번 받은 화면과 데이터를 캐시에 넣어 두었다가 연결이 끊기면 대신 꺼내 줍니다. 스타벅스 주문 웹앱이 자주 거론되는 예입니다. 연결이 없어도 메뉴를 둘러보고 음료 옵션을 고르고 장바구니에 담을 수 있게 만들었고, 매장별 가격 확인과 주문처럼 서버가 꼭 필요한 일만 다시 연결됐을 때 이어서 하도록 했죠.

3. 아이폰이 문을 연 뒤에 달라진 것들

PWA의 가장 큰 약점은 오랫동안 아이폰이었습니다. 안드로이드 크롬은 일찍부터 설치와 푸시 알림을 지원했지만 iOS는 소극적이었습니다. 흐름이 바뀐 건 2023년 iOS 16.4부터입니다. 홈 화면에 추가한 웹앱이 푸시 알림을 보내고 아이콘에 배지를 띄울 수 있게 됐고, iOS 26부터는 홈 화면에 추가한 사이트가 기본적으로 웹앱으로 열립니다. 그래도 한계는 남아 있습니다. 알림은 사파리에서 그냥 연 웹사이트가 아니라 홈 화면에 추가한 웹앱만 받을 수 있어서, 사용자가 공유 버튼을 눌러 직접 추가하는 과정을 거쳐야 합니다. 블루투스 기기 연결이나 백그라운드 동기화처럼 아이폰 웹에서 아직 쓸 수 없는 기능도 있습니다. 그래서 무엇을 만드느냐에 따라 답이 달라집니다.

4. 세컨드펭귄의 시선: 앱을 만들기 전에 먼저 묻습니다

앱을 만들고 싶다는 상담을 받으면 우리는 사용자가 이 서비스를 얼마나 자주 여는지부터 묻습니다. 한 달에 한두 번 쓰는 예약 서비스라면 앱 설치를 부탁하는 것부터 문턱이고, Next.js로 만든 웹에 매니페스트와 서비스 워커를 더해 PWA로 여는 편이 가볍습니다. 업데이트도 배포하는 순간 모두에게 반영되고요. 반대로 매일 여는 서비스이거나 카메라, 블루투스 같은 기기 기능을 깊게 써야 한다면 React Native와 Expo로 앱을 만드는 쪽을 권합니다. 오프라인을 넣을 때는 무엇을 저장할지부터 정합니다. 메뉴판처럼 잘 안 바뀌는 건 미리 담아 두고, 재고나 가격처럼 틀리면 곤란한 건 늘 서버에 묻는 식이죠.