[ CSS ] CSS 모바일 Transition 개선

# Reference

 

aproid blog - CSS Transition 성능 최적화 by aproid

https://aproid.github.io/2019/03/21/transition-optimize/

CSS Transition 성능 최적화 — Aproid

 

yceffort blog - CSS 성능 향상시키기

https://yceffort.kr/2021/03/improve-css-performance#css%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94%EA%B0%80

Home

 

wonism blog - Critical Rendering Path란?

https://wonism.github.io/critical-rendering-path/

WONISM's Blog

 

0) 학습개요

 

아대밀맵 프로젝트 중 모바일에서 CSS Transition의 프레임 저하를 확인했습니다.

이를 해결하기 위해 CSS 렌더링 단계를 참고, 연산비용을 줄여 프레임 저하를 최소화하는 CSS 최적화 경험을 정리했습니다.

 

1) 문제 확인

 

프로젝트 중간점검 차 모바일에 페이지를 로딩해보았습니다.

다른 레이아웃들은 PC에서 테스트한 내용과 거의 일치했는데, 최초 실행 시 Transition이 문제였습니다.

 

프로젝트 모바일 실행화면

레이아웃이 깨지진 않지만 왼쪽 메인화면이 드드드듣뜨드드드듣ㄱ 하며 프레임 저하가 눈에 보입니다.

마음에 들지 않습니다.

바로 구글링에 들어갔습니다.

 

2) 문제 분석 & 해결방안 구성

구글링해보니 마침 저번에 공부했던 내용이 이 문제의 해결방법이었습니다.

[ CSS ] CSS 렌더링 흐름

 

정리했던 내용을 다시 읽어보고 문제를 파악했습니다.

위치를 이동하는 액션은 전부 left나 top값의 변경을 통해 이루어지도록 만들어져 있었습니다.

이는 엄청난 계산을 요구하기 때문에 계산능력이 비교적 낮은 모바일 기기에서 프레임 저하가 발생하였고,

이를 해결하기 위해서는 계산횟수를 줄여야 했습니다.

 

계산 횟수를 줄이기 위해 아래 방법을 사용했습니다:

Transition에서 opacity와 transform만 사용

 

3) 해결방안 적용

 

기존 CSS: 화면이 1개일 때

기존 css: 화면이 2개일 때

기존 코드입니다.

position: fixed 옵션이 적용되어있고, left와 translate로 중간에 창을 띄웁니다.

오른쪽에 창이 뜨면 아래 옵션으로 변경하고 transition 옵션을 사용하여 부드럽게 움직이도록 했습니다.

 

left를 고정하고 transform으로만 움직이게 하기 위해 그림을 그려보며 transform 이동반경을 계산했습니다.

이동반경 설계

반경을 계산하며 아래 계산식을 구성했습니다.

 

창이 1개일 때: 부모의 반만큼 왼쪽에서 와 화면의 반만큼 다시 오른쪽으로 이동 => ( { parent_size } / 2 ) - ( { display_size } / 2 )

창이 2개일 때: 양쪽 여백만큼만 이동 => 10px

 

 

결과적으로 아래 코드로 변경했습니다.

변경 css: 변수 추가

우선 창을 감싸고 있는 부모의 크기와 창의 크기(=화면)을 변수로 설정해주었습니다.

화면의 크기에 따라 부모의 크기는 창 전체의 크기로 알아서 바뀌도록 했습니다.

 

변경 css: 창이 1개일 때

창이 1개일 때는 부모의 크기의 반만큼 왼쪽으로 이동한 뒤 창의 크기의 50%만큼 빼서 정확히 중간에 위치하도록 합니다

창이 2개일 때는 따로 값을 변경하지 않고 left 옵션만 지웠습니다.

 

변경 css: GPU 가속

추가로 will-change옵션을 추가하여 css를 GPU를 사용하여 처리할 수 있도록 옵션을 주었습니다.

 

4) 적용 결과

 

프로젝트 모바일 실행화면: 문제 해결

확연히 프레임저하가 해결된 것을 확인할 수 있습니다.