단일 페이지 애플리케이션 문서 원본 보기

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가 더 좋다.

{{각주}}