2025 . 오은

repo

작품 3D뷰어

2023.01.01 ~ 2024.10.15

개인Next.jsThree.js
detail image
detail image

🗝️ 주요 기능 및 특징

  • - 3D모델 보기 기능
  • - 모델 회전 기능
  • - 광원효과 선택 기능

🤔 기술적 의사결정

  • query string으로 편리한 공유
  • 특정 모델이 시작부터 보이도록 사이트를 공유 할 수 있도록 query string을 사용하여 GLB모델을 불러오게 하였습니다.

  • Web Share API 사용
  • 편리한 공유를 위해 Web Share API를 사용하여 모바일과 데스크탑에서 주소를 공유할 수 있도록 하였습니다.

💥 트러블 슈팅

  • 클래스로 추상화
  • Three.js 관련 코드가 비효율적이고 가독성이 떨어졌습니다. class 문법으로 리팩토링하여 로직을 추상화하고 메서드를 통해 효율적으로 관리하도록 하였습니다. 이에따라 가독성이 증가하고 유지보수가 수월해졌습니다.

  • 디바운싱
  • 썸네일을 클릭시 비교적 고용량의 파일이 로드되는 구조이므로 디바운싱이 필요했습니다. 외부 라이브러리 사용없이 반복 클릭시 경고를 출력하거나 로딩시 인터랙션을 막는 로직을 구현했습니다. 결과적으로 예상치 못한 동작을 방지하고 안정성을 확보할 수 있었습니다.