개발 여행자, 현

SPA, MPA, PWA… 웹 아키텍처 본문

CS/웹

SPA, MPA, PWA… 웹 아키텍처

예스현 2025. 4. 26. 16:57

1. 웹 아키텍처, 어디까지 왔나

웹은 정적인 HTML에서 시작해, 이제는 앱처럼 동작하는 복잡한 시스템으로 진화했다. 이 과정에서 다양한 아키텍처가 등장했고, 각각의 방식은 시대적 요구와 기술 환경에 따라 선택되었다. 이 글에서는 현재 주목받는 SPA, MPA, PWA를 중심으로 어떤 아키텍처가 앞으로 주류가 될지 살펴본다.

2. SPA: 앱 같은 웹

SPA는 한 번의 페이지 로딩 이후, 필요한 데이터만 비동기적으로 불러와 화면을 갱신.
대표적인 기술은 React, Vue, Angular 등이 있으며, UX 측면에서 빠른 반응성과 모바일 친화적인 구조로 주목받고 있다.

  • 장점: 빠른 전환, 모바일 친화적
  • 단점: 초기 로딩 느림, SEO 이슈
  • 대표 사례: Gmail, Facebook, Twitter

3. MPA: 전통의 재조명

MPA는 전통적인 방식으로, 요청할 때마다 새로운 HTML 페이지를 로딩한다.
서버 사이드 렌더링이 기본이기 때문에 SEO에 강하고, 초기 로딩이 빠르다는 점에서 최근 다시 주목받고 있다.

  • 장점: SEO 최적화, 초기 속도 빠름
  • 단점: 페이지 간 전환 느림, 복잡한 상태 관리
  • 대표 사례: 쇼핑몰, 뉴스 사이트 등 콘텐츠 중심 사이트

 

4. PWA: 웹이 앱을 닮아간다

웹앱인데 앱처럼 동작.
오프라인, 푸시 알림, 홈 화면 설치까지 가능.

  • 설치 없이 앱 UX
  • 오프라인 동작
  • 브라우저 호환성 이슈
  • 구현 복잡

5. SPA + SSR, JAMstack: 조합의 시대

SPA의 단점을 보완하기 위해 SSR, SSG가 결합됨.
Next.js, Nuxt.js 등은 이런 흐름의 대표주자.

  • SSR: SEO + 초기 로딩 개선
  • SSG: 빠른 정적 배포
  • JAMstack: Headless CMS + CDN

6. 트렌드와 전망

앞으로는 하나의 방식이 아닌, 목적에 따라 조합형이 대세.

  • 콘텐츠 중심 → MPA or JAMstack
  • 인터랙션 중심 → SPA + SSR
  • 앱 경험 강조 → PWA
  • 하이브리드 → 대부분의 실무

7. 결론: 목적이 방향을 정한다

기술의 우열은 없다.
중요한 건 "무엇을 만들 것인가".
아키텍처는 도구일 뿐, 정답은 없다.