플러스프로젝트 배경
AI 로봇 기술 기업의 기술력과 미래 비전을 시각적으로 강렬하게 전달하는 브랜드 사이트입니다. ■ 프로젝트 배경 - AI 로봇 산업: 2025년 글로벌 시장 규모 780억 달러 (CAGR 26.7%) - 기술 기업의 추상적 비전("AI로 미래를 바꿉니다")을 텍스트만으로 전달 → 임팩트 부족 - 경쟁사(Boston Dynamics, Tesla Bot, Figure AI) 대비 시각적 브랜딩 열세
프로젝트 성과
Canvas 200노드 60fps + GPU 70% 절감
공간 해시 그리드로 연결선 O(n²)→O(n). IntersectionObserver 뷰포트 밖 렌더링 중지. will-change 동적 토글
GLTF 8MB→1.2MB (85%↓) + 로딩 1.1초
Draco 압축 + LOD 3단계 + 텍스처 리사이즈(4K→1K). 프로그레시브 로딩 바로 체감 대기시간 0.4초
평균 체류 3분 47초 (업계 2배)
GSAP ScrollTrigger 10섹션 스크롤 스토리텔링 + 마우스 파티클 인터랙션으로 몰입감 극대화. 이탈률 28%
핵심 기능
Canvas 200노드 파티클 물리 시스템
위치/속도/반발력 물리 시뮬레이션. 공간 해시 그리드 O(n) 최적화. 마우스 반발력(inverse square) 인터랙션
진행 단계
테크 브랜드 벤치마크 + 컨셉 기획
2025.01.
Boston Dynamics/Tesla Bot/Figure AI/NVIDIA/Agility 5개 분석. 파티클+3D+스크롤 스토리텔링 구조 확정
프로젝트 상세
AI 로봇 기술 기업의 브랜드 사이트입니다. Canvas 2D 파티클 물리 시스템(200노드 + 연결선 + 마우스 반발력), Three.js 3D 로봇 모델 인터랙티브 뷰어, GSAP ScrollTrigger 스크롤 스토리텔링, WebGL 배경 그라디언트를 구현했습니다. ■ 기술 스택 상세 - 3D 렌더링: Three.js r158 (OrbitControls, GLTFLoader, PBR 머티리얼, 환
