학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 145 · 실전 면접 답변

SPA와 MPA는 어떤 기준으로 구분하나요?

이렇게 답해 보세요 (핵심 답변)

SPA(Single Page Application)는 처음 로드된 하나의 HTML 문서를 유지한 채 클라이언트 라우팅과 데이터 교환으로 화면을 전환하는 구조이고, MPA(Multi Page Application)는 페이지 이동마다 서버로부터 새로운 HTML 문서를 받아 전체 페이지를 새로 로드하는 구조입니다. 여기서 중요한 점은 SPA·MPA는 '탐색 시 문서 교체 방식'에 대한 구분이고, CSR·SSR은 'HTML을 어디서 생성하는가'에 대한 구분이라는 것입니다. 따라서 현대 웹에서는 첫 진입은 SSR로 빠르게 HTML을 받고 이후 이동은 SPA처럼 부드럽게 전환하는 하이브리드 구조를 널리 사용합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. 문서 탐색 모델(SPA/MPA)과 렌더링 위치(CSR/SSR)를 별개의 설계 축으로 놓아야 프레임워크의 동작을 정확히 설명할 수 있습니다.
  2. SPA는 화면 전환 시 상태 유지와 부드러운 UX에 유리하지만, 장기 실행 시 메모리 관리와 초기 번들 분할, 접근성 포커스 처리를 직접 신경 써야 합니다.

면접에서 자주 하는 실수

SPA는 무조건 CSR만 가능해서 SEO가 불가능하다거나, MPA는 어떤 상황에서든 초기 로딩이 무조건 빠르다고 단정해서는 안 됩니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 145번을 바탕으로 질문과 답변을 새로 정리했습니다.

← 프론트엔드 설계