[Service Worker]

홍예찬·2021년 4월 23일
0
post-thumbnail

실제 웹/앱 서비스를 개발하다 보면, 사용자 입장에서 최적화된 UI/UX를 구현하기 위한 끊임없는 고민과 노력을 하게 됩니다. 어떻게 하면 사용자가(또는 고객이) 계속해서 우리 서비스를 만족하면서 지속적으로 사용하느냐가 굉장히 중요하기 때문입니다.

사실 UI/UX 최적화의 개념은 정말 단순하다고 생각합니다. 사용자의 클릭 몇 번, 타이핑 몇 번 만으로 자신이 원하는 일이 처리되는 것, 페이지에 진입했을 때 대기시간 없이 바로 해당 웹페이지가 떠서 사용자가 끊김없이 서비스를 사용할 수 있는 것 등이 UI/UX 최적화의 개념이자 목적이죠. (물론 제가 든 예시가 UI/UX 최적화에 대한 모든 부분을 설명하는 것은 아닙니다🙄)

전자의 경우에는 제공하는 서비스, 플랫폼에 따라 차이가 있을 수 있겠습니다. 은행이나 암호화폐 거래소, 저희 회사와 같이 암호화폐 스테이킹 서비스를 운영하는 회사라면 사용자의 자산을 취급하기 때문에 사용자의 용이성만큼(또는 오히려 더) 보안에도 큰 비중을 둬야 합니다. 그렇게 된다면 용이성 측면에서는 일반 웹 사이트보다 떨어질 수밖에 없겠죠.

그러나 후자의 경우에는 어떤 서비스, 플랫폼이든지 정말 중요한 부분입니다. 사용자가 웹/앱 페이지에 접근했을 때, 로딩 때문에 대기하는 시간이 길어지게 된다면 사용자는 '이 사이트는 왜 이렇게 느리고 답답해!😩😤' 라는 생각이 들 것이고 최악의 경우 그 서비스를 이용하지 않게 되겠죠.

따라서 웹페이지의 로딩 속도를 최소화하는 부분은 정말 중요한 부분 중 하나입니다. 서버 지연을 줄이고 로딩 처리 속도를 개선하기 위해 많은 회사들은 웹 캐싱을 사용하고 있습니다.

웹 캐싱

웹 캐싱이란 무엇일까요? MDN에서는 웹 캐싱(HTTP Caching)을 다음과 같이 설명하고 있습니다.

웹 사이트와 애플리케이션의 성능은 이전에 가져온 리소스들을 재사용함으로써 현저하게 향상될 수 있습니다. 웹 캐시는 레이턴시와 네트워크 트래픽을 줄여줌으로써 리소스를 보여주는 데에 필요한 시간을 줄여줍니다. HTTP 캐싱을 활용하면 웹 사이트가 좀 더 빠르게 반응하도록 만들 수 있습니다.

위 설명을 읽어보면 웹 캐싱의 목적에 대한 대략적인 의미는 이해가 가지만, 보다 쉬운 이해를 위해 좀 더 명확한 예시를 들어보겠습니다.


수십, 수백만의 사용자가 우리 서비스를 이용하려 웹 사이트에 접근할 때마다, 웹페이지 구성에 필요한 모든 파일을 서버로부터 불러와야 한다면? 아니면 특정 사용자가 새로고침을 수백 번 누르게 된다면? 서버는 수많은 요청에 대응해야 하기 때문에 로드 속도는 현저히 떨어지게 되고 결국에는 버티지 못하고 다운될 겁니다.(RIP)


이런 문제를 방지하고, 보다 향샹된 UI/UX를 구현하기 위해 웹 캐싱을 도입하게 되는 것입니다.

그렇다면 여기서 말하는 이전에 가져온 리소스들을 재사용함 은 어떤 리소스를 의미할까요? 가장 대표적인 예시로는 이미지 파일을 들 수 있겠습니다. (물론 html, css, js파일도 포함하죠.) 회사의 로고나 웹페이지에 들어가는 이미지, 수많은 파일들은 회사의 CI를 변경하거나 웹페이지를 리모델링 하지 않는 이상 거의 변함이 없을 겁니다.

이에 따라 사용자가 사이트를 재방문하게 되더라도, 용량이 크고 변동성이 거의 없는 정적 자산(static asset)과 같은 경우에는 서버에서 동일한 파일을 다시 보내는 것이 아닌 다른 곳에 이러한 파일들을 저장해두고, 이를 재사용하는 것이죠. 그렇게 된다면 서버의 과부하를 방지할뿐만 아니라 로딩 속도 측면에서도 유의미한 차이가 있게 되는 것입니다.

서비스 워커

웹 캐싱에는 다양한 방식이 존재합니다.

참고 자료

HTTP Caching - MDN
Google Developers - Service worker
Google Developers - Serivce worker LifeCycle

profile
내실 있는 프론트엔드 개발자가 되기 위해 오늘도 최선을 다하고 있습니다.

0개의 댓글