간단히 만들어보는 시간차를 통한 중복 클릭 방지 class

일반 사용자는 개발자와 달리 버튼을 여러번 누르기 때문에 상용앱을 출시하기 위해서는 반드시 앱에 중복 클릭으로 인한 오작동을 막는 기능을 추가해주어야 합니다.
중복 클릭 방지는 쉬운 것 같지만 상황에 따라 다르게 처리해야 하는 경우가 많아 은근히 번거롭습니다.

상황에 따른 적절한 중복 클릭 방지 기술은 여러가지가 있지만 이 글에서는 간단히 시간 차이를 통한 중복 방지에 대해서 설명하겠습니다.

 

아래와 같이 상단에 검색 버튼이 있고 버튼 하단에 검색 결과가 리스트 형태로 보여지는 화면이 있는 경우를 예를 들면…

중복 클릭을 방지해야 하는 부분은 크게 두부분으로 나눌 수 있습니다.

  - 검색 버튼 중복 클릭 방지

  - 리스트 아이템을 중복 클릭 방지

 

“검색 버튼 중복 눌림 방지”

서버에 검색 요청을 중복으로 하고 또 결과를 리스트에 노출하는 작업도 중복으로 처리하기 때문에 불필요한 네트워크와 자원이 소모됩니다.

네트워크와 같은 비동기 처리의 경우, flag를 통해 결과가 올때까지 중복 눌림을 방지하도록 처리하는 것이 안정적입니다.

 

“리스트 아이템 중복 눌림 방지’

리스트 아이템을 클릭하는 경우, 별도의 상세 화면으로 이동하게 되는데 이때 중복 눌림이 허용된다면 상세 화면이 여러개가 실행되는 문제가 발생합니다.

이를 방지하기 위해서는 여러가지 방식이 있지만 앞서 언급하였듯이 여기에서는 그냥 간단히 시간차를 통한 중복 클릭 방지에 대해서 설명합니다.

 

시간차를 통한 중복 방지는 

사용자가 첫번째 아이템을 클릭하고 일정 시간이 지나지 않은 시점에서 다른 아이템을 클릭하는 경우 이를 무시하는 방법 입니다.

 

중복 방지 class의 인스턴스는 앱 전반에 사용될 인스턴스 이므로 아래와 같이 object로 선언 및 정의합니다.

화면 및 시나리오에 따라 중복 클릭 방지를 위한 시간 차를 다르게 두어야 하는 경우가 있으므로 여러가지(300, 600, 1200, 사용자 입력)로 구분하였고 

위 언급한 것과 같이 중복 클릭을 방지하는 것은 한개 아이템이 아닌 화면에서 그룹으로 묶인 경우의 수를 방지해야 하므로 아이디를 통해 중복 클릭을 방지할 수 있도록 하였습니다.

object DuplicateChecker {
    val ID_NORMAL = 2019
    val ID_MAIN_LIST = 2020
    val ID_DETAIL = 2021
    val ID_SEARCH = 2022
    val ID_MENU = 2023

    val INTERVAL_NORMAL = 600
    val INTERVAL_SHORT = 300
    val INTERVAL_LONG = 1200

    private val idMap = mutableMapOf<Int, Long>()

    fun hasDuplicated() = checkDuplicate(ID_NORMAL, INTERVAL_NORMAL)

    fun hasDuplicated(interval: Int) = checkDuplicate(ID_NORMAL, interval)
    fun hasDuplicated(id: Int, interval: Int) = checkDuplicate(id, interval)

    private fun checkDuplicate(id: Int, interval: Int): Boolean {
        val current = System.currentTimeMillis()
        val last = idMap[id]
        if(last == null || (current - last) > interval){
            idMap[id] = current
            return false
        }
        return true
    }

    fun clearIdMap(){
        idMap.clear()
    }
}

 

위 화면의 리스트 아이템 클릭 시 중복 클릭을 방지하는 코드는 아래와 같이 작성될 수 있습니다.

fun onClickItem(detail: DataDetail){
    if(DuplicateChecker.hasDuplicated(DuplicateChecker.ID_DETAIL, DuplicateChecker.INTERVAL_LONG)){
        // 중복 클릭이므로 해당 클릭 무시
        return
    }
    // 중복 클릭이 아니므로 관련 코드 작성.
    …
}