프리미엄 브랜드 커머스 플랫폼 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

• 스크롤 위치와 사용자 행동 흐름에 따라 동적으로 변화하는 인터랙션 구조를 구현했습니다.
• 특정 스크롤 구간에서 Sticky CTA를 노출하여 구매 접근성과 사용자 전환 흐름을 개선했습니다.
• 이미지 갤러리 인터랙션 및 콘텐츠 탐색 흐름을 개선하여 사용자 탐색 경험을 향상시켰습니다.
• 뷰포트 변화와 디바이스 환경에 따라 UI가 자연스럽게 반응할 수 있도록 인터랙션 로직을 구성했습니다.

Tech stack

• Statsig
• GTM

Implementation & history

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