🪐 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 내외로 줄이고, 웹 페이지의 성능을 크게 향상시킬 수 있었습니다.
저는 복잡한 기술 스택에서 성능 최적화의 중요성을 배웠으며, 사용자 경험을 개선하기 위해 효율적인 자원 관리와 최적화 방법을 적극적으로 적용하며 현재 프로젝트를 고도화하고 있습니다.

👥 박재영

기존의 줄글 형식으로만 제공되던 커뮤니티 경험을 시각적이고 몰입감 있는 방식으로 재구성하는 것을 목표로, 커뮤니티 공간을 우주로 설정하고 게시글을 행성으로 시각화했습니다. 이를 통해 사용자들에게 단순한 리스트 형식에서 벗어나 3D 공간에서 게시글을 탐색하는 새로운 경험을 제공 하고자 했습니다.
또한, 커뮤니티 내에서 사용자들이 자유롭게 상호작용할 수 있도록, 그룹별로 게시글을 구분하고 라운지(우주)와 오브제(행성)를 생성하는 기능을 구현했습니다. Stomp와 WebRTC를 활용해 각 게시글에서 채팅과 음성 통화가 가능하도록 개발하여, 사용자들이 실시간으로 소통할 수 있는 환경을 조성했습니다.
이 프로젝트는 디스콰이엇(IT 서비스 플랫폼)에서 트렌딩 프로덕트로 선정되었으며, 사용자들로부터 재미있는 커뮤니티 경험이라는 긍정적인 피드백을 받았습니다. 이 과정에서 저는 창의적인 아이디어와 기술적 구현이 결합될 때, 사용자에게 독창적이고 매력적인 경험을 제공할 수 있다는 것을 깨달았습니다.
앞으로도 사용자들의 니즈를 파악하고, 그에 맞는 창의적인 솔루션을 제공하는 개발자가 되기 위해 노력하겠습니다.