SPA와 MPA 차이, 장단점 비교 (웹사이트 검색 노출 원리)

SPA는 Single Page Application의 약자이고 MPA는 Multi Page Application의 약자입니다. 웹 사이트를 구축할 때, 모든 페이지마다 HTML을 만들어서 화면을 구성하는 게 좋을까요? 아니면 하나의 HTML의 파일을 만들고, 메뉴마다 필요한 콘텐츠를 서버로부터 받아와 필요한 정보만 렌더링 해서 클라이언트에게 보여주는 게 좋을까요? 정답은 없습니다. 사용자가 검색을 통해 유입되기를 원하는 웹 사이트 일 경우는, 포털 사이트에 검색이 잘 될 수 있는 Multi Page Application으로 웹 사이트를 구축하는 게 좋을 수도 있습니다. 여기서 잠깐, MPA가 왜 검색 포털 사이트에서 SPA보다 잘 검색될 수 있을까요?

검색 포탈에 웹사이트가 노출되는 원리는 크롤러와 같은 봇이 웹사이트의 HTML 태그, 본문 내용, 이미지 등을 수집하여 웹 사이트의 정보 콘텐츠를 구조화하고, 이를 사용자가 키워드로 검색으로 하였을 때, 사용자 입력한 키워드에 부합되는 정보 순서대로 노출이 됩니다. 저장된 웹사이트 정보는 포털 사이트에서 검색어를 입력하면, 사용자에게 가장 유익할 것이라고 판단되는 사이트를 사용자에게 순위별로 보여줍니다. 검색엔진 최적화(SEO = Search Engine Optimization)는 웹 콘텐츠를 검색 상단에 노출하고, 유입 트래픽을 개선하기 위해 웹 콘텐츠를 재구성하는 작업을 말합니다. 다시 본론으로 돌아와서, MPA의 경우 브라우저를 통해 웹 사이트에 접속하는 클라이언트는 서버로부터 매번 HTML, CSS, Javascript 등 정적 콘텐츠 정보를 서버로부터 모두 받아와야 하므로, 웹사이트의 콘텐츠 표시하는 시간이 오래 걸릴 뿐만 아니라, 서버로부터 매번 동일한 정보를 요청하고 송수신해야 하는 오버헤드가 발생합니다.

반면에 SPA의 경우는, 클라이언트가 보고 싶어 하는 웹사이트 중 필요한 정보만 서버에 요청하여 수신받아 사이트에 정보를 보여주면 되기 때문에, 반응성이 MPA보다 좋습니다. 하지만, 검색 사이트에 노출되기 위해서는 크롤러와 같은 봇에게 정보를 많이 제공해주어야 하는데, 크롤러는 웹 사이트에서 유저처럼 버튼을 누르거나 데이터를 입력하지 않으므로, SPA는 크롤러에게 MPA보다 많은 콘텐츠를 주지 못합니다. 그러므로, 검색 엔진에게 정보를 제공하지 못하여, 검색 포털에서 노출이 되기 어렵습니다.

그래서, 사용자에게 이미 URL 또는 접속경로가 알려져 있거나 또는 포털사이트에 광고비를 지급하여, 특정 키워드 입력을 하였을 경우 제일 상단에 노출하여 유입할 전략이라면, 웹 사이트를 SPA로 구성하여 웹 사이트 사용자 경험을 좋게 만드는데 집중하는 것이 좋습니다.

제작한 웹 사이트를 홍보할 필요가 있고, 키워드 검색을 통해 자연적으로 유입이 되기를 원하는 경우에는 MPA로 웹 사이트를 제작하고 크롤러 봇에게 수집할 수 있는 정보를 최대한 많이 제공하여 키워드 검색 시 제일 상단에 노출하는 것이 좋습니다.

MPA, SPA의 정의와 장점 그리고 단점을 짧게 요약정리하면 아래와 같습니다.

MPA(Multi Page Application)

• 웹 페이지 화면마다, 정적 파일 html로 보여주는 애플리케이션
• 클라이언트가 서버에 페이지를 요청하면, 클라이언트에게 HTML만 넘겨줌
• Server Side Rendering

MPA 장점

• 페이지마다 키워드가 노출되어 있으므로, 검색이 쉽다

MPA 단점

• 프론트 엔드와 백엔드 간 개발 업무가 밀접하게 연관된다

SPA(Single Page Application)

• 페이지를 변경하지 않고, 자바스크립트만을 이용하여 콘텐츠만 변경하여 웹페이지를 보여주는 애플리케이션
• AJAX(Asynchronous JavaScript and XML)와 REST API로 서버에 데이터를 요청하고, JSON으로 응답받은 후 데이터를 변경함
• Client Side Rendering

SPA 장점

• 서버가 해야 할 역할을 클라이언트 부담하므로, 서버 부담이 경감
• 모듈화 및 컴포넌트 개발에 용이
• 백엔드와 프론트 개발 영역을 명확하게 구분

SPA 단점

• 초기 구동 속도가 느림 (처음 접속 시, 사이트 구성과 관련 없는 모든 리소스를 한 번에 다 받음)
• 클라이언트에 중요 비즈니스 로직이 노출될 수 있음
• 검색 엔진 최적화(Search Engine Optimization)가 어려움 => 페이지가 로딩되어야 리소스가 보이므로, 검색에 노출이 안됨

MPA vs SPA 차이점

• 웹 페이지의 내용이 동적으로 변하면 SPA, 웹사이트가 모두 문서로 작성되어있다면 MPA
• SPA는 서버로부터 필요한 정보만 받으면 되지만, MPA는 매번 서버로부터 문서에 대한 모든 데이터를 다 받아야 함

웹 사이트를 제작하려는 목적에 따라, 단순 정보 제공인지 혹은 마케팅, 쇼핑용인지 목적에 따라 웹 사이트를 어떤 방식으로 구성할지 전략을 세우면, 사이트 운영목적을 달성하실 수 있을 것입니다.