개발 로그: Three.js로 3D 라이브러리를 구축하고 자체 레벨 에디터를 만들었습니다

배경

최근 한 개발자가 기술 커뮤니티에 공개한 개발 로그에서, Three.js를 사용해 3D 에셋 라이브러리를 구축하고, 프로젝트 요구에 정확히 부합하는 기존 레벨 에디터가 없어 직접 맞춤형 비주얼 편집 도구를 제작한 과정을 상세히 밝혔다. 이는 단순한 개인적 선택이 아니라, 범용 엔진이 특정 워크플로우를 충족시키지 못할 때 개발자들이 직접 도구 체인을 구축해 창의성과 구현 사이의 간극을 메우는 웹 3D 개발의 증가 추세를 반영한다.

Three.js는 가장 인기 있는 WebGL 프레임워크로서 가볍고 유연하며 방대한 커뮤니티 생태계를 갖추고 있지만, Unity나 Unreal 같은 중량급 엔진에 비해 성숙한 비주얼 에디터와 통합 도구 체인이 부족하다. 이 개발자의 접근 방식은 Three.js 생태계 내에서 효율적인 콘텐츠 제작 솔루션을 모색하는 팀들에게 귀중한 참고 사례를 제공한다.

심층 분석

기술적으로 볼 때, 3D 라이브러리를 구축하고 레벨 에디터를 장착하는 것은 본질적으로 ‘에셋 재사용’과 ‘씬 오케스트레이션’이라는 두 가지 핵심 문제를 해결하는 것이다. Three.js는 지오메트리 구성, 머티리얼 시스템, 조명 모델, 애니메이션 제어 등 강력한 렌더링 기능을 제공하지만, 내장된 씬 편집 인터페이스는 전혀 없다. 개발자는 보통 코드를 직접 작성해 모델을 배치하고 파라미터를 조정해야 하므로, 에셋 수가 증가하면 효율이 크게 떨어진다.

이 개발자가 만든 커스텀 에디터는 데이터 주도형 설계를 채택했을 가능성이 높다. 그래픽 인터페이스가 사용자 동작을 구조화된 씬 기술 데이터(예: JSON 또는 커스텀 바이너리 형식)로 변환하고, 런타임에 Three.js가 이 데이터를 파싱해 3D 씬을 재구성하는 방식이다. 이 아키텍처는 편집과 실행을 분리해 버전 관리와 팀 협업을 용이하게 한다. 프론트엔드 구현에서는 Three.js와의 친화성을 고려해 React나 Vue 같은 현대적 프레임워크로 UI 패널을 구축하고, Three.js의 EditorControls나 커스텀 변환 도구를 활용해 객체의 드래그, 회전, 스케일링을 처리했을 것이다. 복잡한 레벨을 지원하려면 에셋 관리, 계층 트리, 속성 검사기, 실행 취소/다시 실행 등의 모듈도 통합해야 하며, 이러한 기능의 구현 깊이가 에디터의 사용성을 결정한다.

Babylon.js가 공식 제공하는 Babylon.js Editor와 비교할 때, 자체 구축 에디터의 장점은 프로젝트 특유의 에셋 형식과 로직 규칙에 완전히 부합할 수 있어 범용 도구의 중복성과 제약을 피할 수 있다는 점이다. 단점은 개발 비용이 높고 지속적인 유지보수가 필요하다는 것이다. 이 개발자의 선택은 건축 시각화, 제품 컨피규레이터, 교육용 3D 애플리케이션 같은 특정 수직 분야에서 맞춤형 에디터의 투자 대비 효과가 범용 솔루션을 직접 사용하는 것보다 훨씬 클 수 있음을 시사한다.

산업 영향

이 실천은 경쟁 구도에 두 가지 측면에서 영향을 미친다. 첫째, Three.js의 경량 웹 3D 분야에서의 입지를 더욱 공고히 한다. Unity와 Unreal이 강력한 에디터로 게임 및 영화 시장을 지배하고 있지만, 빠른 로딩과 크로스 플랫폼 작동이 필수적인 웹 시나리오에서는 Three.js가 최소한의 번들 크기와 뛰어난 커스터마이징 능력으로 여전히 최우선 선택이다. 커스텀 레벨 에디터의 등장은 Three.js의 비주얼 편집 역량 부족을 메워, 기술적 배경이 깊지 않은 디자이너도 웹 3D 콘텐츠 제작에 참여할 수 있게 함으로써 프레임워크의 적용 범위를 확장한다.

둘째, 특정 영역을 겨냥한 ‘마이크로 에디터’ 도구나 오픈소스 프로젝트의 물결을 촉진할 수 있다. 현재 Three.js 생태계에는 공식 Three.js Editor 예제나 Vue 3D Editor 같은 시도가 있지만, 대부분 기능이 미약하거나 유지보수가 중단된 상태다. 이 개발자의 성공은 더 많은 개발자가 자신의 에디터 솔루션을 공유하도록 영감을 주어, 게임 엔진의 ‘서비스형 에디터’ 개념과 유사한 플러그인 가능하고 조합 가능한 에디터 프레임워크로 이어질 수 있다. 독립 개발자와 소규모 팀에게 이는 더 낮은 비용으로 고도로 맞춤화된 3D 콘텐츠 제작 도구를 확보해 제품 반복을 가속화할 수 있음을 의미한다.

전망

앞으로 이 사건은 몇 가지 주목할 만한 신호를 보낸다. Three.js 커뮤니티가 비주얼 도구 체인에 대한 투자를 늘려, 공식 또는 서드파티가 더 완전한 에디터 템플릿이나 SDK를 출시해 커스텀 에디터 구축의 진입 장벽을 낮출 가능성이 있다. AI 보조 콘텐츠 생성 기술이 이러한 에디터에 통합되어, 예를 들어 자연어 명령으로 객체를 자동 배치하거나 지형을 생성하고 조명을 조정하는 방식으로 생산성을 더욱 높일 수 있다. WebGPU가 점차 주류로 자리 잡으면서 Three.js의 성능 상한이 크게 높아질 것이며, 이에 따라 에디터의 실시간 미리보기와 복잡한 씬 처리 능력에 대한 요구도 증가할 것이다. 커스텀 에디터는 차세대 그래픽 API와의 호환성을 미리 고려해야 한다.

웹 3D 개발에 뛰어들고자 하는 팀에게 이 사례는 명확한 경로를 제시한다. 먼저 Three.js로 핵심 렌더링 역량을 구축한 다음, 비즈니스 요구에 맞춰 전용 레벨 에디터를 점진적으로 개발해 궁극적으로 ‘엔진 + 도구’의 완전한 루프를 형성하는 것이다. 이 모델은 3D 라이브러리에 국한되지 않고 가상 쇼룸, 온라인 교육, 디지털 트윈 등 다양한 분야로 확장 가능하며, 웹 3D 콘텐츠의 규모화된 생산을 위한 실행 가능한 패러다임이 될 수 있다.