SPA (Single Page Application)에 대하여

SPA (Single Page Application)이란

웹 기술이 계속해서 발전하고 그만큼 복잡도가 올라가는 만큼 사용자가 직접적으로 만나는 Front-end 개발이 중요해지며, SPA(Single Page Application) 프레임워크가 주목 받고 있습니다. 가 Front-end 대중적으로 사용이 되는 대표적인 프레임워크로 React, Angular, Vue가 있습니다. 이번에 웹 트렌드의 대표적인 SPA에 대하여 알아보고자 합니다. SPA란 Single Page Application의 약자입니다. 과거의 웹 페이지 같은 경우 사용자가 어떤 특정한 버튼을 클릭했을 때 서버의 동작이 필요한 상황이라면 그럴 때마다 서버에서 필요한 데이터를 받아와 처음부터 다시 완전히 새로운 페이지를 보여주었습니다. 즉, 과거의 웹 페이지에서 브라우저는 화면을 보여주는 역할만 담당했고 요청한 웹 페이지의 콘텐츠의 데이터 처리는 전부 서버에서 담당했습니다. 이러한 동작 방식은 페이지가 요청될 때마다 서버에 부하를 불러오게 되었습니다. 모바일 웹 페이지 또한 기존의 웹 페이지 방식인 MPA(Multi Page Application)이라면 사용자가 모바일에서 페이지를 이동할 때마다 페이지를 리 렌더링해야 하므로 서버에 부하가 오고 그만큼 데이터 처리량이 지연되며, 사용자 경험이 매우 떨어질 것입니다. 그러므로 모바일 산업도 발전하면서 모바일 최적화에 대한 요구사항도 커지며 단일 페이지 애플리케이션의 필요성은 대두되었습니다.

 

Single Page Application vs Multi Page Application

프로그래밍 개발에 있어서 은 총알은 없다(No Silver Bullet) 라는 말이 유명합니다. 소프트웨어 개발에 있어서 늑대인간을 단번에 해치울 수 있는 은 탄환이 없다는 말입니다. 즉 어떤 문제를 손쉽게 단번에 해결할 수 있는 어떤 해결책은 없다는 것입니다. 그러므로 프로그래밍 개발을 설계할 때 사용자가 필요로 하는 요구사항이 무엇인지 파악하고 그것에 맞게 도구들을 사용하고 설계하는 것이 필요합니다. 시대에 흐름에 따라 단일 웹페이지 애플리케이션이 나왔지만 현재에도 멀티 웹 페이지 애플리케이션은 유용합니다. 먼저 멀티 웹 페이지 애플리케이션의 장점은 SEO 관점에서 유리하다는 것입니다. 완성된 형태의 HTML 파일을 서버로부터 받는 것이 웹페이지가 복잡해지면서 단점으로 부각되면서 단일 웹페이지 애플리케이션이 나왔지만 SEO 관점에서는 검색엔진이 페이지를 크롤링하기에 적합하기 때문에 검색엔진 최적화가 쉽다는 장점이 있습니다. 또한 서버에서 이미 데이터를 렌더링해서 전달하기 때문에 첫 로딩이 매우 짧다는 장점도 있습니다. 하지만 모든 파일을 다운로드받을 때까지 동작하지 않는 단점과 앞서 말한 서버의 복잡성 증가와 부하가 있습니다. 단일 웹페이지 애플리케이션의 장단점은 멀티 애플리케이션과 각각 정반대입니다. 자연스러운 사용자 경험을 줄 수 있으며 필요한 리소스만 부분적으로 서버에서 가져올 수 있다는 장점이 있지만 초기 로딩 속도가 느리며, 검색엔진 최적화가 어렵다는 단점이 있습니다.