현대 웹 개발에서 가장 흔히 사용되는 웹 애플리케이션 아키텍처 중 하나가 바로 SPA(Single Page Application)입니다.
React, Vue, Angular 같은 프레임워크를 사용한다면 이미 SPA를 사용하고 있을 가능성이 높습니다.

 

SPA란 무엇인가?

SPA는 하나의 HTML 페이지에서 모든 콘텐츠를 렌더링하는 웹 애플리케이션입니다.
초기 페이지 로딩 이후, 서버로부터 전체 페이지를 새로 받아오지 않고, JavaScript를 통해 필요한 데이터만 비동기로 가져와서 화면을 갱신합니다.

즉, 페이지 간 이동이 있더라도 실제로는 브라우저는 새로고침하지 않으며,
내부적으로 DOM만 바뀌고 URL만 변경됩니다 (히스토리 API 활용).

SPA의 동작 원리

SPA는 브라우저에서 실행되는 JavaScript 어플리케이션이 중심이 됩니다.
아래는 SPA의 주요 동작 흐름입니다.

초기 로딩

  • 클라이언트는 서버로부터 index.html, CSS, JavaScript 번들 파일을 한 번에 가져옵니다.
  • 이때 서버는 전체 HTML 페이지를 렌더링하지 않고, 빈 껍데기만 보냅니다.

JavaScript 실행

  • 메인 JavaScript가 실행되면서, 라우팅 시스템과 상태 관리, 렌더링 엔진이 작동합니다.
  • React, Vue 등은 이때 DOM을 조작해 첫 화면을 그립니다.

라우팅 (페이지 전환)

  • 사용자가 다른 페이지(예: /about)로 이동할 때, 브라우저는 새 요청을 보내지 않고, JavaScript가 URL을 감지해 알맞은 컴포넌트를 렌더링합니다.
  • 필요한 데이터(API 요청 등)는 비동기적으로 가져옵니다.
  • 이때 URL은 pushState() 등의 히스토리 API로 조작됩니다.

동적 렌더링

  • 다시 서버로부터 HTML을 가져오지 않고, 필요한 데이터만 받아 부분 렌더링을 수행합니다.

이로 인해 사용자는 마치 앱을 사용하는 것처럼 빠르고 부드러운 UX를 경험할 수 있습니다.

SPA의 장점

장점 설명
사용자 경험 향상 페이지 새로고침 없이 부드러운 전환 가능
빠른 속도 초기 로딩 후에는 서버와의 통신이 최소화되어 반응속도 향상
클라이언트 중심 아키텍처 서버는 API만 제공하고, UI는 클라이언트에서 처리
모바일 앱과 유사한 구조 사용자 경험이 네이티브 앱과 유사함
상태 관리 용이 Redux, Zustand 등의 도구와 결합 시 더 구조적인 앱 개발 가능

 

SPA의 단점

단점 설명
초기 로딩이 느릴 수 있음 JavaScript 번들, 라이브러리 등을 한 번에 받아야 함
SEO(검색 엔진 최적화)에 불리 기본적으로 콘텐츠가 JavaScript로 렌더링되어 검색 엔진이 읽기 어려움
브라우저 지원 이슈 JavaScript 비활성화된 브라우저에서는 동작하지 않음
보안 문제 클라이언트가 많은 로직을 가지므로 보안상 위험 요소 존재
복잡한 상태 관리 대규모 앱에서는 상태 공유, 동기화 등이 어려워짐
히스토리 조작 이슈 브라우저의 앞으로 가기/뒤로 가기 기능과 잘 동작하게 하려면 추가 작업 필요

 

SPA vs MPA (Multi Page Application)

구분 SPA MPA
페이지 로딩 방식 한 번 로딩 후 내부적으로 렌더링 각 페이지마다 새로 HTML 요청
성능 초기 로딩 느림, 이후 빠름 초기 빠름, 이후 페이지 간 이동마다 느림
SEO 기본적으로 불리 검색 엔진 친화적
기술 스택 React, Vue, Angular 등 프론트 중심 전통적인 서버 사이드 렌더링 기반 (JSP, PHP 등)
UX 부드러운 앱 같은 경험 페이지 간 이동 시 로딩 발생
구현 복잡도 상태 관리, 라우팅 등 별도 구현 필요 구조가 단순한 경우도 많음

 

정리

SPA는 현대 웹 개발의 중심적인 방식이며, “어떻게 사용자에게 더 나은 경험을 제공할 것인가”를 고민한 결과입니다.
앱처럼 빠르고 부드러운 사용자 경험을 제공하며, React, Vue, Angular 같은 프레임워크의 기본 구조입니다.

하지만 SEO, 초기 성능, 상태 관리의 복잡성이라는 약점을 갖고 있어
SSR(Server-Side Rendering), Hydration, 코드 스플리팅 등의 보완 기술과 함께 사용하는 경우가 많습니다.


기술의 선택은 프로젝트의 특성과 요구에 따라 달라져야 하며, SPA 역시 그 자체로 정답이 아닌 여러 옵션 중 하나일 뿐입니다.

728x90

티스토리툴바