개발노트

오늘은 간단한 팁을 하나 소개 합니다. 공개 솔루션을 사용하는 경우나 혼자 사용하는 시스템의 경우 잦은 경우는 아니지만, 버튼을 클릭할 때 더블 클릭이나 느린 경우 두번 클릭하는 걸 방지하는 방법 입니다.

여러가지 방법이 있지만 저는 복잡한 방법은 좋아하지 않아 아래와 같이 사용하고 있어 공유 합니다.

실수 잦은 저장 버튼, 더블 클릭 이제 걱정 끝!

웹 페이지에서 폼을 저장하거나 데이터를 처리하는 버튼을 사용하다 보면, 서버 딜레이나 사용자의 실수로 마우스를 두 번 클릭하는 경우가 종종 발생합니다. 특히 서버 응답이 느릴 때는 "저장이 안 됐나?" 싶어서 연타하게 되기도 하죠.

이렇게 버튼이 두 번 클릭되면 데이터가 중복으로 등록되거나, 서버와의 통신 과정에서 예기치 않은 오류가 발생할 수 있어 사용자 경험에 좋지 않은 영향을 미칩니다.

복잡한 코드 없이! Onclick 이벤트 하나로 끝내는 2중 클릭 방지

이러한 문제를 해결하기 위한 다양한 방법들이 있지만, 오늘은 가장 단순하면서도 효과적인 방법을 여러분께 공유하고자 합니다. 바로 HTML의 onclick 이벤트를 활용하는 것이죠!

기존의 Bootstrap 5 버튼 코드에 아주 간단한 onclick 이벤트 핸들러 함수만 추가하면 됩니다. 버튼을 클릭했을 때 즉시 비활성화시켜 다시 클릭할 수 없도록 만드는 방법인데요.

클릭하는 순간 버튼의 텍스트를 "처리 중..."과 같은 메시지로 변경하고, Bootstrap의 애니메이션 스피너를 함께 보여주면 사용자에게 현재 작업이 진행 중임을 명확하게 알려줄 수 있어 더욱 편리합니다.

적용 방법은 초 간단! 기존 코드에 Onclick만 추가

이미 Bootstrap 5를 사용하여 버튼을 구현하고 있다면, 정말 간단하게 이 방법을 적용할 수 있습니다. 아래는 예시 코드입니다.

<script>
function Ing(buttonElement) {
    buttonElement.disabled = true;
    const originalHTML = buttonElement.innerHTML;
    buttonElement.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 처리 중...';
    return originalHTML; // 원래 HTML 반환 (선택 사항: 나중에 복원 시 사용)
}
</script>

<button type="button" class="btn btn-success rounded-4 btn-apply" onclick="Ing(this);"><i class="bi bi-vector-pen"></i> 저장완료</button>
<button type="button" class="btn btn-info rounded-4 btn-apply-reload" onclick="Ing(this);"><i class="bi bi-vector-pen"></i> 저장확인</button>

보시는 것처럼, 각 버튼 태그에 onclick="Ing(this);" 속성만 추가하면 됩니다. Ing(this) 함수는 클릭된 버튼 자신(this)을 인수로 받아 비활성화하고, 텍스트를 변경하는 역할을 수행합니다.

간단하지만 아쉬운 점? 재클릭 방지를 위한 추가 개선 팁

이 방법은 매우 간단하고 빠르게 적용할 수 있다는 장점이 있지만, 한 번 클릭하면 버튼이 비 활성화되어 다시 클릭할 수 없다는 단점도 있습니다.

"저장 완료" 후에도 사용자가 다시 내용을 수정하거나 다른 액션을 취하려면 페이지를 새로 고침 해야 하는 불편함이 있을 수 있죠.

이러한 단점을 개선하기 위해 다음과 같은 방법들을 추가적으로 고려해 볼 수 있습니다.

• 취소 버튼 추가: 저장 동작을 취소하고 다시 편집할 수 있는 "취소" 버튼을 함께 제공합니다.

• 취소 단축키 제공: 특정 키 조합(예: Esc)을 눌러 비 활성화된 버튼을 다시 활성화하거나 이전 상태로 돌아갈 수 있도록 합니다.

• 일정 시간 후 활성화: 서버 응답이 성공적으로 완료된 후 자동으로 버튼을 다시 활성화시킵니다.

마무리하며

프로그램에서 저장 버튼과 같이 중요한 기능을 구현할 때, 2중 클릭을 방지하는 것은 사용자 경험과 데이터의 정확성을 위해 매우 중요합니다. 오늘 소개해 드린 onclick 이벤트를 활용한 방법은 매우 단순하지만 효과적으로 이 문제를 해결할 수 있는 좋은 선택지입니다.

단점 개선을 위한 추가적인 방법들을 함께 고려하여 여러분의 웹 애플리케이션에 더욱 편리하고 안정적인 사용자 인터페이스를 구축해 보세요!