Built a 3D Batman Themed Portfolio 🦇🏎️

Context

대부분의 포트폴리오는 평면적 레이아웃을 사용하고 있어 사용자 경험이 제한적이다. 이를 개선하기 위해 고성능의 인터랙티브 3D 환경을 제공할 필요가 있었다.

Technical Solution

• Three.js(WebGL) 기반 3D 엔진으로 커스텀 Batmobile 모델과 인터랙티브 씬 구현
• Vanilla JavaScript를 사용해 외부 라이브러리 종속성 제거하고 Zero bloat 유지
• lerp(선형 보간) 함수로 카메라를 섹션 간에 점진적으로 이동하는 카메라 스무딩 기능 구현
• 셰이더 최적화와 파티클 개수 제한으로 모바일 기기에서 성능 저하 방지
• 사용자의 스크롤 깊이를 3D 씬의 속도(가속도) 상태에 동기화하는 상태 관리 시스템 구현
• Dark mode와 고명도 금/파란색 조합, 절차적 기하학(procedural geometries)으로 Turbo 네비게이션 시각화

Impact

모바일 기기에서 60FPS 성능 달성으로 배터리 소비 최소화

Key Takeaway

포트폴리오와 같은 개인 프로젝트에서 Three.js 같은 3D 라이브러리와 저수준 성능 최적화(셰이더 최적화, 카메라 스무딩)를 조합하면 모바일까지 아우르는 고성능 인터랙티브 경험을 구현할 수 있다.