M2 Live 솔루션의 다양한 실제 사례들을 설명드립니다.
M2 Live 솔루션의 다양한 실제 사례들을
설명드립니다.
CHALLENGE
오픈마켓 L사는 모바일 환경의 사용자에게 더 나은 사이트 경험을 전달하고자 다양한 해법을 모색해오고 있었습니다.
모바일에서의 매출 신장이 두드러지기 시작한 오픈마켓 L사는 Google의 Lighthouse를 통해 확인한 Core web vitals의 전반적인 수치를 개선하고, 지속적으로 최적의 상태를 유지하고자 하였습니다.
SOLUTION
M2 Live 웹사이트 경량화&최적화 엔진에는 Google의 기술이 잘 정리된 web.dev의 기준들을 반영하여, Core web vitals를 개선하기 위한 다양한 기술들이 준비되어 있습니다. 첫 화면의 메인 이미지를 비롯한 다양한 이미지 콘텐츠들은 이미지 콘텐츠의 최적화 경량화 기능을 통해 최신 포맷으로 자동 변환되어 최대 70% 용량이 경감되었습니다. 메인 페이지에서 곳곳에 위치한 동영상 콘텐츠들은 해당 콘텐츠가 노출되기 직전에 다운로드가 될 수 있도록 페이지 스크롤에 따른 로딩 최적화가 적용되었으며, 배너 광고, 분석 등의 다양한 script 들은 첫 화면이 정상적으로 노출 완료된 이후에 동작을 수행하도록 3rd-party Script 제어 기능이 적용되었습니다.
M2 Live 웹사이트 경량화&최적화 엔진의 적용 만으로 L사의 웹사이트 메인 페이지는 첫 로딩 시 약 95%의 용량이 절감되는 결과를 확인하였습니다. 평균 25%의 LCP 수치 개선을 확인함으로써 모바일 환경의 사용자에게 쾌적한 경험을 전달할 수 있었습니다.
참고 :
web.dev ‘Learn Performance’
web.dev ‘핵심 웹바이탈이 비즈니스에 미치는 영향 ‘
web.dev ‘Renault가 콘텐츠가 포함된 LCP를 측정하고 최적화하여 이탈률과 전환율을 개선한 방법‘
web.dev ‘GoDaddy의 웹사이트+마케팅 서비스에서 고객 핵심 웹바이탈을 75% 개선한 방법‘
M2 Live Docs ‘이미지 서비스 패턴‘
CHALLENGE
이커머스 H사의 웹사이트는 수많은 사용자들의 다양한 니즈를 충족하기 위해, 각 카테고리에서 제공하는 상품의 수가 수백 가지가 넘었습니다.
다양한 상품을 제공함으로써 사용자의 선택의 폭은 넓어졌지만, 상품 목록 페이지는 그만큼 무거워져 용량이 100MB에 가까운 페이지로 사용자들에게 전달되고 있었습니다. 매출이 증가하고 있는 모바일 환경에선 느린 네트워크로 인한 페이지 로딩 속도의 저하로 사용자의 불편함이 예상되었습니다.
SOLUTION
M2 Live 웹사이트 경량화&최적화 엔진의 적용과 함께 H사는 다양한 기술들을 적용하여 최적화된 페이지를 서비스할 수 있었습니다. 수백 가지가 넘는 상품 이미지들이 M2 Live 솔루션의 적용과 동시에 이미지 최적화 기능을 통해 자동으로 차세대 포맷인 WebP 이미지로 변환되었습니다. 뿐만 아니라, 실시간으로 추가 등록되는 상품 이미지들도 On-the-fly 기법으로 실시간으로 변환되어 항상 최적화된 페이지를 서비스할 수 있었습니다. 운영자는 기존의 외부 파트너사와 내부 유관 부서에 추가 요청 없이도 최적화를 수행함으로써 프로세스 슬림화를 통한 인프라 TCO의 최적화도 함께 달성하였습니다.
무거웠던 상품 카테고리 목록 페이지들은 M2 Live 웹사이트 경량화&최적화 엔진의 다양한 콘텐츠 최적화 기능들을 통해 평균 약 70%의 용량이 절감되었습니다. 페이지 스크롤에 따른 로딩 최적화 기능으로 화면에 보이지 않는 콘텐츠는 사용자에게 전송을 하지 않음으로써 최적화된 콘텐츠가 최소한으로 전송됩니다. 페이지 접속 직후에 사용자에게 전달되는 용량은 평균 약 95%가 절감되어 사용자에게 보다 쾌적한 웹사이트 경험을 제공할 수 있었습니다.
참고 :
web.dev ‘올바른 이미지 형식 선택‘
web.dev ‘이미지 지연 로드‘
web.dev ‘핵심 웹바이탈이 비즈니스에 미치는 영향 ‘
M2 Live Docs ‘이미지 서비스 패턴‘
CHALLENGE
오픈마켓 C사는 웹사이트의 미디어 콘텐츠들을 최신 포맷으로 서비스함으로써 사용자의 웹사이트 경험이 개선될 것으로 기대하였습니다. 하지만 미디어 콘텐츠의 용량이 수 kB에 불과함에도 첫 화면의 로딩 속도 개선은 크게 이뤄지지 않았습니다.
SOLUTION
M2 Live 웹사이트 경량화&최적화 엔진은 C사의 메인 페이지에서 분석 스크립트, 무거운 이미지가 들어있는 팝업 콘텐츠를 비롯한 다양한 3rd party script가 메인 페이지의 로딩 속도를 저하시키는 주요 원인임을 확인하였고, M2 Live 웹사이트 경량화&최적화 엔진의 3rd party script 제어 기능을 통해 이를 실시간으로 압축, 로딩 지연 및 최적화를 수행하였습니다. JavaScript 압축을 통해 평균 약 83%의 용량 절감 효과가 있었으며, 페이지 스크롤에 따른 로딩 최적화를 통한 로딩 지연과 이미지 최적화 기능을 통한 WebP 이미지의 추가 최적화를 수행함으로써 평균 약 22%의 LCP 개선 효과도 확인하였습니다. 복잡하고 다양한 문제들이 M2 Live 솔루션의 적용과 함께 실시간으로 최적화되면서 로딩 속도는 빠르게 향상 되었습니다.
Web.dev에서는 JavaScript에서 비롯되는 웹페이지 성능 저하 이슈에 대한 문제를 인지하고, 라쿠텐, Redbus, Netzwelt 등의 사례를 통해서 JavaScript를 비롯한 다양한 최적화가 광고 수익, 클릭률, 전환율의 개선에 효과가 있음을 설명하고 있습니다.
참고 :
web.dev ‘Learn Performance’
web.dev ‘핵심 웹바이탈이 비즈니스에 미치는 영향 ‘
web.dev ‘Core Web Vitals에 대한 Rakuten 24의 투자로 방문자당 수익, 전환율을 늘린 방법‘
CHALLENGE
오픈마켓 S사는 보안 경고가 사용자의 사이트 경험, 그리고 결제율에 영향을 미친다는 점을 이해하고 있었습니다.
2016년부터 Chrome을 시작으로 주요 브라우저에서는 안전하지 않은 사이트에 대해 경고를 하기 시작했습니다. S사는 이러한 경고가 사용자들에게 쾌적하지 않은 경험을 전달할 뿐만 아니라, 사이트에 대한 신뢰도, 궁극적으로는 사용자들의 결제율에도 치명적일 수 있음을 이해하고 있었습니다. 하지만, 수많은 외부 파트너사들이 등록한 상품 상세 페이지의 콘텐츠들을 완전하게 통제하는 것이 불가능하기에, S사는 결제 페이지에 한정해서만 HTTPS로 페이지를 서비스하게 되었습니다.
SOLUTION
M2 Live 상품기술서 최적화 엔진은 보안과 관련한 다양한 문제들을 하나의 솔루션에서 즉시 해결합니다. 외부 파트너사의 콘텐츠에서 발생하는 Mixed Contents 문제에 특화된 M2 Live 상품기술서 최적화 엔진은 안전하지 않은 URL, 잘못된 인증서 등 상품 상세 페이지에 내포된 콘텐츠 차단 위험을 실시간으로 해결하여 100% 안전한 상품 상세 페이지로 소비자 신뢰도를 향상시킵니다. 고객을 위험하게 하는 유해 링크를 제거함으로써 안전한 쇼핑 경험을 제공하고, 표준 권고안에 따른 유해 태그 제거를 통해 고객에게 보다 신뢰받는 사이트가 될 수 있도록 실시간으로 분석, 해결합니다.
CHALLENGE
WebP 이미지 포맷은 기존 JPG, PNG 이미지 대비 1/3 이상 용량 절감이 가능한 효율적인 차세대 이미지 포맷입니다.
오픈마켓 G사는 판매중인 상품의 모든 상품기술서의 이미지를 최신 포맷으로 변경하고자 했습니다. 그러나, 외부 판매자가 제공하는 수많은 상품 이미지를 내부에서 변환하여 서비스하는 것은 쉽지 않았습니다. 변환해야 하는 이미지의 엄청난 수량도 막막한 과제였지만, WebP의 최대 픽셀 크기 제한으로 변환이 안되는 상품 이미지들도 많았습니다. 변환 과정 중에 빈번히 발생하는 오류 문제, 외부 파트너사에서 수정이나 교체 등의 비정기적 업데이트 이미지들이 반영되지 않는 문제들까지 차세대 이미지 변환 최적화 프로젝트는 매우 많은 노력이 요구되는 과정이었습니다.
SULOTION
M2 Live 상품기술서 최적화 엔진은 이미지 변환에 대한 가장 효율적이고 효과적인 방법을 제공합니다. 많은 문제점이 알려진 일괄 변환 방식이 아닌, 실시간 사용자의 요청에 따라 즉시 변환 가공하는 On-the-fly 방식으로 상품기술서 실시간 최적화를 통해 G사의 문제를 해결하였습니다. 요청받은 이미지를 실시간으로 분석하여, 변환이 어려웠던 길이가 긴 이미지는 즉시 분할하여 변환 전송하였고, 사용자의 환경을 고려한 상품기술서 전송 최적화 기술을 통해 사용자의 브라우저 환경을 감지하여 차세대 이미지 포맷을 지원하지 않는 경우엔 지원 가능한 포맷 중 가장 최적화된 포맷으로 서비스하였습니다. 최적화를 포함한 추가 가공, 파트너사에서의 이미지 수정 및 교체, 새로 출시된 AVIF 이미지 포맷에 대한 수요까지 실시간 가공 방식은 추가 자원 투입 없이 몇 번의 클릭 만으로 가능하게 하였습니다.
G사는 상품기술서의 이미지 최적화를 통해 전체 이미지 용량의 최대 70%의 절감 효과를 보았습니다. 경량화된 상품기술서는 사용자에게 보다 빠르게 전송되어, 보다 쾌적한 사이트 경험을 전달하였습니다.
참고 :
web.dev ‘올바른 이미지 형식 선택‘
web.dev ‘이미지 지연 로드‘
web.dev ‘핵심 웹바이탈이 비즈니스에 미치는 영향 ‘
M2 Live Docs ‘이미지 서비스 패턴‘
CHALLENGE
오픈마켓인 L사는 각각의 고객에게 맞춤형 콘텐츠를 제공함으로써 더 정교하게 개인의 취향을 반영하는 초개인화된 고객 경험을 전달하고자 하였습니다.
오픈마켓 L사는 다양한 광고, 홍보 등을 통해 유입된 고객들을 대상으로 유저 데이터를 분석하였고, 분석한 데이터에 기반해 적절한 내용의 메시지를 담은 이메일을 올바른 대상에게 적시에 노출하고자 하였습니다. 특히 알람에 따른 반응성이 높은 모바일에서의 열람을 고려, 모바일 기기에 최적화된 크기의 배너 이미지를 전달하여 고객의 참여도를 높이고자 하였습니다. 하지만 각기 다른 콘텐츠의 배너 이미지를 미리 생성하고, 이를 전달하기까지의 시간 차이로 인해 정보의 유효성에 대한 고민도 함께 깊어졌습니다.
SOLUTION
M2 Live 의 실시간 이미지 가공 변환 엔진은 단순히 이미지를 실시간으로 가공하여 모바일 환경에 최적화된 배너 이미지를 제공하는 것에 그치지 않고, Best 상품 목록, 추천상품, 판매량, 재고, 할인율처럼 지속적으로 변경되는 정보를 노출 시점에 실시간으로 이미지와 결합하여 서비스하는 Real-time Dynamic Banner Image 생성 기능을 제공하고 있습니다. L사의 이메일 마케팅은 사용자가 해당 이메일을 열람하는 시점에 신선한 정보가 실시간으로 결합되어 제공됨으로써, 이메일 열람율, 클릭률, 전환율에서 긍정적인 효과를 보았습니다.
Hubspot에서 공개한 자료에 따르면 고객 맞춤의 개인화 이메일은 오픈율에서 50% 이상 차이가 나타나며, Mailchimp의 조사에서는 모바일에 대응하는 디자인을 사용하여 이메일을 발송한 경우 약 15%의 추가 클릭률을 기록하였다고 합니다.
M2 Live 실시간 이미지 가공 변환 엔진을 통해 초 개인화된 이메일 콘텐츠를 실시간으로 생성, 서비스함으로써 사용자의 참여율을 넘어 고객 충성도까지 향상 시킬 수 있습니다.
참고 :
M2 Live Docs ‘스마트 배너 이미지‘
Hubspot ‘The Ultimate List of Email Marketing Stats for 2023’
콘텐타M ‘통계로 알아보는 이메일 마케팅‘
CHALLENGE
이커머스 L사는 클라우드로의 전환을 앞두고 스토리지에 저장된 수많은 이미지의 마이그레이션에 대해 깊은 고민을 가지고 있었습니다.
이런 상황 하에 새로운 모바일 디바이스의 출시로, L사는 기존에 서비스하던 상품 이미지들을 새로운 규격에 맞게 모두 추가 가공, 생성을 해야 하는 상황이었습니다. 원본 고용량 이미지와 파생된 수많은 이미지들로 인해 스토리지 자원은 빠른 속도로 채워졌습니다. 사용자들이 더 이상 찾지 않을 이미지는 정리되어야 했지만, 수 억장으로 늘어난 이미지를 효율적으로 관리하기는 어려운 상황이었습니다. 클라우드 환경으로 안정적인 전환을 위해서는 서비스 중단 우려가 있는 스토리지 마이그레이션 문제와 이미지 자원의 관리 문제를 해결할 필요가 있었습니다.
SOLUTION
M2 Live 의 실시간 이미지 가공 변환 엔진은 On-the-fly 방식으로 필요한 이미지를 실시간으로 자동 생성하여 언제 어디서나 최적화된 이미지를 제공합니다. 때문에 필요한 가공 이미지를 미리 만들어 둘 필요가 없으며, 스토리지 자원도 원본 이미지 1장 만을 저장하게 되어 스토리지에 저장된 이미지의 90%를 절감, 불필요한 자원 사용이 발생하지 않습니다.
뿐만 아니라, M2 Live 솔루션은 추가 개발 없이 서비스 중인 콘텐츠를 유연하게 연결, 확장할 수 있습니다. 물리적으로 분산되어 있는 콘텐츠도 서비스 중단 없이 원활한 서비스가 가능합니다. 여기에 M2 Live 솔루션에 내장된 캐시 엔진으로, 외부 콘텐츠의 문제로 인한 서비스 장애 등도 추가로 방지할 수 있었습니다.
환경의 변화로 필요한 추가 가공 이미지를 M2 Live 실시간 이미지 가공 변환 엔진의 풍부한 이미지 가공 명령어와 무한한 조합으로 실시간으로 생성함으로써, 스토리지에 저장해야 하는 이미지의 숫자가 최소화 됨과 동시에, 이전 중인 콘텐츠에 위치 투명성을 갖게 함으로써 스토리지 마이그레이션 중 오류 발생으로 인한 서비스 중단의 문제를 해결하게 되었습니다. L사는 M2 Live 솔루션의 도입만으로 고비용의 인프라 자원 최적화, 언제 어디서나 최적화된 이미지를 제공하였으며, SLA 99.9% 의 M2 Live 실시간 이미지 가공 변환 엔진으로 클라우드로의 마이그레이션을 걱정없이 자동으로 손쉽게 수행하였습니다.
CHALLENGE
오픈마켓 G사는 상품 상세 페이지를 비롯한 일부 페이지에서 화면이 뜨는 속도가 다른 페이지들과 현저하게 차이가 나는 문제를 확인하였습니다.
사용자들이 원하는 상품을 찾기 위해 탐색하는 상품 목록 페이지와 사용자가 상품 설명을 읽고 구매의사를 결정하는 상품 상세 페이지는 중요합니다. 오픈마켓 G사에서 발견한 공통의 문제는 이들 페이지에서 무수히 많은 GIF 콘텐츠가 숨겨져 있었다는 점이었습니다. 제품의 주목도를 높이기 위해 사용된 움직이는 이미지는, 개별 용량이 매우 커서 해당 페이지가 노출되는데 적게는 수십 MB에서 많게는 수백MB까지 사용자의 대역폭을 사용하였습니다. 하지만 매번 상품이 업데이트 되는 상품 목록 페이지와 외부 파트너사가 관리하는 상품 상세 페이지의 무거운 GIF 이미지를 관리하기란 현실적으로 어려운 부분이 있었습니다.
SOLUTION
M2 Live 비디오 트랜스코딩 엔진은 Web.dev의 권고에 따라 움직이는 GIF 콘텐츠를 GIF style의 Video로 실시간 자동 트랜스코딩합니다. 복잡한 코드 수정이나, 콘텐츠를 업로드하는 외부 사용자에게 추가 요청이 없이도 GIF 콘텐츠는 자동으로 변환되며, 변환된 mp4 파일은 기존 GIF 콘텐츠 대비 최대 95%의 용량 절감 효과를 보였습니다. 뿐만 아니라 M2 Live 솔루션의 페이지 스크롤에 따른 로딩 최적화를 통해 페이지 접속 시 다운로드 되는 용량을 최소화함으로써 사이트의 로딩 속도를 극적으로 개선할 수 있었습니다. G사의 GIF 콘텐츠 실시간 자동 트랜스코딩은 용량 절감을 통한 로딩 속도의 개선 뿐만 아니라, 전체 사이트의 최적화로 Core Web Vital 지표까지도 개선하는 효과를 보았습니다.
참고 :
web.dev ‘빠른 로드 시간’
web.dev ‘GIF 스타일 동영상’
web.dev ‘페이지 로드 속도를 높이기 위해 애니메이션GIF를 동영상으로 대체합니다’
M2 Live Docs ‘gif2video‘
CHALLENGE
이커머스 S사는 영상 콘텐츠가 대세를 이루는 현재 트랜드에 맞춰, 자사 웹사이트의 메인 페이지에 다양한 숏폼 영상을 노출하고자 하였습니다.
wyzowl의 ‘The State of Video Marketing 2023’ 자료에 따르면, 동영상이 포함된 랜딩 페이지의 전환율은 86% 더 높다고 합니다. 사용자의 주목도, 풍부한 정보의 전달 측면에서 영상 콘텐츠는 각광을 받고 있으며, 영국의 프리미엄 스포츠 브랜드인 Rapha에서는 자사 상품 상세 페이지에 영상 콘텐츠를 적극 활용하고 있습니다. 사용자의 반응성과 니즈에 빠르게 대응하기 위해 S사에서도 자사의 영상 콘텐츠를 적극 활용하고자 하였으나 보유하고 있는 영상 콘텐츠의 길이가 길고 무거워 숏폼으로 활용하기에는 적합하지 않은 문제점을 인지하고 있었습니다. 대용량으로 인해 트래픽 비용이 과다하게 발생하며, 사용자의 모바일 환경에도 해당 영상들은 적합하지 않았습니다. 영상 콘텐츠를 편집 가공하기 위한 상용 비디오 편집툴은 S사의 사용 목적이 제한적이기에 일반적인 고비용의 전문적인 편집툴은 적합하지 않았습니다. 뿐만 아니라 해상도별로 가공된 수많은 숏폼 영상들을 저장하는 비용도 부담으로 작용하였습니다.
SOLUTION
M2 Live 비디오 트랜스코딩 엔진은 가볍게 소비되는 숏폼 콘텐츠에 적합한 합리적인 솔루션으로써 간단한 요청만으로 실시간으로 영상을 분할 편집하는 기능을 제공합니다. 실시간으로 영상을 편집하여 제공하기에 추가 저장공간도 필요하지 않으며 무엇보다 콘텐츠의 가공, 편집이 URL을 통해 간단히 이루어짐에 따라 내부 인프라의 추가 수정이 필요하지 않습니다. 원하는 구간을 초 단위로 편집 가능하며, 요청하는 즉시 원하는 해상도로 영상을 생성하여 서비스가 가능합니다. PC 화면과 모바일 화면에 적합한 해상도의 영상 콘텐츠를 각각 제작하는데 필요한 것은 원본 영상과 간단한 URL 요청이 전부입니다. S사는 M2 Live 비디오 트랜스코딩 엔진을 통해 소비자의 경험을 중심으로 보다 쉽고 빠르고 가볍게 숏폼 콘텐츠를 생성, 전달할 수 있었습니다. 뿐만 아니라, M2 Live 솔루션이 제공하는 페이지 스크롤에 따른 로딩 최적화 기능 덕분에 S사는 다양한 숏폼 영상을 메인 페이지에서 노출하였음에도 페이지의 로딩 속도는 오히려 빨라졌습니다.
