단일 페이지 애플리케이션

Single page application (SPA).

웹 애플리케이션이 단 한 개의 페이지로만 구현한 것을 뜻한다. 페이지를 로드했을 때 그냥 정적인 내용만 보이거나, 간단한 자바스크립트 정도를 수행하는 정도를 넘어서 과거에는 여러 개의 웹 페이지가 필요했던 기능을 AJAX를 사용해서 페이지를 추가로 로드하지 않고 단 한 개의 페이지 안에서 처리하는 것을 뜻한다.

예를 들어 한 페이지에 주간 단위의 일정을 보여주는 웹 페이지가 있다고 가정해 보자. '다음 주' 링크를 누르면 기존 방식은 서버에 같은 페이지의 URL을 전달하고 웹 페이지를 요청한다. 이 때 매개변수로 시작 날짜를 전달할 것이다. 서버는 받은 URL과 매개변수로 페이지를 만들어서 클라이언트에 보내주고 클라이언트의 웹 브라우저는 받은 페이지를 렌더링해서 보여준다.

반면 SPA는 '다음 주' 링크를 눌렀다면 페이지 안에서 바꿔야 할 부분의 정보만 서버에 요청한다. 이는 보통은 JSON 또는 XML 형식이며 데이터 용량도 적고 어차피 데이터를 자바스크립트가 처리해야 하므로 대부분은 JSON을 사용한다. 서버가 데이터를 보내주면 웹 브라우저는 페이지를 다시 로드하지 않고 DOM 트리에서 바꿀 부분만을 변경함으로써 다음 주 일정을 보여준다.

AJAX가 등장함으로써 SPA도 등장했지만 본격 불을 당긴 계기는 이를 편리하게 구현할 수 있는 프레임워크인 jQuery일 것이다. 이후 React, Angular, Vue.js와 같은 프레임워크까지 등장하여 더더욱 편리하게, 그리고 대규모의 세련된 SPA를 구현하기가 더욱 쉬워졌다.

서버의 부담이라는 면에서 보면 SPA의 장점이 많다. 요청이 들어올 때마다 전체 웹 페이지를 보낼 필요 없이 JSON이나 XML 형식 데이터만 보내면 되므로 페이지를 만들고 전송하는 컴퓨팅 파워나 트래픽을 대폭 아낄 수 있기 때문이다. 사용자 쪽에서 볼 때에도 페이지가 로딩될 때 잠깐이지만 빈 화면만 보게 될 수 있지만 SPA는 페이지를 다시 로딩하는 게 아니므로 그런 일이 없다. 다만 서버와 통신을 하고 데이터를 읽어들이고 있는 동안에는 이를 사용자에게 알리기 위한 진행 중 표시 같은 것을 보여줄 필요가 있다.

그러나 전체 웹사이트를 SPA로 하는 경우는 별로 없고 효율도 나쁘다. 페이지의 구조나 디자인은 별로 달라지지 않고 데이터만 바뀌는 부분이 SPA가 딱 적합한 곳이다.