플러스프로젝트 배경
클라이언트는 실내 공간을 3D로 시각화하여 웹에서 쉽게 체험할 수 있는 서비스를 기획하고 있었으며, 기존 영상 기반 데모를 실제 인터랙티브 웹 서비스로 전환하는 것이 목표였습니다. 문제는 다음과 같았습니다. 1) 3D 모델 파일 용량이 매우 커 웹에서 직접 로딩하기 어려운 상태였음 2) 브라우저 환경에서 부드러운 카메라 이동과 렌더링 성능을 확보해야 했음 3) 단순 뷰어가 아니라 향후 기능 확장이
프로젝트 성과
3D 파일 용량 대폭 최적화
- 기존 약 100MB에 달하던 3D 모델 파일을 구조 재정리 및 텍스처 최적화, 포맷 변환 등을 통해 약 1/20 수준으로 축소
- 초기 로딩 시간 단축
- 초기 로딩 시간 단축
렌더링 성능 및 반응 속도 개선
WebGL 렌더링 최적화 및 불필요한 리소스 제거
카메라 이동 및 시점 전환 시 프레임 저하 최소화
모바일 환경에서도 끊김 없이 동작하도록 성능 조정
카메라 이동 및 시점 전환 시 프레임 저하 최소화
모바일 환경에서도 끊김 없이 동작하도록 성능 조정
서비스 확장 가능한 MVP 구조 구축
단일 데모 페이지가 아닌, 다수의 3D 모델을 관리할 수 있는 리스트 구조 설계
향후 기능 추가를 고려한 UI 패널 및 상태 관리 구조 설계
향후 기능 추가를 고려한 UI 패널 및 상태 관리 구조 설계
핵심 기능
WebGL 기반 3D 모델 뷰어
glTF / OBJ 모델 로딩 지원
마우스 드래그 및 터치 기반 회전, 이동, 줌 기능
카메라 워킹 모드 및 부드러운 시점 전환 구현
기본 조명 세팅 및 렌더링 최적화 적용
PC 및 모바일 브라우저 대응
마우스 드래그 및 터치 기반 회전, 이동, 줌 기능
카메라 워킹 모드 및 부드러운 시점 전환 구현
기본 조명 세팅 및 렌더링 최적화 적용
PC 및 모바일 브라우저 대응
진행 단계
요구사항 정의
2025.12.
노션으로 고객사의 요구사항을 정리하고, IA를 작성함
프로젝트 상세
본 프로젝트는 실내 공간의 3D 모델을 웹 브라우저에서 직접 로딩하고 조작할 수 있는 웹 기반 3D 시각화 데모 페이지를 제작하는 작업이었습니다. 기존에 보유하고 있던 간단한 데모 영상을 실제 서비스 가능한 MVP 형태로 구현하는 것이 목표였습니다. WebGL 기반으로 3D 모델(glTF/OBJ)을 브라우저에서 렌더링하고, 사용자가 마우스 및 터치 인터랙션을 통해 공간을 탐색할 수 있도록 구현했습니다.
