MPA (Multi-Page Application)
MPA는 다중 페이지 애플리케이션을 뜻한다. MPA는 웹 애플리케이션의 전통적인 구성 방식으로, 각각의 화면이나 페이지가 독립적인 구조로 이루어져 있다. 각 페이지는 서로 다른 URL을 가지며, 각각의 페이지는 별개의 HTML 파일이다.
또한 사용자가 새로운 페이지로 이동하거나 링크를 클릭하면 해당 페이지의 HTML 파일이 새로 로드된다. 이로 인해 새로운 페이지의 뷰가 표시되며, 이전 페이지와는 독립적으로 작동한다. MPA 방식으로 운영되는 프로그래밍 언어에는 JSP, ASP.NET, PHP 등이 있다.
이러한 MPA 방식 운영의 장단점은 다음과 같다.
장점
-
SEO (검색 엔진 최적화)
각각의 페이지가 별개의 HTML 파일로 구성되어 있어 검색 엔진이 각 페이지를 독립적으로 크롤링하고 인덱싱할 수 있다. 이로써 웹 페이지가 검색 결과에서 노출될 확률이 높아진다. -
브라우저 히스토리 관리
각 페이지마다 고유한 URL을 가지므로 브라우저의 뒤로가기, 앞으로가기 버튼을 사용하여 간편하게 페이지를 탐색할 수 있다. -
유지보수 용이성
각 페이지가 별도의 HTML 파일을 가지기 때문에 개별 페이지의 코드와 리소스를 유지보수하기에 직관적이다.
단점
-
느린 페이지 로딩 속도
새로운 페이지로 이동할 때마다 해당 페이지의 필요한 정보를 서버로부터 로드해야 하기 때문에 상대적으로 속도가 느릴 수 있다. -
사용자 경험 저하
페이지 간 전환 시 화면이 깜빡이며 리로드되는 현상이 발생할 수 있어 사용자 경험이 저하될 있다. 이러한 현상은 주로 유저 입력 폼에서 정보를 제출할 때 발생한다. -
서버 요청 과부화
각 페이지마다 서버 요청이 발생하므로 서버의 부하가 증가할 수 있으며, 사용자의 네트워크 트래픽 또한 증가할 수 있다. 이로 인해 클라이언트와 서버의 송수신이 자주 발생하므로, 유저의 수가 증가하면 서버가 다운될 우려도 있다.
이러한 MPA 방식의 운영은 위의 단점들 때문에, 웹 기술이 발전될수록 더욱 더 감점 요인으로 다가왔다. 하지만 기존의 MPA 방식은 속도 측면에서 더 빠르게 하는 것에 한계가 있었다. 때문에 다른 방식의 웹 페이지 운영 구조가 필요해졌고 이에 따라 모던 웹 개발에 어울리는 SPA 방식이 등장하였다.
SPA (Single-Page Application)
SPA는 단일 페이지 애플리케이션을 의미한다. 이는 웹 애플리케이션의 형태 중 하나로, MPA의 단점을 극복하고자 나왔다. 운영 방식은 MPA와 달리 단 하나의 HTML 페이지에서 시작하여 사용자와의 상호작용에 따라 동적으로 콘텐츠를 갱신하는 구조이다. 유저와의 상호작용에 따라 필요한 데이터만 서버로부터 요청하고, 해당 데이터를 사용하여 페이지 내의 내용을 갱신해준다. 이로써 빠른 페이지 전환과 부드러운 사용자 경험을 제공하는 효과가 있다.
이러한 특징 덕분에 현대 웹 애플리케이션의 주요 개발 방식으로 자리 잡았으며, SPA방식으로 운영되는 웹 프레임워크에는 React, Angular, Vue 등이 있다.
이러한 SPA 방식 운영의 장단점은 다음과 같다.
장점
-
빠른 페이지 전환
SPA는 페이지 전환 시 전체 페이지를 로드하지 않고 필요한 데이터만 가져와 화면을 업데이트하므로 빠른 페이지 전환을 제공한다. -
부드러운 사용자 경험
화면 깜빡임이나 로딩 지연 없이 데이터만 업데이트되기 때문에 부드럽고 유연한 사용자 경험을 제공한다. -
클라이언트-서버 통신 최소화
필요한 데이터만 서버로부터 가져오기 때문에 클라이언트와 서버 간의 통신이 최소화되어 네트워크 트래픽과 서버 부하를 감소시킨다. -
기술의 분리
백엔드와 프론트엔드를 독립적으로 개발할 수 있어 효율적인 업무 분담이 가능하다. -
자연스러운 모바일 지원
SPA는 상대적으로, MPA에 비해 모바일 애플리케이션과 유사한 사용자 경험을 제공하여 모바일 환경에서도 성능이 우수하다.
단점
-
초기 로드시 서버 부하
초기에 필요한 리소스를 다운로드하므로 서버에 부하가 몰릴 수 있다. 하지만 이는 초기접속시에만 발생하며 이후 웹 서핑에는 속도가 돌아온다. -
SEO (검색 엔진 최적화) 문제
검색 엔진이 페이지를 인덱싱하고 검색 결과에 노출시키기가 어려울 수 있다. -
메모리 관리
클라이언트 측에서 페이지 간 데이터와 상태를 관리해야 하므로 메모리 누수나 성능 저하의 가능성등의 버그가 존재할 수 있다. -
보안 이슈
클라이언트 측에서 로직을 실행하므로 보안 위험에 노출될 수 있다. 하지만 이는 사용자 인증 또는 보안 토큰으로 충분히 완화할 수 있다.
SPA는 사용자 경험과 성능 측면에서 많은 이점을 가지며, 모던 웹 애플리케이션에서 널리 사용되고 있다. 하지만 SPA도 역시 위와 같은 단점이 존재하기에, 이를 고려하여 각각의 프로젝트에서 어떤 프레임워크를 사용하여 개발할 것인지 잘 고민해야 한다.
하지만 웹 기술은 지속적으로 발전하기에 이러한 SPA의 단점들을 극복하는 움직임도 존재하며, 이 결과로 MPA의 장점과 SPA의 장점을 결합한 개념도 있다. 이 개념의 중점이 되는 프레임워크는 바로 Next.js이다. Next.js는 react 기반의 SPA운영 방식이면서 동시에 서버 사이드 렌더링을 수행할 수 있는 프레임워크이다. 이를 이해하기 위해선 먼저 SSR과 CSR에 대한 배경지식이 필요하다. 이들을 다음 포스트에서 살펴보자.
