AJAX를 왜 사용하는가

AJAX란 무엇인가

 

AJAX(Asynchronous Javascript And XML)는 비동기 자바스크립트 그리고 XML이란 뜻을 가지고 있으며 XMLHttpRequest라는 객체를 이용해서 서버와 통신하는 방법을 말합니다.

웹 화면단에서 서버와 통신하는 전통적인 방법은 폼 태그 <form> 를 사용하는 것입니다. 그런데 폼을 제출 할 때에는 페이지 전체의 새로고침이 발생하게 됩니다. 회원가입이나 로그인, 게시글 작성과 같은 일회성 이벤트는 폼으로도 충분하지만, 현재 페이지의 상태를 유지하면서 수시로 서버와 데이터를 주고 받아야하는 경우 한계에 부딪힐 수 있습니다. 현대의 웹에서 가장 중요한 키워드가 '동적인 페이지'와 'UX'라는 점을 고려하면 비동기 통신은 선택이 아닌 필수라고 할 수 있습니다. 이런 요구에 부응하여 만들어진 것이 바로 AJAX라는 녀석입니다. AJAX통신을 통해 페이지의 일부 영역에서만 서버에 요청을 보낼 수 있고, 시도 때도 없이 서버로부터 응답 데이터를 받아서 사용할 수 있습니다. 

다만, 응답을 받으려면 요청이 반드시 있어야 합니다. AJAX는 클라이언트 풀링 방식으로만 작동하기 때문입니다. 앱 푸쉬 알림과 같이 서버 푸시 방식의 서비스를 구현하려면 다른 방법을 알아봐야하죠. 이와 같이 AJAX를 사용함으로써 얻을 수 있는 몇 가지 이점과 함께 한계 내지는 단점 또한 존재합니다. 뭐가 좋고 나쁜지 자세히 알아보도록 하겠습니다.

 

AJAX를 쓰면 좋은 점

 

1. 성능 및 응답 속도가 향상된다

 

AJAX를 이용하면 페이지 전체를 주고 받는 대신 필요한 데이터만을 서버와 주고 받을 수 있기 때문에 네트워크 및 서버의 트래픽을 줄일 수 있습니다. 또 서버로부터 응답을 받는 시간도 짧아집니다. AJAX로 서버 대역폭 이용을 줄일 수 있고 페이지 로드 속도가 향상이 되며 따라서 반응형 웹 페이지를 구축하는 데도 도움을 줍니다.

 

2. 비동기 처리가 가능하다

 

AJAX를 이용하면 서버에 요청을 보낸 다음 응답을 기다리지 않고 사용자와 계속 상호작용을 할 수 있습니다.

회원가입을 구현할 때 가장 중요한 것은 유효성 검사입니다. 사용자가 입력한 값이 우리가 요구하는 데이터의 형식을 따르는 지 여부를 확인하고 맞지 않을 때는 다시 입력하게 만들어야 합니다.

만약 AJAX를 사용하지 않고 폼 전체를 전송하는 방식을 취한다면,

사용자는 제출하기 버튼을 누르고 서버가 전송된 모든 데이터를 읽어 그 중에서 잘못된 부분을 찾은 다음 경고창을 띄워줄 때까지 기다렸다가 해당 부분을 수정하고 다시 제출하기 버튼을 누르고 기다리는 작업을 반복해야 합니다. 패턴 검사는 자바스크립트만으로 처리가 가능하지만 아이디 중복 여부는 DB를 조회해야 하므로 반드시 서버와 통신이 필요합니다. AJAX를 쓰지 않는다면 아이디를 별도의 폼에 넣고 아이디 중복 여부 검사 버튼을 만들어 아이디만 전송하도록 하는 등 구현상의 제약이 따르게 됩니다.

하지만 AJAX를 사용한다면,

사용자가 아이디를 입력하고 포커스를 다음으로 옮기는 순간 입력된 아이디만을 AJAX 통신을 통해 서버로 보내어 중복 여부를 검사할 수 있습니다. 그리고 서버로부터 응답으로 받은 검사 결과를 아이디 입력 칸 옆에 예쁘게 표시해줄 수 있습니다.

 

3. 사용자 경험, UX 개선에 도움이 된다.

 

앞서 언급한 성능 향상이나 비동기 처리 같은 것들은 궁극적으로 UX를 개선하기 위한 것입니다. 사용자들 특히 한국인들은 뭔가를 클릭했는데 1초 이내에 아무 일도 일어나지 않으면 극심한 답답함과 함께 분노를 느끼게 됩니다. 낡은 디자인의 정적인 페이지를 보면 관리가 잘 되고 있는 건지, 업데이트는 하고 있는 건지, 혹시 피싱 사이트가 아닐까 걱정도 되고 왠지 믿음이 안 가게 됩니다.

AJAX를 이용하면 빠르고 동적이며 세련되기까지한 웹 페이지를 만들 수 있습니다.

중요한 현대 웹 패러다임 중의 하나인 SPA를 만드는 데에도 AJAX 기술이 활용될 수 있습니다.

 

AJAX를 쓰면 안 좋은 점

 

1. 자바스크립트와 XMLHttpRequest에 의존한다.

