프론트엔드
같은 연출, 다른 CLS: transform을 제외한 설계 의도를 찾아서
두줄요약
height 애니메이션을 transform 기반 모션으로 분리해 연출을 유지하면서 CLS를 낮췄습니다. 로컬 프로파일링과 운영 데이터로 레이아웃·메인 스레드 작업 감소를 확인했습니다.
문제 상황
- 미션 완료 후 거위 영역의 height를 513px에서 294px로 축소하는 모션에서 하단 콘텐츠 이동과 CLS 발생
- 의도한 시선 유도 연출 유지와 시각적 안정성 지표 관리의 양립 필요
구조와 흐름
- 최종 문서 흐름 높이 고정 후 거위는 scale·translate, 하단 콘텐츠는 translateY로 분리 이동
- 배경·경계 동기화로 영역 사이 흰 공간 방지, 오버레이·결과 시트는 이동 레이어 외부 배치
- transform 적용 부모의 fixed 위치 기준 영향 확인
성능/운영 포인트
- 로컬 모션 관찰 구간 CLS 0.104에서 0.000으로 감소
- Layout 누적 시간 4.77ms에서 0.48ms, TaskDuration 300.84ms에서 115.83ms로 감소
- 운영 Android 뷰 CLS P75 0.244에서 0.020, P90 0.364에서 0.047로 감소
주의할 점
- transform 이동 자체는 CLS에서 제외되지만 예고 없는 이동에 따른 UX 문제까지 보장하지 않는 휴리스틱
- transform 외 원인의 레이아웃 이동은 여전히 CLS 측정 대상
- 배포 후 일부 높은 CLS 표본에 대한 지속 관찰 필요
