아카마이 테크놀로지스 / 김현도 이사


 

1. 클라우드 환경과 이미지 전송

다양한 기술의 도입과 발달로 웹서비스를 위한 환경은 온프레미스(On-Premise)에서 퍼블릭 클라우드로 점차 확대되고 있다. 기업들의 특성에 따라 완전한 클라우드 환경 도입이 목표인 곳도 있지만, 일부 온프레미스 환경을 유지하여 하이브리드 형태의 환경을 기반으로 서비스를 제공하고 있다.

웹서비스에 접속하는 사용자들이 이용하는 디바이스들은 더욱 다양화되었으며, 널리 사용되고 있다. 데스크탑 플랫폼은 스크린 사이즈가 어느정도 표준화되어 있으나 스마트기기 플랫폼들의 종류는 파편화(Fragmentation)라 더욱 지속되고 있다.

애플개발자 문서에 따르면 공식적으로 안내하는 애플 디바이스의 스크린 사이즈는 16종이며 가로 상태와 세로 상태를 고려하면 더욱 다양해진다.

 


<Apple 개발자 문서 - Himan Interface Guideline>


 

한편, 안드로이드 디바이스는 더욱 심각한 수준에 이르고 있다. 2015년을 기준으로 보았을때 약 2만개의 디바이스기기가 식별되었으며 그중 38%가량을 차지하는 삼성의 경우에도 제품 라인업을 다양화시키는 과정에서 적지 않은 수의 디바이스를 생산하고 있다는 것을 알 수 있다.

 


<OpenSingnal의 연례보고서 - 안드로이드 디바이스 파편화>


 

이처럼 다양한 사용자 디바이스 환경을 고려하여 웹서비스를 운영하는 서비스 제공업체의 입장에서는 보다 나은 사용자 경험을 제공해야 한다.

따라서 고해상도 스크린을 탑재한 디바이스의 경우 그에 맞는 높은 품질의 이미지를 전달해야 하는데 그로 인해 큰 이미지 사이즈들이 많아지면서 웹페이지의 로딩 속도 역시 늘어날 수밖에 없다.

2011년 기준 평균 웹페이지의 크기는 약 1MB정도였으나 2015년에는 이미 이미지들의 크기만으로 이를 상회하고 있으며, 평균 웹페이지의 크기는 2MB가 넘는 수준이다.

 

한편, 시스코시스템즈의 ‘시스코 연례 인터넷 보고서(Annual Internet Report)’에 따르면 모바일 연결 평균 속도는 2018년 13Mbps에서 2023년 44Mbps로 세배 이상 빨라지고, 한국은 같은 기간에 38.9Mbps에서 두배 증가한 76.7Mbps 수준에 도달 할 것으로 기대된다고 말한다.

이러한 연결 평균 속도와 평균 웹페이지의 크기를 비교해보면 수용 가능한 수준인 것처럼 보이지만 웹페이지 크기의 증가속도는 더욱 빠르게 상승하고 있다. 글로벌 기업의 브랜드 웹사이트에서는 이미 고품질의 히어로 이미지들이 고품질의 동영상으로 대체되었다.

 


<https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/>


 

이러한 이미지 사이즈의 증가는 결국 사용자 경험과 직결되는데 Google의 PageSpeed Insight에서 어떤 최적화가 추천되는지 나타낸다. 차세대 형식을 이용한 이미지 제공, 렌더링 차단을 유발하는 리소스 제거하기, 초기 서버 응답시간 단축 및 사용하지 않는 CSS를 제거하는 등의 가이드라인이 있다. 일반적으로 36종류에 달하는 최적화 가이드라인의 33%가량이 이미지에 대한 최적화를 가리키게 된다.

구체적으로는 이미지 전송에 가장 적합한 형식과 최적화 전략을 파악하려면 인코딩 되는 이미지의 유형과 기능, 화질 설정, 해상도등의 정보를 분석해야 한다는 내용이다. 또한, 어떤 이미지가 래스터 또는 벡터 형식으로 적절한지, CSS를 통해 원하는 효과를 얻을 수 있는지, 각 접속 장비의 브라우져와 유형에 맞춤 전송 방법을 찾아야 한다는 내용도 포함되어 있다.

 


<구글 PageSpeed Insight 리포트 예제와 Core Web Vital 지표>


 

해당 리포트에 따르면 참고해야할 주요 성능 측정 지표는 아래 3가지로 요약할 수 있다.

  2. Largest Contentful Paint (LCP): 페이지 로딩 성능 측정 지표. 사용자가 웹페이지를 처음 여는 시점에 컨텐츠를 렌더링하는데 걸린 시간을 의미하며 이 값에 따라서 최초 반응속도가 크게 달라질 수 있으며 좋은 사용자 경험을 위해서는 2.5초 이하의 로딩 타임이 권장된다.
  3. First Input Delay (FID): 인터렉티브(Interactive) 관련 측정지표. 사용자가 웹페이지의 특정 요소를 클릭하거나 로딩했을때 최초 입력 지연되는 시간을 나타낸다. 이는 웹페이지가 열리고 난 뒤 특정 이벤트에 처음 반응하는 상호작용에 대한 속도를 말한다. 좋은 사용자 경험을 위해서는? 0.1초 이하의 FID 타임이 권장된다.
  4. Cumulative Layout Shift (CLS): 비쥬얼 안정성 측정 지표. 페이지 로딩이 시작되는 시점부터 로딩이 완료되는 시점 사이에서 페이지 구성요소들이 다시 그려지는 경우와 그에 따른 평가를 나타낸다. 좋은 사용자 경험을 위해서는 0.1값 이하의 CLS가 권장된다.

 



 
저작권정책

K-ICT 클라우드혁신센터의 저작물인 『[1부] 클라우드 환경에서의 이미지 최적화 트렌드』는 K-ICT 클라우드혁신센터에서 아카마이 테크놀로지스 김현도 이사에게 집필 자문을 받아 발행한 전문정보 브리프로, 클라우드 지원포털의 저작권 정책에 따라 이용할 수 있습니다. 다만 사진, 이미지, 인용자료 등 제3자에게 저작권이 있는 경우 원저작권자가 정한 바에 따릅니다.