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

728x90

SPA(Single Page Application) 

전통적인 웹 애플리케이션은 사용자가 페이지를 이동할 때마다 서버로부터 새로운 HTML 문서를 받아와 전체 페이지를 새로 고침하는 방식으로 작동합니다. 하지만 이 방식은 사용자 경험 측면에서 다소 불편할 수 있습니다. 예를 들어, 페이지 전환 시마다 깜빡이거나, 동일한 레이아웃을 반복적으로 불러오는 비효율성이 존재합니다. 이를 해결하기 위해 등장한 것이 SPA(Single Page Application) 아키텍처입니다.

SPA는 애플리케이션의 최초 로드 시 하나의 HTML 파일을 불러옵니다. 이후에는 사용자 상호작용에 따라 필요한 데이터만 비동기적으로 로딩하여 동적으로 뷰를 갱신합니다. 이로 인해 페이지 간 전환이 빠르고 부드럽게 이루어져, 네이티브 앱에 가까운 사용자 경험을 제공합니다. 또한 클라이언트 사이드 라우팅을 통해 URL 변경 없이 콘텐츠를 동적으로 바꾸는 등의 다양한 기술적 장점도 함께 제공합니다.

---

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] 웹앱을 앱처럼 만드는 기술

 

---