레이아웃 시프트 란?

레이아웃 시프트(Layout Shift)는 웹 페이지의 시각적 안정성을 측정하는 개념으로, 웹 페이지 로딩 중 또는 상호작용하는 동안에 요소들이 예상치 못하게 움직이는 것을 말합니다. 이러한 움직임은 사용자 경험을 저해할 수 있습니다.

레이아웃 시프트는 주로 이미지, 광고, 동적으로 로딩되는 콘텐츠 등이 페이지에 늦게 로드되거나 페이지의 다른 부분과 상호작용할 때 발생합니다. 사용자가 버튼을 클릭하려고 할 때 갑자기 위치가 바뀌어 버튼을 놓치게 되는 경우가 이에 해당할 수 있습니다.

웹 개발에서는 이를 최소화하기 위해 이미지의 크기를 미리 지정하거나, 폰트의 경우 미리 로컬에 캐싱하는 등의 방법을 사용합니다.