다음은 저희가 구현한 몇 가지 최적화에 대한 설명입니다.

1) 표시되지 않거나 보기 어려운 데이터 제거
썸네일 이미지 및 위치정보 메타데이터와 같이 사용자에게 표시되지 않는 이미지 데이터를 삭제합니다. JPEG 이미지의 경우 화질과 컬러 샘플이 필요 이상으로 높을 경우 이를 낮춥니다. 정확히 말하자면 JPEG 화질을 85로 낮추고 컬러 샘플은 4:2:0(즉, 4픽셀당 컬러 샘플 1개)으로 낮춥니다. JPEG를 이보다 높은 화질이나 더 많은 컬러 샘플로 압축하는 경우 더 많은 바이트가 사용되지만, 시각적인 차이는 인지하기 힘듭니다.

이렇게 축소된 이미지 데이터는 철저하게 압축됩니다. 이러한 최적화를 통해 바이트 수가 40% 이상 감소하지만 사용자는 육안으로 이런 차이를 인지할 수 없다는 점이 확인되었습니다.

2) WebP 형식으로 이미지 변환

이미지 형식 중에는 상대적으로 모바일에 더 친화적인 형식이 있습니다. 따라서 저희는 지원되는 브라우저에 알맞게 JPEG를 WebP로 변환합니다. 이런 변환을 통해 화질 저하 없이 바이트를 25% 이상 더 줄일 수 있습니다.

3) srcset 추가

"srcset"이 포함되지 않은 경우 이를 추가합니다. 이는 "src" 속성은 있지만 "srcset" 속성은 없는 "amp-img" 태그에 적용됩니다. 이 작업에는 "amp-img" 태그를 확장하는 작업은 물론, 이미지를 여러 크기로 조정하는 작업도 포함됩니다. 이 작업을 수행하면 화면 크기가 작은 기기에서 바이트 수가 더 줄어듭니다.

4) 상황에 따라 더 낮은 화질의 이미지 사용

사용자가 원하거나 네트워크 속도가 매우 느린 경우 JPEG 이미지 화질을 낮춥니다(아래에서 설명하는 AMP Lite의 일부로서 수행). 예를 들어, Chrome 사용자가 데이터 세이버를 설정한 경우 JPEG 이미지 화질을 50으로 낮춥니다. 이러한 변환을 통해 JPEG 이미지의 바이트를 다시 40% 이상 줄일 수 있습니다.

다음 예에서는 최적화를 수행하기 전(왼쪽)과 후(오른쪽)의 이미지를 보여 줍니다. 원래는 이미지 크기가 241,260바이트였지만 1번, 2번, 4번 항목의 최적화를 적용한 후 이미지 크기가 25,760바이트로 감소합니다. 최적화를 수행한 후 이미지는 본질적으로 동일하게 보이지만, 전체 바이트의 89%나 절감되었습니다.


느린 네트워크 환경을 지원하는 AMP Lite

전 세계 많은 사람들이 연결 속도가 느린 네트워크나 RAM 사양이 낮은 기기에서 인터넷을 이용하고 있는데, 저희는 이렇게 대역폭이 크게 제한된 사용자에게는 일부 AMP 페이지가 최적화된 상태가 아니라는 점을 확인했습니다. 이 때문에 Google에서는 이러한 사용자를 위해 AMP 페이지에서 훨씬 더 많은 바이트를 삭제하는 AMP Lite도 출시했습니다.

AMP Lite를 사용해 위에서 설명한 모든 최적화를 이미지에 적용합니다. 특히, 항상 더 낮은 화질 수준을 사용합니다(위의 4번 항목 참조).

뿐만 아니라 amp-font 태그를 사용하고 글꼴 로드 제한시간을 0초로 설정하여 외부 글꼴을 최적화함으로써, 외부 글꼴이 이전에 캐시되었는지 여부에 관계없이 페이지를 즉시 표시할 수 있습니다.

AMP Lite는 베트남, 말레이시아 등 여러 국가에서 대역폭이 제한된 환경의 사용자와 전 세계에서 RAM 사양이 낮은 기기의 사용자를 대상으로 소개되고 있습니다. 참고로, 이런 최적화 과정에서 일부 이미지의 디테일이 바뀔 수도 있겠지만 광고를 포함하여 페이지의 다른 부분에는 영향을 미치지 않습니다.

* * *
요컨대, 위에서 설명한 모든 최적화에서 저희는 바이트 수가 통틀어 45% 줄어드는 것을 확인했습니다.

저희는 여기서 더 나아가 사용자 데이터의 사용 효율성을 더욱 높여 훨씬 더 빠른 AMP 환경을 제공할 수 있기를 바랍니다.


4분기 출시 기능

