프리미엄 브랜드 쇼핑몰 UI/UX 재구성 (Duvetica, Supra, Sergio Tacchini)

Tech stack

• Monorepo
• Turborepo
• Next.js
• React

Implementation & history

• 기존 커머스 플랫폼을 기반으로 Monorepo 환경에서 프리미엄 브랜드를 확장 구현했습니다.
• 공통 컴포넌트와 브랜드 전용 UI를 분리하여 코드 재사용성과 유지보수성을 높였습니다.
• 브랜드별 디자인 및 기능 요구사항을 구조적으로 분리하여 확장 가능한 아키텍처를 구성했습니다.

Tech stack

• React
• Emotion
• MUI
• Custom Hook

Implementation & history

• 기존 쇼핑몰 UI 구조를 기반으로 프리미엄 브랜드에 맞는 고급스러운 UI/UX를 재설계했습니다.
• 이미지 중심의 갤러리 구조와 콘텐츠 배치를 개선하여 시각적 몰입도를 높였습니다.
• 브랜드별 디자인 가이드를 반영하여 UI 컴포넌트를 재구성하고 스타일 시스템을 확장했습니다.
• 반응형 환경에서도 일관된 디자인 경험을 제공하도록 레이아웃을 개선했습니다.

Tech stack

• Scroll API
• IntersectionObserver
• ResizeObserver

Implementation & history

• 스크롤 위치에 따라 동적으로 변화하는 UI 인터랙션을 구현했습니다.
• 특정 스크롤 구간에서 상품 정보를 포함한 Sticky CTA를 노출하여 구매 접근성을 개선했습니다.
• 이미지 갤러리 인터랙션을 개선하여 사용자 탐색 경험을 향상시켰습니다.
• 뷰포트 변화에 따라 UI가 자연스럽게 반응하도록 인터랙션 로직을 구성했습니다.

Tech stack

• Statsig
• GTM

Implementation & history

• Statsig를 활용하여 UI 및 구매 인터랙션에 대한 A/B 테스트 환경을 구축했습니다.
• 사용자 행동 데이터를 기반으로 UI 개선 효과를 측정할 수 있도록 설계했습니다.
• GTM을 통해 주요 사용자 행동 이벤트를 트래킹하고 데이터 분석 기반을 마련했습니다.
• 실제 사용자 데이터를 기반으로 지속적인 UI/UX 개선이 가능하도록 구조를 구성했습니다.