신세계백화점 PC 메인 React 전환 성공 사례

전환 배경 및 동기

• 기존 Spring JSP 기반 PC 메인 페이지를 React 기반으로 리뉴얼하여 모바일 웹과 일관된 디자인 및 사용자 경험을 제공합니다.
• 유지보수성 개선 및 프론트엔드 개발팀의 코드 관리 효율성 증대가 주요 목표였습니다.
• Spring + JSP 방식의 비효율적인 협업 구조 (기획/디자인 → 프론트 → 서버)를 해소합니다.

핵심 개발 과정 및 기술 스택

• Next.js를 기반으로 초기 페이지 셋팅 및 신규 React 페이지를 개설했습니다.
• React Query를 활용하여 API 데이터 가공 및 효율적인 상태 관리를 구현했습니다.
• 비모듈 유닛 방식으로 컴포넌트를 개발하고, HOME_CONTENT_IDS 배열 기반으로 유닛 노출 순서를 제어했습니다.

성능 최적화 및 사용자 경험 개선

• 초기 로딩 시 빈 화면 방지를 위해 최상단 메인 롤링 배너 유닛에 **SSR (Server-Side Rendering)**을 적용했습니다 (prefetch query 활용).
• useInfiniteQuery를 활용하여 스크롤 위치에 따른 인피니트 스크롤을 구현, HOME_CONTENT_IDS 인덱스 기반으로 다음 유닛 데이터를 호출합니다.
• SEO 최적화를 위해 <HeadMeta /> 컴포넌트를 확장, Dynamic Meta tag, canonical 태그 및 구조화된 데이터 스키마를 적용했습니다.

협업을 통한 성공적인 프로젝트 완료

• 초기 어려움 속에서도 시니어 개발자 및 팀원들의 적극적인 PR 코드 리뷰와 지원으로 코드 품질이 개선되었습니다.
• 특히 React Query 기반 SSR 처리 및 리팩토링 등 팀원들의 기여가 프로젝트 성공에 결정적이었습니다.
• 비효율적인 레거시 시스템에서 효율적인 프론트엔드 중심 개발로 전환하며 기술적 성숙도를 향상시켰습니다.