지난 4분기에 저희는 <amp-form>을 사용하는 양식에 대한 지원, <amp-app-banner>를 사용한 앱 설치 홍보, 그리고 amp-video와 amp-youtube를 위한 음소거 자동 재생 기능 등을 통해 AMP의 형식 기능을 향상시켰습니다. 또한, 저희는 AMP-in-PWA 지원에 대한 향상된 기능도 발표했습니다. 이러한 기능으로는 PWA(Progressive Web App)를 통한 AMP 문서의 점진적 기능 향상과 PWA에서 AMP를 사용한 참조 구현이 있습니다.

광고의 경우 다중 크기 광고 요청, "플라잉 카펫" 광고 및 amp-sticky-ad에 대한 사용자 환경 개선을 위한 지원이 추가되었습니다. 한편, A4A(AMP for Ads)는 DoubleClick, TripleLift 및 Adsense 등의 지원되는 광고 서버를 통해 계속해서 AMP 형식의 광고 소재를 기반으로 한 광고 제공을 늘리고 있습니다.

Analytics 지원 역시 커뮤니티 피드백을 바탕으로 확대되었습니다. 이제, 트리거를 amp-carousel 및 amp-form 기능에 사용할 수 있습니다.


현재 진행 중인 작업

새해에도 4분기나 그 이전에 시작된 많은 프로젝트를 계속해서 진행하고 있으므로 앞으로 몇 달 동안은 이러한 프로젝트에 집중할 계획입니다.

저희는 현재 요소 동작을 사용자 작업에 바인딩하는 메커니즘 관련 작업을 진행하고 있으며, 이 메커니즘이 구현되면 AMP 페이지에서 더 많은 유형의 대화형 환경이 지원될 것입니다. 또한, 개발자가 훌륭한 디자인의 AMP 페이지를 더욱 손쉽게 작성할 수 있도록 퀵 스타트 샘플 코드("AMP Start") 컬렉션을 제공하려고 합니다.

더불어, 기능이 더욱 풍부한 전자상거래 환경을 지원하기 위한 노력도 게을리하지 않고 있습니다. 여기에는 제품 갤러리 및 탭을 이용한 콘텐츠 탐색은 물론, 더욱 향상된 전자상거래 분석 기능 지원이 포함됩니다.

분석 측면에서 계속 얘기하자면, 동영상 플레이어와의 사용자 상호 작용에 대한 네이티브 amp-analytics 지원 기능과 더욱 세밀화된 분석 지원 기능(예: 가변 필터 지원)도 구현하고자 합니다.

또한, 광고를 위한 UX 로드 기능이 향상되고 A4A에 대한 투자도 계속 이어질 전망입니다. 따라서 지원되는 광고 네트워크와 컨텍스트의 수가 날로 증가하고 AMP가 아닌 페이지도 AMP 광고를 표시할 수 있을 것입니다.

* * *

AMP 개발 커뮤니티 회원들께 그 동안의 노고와 의견을 주신 점에 대해 감사드립니다. 언제나처럼, 문제점이나 추가 기능에 대해서는 저희에게 알려주시기 바랍니다.

HTTP 연결을 사용하는 경우 사이트의 URL 표시줄에 Chrome ‘Not Secure’ 경고가 표시됨  


웹 블루투스

사이트는 이제 Web Bluetooth API를 Android, Chrome OS 및 Mac에서 사용하여 블루투스 저전력(Bluetooth Low Energy, BLE) 기기와 상호 작용할 수 있습니다. Web Bluetooth API는 GATT 프로토콜을 사용하며, 이를 통해 앱 개발자는 JavaScript 단 몇 줄만으로 블루투스 기기(예: 프린터 및 LED 디스플레이)에 연결할 수 있습니다. Web Bluetooth를 물리적 웹 비콘과 결합하여 주변 기기를 검색하고 제어할 수도 있습니다. 시작하려면 GitHub에서 샘플 및 데모를 확인하시기 바랍니다.

heart.gif
웹을 통해 BLE 지원 심박수 모니터에 연결하는 Android 기기(소스)

CSS position: sticky

Chrome은 이제 요소의 위치를 지정하는 새로운 방법인 CSS position: sticky를 지원합니다. position: sticky 요소는 상대적으로 위치가 지정되지만 사용자가 특정 스크롤 위치에 도달한 후에는position: fixed가 됩니다.


이전에는, 표시 영역의 맨 위에 고정되는 콘텐츠 헤더를 작성하려면 일반적으로 스크롤 이벤트를 듣다가 특정 임계값에서 position을relative에서 fixed로 전환했습니다. 이 솔루션은 동기화하기가 어려우므로, 작은 시각적 점프가 발생합니다. 이제, 사용자는 요소의 위치를 sticky로 간단히 지정함으로써 원하는 효과를 이룰 수 있습니다.


이번 릴리스의 기타 특징들


지원 중단 및 상호 운용성 개선 사항


게시자: Vincent Scheib, Web Bluetooth Orthodontist
Share on Twitter Share on Facebook