SPA(Single Page Application)란 무엇인가? 개념부터 장단점까지
SPA는 한 번 로딩된 HTML 페이지에서 JavaScript가 필요한 부분만 바꾸며 동작하는 웹 애플리케이션이다.
이 글은 웹 개발을 배우는 입문자와 프론트엔드 개념을 처음 접하는 분들을 대상으로 작성되었다. 유튜브, Gmail, 카카오맵처럼 페이지 새로고침 없이 부드럽게 동작하는 서비스들이 바로 SPA로 만들어진 대표적인 사례다.
SPA란 무엇인가?
SPA(Single Page Application, 단일 페이지 애플리케이션)는 웹 애플리케이션이 하나의 HTML 파일을 기반으로 동작하며, 사용자가 다른 페이지로 이동할 때 전체 페이지를 새로 불러오지 않는 방식이다.
전통적인 웹사이트(MPA, Multi Page Application)는 링크를 클릭할 때마다 서버에서 새 HTML 파일을 받아온다. 이는 화면이 깜빡이고, 이미 로딩된 헤더나 네비게이션도 다시 불러오는 비효율이 발생한다.
반면에 SPA는 처음 한 번 모든 JavaScript, CSS를 로딩한 뒤, 이후 페이지 전환은 JavaScript가 필요한 데이터만 API로 받아와 화면 일부만 교체한다. 따라서 부드럽고 빠른 사용자 경험을 제공한다.
SPA는 어떻게 동작하는가?
SPA의 동작 과정은 다음과 같다:
- 사용자가 웹사이트에 처음 접속한다
- 서버가 단일 HTML 파일과 JavaScript 번들을 전송한다
- 브라우저가 JavaScript를 실행하며 초기 화면을 그린다
- 사용자가 링크를 클릭하면 JavaScript 라우터가 URL을 변경한다
- 필요한 데이터만 API(주로 REST API 또는 GraphQL)로 요청한다
- 받은 데이터로 변경된 부분만 화면을 업데이트한다
이 과정에서 실제 페이지 이동은 없고, URL만 변경된다. 이를 가능하게 하는 것이 브라우저의 History API다.
SPA vs MPA 비교표
| 구분 | SPA | MPA |
|---|---|---|
| 초기 로딩 속도 | 느림 (JS 번들 로딩) | 빠름 |
| 페이지 전환 속도 | 빠름 (부분 업데이트) | 느림 (전체 로딩) |
| SEO | 추가 작업 필요 | 기본적으로 좋음 |
| 서버 부하 | 낮음 | 높음 |
| 개발 복잡도 | 높음 | 낮음 |
| 앱 같은 경험 | 우수 | 보통 |
| 대표 예시 | Gmail, Youtube, 카카오맵 | 일반 뉴스사이트, 블로그 |
SPA의 장점
-
빠른 사용자 경험 페이지 전환 시 화면 깜빡임 없이 부드럽게 전환된다. 데스크톱 앱처럼 자연스러운 동작을 구현할 수 있다.
-
서버 부하 감소 서버는 JSON 데이터만 응답하면 된다. HTML을 매번 생성해서 보낼 필요가 없어 서버 자원을 절약한다.
-
프론트엔드와 백엔드 분리 API를 중심으로 프론트엔드와 백엔드를 완전히 분리할 수 있다. 같은 API로 모바일 앱, 웹, 데스크톱 앱을 모두 지원 가능하다.
-
풍부한 인터랙션 실시간 데이터 갱신, 드래그앤드롭, 애니메이션 등 복잡한 인터랙션 구현에 유리하다.
SPA의 단점
-
SEO 문제 Google 등 검색엔진 크롤러는 JavaScript 실행을 제대로 못할 수 있다. 초기 HTML에 콘텐츠가 없어 검색 노출이 어렵다. 이를 해결하기 위해 SSR(서버 사이드 렌더링)이나 SSG(정적 사이트 생성)를 사용한다.
-
초기 로딩 시간 모든 JavaScript 번들을 한 번에 다운로드해야 한다. 코드 스플리팅(Code Splitting)으로 개선 가능하지만 초기 세팅이 필요하다.
-
보안 취약점 관리 클라이언트 측에서 많은 로직이 실행되므로 XSS(크로스 사이트 스크립팅) 등 보안 취약점에 주의해야 한다.
대표적인 SPA 프레임워크
2025년 기준 가장 많이 사용되는 SPA 프레임워크는 다음과 같다:
- React: Meta(Facebook)가 만든 UI 라이브러리. 가장 높은 점유율(Stack Overflow 2025 기준 40.6%)
- Vue.js: 학습 곡선이 낮고 한국 기업에서도 많이 사용
- Angular: Google이 만든 완성형 프레임워크. 대규모 엔터프라이즈에 적합
- Svelte: 컴파일 타임에 처리하여 빠른 성능을 제공하는 신흥 강자
SPA와 SSR/SSG의 결합
순수 SPA의 SEO 문제를 해결하기 위해 Next.js(React), Nuxt(Vue) 같은 프레임워크는 SSR과 SPA를 결합한다. 첫 페이지는 서버에서 HTML을 완성하여 보내고(SSR), 이후 페이지 전환은 SPA 방식으로 동작한다. 이를 하이브리드 렌더링이라 부른다.
따라서 현재 대부분의 프로덕션 환경에서는 순수 SPA보다 Next.js, Nuxt 같은 하이브리드 방식을 더 선호한다.
자주 묻는 질문 (FAQ)
Q1. SPA와 앱(App)은 같은 건가요? A. SPA는 웹 브라우저에서 동작하는 웹 애플리케이션이다. 네이티브 앱(iOS, Android)과는 다르지만, SPA는 앱처럼 부드러운 UX를 제공하도록 설계된다.
Q2. SPA를 쓰면 SEO가 아예 안 되나요? A. 구글은 점차 JavaScript를 실행하여 크롤링하지만, SSR이나 SSG와 결합하면 SEO 문제를 해결할 수 있다. 현재는 Next.js 등 하이브리드 방식이 표준으로 자리잡았다.
Q3. 블로그나 쇼핑몰도 SPA로 만들어야 하나요? A. 콘텐츠가 많고 SEO가 중요한 블로그나 쇼핑몰은 SSR/SSG가 포함된 하이브리드 방식이 더 적합하다. 순수 SPA는 SEO가 중요하지 않은 내부 관리자 대시보드, B2B 서비스에 적합하다.
Q4. React로 만든 모든 앱이 SPA인가요? A. Create React App으로 만든 기본 React 앱은 SPA다. 그러나 Next.js를 사용하면 SSR, SSG, ISR 등 다양한 렌더링 방식을 선택할 수 있다.
Q5. SPA의 초기 로딩 속도를 개선하는 방법은 무엇인가요? A. 코드 스플리팅(Code Splitting), 레이지 로딩(Lazy Loading), 이미지 최적화, CDN 사용 등으로 개선할 수 있다. Next.js는 이러한 최적화를 자동으로 처리해준다.