SIMTER : 고민을 부담없이 털어놓는 나만의 공간 🏡

Github: git1uv/client

2024.05 - 2024.10

이미지 렌더링 개선

장기 프로젝트고 규모가 나름 큰 서비스였던만큼 뒤로 가면 갈수록 이미지를 포함해 gif 등 애셋이 정말 너무 많아졌다. 그렇다보니 당연히 렌더링이 오래 걸렸다. 로컬에선 바로바로 뜨길래 문제점을 못 느꼈는데(이게 사고였다) 마감 즈음 배포하고 나니 화면은 바로 뜨는데 이미지만 늦게 떠서 내가 개발했음에도 답답하다는 생각이 들었다…

마감 근처라 성능을 개선하기엔 시간이 충분하지 않아서 할 수 있는 걸 했다 -> 발표날은 일단 background color는 바로 뜰 테니까 애셋이랑 같은 색으로 해서 “뭐가 뜨고 있구나”를 느끼게 해서 그나마 덜 답답하게 하고 발표 이후에 이미지 최적화 과정을 거쳤다.

찾아보니 대표적인 이미지 최적화가 lazy loading이라 좀 찾아봤다.

lazy loading: 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 미루는 방식

lazy loading을 하면 페이지 초기 로딩 때 리소스 요청이 줄고 그로인해 더 빠른 처리가 가능하다는 것 같다.

사용할 때는 Suspense, fallback이랑 같이 쓰면 된다.

<Suspense fallback={<Loading />}>
  <Result />
</Suspense>

Suspense 안에 있는 컴포넌트들이 뜰 때까지 fallback에 들어있는 컴포넌트를 대신 띄워준다. Result가 뜨면 Loading은 사라진다.

근데 이건 기본적으로 뷰포트에 들어오지 않는 이미지들을 대상으로 적용하는 건데 우린 그런게 없다.. 그래서 다른 방식을 적용했다. 바로 react-image-file-resizer

react-image-file-resizer: 이미지 리사이징과 인코딩을 위해 사용하는 라이브러리

사용하는 이미지가 다 png, gif라 webp같은 압축률이 높은 확장자로 바꾸기 위해 사용했다. 이런 이미지 변환 라이브러리는 되게 많지만 여유 시간이 많지 않은 시점에서 간단하고, 프론트에서 전부 처리 가능하며, react용으로 랩핑되어있는 라이브러리라는 점에서 선택했다.

모든 이미지들에 다음과 같은 최적화 로직을 넣었다.

• fetch로 이미지 리소스를 받아와 Blob 형태로 변환(Resizer 라이브러리에 넘기기 위한 전처리 단계)
• Resizer를 통해 크기와 포맷을 정하고 리사이징
• 각 이미지를 리사이징한 후 메모리 내 URL로 등록한 후 리액트 상태에 저장해서 UI 렌더링에 바로 사용 가능하게 하기

지금 생각해보니 이렇게 이미지 리사이징을 해놓고 정작 얼마나 빨라졌는지 테스트를 안 했다. 왜 그랬지.. 로딩이 아예 없이 모든 이미지가 바로 뜬다 이런건 아니었지만 체감상 이전보다는 빠르게 떴던 거 같다. 기분탓일 수도 있고..

기본적으로 이미지가 너무 많았던거 같다. 모든 걸 다 이미지로 처리하지 않고 어떻게든 재활용하면서 줄였어야 했는데 아쉽다. 첫 프로젝트여서 너무 구현에만 급급했던 것 같다. 다음부턴 유의하면서 작업해야겠다.