Brand Exhibition

2024년 FILA와 ThugClub 콜라보 제품 기획전 페이지를 만들었습니다. 스크롤에 맞춰 영상이 재생되는 인터랙션이었는데, 네트워크 환경에 따라 로딩이 늦어지고, 30FPS 영상이 모니터 주사율과 맞지 않아 재생이 불안정해지는 문제가 있었습니다.

네트워크 환경과 관계없이 영상이 안정적으로 재생되고, 모니터가 달라도 같은 재생 경험을 주는 것이 목표였습니다.

Vite와 React로 페이지를 만들었습니다. responseType을 blob으로 설정해 영상 다운로드가 끝난 뒤에 src를 업데이트하도록 했고, 덕분에 사용자 제스처에 맞춘 재생이 보장됩니다. 또한 requestAnimationFrame 안에 Throttle을 구현해, 모니터 주사율과 관계없이 영상이 30FPS로 안정적으로 업데이트되도록 최적화했습니다.

네트워크 환경이나 모니터 사양과 관계없이 스크롤 영상이 안정적으로 재생됩니다. 사용자 제스처에 바로 반응하는 일관된 인터랙션으로, 콜라보 제품에 어울리는 프리미엄한 경험을 완성했습니다.

2021년 FILA의 신발 커스터마이징 서비스 maFILA의 프론트엔드를 개발했습니다. 고객이 특정 영역을 클릭하면 시각적 피드백과 함께 바로 커스터마이징할 수 있는 직관적인 3D 인터랙션이 필요했습니다.

고객이 직접 커스터마이징하고 구매까지 할 수 있는 차별화된 경험을 만들고, 클릭한 영역이 어디인지 분명하게 보여줘서 사용자가 쉽게 알아볼 수 있게 하는 것이 목표였습니다.

Vite와 React로 3D 환경을 만들고, Raycasting으로 마우스 클릭 위치의 Mesh를 정확히 찾아내는 로직을 구현했습니다. 카메라 업데이트 애니메이션과 Mesh 색상 변경 애니메이션은 Tween.js로 만들어, 사용자 인터랙션에 바로 시각적 피드백이 나가도록 했습니다.

직관적인 3D 커스터마이징 인터페이스를 구현했습니다. 정확한 영역 감지와 부드러운 애니메이션 덕분에 고객이 어느 영역을 고르는지 알아보기 쉬웠고, 개인화 제품을 편하게 주문할 수 있는 차별화된 구매 경험을 줄 수 있었습니다.

2021년 NEPA Spirit GTX 신발 기획전 페이지를 만들었습니다. 몰입감 있는 공간감을 주면서도, 3D 모델이 너무 많아 성능이 떨어지는 일은 막아야 했습니다.

2D와 3D 요소를 잘 섞어 공간감을 전달하되, 페이지 성능에는 영향이 없도록 최적화된 브랜드 경험을 만드는 것이 목표였습니다.

Webpack과 ES6로 개발 환경을 만들고, 공간 전체를 3D로 만드는 대신 2D 이미지와 3D 요소를 전략적으로 섞었습니다. 핵심 제품 영역에만 3D 모델을 두고 Tween.js로 애니메이션을 만들어, 성능 최적화와 시각적 임팩트 사이의 균형을 맞췄습니다.

성능 저하 없이 몰입감 있는 공간감을 주는 기획전 페이지를 만들었습니다. 2D와 3D를 잘 섞은 덕분에 로딩 시간을 줄이면서도 제품의 프리미엄한 느낌을 잘 전달할 수 있었습니다.