FILA, NEPA 등 브랜드 기획전 페이지 개발 및 인터랙션 연구
2024년 FILA와 ThugClub의 콜라보레이션 제품을 판매하는 기획전 페이지를 개발한 프로젝트입니다. 저는 페이지 리소스 로딩 처리와 스크롤시 진행되는 영상 처리 부분을 맡아 진행했습니다.
Vite, React, VrismViewer, Vanilla-extract
사용자 스크롤에 따라 영상이 실행되다보니, 네트워크 환경에 따라 사용자 제스처가 일어났음에도 다운로드가 미처 완료되지 못한 경우가 종종 발생했습니다. 때문에 제스처에 따른 재생실행을 보장하기 위해 responseType을 blob으로 설정하여 완전히 다운로드가 되었을 때, src를 업데이트 해주었습니다.
또 제작된 영상이 30FPS로 제작된 영상이었다보니, requestAnimationFrame을 통해 재생시켰을 때 모니터의 Hz에 따라 실행되어 영상이 정상적으로 실행되지 않는 이슈가 있었습니다. 이 부분은 animate 함수 내부에 Throttle을 구현하여 실제 영상의 업데이트를 30FPS에 맞추어 영상이 업데이트 되도록 구현하여 해결했습니다.
2021년, 휠라의 인기있는 신발 제품을 고객이 직접 커스터마이징하고 주문할 수 있는 maFILA 서비스의 프론트엔드를 구현한 프로젝트입니다.
Vite, React, VrismViewer, Styled-Component, Tween.js
3D 모델의 각 파츠들을 분리하고, Raycast를 이용하여 마우스가 가리키는 위치가 어떤 Mesh인지 감지하고, 애니메이션 처리를 하였습니다. 프리셋 색상을 선택할 경우 발생하는 애니메이션의 경우는 Tween.js를 이용해 구현했습니다.
2021년, NEPA의 Spirit GTX 신발 제품의 기획전 페이지 개발을 진행한 프로젝트입니다.
Webpack, ES6, VrismViewer, SCSS, Tween.js
공간 전체를 3D로 구성하지 않고, 2D 이미지와 3D 이미지를 함께 사용하여 공간감을 전달하면서도 추가적인 3D 모델로 하여금 페이지 성능에 영향을 주지 않도록 구성했습니다. 내부에 사용된 3D 모델의 애니메이션은 Tween.js를 이용해 구현하였습니다.