MPA vs SPA: 웹 개발의 패러다임 변화

들어가며

웹 개발의 역사를 살펴보면, 사용자 경험을 개선하고 성능을 향상시키기 위한 끊임없는 노력이 있었습니다. 그 중심에는 MPA(Multi-Page Application)에서 SPA(Single-Page Application)로의 패러다임 변화가 있습니다. 이 글에서는 웹의 역사적 맥락과 함께 MPA와 SPA의 개념, 작동방식, 장단점을 살펴보고 비교해 보려고합니다.

웹의 역사와 MPA, SPA의 등장

초기 웹의 모습 (1990년대)

웹의 초기 형태는 매우 단순했습니다. 팀 버너스리가 개발한 월드 와이드 웹은 정적인 HTML 문서들을 링크로 연결한 형태였습니다. 사용자가 링크를 클릭하면 서버에서 새로운 HTML 페이지를 받아와 전체 페이지를 새로고침하는 방식이었죠.

동적 웹의 발전 (2000년대 초)

PHP, ASP, JSP 등의 서버 사이드 기술이 발달하면서 동적인 웹 페이지 생성이 가능해졌습니다. 하지만 여전히 페이지 이동 시마다 전체 페이지를 새로고침해야 했고, 이는 사용자 경험 측면에서 한계가 있었습니다.

AJAX의 등장과 SPA의 시작 (2005년)

2005년 Jesse James Garrett이 'AJAX'라는 용어를 처음 사용하면서 웹 개발에 혁명이 일어났습니다. AJAX(Asynchronous JavaScript and XML)를 통해 페이지 새로고침 없이 서버와 데이터를 주고받을 수 있게 되었고, 이는 SPA의 토대가 되었습니다.

모던 SPA 프레임워크의 등장 (2010년대)

AngularJS(2010), React(2013), Vue.js(2014) 등의 프레임워크가 등장하면서 SPA 개발이 본격화되었습니다. 이들 프레임워크는 컴포넌트 기반 개발과 가상 DOM 등의 개념을 도입하여 복잡한 SPA를 효율적으로 개발할 수 있게 해주었습니다.

MPA (Multi-Page Application)

개념

MPA는 여러 개의 HTML 페이지로 구성된 전통적인 웹 애플리케이션 아키텍처입니다. 각 페이지는 고유한 URL을 가지며, 사용자가 다른 페이지로 이동할 때마다 서버에서 새로운 HTML 문서를 받아와 브라우저에 렌더링합니다.

작동방식

1. 사용자가 링크를 클릭하거나 URL을 입력
2. 브라우저가 서버에 해당 페이지 요청
3. 서버가 완전한 HTML 페이지를 생성하여 응답
4. 브라우저가 새로운 페이지를 로드하고 렌더링
5. 페이지 전체가 새로고침됨

장점

• SEO 친화적: 각 페이지가 독립적인 HTML을 가지므로 검색 엔진이 쉽게 크롤링하고 인덱싱할 수 있습니다.
• 초기 로딩 속도: 필요한 페이지만 로드하므로 초기 로딩이 빠릅니다.
• 브라우저 호환성: 모든 브라우저에서 기본적으로 지원됩니다.
• 개발 복잡성 낮음: 전통적인 웹 개발 방식으로 비교적 단순합니다.
• 메모리 사용량: 각 페이지가 독립적이므로 메모리 사용량이 적습니다.

단점

• 사용자 경험: 페이지 이동 시 전체 새로고침으로 인한 깜빡임과 로딩 시간
• 서버 부하: 매번 전체 페이지를 생성해야 하므로 서버 부하가 큼
• 중복 리소스: 공통 리소스(CSS, JS)를 매번 다시 로드
• 상태 관리: 페이지 간 상태 공유가 어려움

예시

• 전통적인 기업 웹사이트
• 블로그 사이트
• 뉴스 사이트
• 전자상거래 사이트 (Amazon, 네이버 쇼핑 등)
• 정부 기관 웹사이트

SPA (Single-Page Application)

개념

SPA는 하나의 HTML 페이지에서 JavaScript를 통해 동적으로 콘텐츠를 변경하는 웹 애플리케이션 아키텍처입니다. 페이지 이동 시 전체 페이지를 새로고침하지 않고, 필요한 부분만 업데이트하여 네이티브 앱과 유사한 사용자 경험을 제공합니다.

