프로젝트 소개

3D 아바타의 의상을 갈아입히고, 포토부스에서 스냅샷을 찍을 수 있는 INDEPS 프로젝트를 진행하면서 어떤 문제의식을 느꼈습니다. 블렌더에서 작업한 모델을 GLB로 추출 후 웹 상에 띄우면, 렌더링 차이에 의해 결과물에 시각적 차이가 발생했습니다. 때문에 블렌더 상의 표현이 웹상에서의 비슷하게 보여지도록 조정하는 과정이 반드시 필요했는데, 이를 위해 모델러분과 여러번에 걸쳐 보정작업을 거쳐야 했습니다. 그리고 그 보정작업에 있어서도 별도의 인터페이스 없이 수치상으로만 값을 조절하다보니 수치 조정 과정에서도 비효율이 발생했습니다.

이러한 문제의식으로부터 출발하여 3D 모델을 웹 환경에서 미리 세팅하여 최종적으로 제품에 업로드할 수 있도록 도와주는 에디터를 만드는 사이드 프로젝트로 진행했습니다. 처음 시작은 사이드 프로젝트였으나, 의도와 가치를 전달드린 이후 업무시간을 할애해 진행할 수 있었습니다. 최종적으로 달성하고자 하는 목표는 세 가지였습니다. 1. 보정 작업 효율화 2.커뮤니케이션 비용 감소 3. 설정의 번거로움 개선. 그 목표 달성을 위한 기능으로 환경맵, 배경색, 카메라 등의 제어와 조명 및 일반 오브젝트들을 추가해서 화면상에 배치해 볼 수 있는 에디터를 구성한 프로젝트입니다.

구현

Vite, React, React-three/fiber, CSS modules(SCSS)