layout shift는 영상 예시를 보면 쉽게 이해할 수 있다. 영상은 이곳에서 가져왔다. 웹에 접속해서 페이지를 로드할 때 서버에서 아직 응답을 받지 못한 데이터가 있을 수 있다. 그때 ui 상으로는 더 하단에 있더라도 더 빨리 렌더링 되는 순서대로 차곡차곡 다른 데이터들이 먼저 자리를 차지하게 된다. 결국 뒤늦게 도착한 데이터는 정해진 영역에 마치 비집고 들어가는 것처럼 보이게 된다. html 구조상에 위차한 영역에 들어가는 것 뿐인데도 말이다. 이 문제는 해당 영역에 공간을 별도로 설정해 두지 않아서 발생한다. 위 영상에서도 버튼 클릭처럼 중요한 이벤트를 처리하는데, 클릭 순간 갑자기 안보이던 영역이 추가로 생기면서 버튼이 밀리는 현상이 발생한다. 사용자가 전혀 원하지 않은 다른 버튼을 클릭하게 ..
