쉬운 설명
옛날 웹은 링크를 누를 때마다 서버에서 새 HTML을 받아 화면이 통째로 깜빡였습니다. SPA는 첫 방문 때 자바스크립트 묶음을 한꺼번에 받아 두고, 그 뒤로는 사용자가 어디를 눌러도 서버에 데이터만 요청하고 화면은 자바스크립트가 다시 그립니다. 결과적으로 모바일 앱처럼 부드럽게 동작합니다.
SPA가 등장한 배경은 두 가지입니다. ① 모바일 앱처럼 부드러운 경험을 웹에서도 만들고 싶은 요구. ② 자바스크립트 엔진과 브라우저 성능이 좋아져 '큰 코드를 클라이언트에서 돌리는' 일이 가능해진 환경. 2010년대 초반 React·Angular·Vue가 차례로 등장하면서 SPA가 일반적인 선택지가 됐습니다.
장점은 분명합니다. ① 빠른 전환(서버 왕복 없이 화면만 갱신), ② 부드러운 애니메이션과 상태 유지, ③ 오프라인 일부 동작 가능(PWA), ④ 모바일 앱과 비슷한 사용 경험. 단점도 있습니다. ① 첫 로딩이 무거울 수 있음(자바스크립트 묶음이 큼), ② 검색엔진이 콘텐츠를 잘 못 읽을 수 있음(첫 HTML이 비어 있음), ③ 자바스크립트가 꺼져 있으면 아무것도 안 보임.
이런 단점을 보완하려고 SSR(서버 사이드 렌더링)·SSG(정적 생성)와 SPA를 섞은 형태가 일반적입니다. Next.js·Nuxt·SvelteKit 같은 프레임워크가 이 절충안을 제공합니다. 첫 화면은 서버가 미리 만들어 빠르게 보여 주고, 그 뒤의 상호작용은 클라이언트의 자바스크립트가 SPA처럼 처리합니다.
SPA를 선택할지의 기준은 '사이트의 성격'에 달려 있습니다. 사용자가 자주 들어와 길게 머무는 앱(노션·피그마·트렐로)이라면 SPA가 적합합니다. SEO와 첫 로딩이 중요한 콘텐츠 사이트(뉴스·블로그)는 SSR·SSG가 더 어울립니다. 둘을 섞은 하이브리드가 가장 흔한 현대적 선택입니다.
비유로 보면
옛날 웹이 책을 한 장씩 다시 인쇄받는 일이라면, SPA는 사용자가 손에 들고 있는 한 책의 페이지만 넘기는 일과 비슷합니다. 인쇄소를 매번 안 거치니 훨씬 빠르지만, 책 자체가 두꺼우면 처음 손에 받아 드는 게 무거울 수 있습니다.
어디에서 만나나
복잡한 사용자 인터페이스가 필요한 웹앱: 노션·피그마·트렐로·구글 드라이브·디스코드·슬랙(웹 버전). 사용자가 길게 머물며 여러 화면을 자주 오가는 모든 앱이 SPA의 단골 영역입니다. 한편 콘텐츠 위주 사이트(뉴스·블로그·이커머스)는 SSR·SSG와 섞어서 만듭니다.
작은 예시
Gmail이나 노션을 열어 보면, 메일을 하나씩 클릭하거나 페이지를 옮겨도 브라우저 주소만 바뀔 뿐 화면 전체가 새로 깜빡이지 않습니다. 그게 전형적인 SPA 동작입니다.
자주 하는 오해
한 줄 정리
SPA는 '앱 같은 부드러움'을 얻는 대신 '첫 로딩의 가벼움'을 일부 잃습니다. 사이트의 성격에 따라 그 트레이드오프를 따져 고르는 것이 핵심입니다.