새 글을 작성하거나 검색을 할 때 데이터가 많거나 인터넷이 느린 경우 화면에 나타나지 않아 여러 차례 클릭하는 경우가 있습니다. 또는 사용자 실수인 경우도 있으며 마우스 버튼이 민감한 경우 다중 클릭이 시동 되기도 합니다. 이런 경우 글이 여러 개 등록되거나 서버에 많은 요청을 시도해서 속도 저하의 문제가 될 수 있습니다. 서버 접속자에 대한 타임 아웃 시간 제한이나 업그레이드가 방법일 수 있지만 그전에 간단한 방법으로 효율성을 높이는 방법으로 버튼을 1회만 누르고 대기하도록 유도하는 것입니다.

아래의 데이터에서 보면 44만 6천 개의 데이터가 존재하기에 검색을 누르면 3~4초의 대기 시간이 걸립니다. 사용자는 데이터가 나오지 않아 여러 차례 누를 수 있고 이와 같은 사용자 시도에 의해서 서버가 커버 할 수 있는 최대 동시 접속자가 제한되게 됩니다. 아래의 소스 수정으로 UX를 개선해 보도록 하겠습니다.

화면 소스와 함께 jQuery 소스를 살펴 보겠습니다.

# 검색에서 사용하는 폼과 HTML 테그
<form name="frm_search" id="frm_search">
<div class="container-fluid pb-2">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="검색어 입력" name="search_str" value="<?=$_GET["search_str"]?>">
        <div class="input-group-append" id="button-addon4">
            <button class="btn btn-outline-info btn-search" type="submit">검색하기</button>
            <button class="btn btn-outline-secondary" type="button" onclick="dScale(<?=$scale?>);">행수</button>
        </div>
    </div>
</div>
</form>

# .btn-search 클릭하면 검색하기 텍스트는 Searching..로 변경되고 버튼은 disabled 후 Submit 전송
<script>
$(document).ready(function(){
    $(".btn-search").click(function(){
        $(this).text("Searching..");
        $(this).attr("disabled",true);
        $("#frm_search").submit();
    });
});
</script>

간단하면서도 서버에 부하를 줄이는 버튼 비활성화 방법을 소개 해 드렸습니다. 검색 버튼 이외에도 로그인, 글 작성 후 저장하기와 같은 곳에 활용하기 좋습니다. 조금 확장하여 서브 밋이 필요한 버튼은 모두 적용하는 것도 좋은 방법 입니다.

버튼을 숨기는 방법과 gif 로딩 이미지 또는 Spinners 기능을 이용하면 좀 더 직관적으로 표현이 됩니다.