Image Source : mageewp.com
사람들이 웹앱을 즐겨 사용하는 이유는 모바일 앱처럼 따로 다운받아 사용 할 필요가 없기 때문이다. 인터넷을 사용할 수 있는 장비라면 어디서든 웹앱을 사용 가능하다는 편리성도 한 몫 한다. 웹앱을 만들기 위해 SPA 패턴을 사용할 것인지 MPA 패턴을 사용할 것인지 결정을 해야한다. 선택기준은 여러가지가 있지만 컨텐츠 중심으로 선택하는 법이 있다. 컨텐츠는 사용자들이 그 어플을 사용할지 안할지를 결정 짓는 중요한 기준이다. SPA와 MPA중 어느것이 더 우세하다고 할 수 없다. 둘의 차이와 장단점을 알아보고 자신이 만들 웹 컨텐츠에 맞는 패턴을 사용해보자.
SPA
SPA : Single Page Application 단일 페이지 어플리케이션
SPA는 브라우저 상에서 돌아가는 Application 이다. 여기서 하나의 페이지라는 것은 HTML를 뜻한다. 둘 이상의 HTML 페이지를 가진 MPA와 달리 단 하나의 HTML로 웹페이지를 구동하기에 매 요청마다 새로운 HTML 페이지를 load 시킬 필요가 없다. 서버에서 페이지들을 그리는 작업들이 프론트단에서 이루어 진다. 그로인해 서버쪽 렌더 페이지의 코드를 작성할 필요가 없다. 이미 우리는 알게모르게 SPA를 사용해 왔다. 유명한 SPA는 Slack, Facebook, Twitter, 구글의 Gmail, Google Maps, Google adsense, 그리고 Google Drive 등이 있다.
디버깅
장점으로는 크롬(또는 다른 브라우저)에서 디버그 하기가 쉽다는 것이다. 크롬을 통하여 네트워크 동작을 모니터링 할 수 있다. 페이지의 요소들과 페이지와 연관된 데이터들을 확인할 수 있다.
오프라인 사용
로컬 저장소의 활용성이 우수해진다. 앱이 한가지의 요청만 보내고 모든데이터를 저장한다. 이는 오프라인에서조차 해당 페이지를 사용 가능하게 만들어준다. 와이파이가 안좋은 곳에서 인터넷이 중간중간 끊기더라도 문제 없이 돌아간다.
유저 친화적 환경
새 페이지들을 지속적으로 로딩시킬 필요가 없기 때문에 기다리는 시간이 없게된다(실상은 부분적 컨텐츠가 로딩 되는 것을 못 느낄 정도로 빠르다.). 사용자는 빠른 속도감과 로딩되지 않는 페이지로 인해 데스크탑 앱을 사용하는 듯한 느낌을 받게 된다. 필요한 부분들만 같은 페이지 상에서 업데이트 되기에 같은 요소들(elements)을 다시 다운 받을 필요가 없다. 이는 유저뿐만 아니라 개발자에게도 편리성을 제공한다.
시간절약
준비되어 있는 라이브러리와 제공된 프레임워크 기능으로 인해 빠르게 개발 가능하다. 백앤드와 프론트앤드가 확실히 구분되어 있기에 서로 지장을 주지 않는다.
어려운 SEO
SEO가 쉽지 않은 이유는 SPA의 컨텐츠가 AJAX를 통해서 로드되기 때문이다. AJAX, Websocket과 같은 기술은 필요한 정보만 받아온후 일부의 정보만 변경하는 방법으로 작동한다. 비동기방식으로 데이터 교환이 이루어지기에 크롤러가 데이터 수집을 제대로 할 수 가 없다. 검색 엔진에 최적화하기 위하여서는 고급의 스킬이 요구된다.
* AJAX는 페이지를 새로고침하지 않고 데이터를 교환하거나 업데이트 하는 방식이다.
MPA
MPA : Multi Page Application 다중 페이지 어플리케이션
더 클래식한 구조를 갖고 있다. HTML 페이지가 여러개이다.
각 페이지는 서버에 요청을 보낸후 페이지의 모든 데이터를 업데이트 시킨다. 그렇기에 속도와 성능면에서 영향을 미친다. 이를 해결키 위해 많은 개발자들은 JS와 JQuery를 이용하여 속도를 향상시킨다. 또한 적재되는정보를 줄인다.
SEO
모든 페이지마다 메타 태그를 붙임으로써 SEO를 관리하기에 용이하다.
많은 자료들
오랜기간동안 사용된 방식인만큼 여전히 많은 사이트들은 MPA로 작성되어 있다. 초보자들이 MPA로 입문하기 좋은 이유는 오래된 사용기간만큼 학습할 수 있는 자료들이 쌓여있기 때문이다.
시간이 오래 걸리는 모바일 앱
MPA는 모바일 앱을 만들기 위해서는 SPA보다 더 많은 시간을 써서 구현해내야 한다. 이는 백앤드와 프론트앤드가 서로 단단히 연결되어 있기 때문이다. 확연한 구분이 없기에 프론트앤드부터 백앤드 부분까지 모두 코딩해야 한다.
SPA Vs. MPA
아래의 표를 통하여 SPA 와 MPA 의 장단점을 한눈에 비교해보자.
|
반응형 다자인으로 인해 모바일 앱이나 데스크탑 앱을 사용하는 느낌을 준다. 페이지상에서 무언가를 클릭 했을시 기다림 없이 즉각적인 반응이 일어난다. |
유저가 보는 화면방식이 곧 웹 크롤러(web crawler)가 보는 방식과 같다. 그로 인해 SEO에 대해 좀 더 적합하다. |
|
백앤드와 확실히 구분되기에 백앤드부분에 관해서 걱정할 필요가 없으며 서버사이드 코드를 작성할 필요가 없다. 프론트앤더만으로도 웹사이트 완성할 수 있다. |
초보자들이 제작하기에 좋은 환경을 갖고 있다. SPA 보다는 오랜 역사로 인해 튜토리얼, 해결법, 프레임워크등 다양한 자료들을 얻을 수 있다. |
|
MPA보단 SEO 에 대한 노출이 어렵다. 비동기로 렌더링 되는 페이지로 인해 구글봇과 같은 크롤러가 웹페이지의 내용을 크롤링 하기가 어려워진다. |
요청이 들어올 때마다 페이지를 새로 패치해야 하기에 페이지 로딩 시간이 발생한다. 그로인해 속도가 느려진다. 모든 페이지가 로드 될 때 까지 기다려야하기에 유저 친화적이지가 않다. |
|
JavaScript를 알지 못한다면 SPA를 구현할 수 없다. 자바스크립트에 관한 지식이 있어야만 SPA를 만들수 있다. |
프론트와 백앤드가 확연히 분리되지 않고 서로 엮여 있다. 그로인해 서버쪽 언어와 클라이언트쪽 언어가 모두 필요하다. |
아래의 걸린 링크를 통해 SPA와 MPA의 차이를 비교해 보자.
SPA를 사용하는 웹사이트 : React
MPA를 사용하는 웹사이트 : The New York Times
Reference