ajax를 사용하여 로딩 문구 만들기

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

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

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

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

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

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


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


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

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