비동기 방식으로 새로운 콘텐츠를 불러오는 경우 로딩중이라는 아이콘이나 모달창등을 어디서나 쉽게 볼 수 있다. 오늘 우리가 만들어보려 하는 것은 바로 'Loading...' 문구를 콘텐츠 영역 가까이에 표시해보려고 한다. 아래에는 이를 구현하기 위해 필요한 html, css 그리고 자바스크립트 코드이다. 먼저 비동기 AJAX 구현시 이런 인터페이스가 왜 필요한지부터 간단하게 알아보자.

페이지에 AJAX를 사용해 새로운 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 에러라고 생각한 뒤 이탈하려는 유저가 많아질 수 밖에 없을 것이기 때문이다.

스크린샷) AJAX 구현시 자주 볼수 있는 로딩관련 인터페이스

이런 이유로 로딩중이라는 효과를 가시적으로 나타나기 위해 아이콘 및 이미지 또는 텍스트 문구를 사용할 수 있다. 아래에서는 텍스트를 사용했으나 실제로 계속해서 돌아가는 아이콘등 역시 매우 자주 사용된다.


! 로딩 중 문구를 출력하는 코드 구현하기

아래 코드는 현재 3개의 콘텐츠 내용을 담고있다. 방문자가 더보기 버튼을 클릭할 경우 숨겨진 로딩중이란 문구가 출력되고 불러온 새로운 콘텐츠가 하단에 추가되는 매우 간단한 방법이다.

<ul>
   <li>a. 내용</li>
   <li>b. 내용</li>
   <li>c. 내용</li>
</ul>
<p></p>

<button>내용 더보기</button>

아래는 실제를 화면 인터렉션을 구현하기 위하여 자바스크립트의 제이쿼리를 사용하려고 한다. 이때 사용할 함수는 AJAX를 실행하기 위한 ajax() 메소드를 사용할 것이고 페이지 로딩시점에 사용가능한 ajaxStart()와 로딩이 끝난 후 사용할 ajaxStop() 메소드 역시 사용할 것이다. 이 두 가지 메소드는 AJAX가 시작되거나 끝날 경우 해당하는 함수를 불러오도록 해준다. 그럼 아래의 소스코드부터 확인하자.

<script>
// AJAX 시작시 호출할 함수를 등록
$(document).ajaxStart(function() {
   $('p').text('Loading !!!');
})

// AJAX가 끝날 경우 호출할 함수를 등록
$(document).ajaxStop(function() {
   $('p').text('');
})

// AJAX로 콘텐츠 불러오는 코드
$.ajax({
   url: '',
   ....
})
</script>

위 코드에서 주목할 부분은 바로 ajaxStart() 메소드와 ajaxStop() 메소드의 코드 부분이다. 이 부분에 등록된 메소드는 AJAX 호출 또는 종료 이벤트가 발생하는 경우 해당 함수를 실행하며 우리는 p 태그에 문구가 출력되고 사라지는 것을 볼 수 있을 것이다.

위 예제를 통해 간단하게 로딩 문구를 출력해보았다. 이처럼 로딩문구를 보여주는 것은 이탈율(Bounce rate)을 낮추고 페이지뷰를 높이는 효과도 있으므로 작지만 사용자에게 직관적인 인터페이스 구현에 신경쓰는 것이 매우 좋다 하겠다.