AJAX는 하나의 독자적인 기술이라기 보다는 기존에 존재하던 여러 기술들을 묶어 표준으로 제시한 방법론에 가깝습니다. AJAX를 사용하기 위해서는 JS에 대한 지식이 있어야 합니다. 또 JS나 XMLHttpRequest를 지원하지 않는 브라우저에서는 AJAX를 사용할 수 없습니다. 하지만 최신 버전의 대다수 브라우저에서는 문제없이 AJAX를 사용할 수 있기 때문에 20년 동안 한 번도 업데이트를 하지 않았다거나 하는 특수한 상황이 아니라면 크게 문제되지는 않을 것으로 보입니다. 하지만 웹 표준과 웹 접근성, 호환성 차원에서 이런 사용자를 배려한 대안을 마련하면 좋겠죠.

 

2. 검색에 불리하다.

 

검색 엔진 최적화, SEO는 웹 사이트의 흥망성쇠를 결정하는 중요한 요소입니다. 검색을 위해서는 검색 엔진이 이곳 저곳을 돌아다니면서 정보를 끌어모으고(크롤링) 모은 정보를 정리하여 색인으로 만드는(인덱싱) 사전작업이 필요합니다. 그런데 AJAX 페이지는 중요한 정보들을 미리 문서로 만들어놓는 것이 아니라 사용자의 요청이 있을 때 만들어서 보여주기 때문에 이런 사전 작업에 의해 페이지에서 보여줄 수 있는 모든 정보가 인덱싱되지 않게 됩니다.

하지만 이런 문제점은 페이지 갱신없이도 주소를 바꿔주는 pushState()를 이용하면 어느 정도 해결될 수 있습니다. (https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate)

 

3. 보안 문제

 

AJAX는 오픈 소스이고 AJAX를 구현하기 위한 코드가 공개되어 있습니다.

AJAX는 스크립트를 사용한 기술이기 때문에 스크립트의 보안상 취약점을 그대로 가지며 XSS, SQL Injection과 같은 대표적인 보안 이슈와 관련해서도 주의할 필요가 있습니다. 또한 동일 출처 정책(스크립트가 실행되는 도메인과 요청을 받는 서버의 도메인이 같아야 한다, Same Origin Policy, SOP)의 제약을 받습니다. 

 AJAX로 요청을 보낼 수 있는 서버는 현재 페이지가 호스팅되고 있는 서버 뿐입니다. 즉, 구체적으로는 프로토콜(https://)과 호스트(co1nam.tistory.com), 포트 번호(:80)가 동일해야 합니다.document.location.origin을 통해서 현재 origin을 확인할 수 있습니다.

통신 과정에서는 데이터가 사용자의 브라우저에 저장되는데, 악의적으로 삽입된 스크립트를 통해 사용자의 세션을 감시할 수 있습니다. AJAX로 변수명 등 데이터베이스의 세부 정보를 포함한 요청을 보내기도 하고 이런 정보가 노출될 수 있습니다. AJAX로 다수의 서버 사이드 페이지를 사용할 수 있고, 이런 통로들은 공격 루트로 악용될 수 있습니다.

 

4. 그 밖의 문제들

 

AJAX로 구현된 페이지에서 문제가 발생했을 때는 디버깅하는 것이 꽤 난감합니다. IDE에서 지원하는 디버깅 기능을 이용할 수도 없고 원하는 데이터를 출력해보기도 어렵습니다. 알 수 있는 것은 서버에서 보내온 결과 메시지 뿐인데, 이것만으로는 문제의 원인을 정확히 알 수가 없습니다.

요청을 받는 서버 쪽 소스에 접근할 수 있다면 메시지에 원하는 값들을 이것저것 추가해서 원인을 파악할 수 있겠지만 요즘에는 백, 프론트가 분리되어 있는 경우가 많기 때문에 간단한 문제가 아니라면 혼자서 해결하기는 어렵지 않을까 생각됩니다.

또, AJAX 요청은 브라우징 히스토리에 등록되지 않기 때문에 뒤로가기 버튼에 의해서 문제가 발생할 수도 있습니다. 요즘에는 회원가입 등 여러 단계를 거쳐야 하는 작업이 필요할 때, 단계별로 페이지를 만드는 대신 하나의 페이지에서 다음 단계로 넘어가는 것처럼 보이게 만드는 방식을 많이 사용합니다. 만약 사용자가 모든 단계를 밟아 다음 페이지로 이동을 했다가 문제가 있어서 다시 뒤로가기를 누르면 어떻게 될까요?

사용자는 다시 마지막 단계로 돌아가리라 기대하겠지만 우리는 이런 기대를 배반하고 처음 상태로 돌려보낼 수 밖에 없습니다. 임시 저장 같은 별도의 안전장치를 마련해두지 않았다면 사용자는 자신이 오랜 시간 공들여 진행했던 절차가 한순간에 물거품이 되어버린 것을 보고 분노하며 별점 1개 짜리 리뷰를 남기게 되겠죠.

하나의 AJAX 요청이 실패할 경우에 전체 페이지가 정상적으로 동작하지 않는 문제가 발생할 수도 있습니다.

 

결론

 

지금까지 AJAX의 이점과 문제점에 대해서 알아봤습니다. 현실적으로 AJAX를 피할 수는 없기 때문에 AJAX 사용을 찬성할 것이냐 반대할 것이냐 하는 문제라기 보다는 AJAX를 어떻게 하면 더 잘 사용할 수 있을 것인가 하는 관점에서 바라볼 필요가 있어 보입니다.

 

참조

https://www.techquintal.com/advantages-and-disadvantages-of-ajax/

https://www.careerride.com/Ajax-security-issues.aspx