코오롱몰 리뉴얼

2024.03 ~ 진행 중

통합 이커머스 코오롱몰의 전시영역 전체 리뉴얼. 컴파운드 패턴 기반 앵커 시스템으로 재사용성 향상, Mixpanel 이벤트 파편화 해소(88% 파일 감소), 슬라이딩 윈도우 전략으로 번들 로드 시간 57% 단축.

컴파운드 패턴 기반 앵커 시스템 재설계

기존 기획전 앵커 시스템은 특정 페이지와 결합도가 높아 동적 렌더링 환경에서 재사용이 어려웠습니다. 컴파운드 패턴을 활용해 <AnchorSection>으로 감싸진 컴포넌트를 렌더링 이후 앵커 Context에 등록하고, 스크롤 방향에 따른 동적 랜딩 위치를 계산하도록 재설계했습니다.

Mixpanel 이벤트 트래킹 공통 모듈화

50여 개 패널 컴포넌트에 파편화된 트래킹 요구사항을 재정립하고, 패널 타입별 HOC(고차 컴포넌트) 패턴과 Custom Hook을 적용하여 수정 대상 파일을 50개에서 6개로 88% 감소시켰습니다.

코오롱몰 리뉴얼 3

슬라이딩 윈도우 전략으로 번들 로드 57% 단축

메인 화면 스와이퍼에서 모든 패널이 한 번에 렌더링되며 초기 로딩이 느린 문제를 [current-1, current, current+1] 슬라이딩 윈도우 전략Dynamic Imports로 해결. 주요 번들 로드 시간을 3500ms → 1500ms로 대폭 단축했습니다.

Next.js
React
TypeScript
Mixpanel
Swiper.js
GitHub
LinkedIn