[refactor] 라이브러리 변경 및 코드 정리

[chhann]

📋 작업 내용

swiper -> embla 라이브러리 변경
코드 일관성/가독성 개편

🔧 변경 사항

대체 라이브러리 비교 & 선택 근거

• Swiper

  • 장점: 기능 풍부(내비·페이지네이션·효과 등), 커뮤니티 큼
  • 단점(이번 케이스): loop 사용 시 복제 슬라이드 DOM 삽입/재배치가 초기화 이후 일어날 수 있어 LCP 후보 발견·요청이 지연될 위험. (Virtual/Lazy 구성 시엔 지연 가능성↑)

• react-slick

  • 장점: 초기 렌더에 모든 슬라이드가 DOM에 들어오는 경향 → 첫 슬라이드 이미지가 즉시 발견되어 LCP에 유리
  • 단점/트레이드오프: 클론 증가로 DOM이 무거워짐, 유지보수 이슈 리포트 다수, 번들/JS 오버헤드 상대적으로 큼

• Embla (Headless) ✅ 최종 선택

  • 장점: DOM을 라이브러리가 강제하지 않음(Headless) → 내가 만든 <img src="…">를 SSR HTML에 그대로 포함시켜 브라우저가 즉시 발견/요청; 경량 번들, loop: true 지원, embla-carousel-autoplay로 자동 롤링 구성
  • 단점/트레이드오프: UI 컴포넌트(버튼/페이지네이션/a11y) 일부는 직접 구현 책임 존재
  • 선택 사유: 이번 과제의 최우선 목표가 LCP(특히 Load Delay) 개선이었고, SSR 시점에 첫 슬라이드 이미지가 확실히 DOM에 존재하도록 통제할 수 있는 Headless 특성이 결정적이었음. 또한 번들/JS 실행 오버헤드를 최소화할 수 있어 단·중기 성능 관점에서도 유리.

• 직접 구현 (CSS Scroll-Snap + 최소 JS)

  • 장점: 번들 최소, 최초 페인트/파싱 비용 최저, LCP 관점 가장 유리
  • 단점/트레이드오프: 무한 루프/오토플레이/접근성·키보드 포커스 등 구현 비용 큼 → 현 일정에서 리스크

📸 스크린샷 (선택 사항)

main page 리펙토링 전

main page 리펙토링 후