yngmanie 블로그

SPA란?

• • •

10 Apr 2019

해당 포스트는 Single-page application vs. multiple-page application를 번역하여 작성하였습니다. 잘못된 부분이 있다면 댓글 부탁드립니다.

웹 어플리케이션은 데스트탑 어플리케이션을 무의식적으로 대체하고 있습니다. 그들은 사용하기 편하고 업데이트가 용이하며 하나의 디바이스에 묶여있지 않습니다. 그리고 유저가 브라으저기반 웹 어플리케이션에서 모바일로 옮겨가고 있어도 복잡하고 세련된 어플리케이션에 대한 니즈는 점점 더 커지고 있습니다. 만약 어플리케이션에 대해 관심이 많았더라면 2가지 웹 어플리케이션 형태에 대해서 들어보셨을 겁니다. 그것은 multi-page application(이하 MPA)와 single-page-application(이하 SPA)이고 이 둘은 장단점 모두를 가지고 있습니다.

당신의 아이디어를 실제 어플리케이션에 적용하기 전에 중요한 이슈에 대해서 답을 정해야 합니다. 어떤 어플리케이션 모델이 좋은지 결정하기 위해서는 content-first 접근법을 따라야합니다. 이것은 무엇보다도 컨텐츠를 가장 우선시하는 기법입니다. 왜냐하면 어떤 컨텐츠냐에 따라 어플리케이션을 이용할지 말지를 결정하기 때문입니다.

MPA와 SPA에 대한 장단점은 많이 있습니다. 이 글을 통해 2가지 패턴에대한 차이점과 만들려고하는 어플리케이션에 어떤 모델이 적합한지를 판단할 수 있었으면 좋겠습니다.

SPA

SPA는 브러우저안에서 동작하는 앱으로 사용중에 새로운 페이지를 요청하지 않습니다. Gmail, Google Maps, Facebook, Github가 SPA 모델의 어플리케이션입니다. SPA는 브라우저에서 자연스러운 환경을 제공하기위해 노력하면서 뛰어난 UX를 제공합니다. 페이지 리로드가 업고, 응답을 기다리면서 낭비되는 시간이 없습니다. SPA는 하나의 페이지이며 홈페이지에 방문했을때 자바스크립트를 이용해 모든 컨텐츠를 로드합니다.

SPA는 독립적으로 마크업과 데이터를 요청하고 브라우저에서 바로 페이지를 랜더링합니다. 이는 AngularJS, Ember.js, Meteor.js, Knockout.js와 같이 강화된 자바스크립트 프레임워크를 이용해 가능합니다. single-page 사이트는 유저가 편안하게 웹 공간애서 컨텐츠를 쉽게 볼 수 있도록 합니다.

SPA 장점

  • SPA는 HTML, CSS, Javascript를 어플리케이션 라이프사이클에서 한번만 로드합니다. 서버와 데이터만 주고 받습니다.

  • 개발이 간편하고 간소화되었습니다. 서버에 랜더링되는 페이지를 작성할 필요가 없습니다. 이것은 서버 사용없이 file://URI를 이용함으로 개발을하는데 수월해졌습니다.

  • SPA는 크롬으로 디버깅을 하기가 쉽습니다. network operations을 통해서 모니터링이 가능하고 소스코드와 관련된 요소와 데이터를 검사할 수 있습니다.

  • 개발자가 백엔드 코드를 웹어플리케이션과 네이티브 모바일 어플리케이션에서 동일하게 사용할 수 있어 모바일 어플리케이션을 만들이 쉽습니다.

  • SPA는 모든 로컬스토리지를 효율적으로 캐시할 수 있습니다. 어플리케이션은 서번에 한번만 요청하고 모든 데이터를 저장하고 사용합니다. 그 데이터는 심지어 오프라인상태로 사용할 수 있습니다.

SPA 단점

  • SPA는 SEO 최적하는데 쉽지않습니다. SPA 컨텐츠는 AJAX를 통해 데이터교환과 업데이트를 할때 페이지 리로드없이 로드됩니다.

    2017.09.27 업데이트: Iris Shaffer는 서버 사이드에서 해결할 수 있다고 지적했으며, 이전보다 훨씬 수월해졌다고 합니다.

  • 무거운 클라이언트 프레임워크가 클라이언트 로드되어야 하기때문에 다운로드 속도가 느립니다.

  • 자바스크립트가 존재하고 활성화되어 있어야합니다. 만약 일부 사용자의 브라우저에서 자바스크립트를 사용할 수 없게 설정되어 있다면 어플리케이션을 사용할 수 없습니다.

    2017.09.27 업데이트: Iris Shaffer는 isomorphic rendering/server side rendering으로 서버에서 미리 페이지를 렌더링할 수 있다고 언급했습니다. 초기 랜더링을 서버에서 하고 캐시가 되면 자바스크립트가 비활성화되어있어서 페이지를 랜더링하는데 문제가 없습니다. 이론적으로 맞는 말이며 당신은 서버사이드에서 랜더링을 해야합니다. 하지만 자바스크립트의 부재는 다른 기능적인 문제점을 발생시킬 수 있습니다. 많은 것들이 HTML과 CSS로 구현이 가능하지만 필자 경험상으로 자바스크립트가 없으면 굉장히 어려울 수 있습니다.

  • 전통적인 어플리케이션과 비교했을 때 SPA는 보안에 취약합니다. 다른 사용자가 클라이언트 사이드 스크립트를 통해 Cross-Site Scripting(XSS)으로 공격할 수 있습니다.

  • 자바스크립트의 메모리 부족은 어플리케이션 속도를 저하시킬 수 있습니다.

MPA

MPA는 전통적인 방식입니다. 예를 들어 데이터를 표시하거나 데이터를 전달하는 것같이 모든 변화는 서버에 요청을 하고 새로운 페이지를 서버로부터 전달을 받습니다. 이런 어플리케이션은 SPA보타 크고 거대합니다. 컨텐츠의 볼륨때문에 MPA는 많은 UI레벨을 가지고 있습니다. 다행히도 지금 이부분은 큰 문제가 아닙니다. AJAX 덕분에 크고 복잡한 어플리케이션이 서버와 데이터를 주고받는것에대해 걱정할 필요가 없어졌습니다. 이 솔루션은 증가하고 있고 어플리케이션의 특정 부분만 리프레시되도록 할 수 있습니다. 반면에 복잡성은 커지고 SPA보다 개발하기 복잡합니다.

MPA 장점

  • 어플리케이션에 시각적으로 어디로 가야할지 필요한 사용자에게 완벽한 접근방법입니다. 몇몇의 네이베이션 메뉴에게 있어서 전통적인 MPA는 필수적입니다.

  • SEO 최적화에 효율적입니다. 하나의 키워드당 하나의 페이지에 최적화시킬 수 있기때문에 다른 키워드에 랭크될 수 있는 이점을 가지고 있습니다.

MPA 단점

  • 프론트엔드와 백엔드 개발이 밀접하게 연관되어 있습니다.

  • 개발이 꽤 복잡해졌습니다. 개발자는 클라이언트 사이드와 백엔드 사이드 모두 프레임워크를 사용해야합니다. 이 결과로 어플리케이션을 개발하는데 많은 시간이 소요됩니다.

관련있는 포스트