나의 코딩일지

누적 레이아웃 이동(Cumulative Layout Shift, CLS) 웹 페이지의 시각적 안정성을 측정하는 지표 중 하나로 페이지의 생명주기 동안 발생하는 모든 예기치 않은 이동에 대한 지표를 계산하며 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화한다. 사용자가 페이지를 로드하는 동안 렌더링되는 요소들의 위치 변화로 인해 발생하는 사용자 경험의 불안정성을 나타내므로 CLS가 낮으면 사용자 경험을 악화시킨다. 리소스가 비동기식으로 로드되거나, DOM 요소가 기존 콘텐츠 위의 페이지에 동적으로 추가 되어 발생한다. 사용자의 인터렉션으로 인한 레이아웃 변경인 경우는 포함되지 않으며, 레이아웃 이동이 발생한 요소의 전체 높이와 뷰포트 높이의 비율을 의미하는 영향분율과 레이아웃 이동이 발생한 요..

사실 이 프로젝트는 프론트엔드 개발자에게 기술적 챌린지가 있던 것도 아니었고, 오히려 대시보드라서 비슷하지만 애매하게 api를 재사용하는 컴포넌트만와 다른 페이지 수만 많아 시간 싸움이었기 때문에 해커톤에는 악조건이었다. 2차 합류하느라 기획이 거의 끝난 상태여서 개발 사이즈를 줄이지도 못했다. 그럼에도 이 프로젝트를 선택한건 일단 아이템이 왜 필요한지와 해결방안이 명확해 매력있었고, 첫 대화했을 때 디자이너분이 예사롭지 않은 분이었기 때문이다. 매력적인 디자이너의 존재는 프론트엔드를 움직이게 한다. 그리고 예전에 테오의 스프린트에서 프론트엔드 개발자들이 서로 프레임워크와 라이브러리, 컨벤션을 맞출 때 편리하게 도움을 주는 프로덕트를 진행했을 때 디벨롭되면 진짜 사용하고 싶었던 맥락도 있었다. 무엇보다,..