FRONTEND

jQuery로 가벼운 '오늘 본 상품' 세로 슬라이더 구현하기 (플러그인 없이 DOM 조작 최적화)

무거운 라이브러리 없이 jQuery만으로 쇼핑몰 사이드바의 '오늘 본 상품' 영역을 구현하는 방법을 알아봅니다. DOM 조작을 통한 효율적인 세로 롤링 로직과 코드를 소개합니다.

📑 목차

• 1. 마크업 구조: 시맨틱한 리스트 구성
• 2. jQuery 핵심 로직: 무한 롤링 구현
• 3. 활용 팁 및 퍼포먼스 고려사항
• 4. 자주 묻는 질문(FAQ)

1. 마크업 구조: 시맨틱한 리스트 구성

쇼핑몰 사이드바 UI는 한정된 공간을 효율적으로 사용해야 합니다. div 대신 dl과 dd 태그를 사용하여 데이터 리스트의 시맨틱한 구조를 잡는 것이 좋습니다. 초기 화면에는 기획된 개수(예: 3개)만 노출하고 나머지는 스타일로 숨김 처리합니다.

<div class="todayBg">
  <dl>
    <!-- 위로 이동 버튼 (Prev) -->
    <img src="/images/btn_up.gif" class="prev" alt="위로">

    <!-- 상품 리스트 (초기 3개 노출) -->
    <dd><a href="#"><img src="/img/p1.jpg" alt="상품1"></a></dd>
    <dd><a href="#"><img src="/img/p2.jpg" alt="상품2"></a></dd>
    <dd><a href="#"><img src="/img/p3.jpg" alt="상품3"></a></dd>

    <!-- 숨겨진 상품들 (display: none) -->
    <dd style="display:none;"><a href="#"><img src="/img/p4.jpg" alt="상품4"></a></dd>
    <dd style="display:none;"><a href="#"><img src="/img/p5.jpg" alt="상품5"></a></dd>

    <!-- 아래로 이동 버튼 (Next) -->
    <img src="/images/btn_down.gif" class="next" alt="아래로">
  </dl>
</div>

핵심 포인트: 전체 영역을 .todayBg로 감싸고, 제어 버튼에 .prev, .next 클래스를 할당하여 스크립트 접근성을 높입니다.

2. jQuery 핵심 로직: 무한 롤링 구현

무거운 슬라이더 플러그인 대신, jQuery의 DOM 조작 메서드인 insertBefore와 eq를 활용해 가벼운 순환 구조를 만듭니다. 이 방식은 실제 DOM 요소를 물리적으로 이동시켜 순서를 재배치하므로 복잡한 인덱스 계산이 필요 없습니다.

<script>
  function move(cmd) {
    if (cmd === "prev") {
      // 1. 마지막 요소를 보여줌
      $(".todayBg dd:last").show();
      // 2. 현재 화면의 마지막(3번째) 요소를 숨김
      $(".todayBg dd:eq(2)").hide();
      // 3. 마지막 요소를 리스트의 맨 앞으로 이동 (DOM 재배치)
      $(".todayBg dd:last").insertBefore(".todayBg dd:eq(0)");

    } else {
      // 1. 첫 번째 요소를 숨김
      $(".todayBg dd:eq(0)").hide();
      // 2. 숨겨져 있던 그 다음 요소(4번째)를 보여줌
      $(".todayBg dd:eq(3)").show();
      // 3. 첫 번째 요소를 리스트의 맨 뒤(버튼 바로 앞)로 이동
      $(".todayBg dd:eq(0)").insertBefore(".todayBg img:last");
    }
  }

  $(document).ready(function () {
    $(".todayBg .prev").click(function () { move("prev"); });
    $(".todayBg .next").click(function () { move("next"); });
  });
</script>

이 로직은 항상 화면에 정해진 개수(3개)의 dd만 노출시키며, 버튼 클릭 시 요소를 앞뒤로 붙여넣어 시각적인 롤링 효과를 구현합니다.

3. 활용 팁 및 퍼포먼스 고려사항

이 패턴은 '오늘 본 상품' 외에도 추천 상품 배너나 최근 본 글 리스트 등 좁은 영역의 세로 롤링 UI에 폭넓게 응용 가능합니다.

특히 별도의 외부 라이브러리를 로드하지 않으므로 페이지 초기 로딩 속도(LCP) 최적화에 유리하며, 가벼운 쇼핑몰 프론트엔드를 구축할 때 권장되는 방식입니다.

4. 자주 묻는 질문(FAQ)

Q1. 상품 개수가 노출 개수보다 적으면 어떻게 되나요?
강제 DOM 이동 로직이므로 동작이 어색할 수 있습니다. 실무에서는 아이템 개수를 체크하여 버튼을 비활성화하는 예외 처리가 필수입니다.

Q2. 애니메이션 효과를 추가하고 싶습니다.
현재 코드는 즉시 전환(Show/Hide) 방식입니다. 부드러운 전환을 원한다면 jQuery의 slideUp/Down을 체이닝하거나, CSS transition 클래스를 토글하는 방식으로 고도화해야 합니다.