롯데ON의 상품 목록 페이지는 카테고리별 베스트 상품(최근 3개월 판매량 TOP10) 과 상품 정렬/필터/토글 기능을 최적화해 사용자 경험을 높였습니다.

QueryDSL로 불필요한 데이터를 줄이고, Redis 캐시로 첫 페이지부터 빠른 응답을 보장했습니다.

정렬·필터·뷰 토글(리스트/그리드)·페이지 이동까지 AJAX 비동기 처리로 새로고침 없이 자연스럽게 동작하고, 사용자가 선택한 뷰가 그대로 유지되도록 URL 파라미터를 관리했습니다.

덕분에 사용자들은 부드럽게 원하는 상품을 탐색할 수 있었고, 서버 응답 속도도 개선되었습니다.

✅ 핵심 기술

• QueryDSL: 원하는 필드만 선택 조회해 불필요한 데이터 전송 최소화
• Redis 캐시: 인기 상품(카테고리별 TOP10) 결과를 캐싱해 첫 페이지부터 응답 시간 단축
• AJAX 비동기 처리: 정렬·필터·리스트/그리드 토글·페이지 이동을 새로고침 없이 수행하고, URL 파라미터로 선택된 뷰 상태 유지

✅ 성과

• 자연스러운 UX: 페이지 전체 새로고침 없이 원하는 상품 탐색이 가능해 몰입도 증가
• 빠른 로딩: 캐시된 데이터와 QueryDSL 기반 최소 조회로 초기 로딩 및 페이징 속도 개선
• 서버 성능 최적화: DB 조회량 감소 및 네트워크 트래픽 절감으로 서버 부하 경감

구조

src/ └── main/ │── java/ │ └── kr.co.lotteon/ │ │── controller/ │ │ └── product/ │ │ └── ProductListController.java │ │── service/ │ │ └── product/ │ │ └── ProductListService.java │ │── repository/ │ │ │── custom/ │ │ │ └── ProductRepositoryCustom.java │ │ │── impl/ │ │ │ └── ProductRepositoryImpl.java │ │ └── product/ │ │ └── ProductRepository.java │ │── entity/ │ │ └── product/ │ │ ├── Product.java │ │ ├── ProductDetail.java │ │ └── ProductImage.java │ └── dto/ │ │── product/ │ │ │── ProductDTO.java │ │ │── ProductDetailDTO.java │ │ └── ProductImageDTO.java

    │                     └── page/
    │                             │── [PageRequestDTO.java](https://fish-fahrenheit-662.notion.site/PageRequestDTO-2054ffb4f47b80aaa791c0219ee4e852)
    │                             └── [PageResponseDTO.java](https://fish-fahrenheit-662.notion.site/PageResponseDTO-2054ffb4f47b8095b737eef7cee85b41)
    └── resources/
            │── templates/
            │     └── product/
            │             └── list/
            │                     └── [list.html](https://www.notion.so/list-html-2054ffb4f47b80b9a441ce7aaaf40c60?pvs=21)
            └── static/
                    └── js/
                           └── product/
                                   └── [list.js](https://www.notion.so/list-js-2054ffb4f47b80f3a140f34b7023a48a?pvs=21)

롯데온 상품 목록 전체 페이지