핵심 아키텍처 레이어

브라우저 기반 3D SaaS 플랫폼은 단순한 WebGL 뷰어가 아닙니다. 실시간 렌더링 엔진에 프로젝트 관리, 사용자 접근 제어, 사용량 기반 제한이 결합된 구조입니다.

1. 렌더링 레이어

• Three.js 또는 유사한 WebGL 추상화 계층.
• 라이프사이클 관리를 위한 React 기반 바인딩.
• 카메라, 트랜스폼, 선택 시스템.
• 기즈모와 에디터 전용 오버레이.

2. 상태 및 씬 관리

• 오브젝트 계층 구조와 그룹 구성.
• 에디터 동작에 대한 되돌리기/다시 실행(Undo/Redo) 히스토리.
• 패널과 뷰포트 전반에 걸친 선택 상태.
• 씬 업데이트에 대한 직렬화와 변경(diff) 처리.

3. 파일 및 에셋 인프라

• 모든 3D 에셋에 대한 GLB 정규화.
• 모델과 텍스처를 위한 CDN 기반 스토리지.
• 보안 에셋 전송을 위한 서명된 URL.
• 임시 파일과 히스토리 스냅샷을 위한 라이프사이클 규칙.

4. SaaS 레이어

• 인증 및 아이덴티티 관리.
• 프로젝트/캔버스 소유권과 권한 관리.
• 프로젝트 수, 저장 용량, 내보내기 횟수 등 플랜 기반 제한.
• 결제, 체험 플랜, 사용량 메트릭.

확장성 고려 사항

• 서버에서는 렌더링 로직을 가능한 한 무상태(stateless)로 유지.
• 3D 에셋에 프리사인드 URL과 엣지 캐싱 사용.
• 각 상호작용마다 서버 측 처리를 최소화.
• 용량 계획을 위한 사용량 메트릭 추적.

3DwebX 같은 아키텍처는 브라우저를 주된 연산 영역으로 두고, 백엔드는 영속성, 아이덴티티, 에셋 전송에 집중하는 슬림한 구조를 지향합니다.