[UI] 레이아웃 시프트(Layout Shift)에 대해서

1. 레이아웃 시프트(Layout Shift)란?

레이아웃 시프트는 웹 페이지가 로딩되거나 사용자가 웹과 상호작용하는 동안 배치된 요소들이 예기치 않게 이동하는 현상을 말한다. 이 현상은 사용자가 특정 요소를 클릭하려고 할 때 다른 요소가 갑자기 이동해버려 클릭 미스가 일어나거나, 경우에 따라 산만함을 유발하는 등 사용자 경험에 부정적인 영향을 미친다.

2. 레이아웃 시프트는 왜 발생할까?

• 이미지 크기 미지정: HTML에서 이미지의 너비와 높이를 미리 지정하지 않으면, 이미지가 로드되기 전까지 브라우저는 공간을 예약하지 못하고, 이미지가 로드되면서 레이아웃이 바뀌게 된다.
• 비율을 지정하지 않은 비디오/임베드 요소: 비디오나 임베드 요소에 고정된 크기나 비율을 지정하지 않으면, 콘텐츠가 로드된 후에 레이아웃이 변경될 수 있다.
• 동적 콘텐츠 삽입: 광고 배너나 동적 콘텐츠가 로딩 중간에 삽입되면, 기존의 요소들이 밀려나며 레이아웃 시프트가 발생할 수 있다.
• 웹 폰트 로드: 웹 폰트를 비동기적으로 로드할 때, 기본 폰트에서 웹 폰트로 교체되면서 텍스트 크기가 바뀌어 레이아웃 시프트가 발생할 수 있다.

3. 레이아웃 시프트를 방지하는 방법

• 이미지와 비디오 크기 지정: 이미지와 비디오의 너비와 높이를 미리 지정하여, 로딩 중에도 브라우저가 공간을 확보할 수 있도록 한다.
• 동적 콘텐츠 삽입 방지: 동적으로 삽입되는 콘텐츠(ex - 광고, 비동기적 데이터 로드)의 위치와 크기를 미리 지정하여 레이아웃이 변경되지 않도록 한다.
• 웹 폰트 최적화: FOUT(Flash of Unstyled Text) 또는 FOIT(Flash of Invisible Text) 문제를 줄이기 위해 font-display 속성을 사용하여 웹 폰트가 로드될 때 텍스트가 깜빡이는 현상을 방지한다. font-display: swap을 사용하면 웹 폰트가 로드될 때까지 시스템 폰트를 표시하게 할 수 있다.
• CSS 애니메이션 조정: 애니메이션이나 전환이 레이아웃에 영향을 미치지 않도록 설정한다. 가능한 경우 transform 속성을 사용하여 요소의 위치를 변경하고, 레이아웃이 아닌 페인트 단계에서 처리되도록 한다.

4. 레이아웃 시프트 측정: CLS (Cumulative Layout Shift)

출처: https://web.dev/articles/cls?hl=ko

레이아웃 시프트를 측정하는 지표 중 하나이며, 페이지 로드 동안 발생한 모든 레이아웃 시프트의 크기를 누적하여 계산한 값이다. CLS 점수가 높을수록 사용자가 느끼는 불편함이 커진다는 뜻이며, 일반적으로 0.1 이하의 CLS 점수가 권장된다.

CLS점수를 계산하는 방법은 "영향을 받은 요소의 프레임에 대한 영역"과 "프레임 간 시프트 거리"의 곱으로 계산할 수 있다.

자세한 설명은 아래의 링크에서 읽을 수 있다.

https://web.dev/articles/cls?hl=ko

Cumulative Layout Shift (CLS)  |  Articles  |  web.dev

5. 레이아웃 시프트가 사용자 경험을 저해하지 않는 경우 vs 저해하는 경우

(이 파트는 어디까지나 참고용이며 예외의 경우는 존재할 수 있다.)

 

- 사용자 경험을 저해하지 않는 경우

 

• 사용자가 특정 동작을 하거나 특정한 상황이 발생 할거라고 예상이 가능한 경우.
• 레이아웃의 변화가 사용자에게 명확하게 인식되며, 컨텐츠의 변화가 자연스럽게 느껴지는 경우.
• ex: 컨텐츠 추가, 폼 제출, 자연스러운 애니메이션과 트랜지션

 - 사용자 경험을 저해하는경우

• 사용자가 예측하지 못한 상황에서 갑작스럽게 발생하는 레이아웃 변경.
• 컨텐츠가 예고 없이 이동하거나 재배치되면서 사용자 경험을 방해하는 경우.
• ex: 유저와 웹의 상호작용 범위 내에서 뒤늦게 뜨는 광고 및 이미지 로딩.