[SPA] 하나의 HTML로 모든 페이지를 만든다?

SPA(Single Page Application) 

SPA(Single Page Application)는 사용자 경험을 향상시키기 위해 현대 웹 개발에서 널리 사용되는 아키텍처입니다. 이 글에서는 SPA의 개념, 동작 방식, 전통적인 MPA(Multi Page Application)와의 차이점, 구현 기술, 장단점, 그리고 실제 프레임워크 예시까지 깊이 있게 다루겠습니다. 프론트엔드 개발을 본격적으로 시작하는 분들께 필수적인 개념입니다.

 

---

1.  SPA란 무엇인가?

SPA(Single Page Application)는 이름 그대로 하나의 HTML 페이지로 구성된 웹 애플리케이션입니다. 사용자가 페이지를 이동할 때마다 전체 페이지를 새로 불러오는 것이 아니라, 필요한 데이터만 가져와서 동적으로 페이지의 일부를 갱신합니다.

이는 빠른 반응성과 부드러운 사용자 경험을 가능하게 하며, 자바스크립트가 중요한 역할을 합니다.

SPA의 장점

• 빠른 전환 속도 : 서버 요청 없이 클라이언트 내에서 뷰 전환 가능
• 유려한 사용자 경험 : 앱처럼 자연스러운 화면 이동
• 프론트엔드-백엔드 분리 : API 중심 구조로 확장성 용이

SPA의 단점 및 해결 방안

단점	해결 방법
초기 로딩 속도 느림	코드 스플리팅, Lazy Loading
SEO 최적화 어려움	SSR(Server-Side Rendering), Prerendering
브라우저 히스토리 관리 복잡함	React Router, Vue Router 등의 라이브러리 사용
JS가 없으면 기능 대부분 동작 안함	Progressive Enhancement 설계 고려

MPA와 SPA는 무엇이 다른가?

항목	MPA (Multi Page Application)	SPA (Single Page Application)
페이지 구조	여러 개의 HTML 페이지	하나의 HTML 페이지
페이지 이동	서버로부터 새 HTML 요청	클라이언트 측 라우팅으로 화면만 변경
초기 로딩 속도	빠름	느릴 수 있음 (초기 자바스크립트 번들 크기 큼)
SEO 최적화	상대적으로 쉬움	추가 설정 필요 (SSR, Prerendering 등)
개발 난이도	비교적 단순	상태 관리, 라우팅, 렌더링 최적화 등 고려사항 많음

 

---

2.  SPA의 작동 원리

SPA의 핵심은 AJAX(비동기 요청)과 클라이언트 사이드 라우팅입니다.

a.  초기 페이지 로딩

• 서버에서 하나의 index.html 과 필요한 JS/CSS 번들 파일을 전송합니다.

b.  클라이언트 사이드 라우팅

• URL이 바뀌어도 전체 페이지를 새로고침하지 않고, History API(pushState, replaceState) 등을 사용해 브라우저 주소만 바꾼 후, 해당 경로에 맞는 컴포넌트를 렌더링합니다.

c.  데이터 갱신

• 필요한 데이터는 fetch 또는 axios 등의 AJAX 방식으로 백엔드에서 비동기로 가져오며, 전체 화면을 다시 로딩하지 않습니다.

 

---

3.  예시 - React로 간단한 SPA 만들기

import { useState } from 'react';

function App() {
  const [page, setPage] = useState('home');

  const renderPage = () => {
    switch (page) {
      case 'home':
        return <h2>홈 페이지</h2>;
      case 'about':
        return <h2>소개 페이지</h2>;
      default:
        return <h2>404 - 페이지를 찾을 수 없습니다.</h2>;
    }
  };

  return (
    <div>
      <nav>
        <button onClick={() => setPage('home')}>홈</button>
        <button onClick={() => setPage('about')}>소개</button>
      </nav>
      <main>{renderPage()}</main>
    </div>
  );
}

• 실제 개발에서는 React Router 같은 라이브러리를 사용해 더 복잡한 라우팅 처리를 합니다.

 

---

4.  SPA 관련 주요 기술

• React, Vue, Angular : SPA 개발을 위한 대표 프레임워크
• React Router / Vue Router : 클라이언트 라우팅 처리
• Redux, Zustand, Vuex : 상태 관리
• Vite, Webpack : 번들링 및 빌드 도구

 

---

5.  마무리

SPA는 웹 애플리케이션을 좀 더 앱처럼 만들기 위한 현대적인 설계 방식입니다. 클라이언트에서 모든 화면 전환과 데이터 처리를 담당함으로써, 빠르고 부드러운 사용자 경험을 제공합니다. 단, SEO와 초기 로딩, 상태 관리 등의 과제를 함께 고려해야 하며, React나 Vue 같은 프레임워크와 함께 사용하는 것이 일반적입니다.

같이 보면 좋은 자료

블로그 글 : 

[웹앱] 웹 애플리케이션의 개념과 특징

[PWA] 웹앱을 앱처럼 만드는 기술

 

---