← 포트폴리오 목록
3D 감수 아카이브 플랫폼
Three.js 기반 OBJ/STL 3D 모델링 뷰어와 2D 다각도 360도 스프라이트 뷰어, 뷰어 위 주석(Annotation) 시스템, 3계층 권한 관리를 통합한 완구·피규어 감수 데이터 아카이브 플랫폼 MVP를 React + Node.js + PostgreSQL 풀스택으로 설계·구현합니다.
Three.js WebGL 뷰어 + 워터마크 이중 레이어 구현Three.js WebGLRenderer 씬과 Canvas 2D 오버레이를 동일 컨테이너에 배치하여 3D 인터랙션을 방해하지 않고 사용자 식별 워터마크를 실시간 합성하는 구조 구현
Raycaster 기반 3D 주석 핀 영속 시스템 설계Three.js Raycaster 교차점 좌표를 정규화하여 DB에 저장하고, 매 렌더 프레임 핀 위치를 재계산하여 카메라 뷰 변경과 무관하게 모델 표면 고정 복원 구조 구현
3계층 역할 기반 접근 제어 설계JWT role 클레임 + Express 미들웨어 이중 검증으로 관리자·내부직원·협력사 3계층 권한을 API 엔드포인트와 프론트 메뉴 양쪽에서 제어하는 구조 구현
Overview
프로젝트 개요
Three.js 기반 OBJ/STL 3D 모델링 뷰어와 2D 다각도 360도 스프라이트 뷰어, 뷰어 위 주석(Annotation) 시스템, 3계층 권한 관리를 통합한 완구·피규어 감수 데이터 아카이브 플랫폼 MVP를 React + Node.js + PostgreSQL 풀스택으로 설계·구현합니다. 공고 핵심 요구사항인 Three.js WebGL 렌더링, 워터마크 오버레이, 협력사 권한 제어를 직접 반영한 맞춤 구현한 프로젝트입니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
대용량 OBJ·STL 파일(50MB 이상) 로드 시 메인 스레드 블로킹을 방지
Web Worker 기반 비동기 파싱 전략을 설계해야 합니다
Three.js 렌더 루프에서 매 프레임 주석 핀 위치를 재계산할 때 핀 수가 많아지면 성능 저하
Frustum Culling 기반 핀 렌더 최적화 전략이 필요합니다
360도 스프라이트 뷰어에서 고해상도 다각도 사진 72장을 순차 프리패치할 때 메모리 사용량을 제한하는 슬라이딩 윈도우 캐시 전략을 구현해야 합니다
협력사 계정 정지 시 이미 발급된 JWT의 즉시 무효화
Redis 블랙리스트 또는 짧은 TTL 전략을 선택하는 설계 결정이 필요합니다
Canvas 워터마크와 Three.js WebGLRenderer가 같은 컨테이너에서 GPU 리소스를 공유할 때 렌더링 충돌을 방지하는 레이어 분리 전략 설계가 필요합니다
핵심 기능 1
Three.js 3D 모델링 뷰어
OBJ·STL 포맷 3D 파일을 브라우저에서 WebGL로 렌더링하고, 마우스 조작으로 360도 회전·확대·패닝을 지원하며 사용자 식별 워터마크 오버레이를 적용하는 메인 뷰어 화면입니다
핵심 기능 2
주석 및 피드백 시스템
3D·360도 뷰어 위 특정 위치 클릭 시 텍스트 메모를 입력하고, 주석별 댓글 스레드와 감수 완료 표시를 관리하는 피드백 협업 화면입니다
핵심 기능 3
360도 다각도 사진 뷰어
다각도 사진을 일괄 업로드하고 마우스 좌우 드래그로 사진 시퀀스를 전환하는 스프라이트 슬라이더 방식의 360도 뷰어와 워터마크 오버레이 화면입니다
핵심 기능 4
협력사 권한 관리
외부 협력사의 회원가입 신청을 검토하고 관리자 승인·반려 처리, 내부직원·관리자·협력사 3계층 역할별 메뉴 접근 권한을 제어하는 권한 관리 화면입니다
구현 과정
프로젝트 진행 단계
STEP 1
도메인 분석 및 DB 스키마 설계
감수 데이터 도메인 분석, 3D 주석 좌표·협력사 권한·파일 메타 포함 PostgreSQL 테이블 12개 정의 및 인덱스 전략 수립
STEP 2
Three.js 뷰어 및 워터마크 레이어 구현
Three.js OBJLoader·STLLoader·OrbitControls 통합, Canvas 오버레이 워터마크 시스템, AWS S3 pre-signed URL 발급 API 구현
STEP 3
360도 뷰어 및 파일 업로드 파이프라인 구축
스프라이트 슬라이더 360도 뷰어 구현, Multer + S3 멀티파트 업로드 파이프라인, 다각도 사진 순서 관리 API 개발
STEP 4
주석 시스템 및 권한 관리 구현
Three.js Raycaster 주석 핀 시스템 구현, 댓글 스레드 API, JWT 역할 기반 권한 미들웨어, 협력사 승인 플로우 개발
STEP 5
통합 검증 및 뷰어 성능 최적화
3D 뷰어·360도 뷰어·주석·권한 통합 테스트, 대용량 OBJ 파일 렌더링 최적화, 브라우저 호환성 검증
프로젝트 성과
Three.js WebGL 뷰어 + 워터마크 이중 레이어 구현Three.js WebGLRenderer 씬과 Canvas 2D 오버레이를 동일 컨테이너에 배치하여 3D 인터랙션을 방해하지 않고 사용자 식별 워터마크를 실시간 합성하는 구조 구현
Raycaster 기반 3D 주석 핀 영속 시스템 설계Three.js Raycaster 교차점 좌표를 정규화하여 DB에 저장하고, 매 렌더 프레임 핀 위치를 재계산하여 카메라 뷰 변경과 무관하게 모델 표면 고정 복원 구조 구현
3계층 역할 기반 접근 제어 설계JWT role 클레임 + Express 미들웨어 이중 검증으로 관리자·내부직원·협력사 3계층 권한을 API 엔드포인트와 프론트 메뉴 양쪽에서 제어하는 구조 구현
스프라이트 슬라이더 360도 뷰어 구현마우스 dragX 누적 이동량으로 프레임 인덱스를 실시간 계산하고 S3 pre-signed URL 순차 프리패치로 드래그 중 끊김 없는 다각도 사진 전환 구조 구현
협력사 승인 플로우 및 계정 정지 처리 설계pending·approved·rejected·suspended 상태 ENUM 기반 협력사 계정 라이프사이클 설계, 정지 시 JWT 즉시 무효화 구조로 실시간 접근 차단 구현
Review
기술적 주안점
- Three.js WebGLRenderer와 HTML Canvas 오버레이를 동일 컨테이너에 포지셔닝하여 3D 씬 위에 사용자 식별 워터마크를 실시간으로 합성하는 구조를 구현합니다. CSS pointer-events: none으로 뷰어 인터랙션 방해 없이 워터마크를 적용합니다
- Three.js Raycaster 교차점 좌표를 정규화하여 DB에 저장하고, 뷰어 재로드 시 동일 3D 좌표에 핀을 복원하는 주석 위치 영속 구조를 설계합니다. 카메라 뷰 변경과 무관하게 핀이 모델 표면에 고정되도록 Three.js 렌더 루프에서 핀 위치를 매 프레임 재계산합니다
- 마우스 down-move-up 이벤트의 누적 deltaX 값으로 현재 프레임 인덱스를 실시간 계산하고, S3 pre-signed URL로 이미지를 순차 프리패치하여 드래그 중 로딩 끊김 없이 부드러운 360도 전환을 구현합니다
