홈쇼핑모아 (HSMOA)

프로젝트 개요

홈쇼핑모아는 국내 모든 홈쇼핑 상품을 한눈에 보고 검색할 수 있는 모바일 플랫폼입니다. 본 프로젝트는 기존 앱 기반 서비스를 웹(Web) 환경으로 확장하여 접근성을 높이고 SEO를 강화하기 위해 진행되었습니다.

주요 기능

• 실시간 방송 모아보기: 18개 홈쇼핑 채널의 실시간 방송을 카테고리별로 정렬하여 제공
• 통합 검색 엔진: 상품명, 방송 시간, 쇼핑몰 별 필터링이 가능한 고성능 검색
• 편성표 알림: 관심 상품 키워드 등록 시 방송 시작 전 푸시/문자 알림 제공
• 바로 결제 시스템: 일부 제휴 쇼핑몰의 경우 앱 이탈 없이 즉시 결제 가능

기술적 도전 과제

대용량 데이터 렌더링 최적화

홈쇼핑 특성상 분당 수천 건의 트래픽이 몰리는 방송 시간대에 안정적인 성능을 유지해야 했습니다.

• ISR (Incremental Static Regeneration)을 도입하여 방송 편성표 페이지의 초기 로딩 속도를 300% 개선했습니다.
• 이미지 Lazy Loading과 WebP 포맷 전환을 통해 대역폭 비용을 40% 절감했습니다.

상태 관리 복잡도 해결

장바구니, 유저 로그인 세션, 알림 설정 등 전역 상태가 방대했습니다.

• Redux Toolkit을 활용하여 보일러플레이트를 줄이고 예측 가능한 상태 관리를 시스템화했습니다.
• 서버 상태는 React Query (TanStack Query)로 분리하여 클라이언트 상태와 격리시켰습니다.

성과

• 웹 월간 활성 사용자(MAU) 50만 명 달성
• 구글 검색 노출 1페이지 순위 점유율 15% 상승