다수의 인터랙티브 3D 모델을 한 페이지에서 렌더링할 때 발생하는 성능 저하와 브라우저 충돌을 방지하기 위한 최적화 전략

[erica0321]

⏳ 다수의 인터랙티브 3D 모델을 한 페이지에서 렌더링할 때 발생하는 성능 저하와 브라우저 충돌을 방지하기 위한 최적화 전략

시나리오

사용자는 웹사이트에서 다양한 3D 모델을 탐색하며, 각 모델을 회전하고 확대/축소하는 등 인터랙티브한 기능을 활용합니다. 하지만 시간이 지남에 따라 페이지가 점점 느려지고, 모델이 부드럽게 움직이지 않으며, 결국 브라우저가 멈추거나 충돌하는 상황이 발생합니다.

이를 해결하기 위해, 3D 모델의 메모리 사용량을 효율적으로 관리하고 최적화하는 것이 필요합니다.

주제 선정

현재 WebRTC와 three.js를 사용하여 프로젝트를 진행하면서, 프론트엔드 배포를 하니 크롬 브라우저에서 메모리 사용량이 6.1GB를 사용하고 있다는 것을 알았습니다. 3D 모델을 사용하는 페이지 뿐만 아니라 일반적인 쇼핑몰 사이트 메모리 사용량은 500메가 내외인 반면에 프로젝트는 그의 12배에 해당합니다.

프로젝트 메모리 사용량	three.js 예제 메모리 사용량	무신사 메모리 사용량

메모리 사용량이 높아지면 성능 저하, 브라우저 충돌, 기기 호환성 문제, 네트워크 및 로딩 시간 길어짐 현상이 발생할 수 있습니다. 따라서 프로젝트의 브라우저 메모리 사용량을 줄이고자 주제를 선정하게 됐습니다.

Three.js에서 메모리 사용의 원리

프로젝트에서 메모리 사용량 증가 요인

🏷️ 가설 1.

라운지 상세 페이지에서 오브제의 개수가 추가될수록 메모리 사용량이 증가할 것이다.
결론: 더 테스트를 해봐야겠으나, 50개까지는 오브제 수에 따라 크게 증가하지는 않음

🏷️ 가설 2.

WebGL을 사용하는 것 자체가 메모리를 많이 잡아먹을 것이다.

three.js를 통해서 모델을 불러오는 기능을 추가하기 전에는 메모리 사용량이 291MB였다. 하지만 three.js를 도입하고 나서 메모리 사용량을 체크하니 GB 단위로 뛰었다.
결론: 모델을 불러오는 과정에서 메모리가 많이 사용됨 → 모델 불러오는 과정을 최적화하기

메모리 최적화 기법

🏷️ 해결 1. useMemo 사용

리액트 훅 useMemo 는 리렌더링 사이의 계산 결과를 캐시하여 컴포넌트의 성능을 최적화하는데 사용되는 훅이다.

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 막아 프로그램 실행 속도를 향상시킨다.

• 컴포넌트가 리렌더링될 때마다 새로운 객체가 생성되지 않아 메모리 사용량이 줄어듬
• 기존의 memoization된 객제를 재사용 → 메모리 참조의 효율성 증가

성과: 메모리 사용량 4.5GB -> 3.8GB로 감소

🏷️ 해결 2. 모델 texture 로딩 속도 줄이기

1. LoungeModel1 텍스쳐 이미지 webp으로 변경해보기

• 2ms -> 3ms

2. LoungeModel4 텍스쳐 이미지 webp으로 변경해보기

• 907ms -> 78ms

3. MyRoomModel4 텍스쳐 이미지 webp으로 변경해보기

• 33ms -> 29ms

4. MyRoomModel5 텍스쳐 이미지 webp으로 변경해보기

• 46854ms -> 5318ms

5. ObjetModel1 텍스쳐 이미지 webp으로 변경해보기

• 130ms -> 9ms

6. ObjetModel2 텍스쳐 이미지 webp으로 변경해보기

• 299ms -> 7ms

7. ObjetModel3 텍스쳐 이미지 webp으로 변경해보기

• 243ms -> 9ms

🏷️ 해결 3. 모델 lazy loading

리액트의 lazy는 특정 컴포넌트가 처음 랜더링될 때까지 해당 컴포넌트의 코드의 로딩을 지연

→ 자바스크립트 코드 분할하고 초기 로딩 시 더 빠른 로딩이 가능하도록 함 → 랜더링 최적화

1. 컴포넌트 lazy 로딩

   const LoungeModel1 = React.lazy(
     () => import('../../assets/models/LoungeModel1')
   )
   const LoungeModel2 = React.lazy(
     () => import('../../assets/models/LoungeModel2')
   )
   const LoungeModel3 = React.lazy(
     () => import('../../assets/models/LoungeModel3')
   )
   const LoungeModel4 = React.lazy(
     () => import('../../assets/models/LoungeModel4')
   )

2. Suspense 추가

   <Suspense fallback={<LoadingLottie />}>
   	<Canvas
   		style={{ width: '324px', height: '600px', cursor: 'pointer' }}
   		camera={{ position: [0, 0, 8], fov: 50 }}
   	>
   	{* 중간 코드 *}
   	</Canvas>
   </Suspense>

성과: 메모리 사용량 4.5GB -> 3.6GB

🏷️ 해결 4. 모델 변경

특정 모델의 로딩 시간이 특히 길다는 사실 파악
해결 1) 해당 모델의 mesh 개수 조정
해결 2) 마이룸 모델 4, 5 변경

성과: 6.1GB → 264MB
총 5,836MB 감소 (95.77% 개선)

성능 테스트 및 결과 분석

메모리 최적화 전후의 성능 비교

실제 프로젝트에서 적용한 최적화 기법의 효과 분석

메모리 사용량 감소화 함꼐 개선된 성능 지표(페이지 로딩 시간, 반응 속도)

[startupcodekr]

제목에 가정하는 시나리오 를 추가해주세요!

[startupcodekr]

다수의 인터랙티브 3D 모델을 한 페이지에서 렌더링할 때 발생하는 성능 저하와 브라우저 충돌을 방지하기 위한 최적화 전략