발표 이후 (수요일), 팀 회의
우선 순위를 정하고, 각각 해야 할 일들을 부여받았다.
난 최적화를 우선순위로 작업을 진행했다.
최적화
무엇을?
어떻게?
왜?
이 3가지를 중심으로 무엇을 해야할까 생각했다.
무엇을
- 로드 최적화 (이미지를 S3에서 불러오는데, 이를 캐싱을 사용하면?)
- 이미지 압축
이렇게 두 가지를 생각했다.
어떻게
- 로드 최적화 - 여러 캐싱 방법이 있지만, 로컬 파일 캐싱 방법을 사용하기로 했다.
- 많지 않은 시간 안에 빠르게 구현할 수 있음과, 우리가 사용하는 GLB 파일이 용량이 꽤 커서 이를 저장할 꽤 큰 공간이 필요
- 이미지 압축 - DRACO 압축을 사용하여 압축 시도
왜
- 로드 최적화 - S3에서 이미지를 불러오는 속도 보다 로컬 환경에서 불러오는 속도가 훨씬 빠르다.
- 이미지 압축 - 용량이 큰 GLB 파일을 많이 사용하기 때문에 압축이 필요하다.
로드 최적화
캐시 사용 전
캐시 사용 후
약 2.5배 정도 로딩 속도가 빨라졌다.
(로컬 환경에서 테스트)
이미지 압축
이미지를 어떻게 압축해야 할지 참 어려웠다.
다행히 NEXT 에서는 Image 컴포넌트를 제공해서 Image를 압축할 수 있었다.
이미지 압축 전
이미지 압축 후
이미지의 무게가 약 20배 경량화 되었다.
로드 속도도 전체적으로 빨라졌다.
GLB 파일 압축
google/draco loader
구글에서 제공하는 draco loader를 예시 코드를 참조해 작성했다.
useGLTF - @react-three/drei
압축이 하나도 안됬고, 실제로 속도는 useGLTF가 빨랐다.
이유가 뭘까?
잘 모르겠지만, 아마 .drc 저장된 파일이 로드가 되는게 아닐까? 싶다.
속도가 훨씬 느려진 이유는, 압축과 디코딩, fetch 작업이 추가로 들어가기 때문일 것이다.
압축을 위해 더 많은 작업이 들어가기 때문에 속도가 느려진 것이다.
그리고 실제로 압축도 안됬고,
도저히 draco를 사용하여 해결이 나지 않아,
다른 방벙을 생각했다.
gltf-pipeline -i "${filePath}" -o "${filePath}" -d3D 모델을 최적화 해주는 이 명령어로 파일을 조금이나마 압축시킬 수 있는 방법을 찾았다.
압축되지 않은 파일
압축된 파일
드라마틱한 차이는 아니였지만 약 150KB정도를 줄일 수 있었다.
(모델마다 최적화(압축)되는 사이즈가 달랐음)
이정도 사이즈로 모든 모델들을 줄일 수 있다면 꽤 줄일 수 있지 않을까?
싶어, 위에서 설명한 커맨드를 api에서 호출하는 코드로 만들어 모델을 생성할 필요가 있을 때 압축한 파일을 S3, 로컬 파일에서 생성할 수 있게 되었다.
더 좋은 방법들이 있겠지만, 내가 찾은 최적화 방법들이다.
그리고 현재는 로깅을 찍으면서 성능 테스트를 하고 있는데....
좀 더 좋은 방법이 있지 않을까 이거에 대해서도 좀 찾아볼 예정이다.
