웹 개발자가 알아두면 좋은 SPA, MPA

SPA vs MPA

당신이 웹 퍼블리셔, 프론트엔드 개발자가 아니더라도 웹 개발 분야에 있다면 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 들어본 적이 있을 거다. 처음 들어본다고? 괜찮다. SPA, MPA가 무엇인지 소개할 예정이다. 들어가기 전에 앞서 선행학습으로, 지겨운 방법론 두 가지를 짚고 넘어가고자 한다.

 

2계층 구조 (2 Tier Architecture Structure)

2계층 구조

과거 대부분의 웹사이트는 2계층 구조로 개발되어있다. 2계층 구조란, 화면이 보여지는 클라이언트(Client)와 데이터베이스(DB)가 물리적으로 분리되어 있는 것을 뜻하며, 클라이언트에는 UI (User Interface)와 비즈니스 로직Business Logic이 함께 있는 구조다.

 

비교적 쉽고 빠르게 개발할 수 있고, 애플리케이션 구조가 단순하여 초기 서비스나 웹사이트들이 많이 사용하는 구조다. 다만 클라이언트 속도 문제, 비즈니스가 복잡해지거나 비대해지면 관리하기가 어려워져서 차후에 3계층, 혹은 N계층 구조로 재설계하여 리뉴얼하기도 한다.

 

3계층 구조 (3 Tier Architecture Structure)

3계층 구조

2계층 구조와 3계층 구조의 가장 큰 차이점은 클라이언트 안에 있는 비즈니스 로직이 분리된다는 점이다. 클라이언트는 프레젠테이션, 비즈니스는 애플리케이션이라고 부르기도 한다. 3계층 구조로 설계하게 되면서 클라이언트는 프론트엔드 개발자가, 비즈니스 로직은 백엔드 개발자가 담당하게 되어 역할 분담이 이루어진다.

 

가장 큰 장점으로 UI와 비즈니스 로직이 분리되어 있어 애플리케이션을 배포할 때 UI와 비즈니스 로직을 각각 배포할 수 있다는 점이다.

 

위 구조에 대한 이해를 어느정도 하고 있어야 SPA와 MPA에 대한 이해를 하기 쉬울 것이니, 뭔 말이야 하면서 스크롤을 내렸다면 한 번 읽어볼 것을 권한다.

 

 

MPA, Multi Page Application 다중 페이지 응용프로그램

MPA 작동 방식

MPA는 전통적인 웹 애플리케이션 개발 방식이다. 이러한 구조는 jsp, 혹은 php 등과 같은 웹 서버 언어로 구축된 웹사이트에서 많이 보인다. 웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면, 서버는 데이터를 HTML 문서로 웹 브라우저에 응답해준다. 이 때 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 된다.

 

이는 웹사이트를 사용하는 유저에게 좋은 사용자 경험을 제공할 수 없다. 페이지 이동 시 잠깐 깜빡이고 페이지가 나온다면 좋겠지만, 데이터가 많을 경우 화면에 다시 그려지는 동안 사용자는 그저 기다려야 하기 때문이다. 한번쯤은 다른 페이지로 넘어갔는데 흰 화면이 계속 나와서 스트레스를 받았던 경험이 있을 거다.

 

AJAX를 이용한 비동기 통신을 통해 상당 부분 해소할 수 있었지만, 근본적으로 페이지가 새로고침 된다는 문제를 해결할 수는 없었다.

 

MPA의 가장 큰 단점은 프론트엔드와 백엔드가 결합되어 있다는 점이다. 이 문제는 2계층 구조에서 비즈니스가 복잡해지거나 비대해지면 관리하기가 어려워진다라는 말과 동일하다는 것을 알 수 있다.

 

단점이 많이 부각되고 있지만 MPA의 가장 큰 장점은 SEO 친화적이다. 네이버나 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트라면, MPA 구조로 개발하는 것이 좋다.

 

SPA, Single Page Application 단일 페이지 응용 프로그램

SPA 작동 방식

MPA의 단점을 개선해줄 수 있는 것이 바로 SPA다. SPA는 하나의 HTML 파일을 가지고 나머지는 javascript를 이용해서 동적으로 화면을 구성할 수 있다. 서버는 최초 실행 시 HTML 파일을 비롯한 정적 자원을 클라이언트에 보내주며, 이후에는 데이터가 변경되는 부분만 JSON으로 보내 변경될 수 있게 한다.

 

즉, 최초 로딩 때 실행한 HTML 파일에서 변경되지 않는 부분은 그대로 두고 변경되는 부분만 다시 렌더링하여 효율적인 변경이 가능하다는 것인데, 가장 큰 장점이라고 할 수 있다. 특히 새로고침이 되지 않고 변경된다는 점에서 사용자에게 좋은 경험을 제공해줄 수 있다.

 

위 내용만 보면 MPA의 단점을 개선해주고 장점만 있는 것 같지만, 단점도 존재한다. 최초 실행 시 모든 정적 자원을 가져오기 때문에 초기 렌더링 속도가 느리고, SEO에 굉장히 취약하다.