Swiper 이미지 슬라이드 사용 시 이미지나 텍스트가 흐리게 나올 때

최근 프로젝트를 진행하면서 Swiper 이미지 슬라이드를 사용하여 작업을 하였는데 슬라이드를 좌우로 넘겼을 때 이미지가 아주 미세하게 흐려지는 현상이 나타났다.

지금까지 Swiper 슬라이드를 사용하면서 처음 겪어본 현상이라 이유도 잘 몰라서 해결법을 찾느라 아주 조금 고생했다.

열심히 찾아본 결과 이런 현상이 가끔 있나 보더라.

 

이렇게 슬라이드 되는 이미지나 텍스트가 흐리게 나올 때 사용하는 옵션 파라미터(Swiper Parameter) 값이 있더라.

 

관련 파라미터는 roundLengths 이다.

아래는 Swiper API 사이트를 참조한 원문 내용과 구글 번역한 내용이다.

 

https://swiperjs.com/api/

Swiper API

원문

roundLengths : Set to true to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)

 

구글 번역

roundLengths : 일반 해상도 화면에서 흐릿한 텍스트를 방지하기 위해 슬라이드 너비 및 높이 값을 반올림하려면 true로 설정합니다. (해당하는 경우)

 

번역된 내용을 보면 대충 어떤 상황에서 써야 되는 파라미터인지 알 수 있다.

내용에는 "흐릿한 텍스트를 방지하기 위해"라고 되어 있는데 사용해보니 이미지에도 적용된다.

 

roundLengths 파라미터를 넣고 true로 설정하고 난 후 이미지가 흐릿하게 나오던 현상이 없어졌다.

혹시라도 내가 겪은 상황과 같은 문제로 고민하거나 해결법을 찾고 있는 분이 있을 수도 있지 않을까 해서 이렇게 글을 남겨 본다.

향후 내가 기억하고 필요할 때 사용하기 위한 기록의 의미도 있다.

 

요즘 코로나 재확산으로 인해 힘든 시기이지만 코로나로부터 벗어나는 그날까지 다들 힘내시고 건강하게

오늘도 즐 코딩하시길... ^^