SPA

A web application or website that interacts with the user by dynamically rewriting the current web page rather than loading entire new pages from a server.

— W3C 및 위키백과의 단일 페이지 애플리케이션(SPA) 정의 표준 구문

메뉴 하나 클릭할 때마다 흰 화면이 깜빡거리며 사이트 전체를 새로 읽어오던 야만의 시대를 끝장낸 현대 웹의 찬란한 등불. 하지만 초기 페이지를 열 때 수십 메가바이트짜리 자바스크립트 번들 파일을 한 번에 다운로드받느라, 사용자는 3초 동안 하얀 화면의 정적 속에서 도를 닦게 된다.(...)

1. 개요

단일 페이지 애플리케이션(Single Page Application, SPA)은 단 하나의 HTML 파일만 서버로부터 내려받은 뒤, 사용자의 상호작용에 따라 자바스크립트를 통해 필요한 부분의 화면만 동적으로 다시 그리는 현대적인 웹 애플리케이션 아키텍처다. 과거 페이지를 이동할 때마다 웹 서버에 매번 새로운 HTML을 요청하여 전체 화면이 깜빡거리던 다중 페이지 애플리케이션(Multi-Page Application, MPA) 방식에 비해, 마치 데스크톱 소프트웨어나 네이티브 모바일 앱을 쓰는 것 같은 압도적이고 부드러운 사용자 경험(UX)을 선사한다.

2. 자바스크립트가 부리는 라우팅 마술

SPA의 핵심 원동력은 클라이언트 사이드 라우팅(Client-Side Routing)이다. 브라우저 주소창의 URL이 /profile로 바뀌더라도, 실제로 서버에 /profile/index.html 파일을 달라고 요청하지 않는다. 브라우저의 history.pushState() API를 이용해 주소창의 주소만 가짜로 조작하고, 자바스크립트 라우터 라이브러리(React Router 등)가 바뀐 URL을 감지하여 화면상의 특정 컴포넌트만 쏙 갈아끼우는 방식이다. 이 덕분에 페이지를 넘나들어도 음악 재생이 끊기지 않거나, 화려한 화면 전환 애니메이션을 먹이는 정교한 인터랙션이 가능해졌다. 다만 서버 개발자가 잘못 설정하여 브라우저에서 새로고침(F5)을 누르면 '404 Not Found' 에러 페이지가 사용자를 반겨주게 된다.1

3. SPA가 안고 가야 할 숙명: 초기 로딩과 검색 엔진 최적화(SEO)

모든 로직을 브라우저의 자바스크립트 연산에 의존하는 만큼, 치명적인 대가가 뒤따른다. 첫째는 초기 로딩 속도 저하(Slow Initial Load)이다. 앱 전체를 구동하기 위한 거대한 자바스크립트 덩어리(Bundle)를 다운로드하기 전까지 사용자는 하얀 화면만 멍하니 바라봐야 한다. 둘째는 검색 엔진 최적화(SEO)의 폭망이다. 구글이나 네이버 등의 검색 로봇(Crawler)이 사이트를 방문했을 때, 서버가 보내주는 HTML은 텅 비어 있는 <div id="root"></div> 한 줄뿐이기에 검색 로봇들은 이 사이트에 아무 내용도 없는 유령 사이트로 판단하고 인덱싱을 포기해 버리기 일쑤였다. 이 참극을 수습하기 위해 프론트엔드 업계는 결국 서버에서 다시 HTML을 미리 구워주는 Next.js 같은 SSR 프레임워크를 덧붙이는 복고풍 회귀 노선(Back to Server)을 걷게 된다.(...)

4. 관련 밈 및 드립

4.1. 자바스크립트 만능주의와 텅 빈 HTML

SPA 생태계의 극단적인 자바스크립트 지향성을 풍자하는 밈이다. 'HTML5와 CSS3는 단지 거들 뿐, 화면의 뼈대부터 스타일, 데이터 통신까지 모든 것을 오직 자바스크립트 코드로 떡칠해서 만든다'며 조소한다. 실제 배포된 SPA 사이트의 소스 보기를 누르면 바디 태그에 단 한 줄의 script 로드 태그만 외로이 서 있는 진풍경을 볼 수 있다.(...)

4.2. 돌고 돌아 서버 사이드로 (Back to Web Server)

서버 오버헤드를 줄이고 프론트엔드가 모든 화면 렌더링을 가져가며 독립 만세를 외쳤던 SPA 진영이, 정작 SEO와 초기 로딩 병목을 해결하기 위해 다시 서버 인프라를 구축하고 서버 사이드 렌더링(SSR)에 수천만 원의 호스팅 비용을 태우는 현상을 비웃는 밈이다. '서버 싫어서 브라우저로 도망쳐 나왔더니, 결국 더 복잡해진 Node.js 서버 환경이 나를 기다리고 있었다'는 자조 섞인 드립이 유명하다.

5. 여담

  • Gmail이라는 구세주: SPA 개념을 전 세계에 알린 최초의 상징적인 서비스는 바로 구글의 Gmail이다. 2004년 출시 당시, 이메일 목록을 눌러도 전체 화면 새로고침 없이 실시간으로 메일 내용이 슥 펼쳐지는 연출은 당시 정적 웹에 절여져 있던 전 세계 네티즌들에게 엄청난 문화 충격을 선사했다.
  • Ajax와 History API의 공조: SPA가 가능해진 기술적 토대는 백그라운드에서 서버와 조용히 데이터를 주고받는 XMLHttpRequest(Ajax) 기술과, 브라우저의 히스토리 내역을 자바스크립트로 직접 통제할 수 있는 HTML5 History API의 대중화 덕분이다. 이 기술적 퍼즐 조각들이 완성되면서 진정한 웹 앱의 시대가 도래했다.
  • 검색 로봇의 진화: 구글의 검색 크롤러는 이제 세계 최고 수준의 자바스크립트 실행 엔진(V8 엔진)을 자체 내장하고 있어, 서버 사이드 렌더링을 하지 않은 순수 SPA 웹사이트도 수초 동안 기다려 자바스크립트를 직접 실행해 보고 텍스트를 긁어간다. 단, 구글을 제외한 네이버, 다음, 야후 등의 크롤러들은 여전히 자바스크립트를 거의 실행하지 못해 순수 CSR 방식 사이트는 여전히 검색 결과에서 찬밥 신세를 면치 못한다.

6. 관련 문서

각주

  1. 클라이언트가 주소를 가짜로 조작해 두었기 때문에 브라우저가 서버에 그 URL 그대로 파일 요청을 보내면 서버는 당연히 그 경로에 파일이 없어 에러를 뿜는다. 따라서 모든 경로(/.*)의 요청을 최상단의 index.html로 리다이렉트해주는 Nginx 혹은 Apache 웹 서버 측의 Fallback 라우팅 설정이 필수적이다. ↩

이 문서를 가리키는 문서