CLS 개선을 위한 이마트앱 skeleton ui 적용기

임팩트: CLS Before/After 수치 기록 필요 — Core Web Vitals 직접 개선

---

AS-IS

웹 성능에는 크게 로딩 성능과 웹 반응성으로 구분할 수 있습니다.

로딩 속도가 중요했던 이전과는 다르게 사용자의 서비스와의 상호작용이 많아지면서 로드 이후의 상호작용이 중요해졌습니다.

CLS(Cumulate Layout Shift)는 웹 반응성의 주요 지표로서 페이지 전체 수명동안 발생하는 예기치 않은 레이아웃 이동 점수를 의미합니다.

예상치 못한 레이아웃 변화로 텍스트가 갑자기 움직여서 읽는 중에 위치가 변경되거나, 잘못된 링크/버튼을 클릭하게 만드는 등 여러 면에서 사용자 경험을 방해할 수 있습니다.

이를 해결하기 위해서는 사용자가 예상할 수 없는 레이아웃을 미리 계산해서 영역을 차지해서 레이아웃 쉬프트 발생을 저지할 수 있습니다. 대표적인 예로 Skeleton UI 가 있습니다.

현재 이마트앱의 경우, CLS 점수는 0.705로서 권장 기준인 0.1 이하에 한참 못미치는 수치입니다.

항목	비교	값 (점)
이마트앱	0.705	0.705 점
트레이더스	0.38	0.38 점
G마켓	0.007	0.007 점
유튜브	0.001	0.001 점
권장 기준	0.1	0.1 점

트레이더스 메인의 CLS 점수는 0.38 로 이마트 메인보다는 양호하지만 합격점에는 여전히 들어오고 있지 않습니다.

그에 비해 g마켓, 유튜브의 CLS 점수는 각각 0.007, 0.001로 권장 기준에 안정적으로 들어오고 있습니다.

g마켓

유튜브

이는 트리맵을 보았을 때 분명한 차이를 느낄 수 있습니다.

이마트앱의 경우 배너, 레시피북 등 api 응답에 따라 레이아웃이 변경되는데 반해, g마켓, 유튜브의 경우 스켈레톤 UI를 적용하면서 레이아웃 변경을 현저히 감소시켰습니다.

이마트앱

g마켓

유튜브

이마트앱에 스켈레톤 UI를 적용해 CLS 점수를 개선하여 사용자 경험 수준을 높이려고 합니다.

TO-BE

이마트 메인, 트레이더스 메인 상단 영역에 스켈레톤 UI를 적용한 결과 CLS 점수가 각각 0.01 , 0.03 으로 이전보다 98.58% 92.11% 감소했습니다.

항목	비교	값 (점)
이마트 Before	0.705	0.705 점
이마트 After	0.01	0.01 점
트레이더스 Before	0.38	0.38 점
트레이더스 After	0.03	0.03 점

운영화면 1배속

운영 0.5배속

스켈레톤 0.5배속