프로젝트 개요

홈쇼핑모아의 동적 이벤트/기획전 페이지 시스템입니다. CMS(Content Management System)를 통해 관리되는 다양한 컴포넌트들을 조합하여 프로모션 페이지를 구성합니다. React Native 웹뷰와 hsmoa.com 웹사이트 양쪽에서 동작하는 통합 페이지로 운영됩니다.

주요 기능

동적 컴포넌트 렌더링: CMS에서 관리되는 컴포넌트들을 우선순위(priority)에 따라 동적으로 렌더링하고, 환경별(stage/production) 활성화 상태에 따라 선택적으로 표시
SSR 기반 SEO 최적화: getServerSideProps에서 이벤트 데이터를 사전 로드하고, JSON-LD 스키마와 메타데이터를 서버에서 생성하여 검색 엔진 최적화
네이티브 앱 통합: WebView 메시지를 통한 네이티브 앱과의 통신, 헤더 색상 및 스타일 동적 변경, 이벤트 진입 통계 자동 전송

컴포넌트 시스템

디스플레이 컴포넌트

배너, 바로가기 버튼, 카드형 바로가기, 절약 금액 카운터, 타이머/카운트다운, 접을 수 있는 정보 섹션, 탭 UI 등 다양한 레이아웃 컴포넌트를 지원합니다.

상품 관련 컴포넌트

상품 캐러셀, 와이드 배너 캐러셀, 이미지 캐러셀, 특정 상품 ID 기반 캐러셀, 추천 상품 리스트, 카테고리별/키워드 기반 상품 리스트, 숏폼 캐러셀 등 상품 노출을 위한 다양한 컴포넌트를 제공합니다.

기술적 도전 과제

CMS 기반 동적 페이지 구성

비개발자(기획자, 마케터)가 코드 수정 없이 기획전 페이지를 자유롭게 구성할 수 있도록, CMS에서 컴포넌트 타입과 데이터를 관리하고 프론트엔드에서 동적으로 매핑하여 렌더링하는 구조를 설계했습니다.

환경별 배포 전략

Stage/Production 환경을 분리하여 기획전과 개별 컴포넌트 단위로 활성화 상태를 제어할 수 있도록 구현했습니다. 이를 통해 QA 검증 후 프로덕션에 안전하게 노출할 수 있습니다.

웹뷰-네이티브 통신

React Native 앱의 웹뷰 환경에서 헤더 색상, 스타일 등을 기획전 테마에 맞게 동적으로 변경하는 브릿지 통신을 구현하여 앱 내에서도 일관된 사용자 경험을 제공합니다.

홈쇼핑모아 큐레이션(기획전)

Related Articles