<11번가>, <홈앤쇼핑> 히어로 슬라이더(Hero Slider) 개선기

고객이 사이트에 방문했을 때 처음 접하는 이미지가 얼마나 중요했으면 히어로 이미지(Hero image)라고 부를까싶다. Hero image로부터 Hero Slider(feat. video)까지 <11번가>, <홈앤쇼핑> 의 개선포인트를 알아보자.

Hero 공간에 대한 이해

공간에 대한 디자인적 관점이라면 <히어로 이미지(hero image)라고들어봤니? by 비범한츈> 등 디자이너 분들의 글을 참고하길 권장한다. 기술적 관점의 전시 영역에 대해서만 이야기해보자.

<샤넬>의 히어로 이미지

<샤넬>은 브랜드를 판매하는 것이기에 목표이기에 (=이미지 한 컷만으로 명품 이미지(느낌)를 전달하는 것으로 충분하지만, 쇼핑몰은 그런거 없다. 많이 파는게 장땡이다. 흔히볼 수 있는 동네마트라고 이해하면 된다.

• 고객이 매장에 진입하는 입구는 좁고 통과 시간도 짧다. => 고객 모바일 폰의 랜딩 영역은 손바닥만하고 시선이 머무는 시간은 한정적이다.
• 매장에선 각종 전단지, 전광판, 피켓 등이 넘쳐난다. 제한된 시간에 가급적 많은 정보를 “전달” 해야 하는 타임어택이다. => 매출압박에 신음하는 쇼핑몰 마케터는 넘치는 프로모션을 담을 공간이 없어 항상 불만이다.
• 절로 들어오고 싶은 마음이 드는 매장 입구과 각종 전시 시설물은 양립하기 어렵다. => 모든 전시는 공짜가 아니며 과잉될 우려가 있다. 고객에게 불쾌감을 전달하면 안된다. “우리 사이트 느려요” 라는 메시지는 재앙이다.

Kurly 메인 페이지

더 많은 정보를 효과적으로 전달하고 싶다. 그래서 히어로 이미지가 히어로 슬라이더(Hero Slider)/히어로 캐러셀(Hero Carousel)로 발전했다.

히어로 “비디오” 슬라이더

<숏 폼 비디오> 때도 다루었지만 호객에 이만한게 없다. 그래서 슬라이더도 비디오를 얹는 형태로 진화는 자연스럽다. 특히 음식과 전자제품의 전달력이 뛰어난 것으로 보인다.

11번가 — 신선밥상

공간의 한계를 극복하기 위해 점(이미지)에서 선(슬라이더)으로 선에서 면으로(비디오 슬라이더) 발전한다. 그리고 그 면적만큼 전송비가 무지막지하게 증가한다. 세상 공짜 없다. 결국 돈이다.

<11번가-신선밥상> 트래픽 개선

<11번가-신선밥상>의 비디오 슬라이더는 총 8.31MB의 GIF로 구성되어 있었다. 히어로 영역이기에 선제적 로딩이 되기에, 무조건적인 전송이 이루어진다고 생각해야 한다.

• 하루 5만명 정도의 사용자 방문시
• 8.31MB X 50,000(번) X 30(일) = 약 12,172 GB
• AWS Cloudfront 비용(서울 리전) = 1,423.14 USD

우리 팀은 실시간처리 방식으로 문제를 해결하고 싶었다. 이 방식의 가장 어려운 점은 <IMG> 태그의 콘텐츠가 애니메이션인지 아닌지 판단할 시간(=서비스 품질)이 없기에 <VIDEO> 태그로 변환할 수 없다.

때문에 <IMG> 태그를 유지한 상태에서 애니메이션을 지원하는 최신 포맷인 AVIF, WEBP을 도입했다. 물론 이를 위한 이미지 최적화 엔진의 고도화가 수반되었다.

• AVIF 변환 386KB로 95% 절감 -> 약 71 USD
• WEBP 변환시 2.6MB로 68% 절감 -> 약 455 USD

안드로이드, iOS에 맞추어 최적화된 포맷을 제공한다.

애니메이션 이미지에서는 역시 AVIF포맷이 압도적인 압축률을 보여주었으나 필드 테스트에서 iOS지원등 일부 호환성 문제가 있을 수 있어 클라이언트 환경에 따라 다른 포맷을 지원하는 것으로 최종 개발이 완료되었다.

<홈앤쇼핑> 메인 페이지

동일한 기획을 개발팀이 직접 코드를 수정하는 관점이라면 <VIDEO>태그를 사용할 수 있어 고려사항이 적다.

<홈앤쇼핑>의 경우 기존 23.7MB의 비디오를 2.61MB 실시간 트랜스코딩하여 로 약 90% 트래픽을 절감하였다.

<video autoplay="" muted="true" loop="loop" playsinline="" 
       webkit-playsinline="" preload="auto" 
       poster="https://image.hnsmall.com/media/banner/03/80/1418003.mp4/xcdr/capture/ts=0.0" 
       src="https://image.hnsmall.com/media/banner/03/80/1418003.mp4/xcdr/preset/_480p" 
       type="video/mp4" class="mtz-vlc-fedch"></video>

로딩되는 찰나의 체감속도를 높이기 위해 비디오의 첫 장면이 poster 이미지로 로딩되도록한 점을 주목할만하다.

poster="https://image.hnsmall.com/....mp4/xcdr/capture/ts=0.0"