2024년 FILA와 ThugClub 콜라보레이션 제품 기획전 페이지 개발 프로젝트입니다. 스크롤에 따라 영상이 재생되는 인터랙션에서 네트워크 환경에 따른 로딩 지연과 30FPS 영상의 모니터 주사율 차이로 인한 재생 불안정 문제가 발생하는 상황이었습니다.
네트워크 환경에 관계없이 안정적인 영상 재생을 보장하고, 다양한 모니터 환경에서 일관된 영상 재생 경험을 제공하는 것을 목표로 했습니다.
Vite와 React 기반으로 페이지를 구축하고, responseType을 blob으로 설정하여 영상 다운로드 완료 후 src를 업데이트하는 방식으로 사용자 제스처에 따른 재생 실행을 보장했습니다. 또한 requestAnimationFrame 내부에 Throttle을 구현하여 모니터 주사율과 관계없이 영상을 30FPS로 안정적으로 업데이트되도록 최적화했습니다.
네트워크 환경과 모니터 사양에 관계없이 안정적인 스크롤 영상 재생을 구현했습니다. 사용자 제스처에 즉시 반응하는 일관된 인터랙션 경험을 제공하여 브랜드 콜라보레이션의 프리미엄 경험을 완성할 수 있었습니다.
2021년 FILA의 신발 커스터마이징 서비스 maFILA 프론트엔드 개발 프로젝트입니다. 고객이 특정 영역을 클릭했을 때 시각적 피드백과 함께 커스터마이징할 수 있는 직관적인 3D 인터랙션이 필요한 상황이었습니다.
브랜드 고객이 직접 커스터마이징하며 구매할 수 있는 차별화된 경험을 제공하고, 클릭한 영역에 대한 명확한 시각적 피드백을 통해 사용자 인식성을 강화하는 것을 목표로 했습니다.
Vite와 React 기반으로 3D 환경을 구축하고, Raycasting을 통해 마우스 클릭 위치의 Mesh를 정확히 감지하는 로직을 구현했습니다. Camera 업데이트 애니메이션과 Mesh 색상 변경 애니메이션을 Tween.js로 구현하여 사용자 인터랙션에 대한 즉각적인 시각적 피드백을 제공했습니다.
직관적인 3D 커스터마이징 인터페이스를 성공적으로 구현했습니다. 정확한 영역 감지와 부드러운 애니메이션을 통해 사용자 인식성을 강화하여 브랜드 고객이 쉽게 개인화 제품을 주문할 수 있는 차별화된 구매 경험을 제공했습니다.
2021년 NEPA Spirit GTX 신발 제품 기획전 페이지 개발 프로젝트입니다. 몰입감 있는 공간감을 제공하면서도 과도한 3D 모델로 인한 성능 저하를 방지해야 하는 상황이었습니다.
2D와 3D 요소를 효과적으로 조합하여 공간감을 전달하면서도 페이지 성능에 영향을 주지 않는 최적화된 브랜드 경험을 제공하는 것을 목표로 했습니다.
Webpack과 ES6 기반으로 개발 환경을 구축하고, 공간 전체를 3D로 구성하는 대신 2D 이미지와 3D 요소를 전략적으로 조합했습니다. 핵심 제품 영역에만 3D 모델을 배치하고 Tween.js로 애니메이션을 구현하여 성능 최적화와 시각적 임팩트의 균형을 맞췄습니다.
성능 저하 없이 몰입감 있는 공간감을 제공하는 기획전 페이지를 구현했습니다. 2D와 3D의 효과적인 조합을 통해 로딩 시간을 최소화하면서도 브랜드 제품의 프리미엄 경험을 효과적으로 전달할 수 있었습니다.