문제

색상 선택 페이지에서 자동차 360도 구현을 위해 각 색상 마다 자동차 이미지 60장 이미지를 가져옴. 색상을 클릭할 때마다 이미지 60장을 로드하는데 시간이 소모됨. → 첫 페이지 로딩하거나 외부 색상 선택 후 차량을 360도 회전 시 끊기는 경우 발생

색상 선택 시 로딩 시간 때문에 회전하는 경우 끊기는 경우 발생

색상 선택 시 선택된 차 이미지를 가져오는 데 시간이 걸림

접근

여러 이미지 최적화 방법 중 일부를 수행하여 최적의 방법 모색.

시도한 최적화 방법

1. Lazy Loading

   • 이미지 영역을 드래그 해서 곧 바로 다음(이전) 이미지를 화면에 표시할 때 끊기는 문제가 발생함. 사용 X

2. 이미지 형식 결정

   • 처음에 기획에서 받은 PNG 이미지 파일로 화면에 출력하였지만 PNG파일은 용량이 커서 로드하는데 시간이 걸림. 따라서 이미지 webp 파일을 추가하기로 함.

     <aside> 💡 .webp 파일을 이용

     • 이미지 크기를 줄이고 품질을 유지. </aside>

     

     

     이미지 형식에 따른 파일 크기 비교

     {imageUrl !== '' &&
       imageArray.map(num => {
         return (
           <Styled.Picture key={num}>
             <Styled.CarSource
               srcSet={`${imageUrl}image_0${convertToTwoDigits(num)}.webp`}
               type="image/webp"
               isDisplay={num === currentImage}
             />
             <Styled.CarImage
               src={`${imageUrl}0${convertToTwoDigits(num)}.png`}
               isDisplay={num === currentImage}
               alt="VR 이미지"
             />
           </Styled.Picture>mnbvccc
         );
       })}
     
     

3. Pre Loading

   • 색상 선택 페이지 이전 페이지인 구동 방식 선택 페이지에서 미리 API를 요청하고 Image 객체를 생성하여 생성된 객체에 이미지 360장을 로드.

   /* 이미지 최적화 pre-loading */
   const { exteriorColors } = useFetchSuspense<ColorDataProps>({
     fetcher: () => fetcher<ColorDataProps>({ url: apiPath.color(trim.id) }),
     key: cacheKey.color(trim.id),
   });
   
   const carImagePathArray = exteriorColors.map(value => value.carImagePath);
   
   const imageArray = Array.from({ length: 60 }, (_, index) => index);
   carImagePathArray.forEach(carImagePath => {
     imageArray.map(num => {
       const carImage = new Image();
       carImage.src = `${carImagePath}image_0${convertToTwoDigits(num)}.webp`;
     });
   });
   

<aside> 💡 프로젝트에 나타나는 Pre Loading의 효과 캐싱 활용 - Pre loading을 통해 이미지를 로딩함으로써, 브라우저가 이미지를 캐싱하여 재사용 가능.

이후에 같은 이미지를 사용할 때 네트워크 트래픽을 줄이고 성능 향상.

</aside>

최적화 데모

구동 방식 페이지에서 이미지 로드 (pre loading)