작동방식

1. 초기 로딩 시 전체 애플리케이션 파일 다운로드
2. 사용자 인터랙션 발생
3. JavaScript가 라우팅 처리
4. 필요한 데이터만 AJAX/Fetch API로 서버에서 받아옴
5. DOM을 동적으로 업데이트
6. 브라우저 히스토리 API로 URL 변경

장점

• 뛰어난 사용자 경험: 페이지 새로고침 없이 부드러운 전환
• 빠른 인터랙션: 필요한 데이터만 로드하므로 반응 속도가 빠름
• 오프라인 지원: 서비스 워커와 함께 사용하면 오프라인 기능 구현 가능
• 모바일 친화적: 네이티브 앱과 유사한 경험 제공
• 서버 부하 감소: 데이터만 주고받으므로 서버 부하가 적음

단점

• 초기 로딩 시간: 전체 애플리케이션을 한 번에 로드하므로 초기 로딩이 느림
• SEO 어려움: 동적으로 생성되는 콘텐츠는 검색 엔진이 인덱싱하기 어려움
• 브라우저 호환성: 구형 브라우저에서 지원하지 않을 수 있음
• 개발 복잡성: 상태 관리, 라우팅 등이 복잡함
• 메모리 사용량: 애플리케이션이 계속 실행되므로 메모리 사용량이 많음

예시

• Gmail, Google Maps
• Facebook, Twitter
• Netflix, YouTube
• Slack, Discord
• Notion, Figma
• React, Vue.js, Angular로 개발된 대부분의 모던 웹앱

MPA vs SPA 비교

성능 측면

초기 로딩 속도

• MPA: 필요한 페이지만 로드하므로 빠름
• SPA: 전체 애플리케이션을 로드하므로 느림

후속 페이지 로딩

• MPA: 매번 전체 페이지를 새로 로드하므로 느림
• SPA: 필요한 데이터만 로드하므로 빠름

사용자 경험

페이지 전환

• MPA: 페이지 새로고침으로 인한 깜빡임
• SPA: 부드러운 전환 효과

반응성

• MPA: 서버 응답 시간에 의존
• SPA: 즉각적인 UI 반응

개발 측면

개발 복잡성

• MPA: 상대적으로 단순
• SPA: 상태 관리, 라우팅 등으로 복잡

유지보수

• MPA: 페이지별로 독립적이므로 관리가 용이
• SPA: 전체적인 아키텍처 이해 필요

SEO 및 접근성

검색 엔진 최적화

• MPA: 각 페이지가 독립적인 HTML을 가져 SEO에 유리
• SPA: 서버 사이드 렌더링(SSR) 없이는 SEO에 불리

브라우저 호환성

• MPA: 모든 브라우저에서 지원
• SPA: 최신 브라우저에서 최적화됨

사용 사례별 추천

MPA가 적합한 경우

• SEO가 중요한 정보성 웹사이트
• 단순한 기업 웹사이트나 블로그
• 서버 리소스가 제한적인 경우
• 다양한 브라우저 지원이 필요한 경우

SPA가 적합한 경우

• 사용자 인터랙션이 많은 웹 애플리케이션
• 실시간 데이터 업데이트가 필요한 경우
• 모바일 친화적인 경험이 중요한 경우
• 오프라인 기능이 필요한 경우

하이브리드 접근법

최근에는 MPA와 SPA의 장점을 결합한 하이브리드 접근법들이 등장하고 있습니다.

SSR (Server-Side Rendering)

• Next.js, Nuxt.js 등의 프레임워크
• 초기 로딩은 서버에서 렌더링하고, 이후 클라이언트에서 SPA로 동작

SSG (Static Site Generation)

• Gatsby, Gridsome 등의 프레임워크
• 빌드 시점에 정적 HTML 생성하여 SEO와 성능 모두 확보

Islands Architecture

• Astro, Fresh 등의 프레임워크
• 필요한 부분만 JavaScript로 hydration

위에서처럼 MPA와 SPA는 각각의 장단점을 가지고 있으며, 프로젝트의 요구사항에 따라 적절한 선택이 필요합니다. 최근에는 두 접근법의 장점을 결합한 하이브리드 솔루션들이 등장하면서, 개발자들에게 더 많은 선택지를 제공하고 있습니다.