PWA 의 역설

제가 주로 Svelte 를 가지고 하이브리드앱을 만들다보니

SPA 라는 개념을 자주 차용하는데,

웹에서는 PWA라는 개념으로도 비슷하게 개념이 겹치는 부분이 있습니다.

우리가 쉽게 경험할 수 있는 일반앱에 대한 경험은 좀 극단적인 예를 들면

온라인 게임을 들 수 있습니다.

예전에 PC방을 운영하다가 말아먹은 적이 있었는데,

PC도 많고, ip도 고정ip를 사용할 수 있어서 개인용 서버하고,

그 유명한, 리니지 프리서버도 돌렸었습니다.

그때 앱에 대한 개념이 좀 약했던 터라

프리서버 돌리면 뭐 커퓨터 사양이 좋아야하고 리니지 맵이라던가 아이템들이 프리서버에서 다운로드해야한다고 생각하고 있었습니다.

그런데 아니었습니다.

그야말로 리니지의 세상 전체를 리니지 설치파일에 다 들어있는 것이었고 서버는 그에 대한 상태 값

그러니까 내 캐릭터의 위치, 내가 보유한 장비, 등등이 그냥 단순 데이터로 mysql 데이터 베이스에 택스트로만 저장되어 있고

프리서버는 그냥 db 연결해주는 api 역할만 할 뿐이었습니다.

이게 앱입니다.

그러니까, 보여지는 모든 파일은 앱설치할 때 모두 다운로드해서 내 폰에 설치되고 서버와의 통신해서 상태 값만 갱신하는 것입니다. 

보여지는 모든 파일이 내폰에 설치되는것 

이부분이 PWA 의 중요한 특징입니다.

그런데 문제는 처음 로딩시 모든 부분을 다운로드해야해서 좀 지연시간이 있습니다.(이 지연도 해결방식으로 나누어서 로드하기도 합니다. 이랬다 저랬다는 아니고, 파일을 잘개 분할해서 최초 해당 페이지 접속시 로드하는 방식으로 구현되기도 합니다. 같은 페이지 두번 로드는 하지 않는다는 점이 기존 방식과는 다릅니다.)

그런데 이 첫 로드가 끝나면 모든 파일이 로드되어서 다시 동일한 페이지로 이동하면

지연시가 없이 바로 열립니다.

그래서 단순데이터만 로드하기 때문에 PWA가 속도가 빠르다는 이야기를 하게 됩니다.
실제로 그누보드를  게시판 목록 페이지를 api 를 구현해보면, 같은 목록을 보여주는 방식에서도 기존 서버 랜더링방식 대비

20배정도 속도가 개선된것을 경험해볼 수 있습니다.

반면 일반 웹은 페이지가 로드될 때마다 해당페이지의 보이는 디자인 부분을 매번 다시 로드해야합니다.

그래서 속도도 느리고 서버가 열일을 하게 만들어서 서버 부하도 많이 발생하게 됩니다.

그런데, 이런 PWA 의 특징 때문에 클라이언트 분들이 불편해 하는 부분이 있습니다.

바로 페이지가 열리고 데이터가 불러오는 간극이 존재하게 된다는 점입니다.

일반 웹페이지는 로딩이 걸리면 다 읽어올때까지 지연이 되어서 

아, 페이지가 다 로딩 전이구나라고 잠시 기다리게 하는데,

PWA로 구현하면, 페이지 전환은 순간되고 그안에 대이터가 잠깐 깜박이듯이 나타나게 됩니다.

그래서 한페이지 로딩시 2번의 액션을 경험하게 됩니다.

디자인 페이지 열림, 안의 데이터 반영 이렇게 2스탭으로 열리는걸 좀 불련해하시는 분들이 있습니다.

그래서 반대로 로딩시간이 좀 걸리네요라고 지적 당하기도 합니다.

그래서 2가지 대안이 있습니다. 아니 3가지 정도

1. 스켈렛톤 배경 깔기

 - 유투브를 열었는데, 계단이나 승강기 또는 지하실등에서 유투브 파일 열면 지연때문에 유투브가 늦게 뜨는 경우가 있습니다.

  이때 텍스트나 이미지 뒤로 좌에서 우로 흐르듯이 배경색이 변경되는것을 본적이 있을 것입니다.

  그러니까 페이지는 즉시 열렸는데, 그안에 데이터가 늦게 뜨다보니 이를 대응하기 위해 흐르는 배경을 넣어둔 것입니다.

  이걸 몇몇 라이브러리에서 스켈렛톤이라고 합니다.

  데이터 요청후 완료 전까지 스켈렛톤이 뜨다가 로딩 완료가되면 텍스트나 컨텐츠로 바뀌게 해놓습니다.

2. 자주 변경되지 않는 데이터라면 클라이언트에 데이터 저장후 먼저 보여주기

  - 자주 변경되지 않는 정보를 불러온 경우라면 다시 해당페이지 로드시 스토리지에 내용을 저장하고

  다음에 재접속시 해당 페이지 갱신 정보 보여주기 전에 그전 정보를 먼저 보여주고 새정보가 오면 갱신 해 주는 방법입니다.

  svelte를 이용하면 내용이 변경되어도 자연스럽게 변경되기 때문에 크게 이질적으로 보이지 않기도 합니다.

3. svelte-query 사용하여 특정 시간마다 자동 리로드

  - 몇분 간격으로 백그라운드에서 페이지를 자동 리로드해놓게하여 내용변경을 요청하면, 

주기적으로 갱신된 최근 데이터를 브라우저 스토리지에서 저장했다고 불러오는 방식입니다.

앞의 1번인 스켈랫톤 방식은 최초로딩니아 매번 바뀌는 페이지용으로 적용하면되고

뒤의 2,3번은 내용 변경이 빈번하지 않는 페이지에 적용해두면

페이지 전환이 순식간에 이루어지는 경험을 하게 되실 것입니다.

마치 앱사용하듯이 말이죠.

그래서 PWA 이용하면 속도 엄청 빠르다고 자랑할 수 있습니다.