slick 슬라이드 플러그인의 responsive breakpoint를 px이 아닌 media query로 사용하는 방법

웹 접근성 향상을 위해 em, rem단위를 사용하자!

이어지는 글입니다.

---

그런데 내가 스킨을 만들면서 빠지면 섭섭한 슬라이드 플러그인이 문제였는데 slick은 breakpoint 옵션을 이용해 px 단위로만 반응형을 설정할 수 있다.

위 글에서 이야기했듯, CSS에서 media query로 em값을 적용했는데 slick에서 breakpoint를 px값으로 적용하면 각각 다른 넓이에서 반응형이 적용되는 문제가 있는데 내 수준으로는 이를 해결할 방법이 없었고, window.matchMedia()를 이용해서 각각 slick를 따로 조절하려 해 봤으나 약간의 문제가 있었다.. 차선으로 CSS에서 rem단위 사용을 포기하고 그냥 브라우저 폰트 사이즈를 기준으로 할까..... 하다 다른 플러그인을 찾아봤다.

 

breakpoint에서 media query를 사용하는 플러그인 정보

Keen-Slider: Easily create sliders, carousels and much more.

A lightweight carousel library with fluid motion and great swipe precision | Embla Carousel

media query로 breakpoint를 적용할 수 있는 플러그인 두 가지인데 이 중 keen slider를 실제로 사용해 봤다.

잠깐 keen sllider의 장단점과 사용 후기를 이야기해 보자면, 그동안 사용했던 slick에 비해 자유도가 높은 대신, 사용하기 어려운 면이 있었으나 slick에 비해 가볍고 빠른 게 장점이다. slick에서 갈아타려고 90%는 준비가 되었었는데 제공하는 예제로는 내가 평소 자주 사용하는 형태에 약간 못 따라가는 부분이 있었고 이를 해결하려 했으나 아직 만들어진 지 오래되지 않았고 대부분의 슬라이드 플러그인 사용자는 swiper나 slick을 많이 사용하기 때문에 정보가 적었으며... 무엇보다도 개발자가 작년 말 업데이트 이후로 질의응답을 하지 않고 있는 상태여서 내가 막힌 문제는 쉬운 문제였으나 언제 줄지 모르는 답변을 마냥 기다릴 수도 없었고.. stackoverflow에 글 남겨볼까도 했지만.... 일단 사용면에서 slick이 훠훠훠훨씬 간단했다.. 나 같은 무지렁이나 초보자가 정말 사용하기 쉬운 게 slick이다.

그러나 어느 정도 지식수준이 있는 상태라면 keen slider도 괜찮은 슬라이드 플러그인이라고 생각한다.

다시 한번 말하지만 keen slider는 잘 만들어진 플러그인이고 내 지식수준이 따라가지 못해서 해결하지 못한 것이다 ㅠㅠ
조금 더 공부해서 해결되면 앞으로는 가벼운 keen slider로 넘어갈 것 같다.

 

무튼간 계속 검색하고 알아보던 중 slick의 GitHub를 뒤지다 breakpoint를 media query를 사용하도록 변경하는 방법을 발견했다!

slick에서 break point를 media query로 바꾸자

Add option for breakpoint to be in "ems" or a media query · Issue #2767 · kenwheeler/slick

 

적용 방법은 다음과 같다. (1.8.0 버전에서 적용되는 것을 확인했다.)

1. slick.js 파일을 연다.

없으면 아래 사이트에서 다운로드한다. CDN으로 적용되는 사이트의 경우 수정할 수 없다.

Releases · kenwheeler/slick

 

2. 대략 618번째 라인 즈음에 있는 아래 코드를 찾자.

for (breakpoint in _.breakpoints) {
  if (_.breakpoints.hasOwnProperty(breakpoint)) {
    if (_.originalSettings.mobileFirst === false) {
      if (respondToWidth < _.breakpoints[breakpoint]) {
        targetBreakpoint = _.breakpoints[breakpoint];
      }
    } else {
      if (respondToWidth > _.breakpoints[breakpoint]) {
        targetBreakpoint = _.breakpoints[breakpoint];
      }
    }
  }
}

 

3. 다음의 코드로 변경 후 저장한다.

(출처 : https://github.com/kenwheeler/slick/issues/2767)

for (breakpoint in _.breakpoints) {
  //There's a breakpoint descriptor
  if (_.breakpoints.hasOwnProperty(breakpoint)) {
    let breakpointValue = _.breakpoints[breakpoint];

    //We're using media queries
    if (typeof breakpointValue === 'string') {
      //Matches our media query
      if (matchMedia(breakpointValue).matches) {
        targetBreakpoint = _.breakpoints[breakpoint];
        break;
      }
    }

    //Using pixel values
    else {
      if (_.originalSettings.mobileFirst === false) {
        if (respondToWidth < _.breakpoints[breakpoint]) {
          targetBreakpoint = _.breakpoints[breakpoint];
        }
      } else {
        if (respondToWidth > _.breakpoints[breakpoint]) {
          targetBreakpoint = _.breakpoints[breakpoint];
        }
      }
    }
  }
}

이 코드를 잠깐 살펴보면 앞서 언급했던 matchMedia()를 사용하는 것을 알 수 있다.

3-1. 필요에 따라 파일을 압축한다.

다양한 방법이 있겠지만 아래 사이트 같은 곳을 이용해도 된다.

JavaScript Minifier & Compressor | Toptal®

 

4. 내 웹사이트에 적용하자.

$('.slider').slick({
  infinite: false,
  responsive: [
    {
      breakpoint: '(max-width: 30em) and (orientation: portrait)',
      settings: {
        dots: false,
        slidesToShow: 2,
        slidesToScroll: 2,
      },
    },
  ],
});

 

끝이다.

breakpoint를 기존과 같이 480, 768 이런 식으로만 입력해도 원래대로 적용이 된다.
하지만 이렇게 수정 후 사용하면 min이나 max-width만 가지고 반응형을 제작하는 것이 아닌 다양한 media query를 사용할 수 있게 되는 것이니 활용할 방법이 늘어난다.

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

---

 

해외에도 관련한 정보가 적고, 국내에는 더 정보가 더 없어서 필요한 사람을 위해 긴 글 적어봤다.
요즘에는 slick보다 swipe를 더 많이 사용하는 것 같은데 나는 사용해 보지도 않았고.. slick보다 어려워 보였으며.. 무엇보다 swipe도 breakpoint가 px단위인데 이를 media query로 변경하는 방법을 찾지 못해 이렇게 수정한 slick을 계속 사용하게 되었다.

그리고 나는 개발자도 아니고, 전공도 아닌 그냥 필요한 거 마구 때려잡아 습득하는 무지렁이라 부족하거나 틀린 부분이 있을 수 있으며, 궁금한 게 있다면 개발자나 스택오버플로우 같은 사이트에 문의 바란다.