[Android] Slider를 활용한 가격 설정 적용기

근무중인 커머스 서비스에 가격 필터를 개선하게 됐습니다.

기존에는 가격대별 버튼 + Edittext 로 가격을 설정 했었고

개선되는 버전엔 Slider + Edittext 로 가격을 설정하도록 변경 됐습니다

 

좌) 기존, 우) 개선

 

 

정말 개선 되었는가 ?

평소 설계서를 공유 받는 자리에서 제 경험을 토대로

유저 입장에서 솔직하게 피드백 하는데 
슬라이더를 사용해 가격 조정 하도록 개발해본적도 없고 

실제 서비스에서도 접해본적 없다보니 별다른 피드백을 할 수 없었고 
그대로 개발에 착수하게 됐습니다.

 

 

어떤 슬라이더를 선택할 것인가?

2가지 전제조건이 있었습니다.

• 상품 리스트 조건마다 최저 금액과 최대 금액이 다름
• 최저, 최대 금액에 따라 금액을 조절할 수 있는 간격이 다름  

위 전제조건이 까다롭지 않다고 생각하여 기본 RangeSlide로 개발을 진행 했습니다. 공식문서 

 

먼저 RangeSlide 값 초기 설정은 아래 코드와 같이 합니다.

            binding.sbPrice.run {
                valueFrom = (initStartPrice.toFloat())
                valueTo = (initEndPrice.toFloat())
                stepSize = priceData.interval.toFloat()

                values = listOf(startPrice, endPrice)
            }

values에 지정된 값만큼 2개의 thumb가 seek bar 위에 놓이게 됩니다.

 

개발하면서 2가지 난관에 부딪혔습니다.

 

첫번째 난관

서버로부터 전달받은 최소, 최대, 간격 값을 설정했을때 에러가 발생했습니다.

설정된 최소 최대 가격은 가격 값으로 딱 나누어 떨어져야 하는데 그렇지 않기 때문입니다.

ex) 최소 : 10, 최대 : 40,000, 간격 : 1,000 일 경우 10부터 1000간격으로 이동할 경우 딱 나눠떨어지지 않음

-> 최소 : 10, 최대 : 40,010, 간격 1,000 ( 정상 작동 )

 

서버 개발자와 얘기를 나눠 딱 나눠떨어지게 내려주도록 변경하고 앱단에서도 에러가 발생하지 않도록 
방어 코드도 추가 했습니다. 

 

 

두번째 난관 

첫번째 난관 해결로 인해 슬라이더는 의도대로 움직이도록 변경했지만 

특정 가격 구간을 검색 하기위해 남아 있던 editText가 문제였습니다.

 

입력한 숫자대로 슬라이더를 조정해야 했는데,

설정된 간격이 1,000원때 입력된 가격이 1,234원이면 에러가 발생했습니다.

(솔직하게 알아서 근처 영역으로 변경될줄 알았습니다.)

 

설정된 step과 다르게 thumb의 위치를 수정해서 생긴 문제입니다.

val startText = binding.etPriceStart.text.toString().replace(",","")
val startPrice = startText.toIntOrNull() ?: 0

val endText = binding.etPriceEnd.text.toString().replace(",","")
val endPrice = endText.toIntOrNull() ?: 0

binding.sbPrice.values = listOf(
            startPrice,
            endPrice
        )

 

그래서 RangeSlide에 값들을 set 하기 전 설정된 step의 범위대로 놓이도록 하는 방어 코드를 추가 했습니다.

    private fun convertStartPrice(value: Float): Float{
        val startLackValue = value % stepValue

        return value - startLackValue
    }

    private fun convertEndPrice(value: Float): Float{
        val endLackValue = value % stepValue

        return if(endLackValue == 0f) value else value + ( stepValue - endLackValue )
    }

방어 코드를 통해 유저에겐 editText에 입력한 값과 동일하게 thumb가 이동한 것처럼 보이지만 

실제론 입력한 값과 근사치 값에 thumb를 놓이게 했습니다.

 

 

그외 사용한 RangeSlide 설정값 공유 합니다.

        binding.sbPrice.haloRadius = 0
        binding.sbPrice.trackHeight = CommonViewUtil.dipToPixel(requireContext(), 6)
        binding.sbPrice.setThumbRadiusResource(R.dimen.text_12)
        binding.sbPrice.setThumbStrokeColorResource(R.color.gray400)
        binding.sbPrice.setThumbStrokeWidthResource(R.dimen.text_1)

 

• haloRadius : thumb를 이동할때 나타나는 그림자의 반지름을 조절하는 값으로, 저는 비활성화 하고 싶어서 0으로 설정했습니다.

haloRadius

• trackHeight : thumb가 움직이는 track 부분의 높이 변경
• thumbRadius : thumb 반지름 
• thumbStrokeColor : thumb stroke 색상 
• thumbWidth : thumb stroke 넓이

위 설정값 말고도 다양하게 커스텀할 수 있는데 공식 문서를 참고하시면 좋을것 같습니다! 

 

 

 

결과적으로..

들였던 시간에 비해 유저들이 편리할지는 모르겠습니다.

하지만 접해보지 못했던 range slider를 사용해보고 여러 난관을 헤쳐나가면서 
또 하나의 경험치가 됐고 추후에 또 사용하게 된다면

오늘을 기억하며 고려해볼 것 같습니다.

 

개발하시는 다른분들께도 좋은 자료가 되길 바랍니다.

 

잘못된 부분은 말씀해주시면 감사하겠습니다.