단일 페이지 애플리케이션 vs 멀티 페이지 애플리케이션
웹 애플리케이션이 나온지 한참 지났다. 그 시간동안 웹은 사용하기도 편해졌고, 업데이트 하기도 쉽고, 한 기기에 고정되어있지도 않다. 뿐만아니라 사용자는 점차 브라우저 기반의 웹 애플리케이션에서 모바일 환경으로 이동하고 있다. 모바일 환경에서도 데스크탑에서 볼 수 있는 복잡하고, 멋있는 앱을 만들어달라는 요구사항은 이미 예전부터 나오고 있는 상황이다.
이러한 웹 애플리케이션을 개발하려고 할때 Single-page application (SPA) 과 Multi-page application (MPA)를 듣게 될것이다. 두 모델 모두 뚜렷한 특징과 장단점을 갖고있다.
이 두가지중 선택하기 전에 생각해볼 것들이 있다.
애플리케이션에서 어떤 컨텐츠를 다루고, 사용자에게 어떻게 보여지길 원하는가?
이 질문에 답하기 전에 Content-First 관점에서 생각해볼 필요가 있다. Content-First란 애플리케이션에서 제공하려는 컨텐츠를 중점적으로 생각하는것이다.뭔가 거창한걸줄 알았는데 그냥 컨텐츠가 뭔지부터 생각하는것
어떤 컨텐츠를 보여주고 싶은지,그리고 사용자는 어떤 컨텐츠를 사용하게 될건인가?
즉, 컨텐츠가 어떻게 보이고, 사용자가 어떻게 다루기를 원하는가?
이 질문에 답하기 전에 SPA와 MPA를 살펴보자.
SPA와 MPA에는 뚜렷한 특징과 장단점이 있다. 두개의 디자인 패턴의 차이점이 분명하고, 구현하려는 애플리케이션에 딱 맞는 종류의 것을 선택할 수 있길 바란다.
Single-Page Application (SPA))
Single-page application은 브라우져 내부에서 동작하는 앱이다. 그리고 사용하는동안 page의 전환을 요구하지 않는다. 아마 이런 종류의 애플리케이션을 매일 사용하고 있다. 예를들면, Gmail, Google Maps, Facebook 또는 Github 같은것들이 그 예이다.
SPA는 브라우저환경에서 자연스럽게 UX를 제공하려고 노력한다. 페이지의 전환이 없고, 기다릴 필요가 없는것처럼…
이러한 것을 가능하게 하는것은 Javascript이다. Javascript를 사용해서 다른 컨텐츠를 로딩하는 하나의 웹 페이지이다.
SPA는 마크업과 데이터를 요청하고, 브라우저에 페이지를 바로 그린다. 이런것들을 가능하게 해주는 Framework들이 바로 AngularJs나 Ember.js, Meteor.js, Knockout.js 같은 것들이다.
싱글 페이지 사이트들은 유저가 편한하게 컨텐츠를 볼 수 있는 웹공간에 있을 수 있도록 도와준다.
### SPA의 장점
SPA는 빠르다. 대부분의 리소스 (HTML, CSS, Script)를 애플리케이션에 들어오는 시점에 딱 한번 로딩한다. 데이터는 나중에 물러온다.
개발은 단순해지고, 간결해진다. 서버에서 페이지를 렌더링하는 코드를 짤 필요가 없다. 서버에서 파일을 요청하는것 없이도 화면개발을 훨씬 더 쉽게 할 수 있다.
SPA는 크롬을 사용해서 쉽게 디버깅할 수 있고, 네트워크 상황을 모니터링하거나, 페이지 요소검사를 하거나, 데이터를 확인할 수 있다. 개발자가 웹 애플리케이션과 모바일 애플리케이션 서버를 같이 사용할 수 있어서 백앤드를 줄일 수 있다. 또한 local storage를 효율적으로 사용할 수 있다. 애플리케이션은 오직 하나의 요청을 보내고, 모든 데이터를 저장한다. 즉, 데이터와 작업들을 오프라인에서도 가능하게 해준다.
SPA의 단점
SPA는 데이터를 AJAX로 로딩되기 때문에 SEO 최적화하기 쉽지않고 까다롭다. 페이지를 전환하지 않고 애플리케이션에서 데이터를 바꾸거나, 업데이트하기 때문이다.
이부분은 Server side randering 해서 처리하면 쉽게 할수있다곤 한다. 자세한 내용은 나중에 찾아봐야겠다.
그리고 무거운 클라이언트측 프레임워크를 요구하기 때문에 다운로드 받는게 느리다. 또한 Javascript가 보여지고, 사용되기를 요구한다. 즉, 만약에 사용자가 브라우저에서 Javascript가 사용되지 않도록 설정한다면, 애플리케이션에서 아무것도 안보이고, 동작하지 않을것이다.
해결방법으로는
Server side rendering이나isomorphic rendering을 사용하면 해결할 수 있다.고 한다…서버에서 초기 렌더링할때 캐싱할 수 있지만 이경우 JS를 사용할 수 없기때문에 페이지를 그리는데 영향을 끼칠 수 있다.
전통적으로 그게 맞는 방법이다. 확실히 이부분은 서버렌더링 하는게 맞다. 하지만 JS 부족은 다른기능에 영향을 끼칠 수 있다. HTML과 CSS에서 많은걸 할 수 있지만, 경험상 Javascript를 사용하지 않는것은 지옥이 될꺼다…
MPA과 비교하면 SPA는 보안에 상대적으로 취약한 부분이 있다. Cross-Site Scripting (XSS) 때문에, 다른 사용자가 Client-side script에 코드를 넣어 공격을 할 수 있기 떄문이다.
MPA
Multiple-page applications는 전통적인 방식으로 동작하는 것 입니다. 브라우저에서 데이터를 보여주거나 데이터를 서버에게 전달할때마다 화면이 전환된다. 이런 애플리케이션은 SPA보다 크다. 컨텐츠의 양이 크기때문에 그런 애플리케이션들은 UI레벨에서 많다?
운좋게도, 이건 별로 큰 문제가 아니긴 하다. AJAX 덕분에 우리는 크고 복잡한 애플리케이션이 서버와 브라우저 사이에서 많은 데이터가 오가는것을들 걱정하지 않아도 된다. 이 해결방법은 애플리케이션의 일부분만 새로고침하는걸 가능하게 한다. 반면에 MPA는 더 복잡하고, 더 어렵긴 하다.
MPA의 장점
MPA는 애플리케이션에서 어딘가를 가는 지도가 필요한 사람들에게는 최적의 접근방법이다. 몇단계의 Navigation 메뉴는 전통적인 MPA 애플리케이션의 최적화된 부분중에 하나이다.
그리고 SEO 관리하는게 쉽고 매우 좋다. 한 키워드에 대해 최적화된 애플리케이션 덕분에 Page Rank가 더 좋아질것이다.
MPA의 단점:
모바일 애플리케이션 개발시에 웹 앱플리케이션이 사용하는 백엔드와 공유하기 힘들다.
MPA는 프론트앤드와 백앤드 사이에 연결이 느슨하지 않다. 따라서 다른 프론트앤드와 결합하려고 할 때 해야하는 작업이 많아진다.
또한 클라이언트 측과 서버측 프레임워크가 각각 필요하여 개발시간이 길어진다.
그치만 경험상 어처피 시간은 동일하게 걸렸던것같은….. 내가 잘못했던거겠지ㅠㅠㅠ
SPA or MPA?
Web 애플리케이션을 배포하기 전에 애플이케이션의 목표가 무엇인지 생각할 필요가 있다.
- 만약에 온라인 쇼핑몰이나, 다른 많은 컨텐츠들을 제공하는 애플리케이션이 필요하다면 MPA를 선택하는것이 좋다.
- 만약에 SPA가 더 적절하다고 생각되면 그렇게 해도 된다.
- 만약에 SPA를 좋아하지만 SPA에 맞지 않는 상황이라면 hybrid도 생각해볼 수 있다.
Hybrid는 SPA와 MPA의 장점들을 잘 살리고 단점을 서로 보완하는 방법이다. 잘사용하면 가장 좋은 방법이 될것이다. 물론 잘 사용하는 경우에 말이다.
아마 나중엔 대부분의 웹 애플리케이션이 SPA가 주는 많은 장점들 때문에 SPA를 사용하고 있을것으로 예상된다. 현재 많은 앱들이 SPA로 전환을 하고 있다. 하지만 몇몇 프로젝트에선 무조건 SPA에 맞는것이 아니다. 여전히 MPA이 더 적절한 프로젝트도 있다.
따라서 제공하려는 애플리케이션의 컨텐츠가 무엇인지 보고, 해당 컨텐츠를 전달하기 위해 가장 좋은 구조가 무엇인지를 생각해보고 결정하도록 하자.
결론
요약하자면 SPA은 처음 데이터를 불러올땐 느리다. 하지만 이후에는 빠르다. 개발이 편하다 모바일까지 개발하는데 좀더 이득이 있다.
MPA은 전통적인 방법으로 SEO가 좋다. 기존 개발 방식이기 때문에 정보가 많다(?)
개발하는데 시간이 초큼 오래걸릴 수 있다.
결국엔 뭘 선택하든 어떻게 컨텐츠를 전달할지 잘 판단해서 구조를 가져가자.
끗.