🪐 DAO - 추억을 행성으로 저장하다

🔖 프로젝트 소개

개요

• DAO는 추억을 3D 모델을 통해 사람들과 공유하는 커뮤니티입니다.
• 라운지를 만들어 사람들을 초대하고, 그 안에서 추억을 공유할 수 있습니다.
• DAO 바로가기
• Disquiet 바로가기

개발 인원 및 기간

• 개발기간 : 2024-07-23 ~, 현재 고도화 단계
• 개발 인원

  Back-End			Front-End
  박준서	김지홍	김윤직	노현아	박재영

사용 기술 및 tools

• React, Typescript, Styled-Components, React-Query, Zustand, WebRTC, Stomp, Three.js

🖥️ 서비스 화면

홈

로그인	메인	메뉴	프로필

라운지

라운지 목록	라운지 생성	라운지 상세

오브제

오브제 상세	오브제 생성	오브제 수정	오브제 통화	오브제 채팅

기타 기능

알림	유저 검색	회원탈퇴

🚧 트러블 슈팅

🧷 웹 메모리 사용량 증가 이슈

💬 프로젝트 후기

👥 노현아

프로젝트에서 가장 큰 어려움은 3D 모델과 실시간 통화 기능을 구현하는 과정에서 웹 브라우저의 메모리 사용량이 급격히 증가한 문제였습니다. 특히 Three.js를 사용해 복잡한 3D 모델을 렌더링하는 과정에서 메모리 사용량이 최대 6.1GB에 도달했고, 그로 인해 웹 페이지가 버벅거리며 사용자 경험이 크게 저하되는 상황을 겪었습니다. 이러한 문제는 프로젝트의 성능과 사용자 만족도에 직접적인 영향을 미치는 큰 도전이었습니다.
문제 해결을 위해 3D 모델의 최적화와 효율적인 자원 관리를 중점적으로 고민했습니다. 먼저, lazy loading을 도입하여 3D 모델을 한 번에 로드하는 대신 필요할 때만 불러오도록 개선했고, 로딩 중에는 다른 UI를 먼저 보여줘 사용자가 기다리는 시간을 최소화했습니다. 또한, 상태가 자주 변하지 않는 컴포넌트에 useMemo 훅을 적용해 불필요한 렌더링을 방지했습니다. 이러한 최적화 작업을 통해 메모리 사용량을 500MB 내외로 줄이고, 웹 페이지의 성능을 크게 향상시킬 수 있었습니다.
저는 복잡한 기술 스택에서 성능 최적화의 중요성을 배웠으며, 사용자 경험을 개선하기 위해 효율적인 자원 관리와 최적화 방법을 적극적으로 적용하며 현재 프로젝트를 고도화하고 있습니다.