SPA와 기존 웹사이트의 차이

정관우·2021년 7월 2일

SPA란?

SPA 작동방식

SPA(Single Page Application)는 모던 웹의 패러다임이다. SPA는 단일 페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다는 장점이 있다.

SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. 이런 특징들은 SPA가 모바일 웹에 최적화 된 이유이기도 하다. 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있다.

그러나, SPA도 모든 환경에 적합한 것은 아니다. 우선, 초기 구동속도가 느린 편이다. 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문이다. 또한, SEO (검색엔진 최적화) 문제가 존재한다. SPA는 서버 렌더링 방식이아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이다. 때문에, 처음 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안될 수도 있다. 하지만, SPA는 웹보다는 앱에 적합한 기술이고 React나 Angular 등의 프레임워크는 서버 렌더링(SSR)을 지원하는 SEO 기술이 이미 존재한다.

SEO (검색 엔진 최적화) :
검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠를 제작, 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘림

MPA란?

MPA 작동방식

link tag를 사용하는 전통적인 웹 방식이다. 새로운 페이지 요청 시 마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링하므로 새로고침이 발생되어 사용성이 좋지 않다. 페이지에서 필요 없는 부분을 포함하여 전체를 갱신하기 때문에 비효율적이다. 또한, 추후에 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하기 때문에 개발 생산성이 좋지 않을 수도 있다.

하지만, MPA도 단점만 존재하는 것이 아니다. 가장 큰 장점은 SPA와 달리, SEO에 친화적이다. 네이버나 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트라면 MPA 구조로 개발하는 것이 좋다. 또한, 서버에서 이미 렌더링한 결과를 가져오기 때문에 SPA와 달리 첫 로딩이 짧은 편이다.

MPA vs SPA

항목	MPA	SPA
페이지 수	여러 개	한 개
초기 구동 속도	느림	빠름
트래픽 용량	작음	큼
SEO 최적화	약함	강함
사용자 경험	자연스러움	깜박거림 (새로고침)
새로운 페이지 요청	필요한 부분 다운 / 렌더	전체 페이지 다운 / 렌더
렌더링 방식	클라이언트 사이드 렌더링 (CSR)	서버 사이드 렌더링 (SSR)