레이아웃 이동이란?

• 레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 밀리는 현상을 말함

• 이미지 갤러리 서비스를 새로고침 해 보면 레이아웃 이동 현상을 볼 수 있음

• 이미지가 로드될 때 아래 이미지보다 늦게 로드되는 경우, 뒤늦게 아래 이미지를 밀어내면서 화면에 그려짐

  

• 레이아웃 이동은 사용자의 주의를 산만하게 만들고 위치를 순간적으로 변경시키면서 의도와 다른 클릭을 유발할 수 있음

• 즉, 사용자 경험에 좋지 않은 영향을 줌

• 이 때문에 Lighthouse에서는 웹 페이지에서 레이아웃 이동이 얼마나 발생하는지를 나타내는 지표로 CLS(Cumulative Layout Shift)라는 항목을 두고 성능 점수에 포함함

• Lighthouse를 이용하여 직접 검사를 해 보면 다음과 같이 CLS 항목의 점수를 볼 수 있음

  

• CLS는 0부터 1까지의 값을 가지며, 레이아웃 이동이 전혀 발생하지 않은 상태를 0, 그 반대를 1로 계산하고, 권장하는 점수는 0.1 이하임

• 이미지 갤러리 서비스의 점수는 0.438로, 상당히 좋지 않은 상태임

• 조금 더 직접적인 원인을 파악하기 위해 Performance 패널을 확인해 보자. 검사 결과의 Experience 섹션을 보면 Layout Shift라는 이름의 빨간 막대가 표시되는데, 이것은 해당 시간에 레이아웃 이동이 발생했다는 의미임. 이 막대에 커서를 올리면 서비스 화면에서 레이아웃 이동을 유발한 요소를 표시해

  

레이아웃 이동의 원인

• 레이아웃 이동을 발생시키는 원인은 다양함. 그중 가장 흔한 경우를 나열하면 아래 네 가지 정도가 있음
  • 사이즈가 미리 정의되지 않은 이미지 요소
  • 사이즈가 미리 정의되지 않은 광고 요소
  • 동적으로 삽입된 콘텐츠
  • 웹 폰트(FOIT, FOUT)
• 이미지 갤러리 서비스에서는 이 네 가지 중 ‘사이즈가 미리 정의되지 않은 이미지 요소’ 때문에 레이아웃 이동이 발생함
• 브라우저는 이미지를 다운로드하기 전 까지 이미지 사이즈가 어떤지 알 수 없으니 미리 해당 영역을 확보할 수 없음. 그렇기 때문에 이미지가 화면에 표시되기 전까지는 해당 영역의 높이(또는 너비)가 0임. 그러다 이미지가 로드되면 높이가 해당 이미지의 높이로 변경되면서 그만큼 다른 요소들을 밀어내는 것임
• 광고의 경우도 마찬가지임. 흔히 광고에는 이미지나 영상 콘텐츠가 많이 사용되는데, 콘텐츠 사이즈가 제각각인 경우 브라우저에서 미리 해당 영역을 확보하지 못해 이미지에서와 마찬가지로 광고가 로드될 때 다른 요소를 밀어냄.
• 동적으로 삽입된 콘텐츠는 말 그대로 새로운 요소가 추가되면서 다른 요소를 밀어내는 것임. 웹 폰트는 3장에서 살펴봤는데, 폰트에 따라 글자의 크기가 조금씩 다른데, 이러한 차이 때문에 다른 요소의 위치에 영향을 줄 수 있음