모던 CSS가 SPA를 대체할 시기임

• View Transitions API 같은 모던 CSS 기능의 등장으로, 이제 매끄러운 페이지 전환을 위해 SPA 구조가 필요 없는 상황임
• 대부분의 SPA 사이트는 실제로 기대한 만큼의 성능이나 부드러운 경험을 제공하지 못하며, 오히려 무거운 JavaScript 코드가 사용자 경험을 저하시키는 경향임
• Chromium 기반 브라우저에서 네이티브 페이지 전환과 Speculation Rules를 활용하면, 자바스크립트 없이도 빠르고 자연스러운 내비게이션 구현이 가능함
• SPA의 복잡한 구조는 브라우저 최적화를 방해하므로, 실제 웹사이트는 HTML과 CSS 중심의 MPA 구조가 더 빠르고 관리가 쉬움
• 앞으로는 불필요한 SPA 도입을 지양하고, 모던 CSS와 네이티브 기능을 활용해 효율적이고 유지 관리가 쉬운 웹사이트 개발이 필요함

서론: SPA의 종말과 모던 CSS의 출현

• 최근 View Transitions API와 같은 최신 CSS 기능의 도입으로, 기존 SPA(싱글 페이지 어플리케이션)가 제공하던 주요 장점이 이제는 필요 없게 된 상황을 맞이함
• 여전히 많은 개발팀이 React, Vue 같은 SPA 프레임워크를 선택하지만, 그 결정의 핵심은 성능이 아니라 인터랙션과 부드러운 네비게이션 경험에 대한 오해임
• 실제로 매끄러운 네비게이션을 위해 SPA가 필수라고 믿는 관행은 이미 구시대적인 사고방식임

SPA의 허상과 현실

• SPA는 한때 가장 자연스러운 페이지 전환을 구현하기 위한 유일한 방법이었으나, 이제는 더 이상 그렇지 않음
• 많은 SPA는 다음과 같은 문제점 발생:
  • 로딩 상태의 페이드 효과만 있을 뿐 진정한 콘텐츠 전환 부드러움이 부족함
  • 스크롤 복원 문제와 비일관적인 포커스 처리
  • 렌더링/하이드레이션 지연으로 인한 내비게이션 지연
  • 레이아웃 시프트와 콘텐츠 팝업, 스켈레톤 로딩 등
  • 성능 대비 효과가 미미한 불필요한 복잡성 및 자바스크립트 과다 사용
• 대표적 SPA 프레임워크(Next.js, Gatsby, Nuxt 등)는 기본적인 네이티브 브라우저 동작을 모방하기 위해 대량의 JS 코드를 추가하고 있음
• 결과적으로 네이티브 자연스러움을 희생하고, 속도가 느려지고 SEO도 저하되는 문제 야기함

웹 플랫폼의 발전과 CSS의 역할 변화

• 최신 크로미움 기반 브라우저(Chrome, Edge 등)에서는 네이티브, 선언적 페이지 전환을 지원함
• View Transitions API를 통해 자바스크립트 없이도 문서 간 혹은 전체 페이지 간 부드러운 애니메이션 구현 가능
• 핵심 역량은 다음과 같음:
  • 페이지 간 페이드 효과 (단 3~4줄 CSS로 구현 가능)
  • 썸네일에서 상세 이미지로의 자연스러운 전환 등 공유 요소 애니메이션
  • 헤더, 내브바 등의 영구 요소 유지
  • 실제 URL 및 실 페이지 이동이므로 SEO, 링크 공유, 백/포워드 케시 등 호환성 극대화

CSS와 JS의 시너지를 충분히 누릴 수 있는 방법

• 필요하다면, JS를 통해 페이지 내부 전환에도 View Transition을 수동 호출 가능
• 예: 테마 전환, 탭 토글, 다크모드 전환 등에 자바스크립트 최소량만 사용

Speculation Rules와 즉각적 네비게이션

• Speculation Rules는 브라우저가 페이지를 미리 프리로드/프리렌더하면서 사용자 행동(예: 마우스 오버)을 예측해 즉각적인 내비게이션 제공
• 선언적으로 <script type="speculationrules">를 통해 설정 가능
• 전제: 페이지가 가볍고 최적화되어 있을 때 퍼포먼스 극대화 효과, 무거운 페이지라면 오히려 자원 낭비 위험

브라우저 고유 기능 존중과 bfcache

• bfcache(Back/Forward Cache) 는 사용자가 뒤로/앞으로 이동 시 전체 페이지를 스냅샷 형태로 즉각 복원함
• 전제 조건: 순수 HTML과 CSS 기반, 클린 아키텍처여야 하며, SPA처럼 라우팅을 가로채는 구조에서는 적용 불가
• 결론적으로, 모던 브라우저는 단순하고 견고한 웹사이트에 보상을 제공하는 방향으로 진화 중임

SPA와 MPA 퍼포먼스 비교

• 평균적인 SPA(Next.js 기준):
  • JS 번들 크기: 1~3MB
  • TTI(사용가능 시점): 3.5~5초
  • 라우트 전환: 가짜/시뮬레이션
  • SEO: 복잡, 유지 어려움
  • 스크롤/앵커 동작: 불안정함
• 모던 MPA(CSS 전환 및 Speculation Rules 적용):
  • JS 번들: 0KB (선택적 보강만)
  • TTI: 1초 내외
  • 라우트 전환: 진짜 네이티브 동작
  • SEO: 매우 용이
  • 스마트 스크롤, 포커스, 히스토리: 브라우저 기본 동작 및 완벽 지원

웹사이트와 앱의 구분, 적합성 재고 필요

• 대다수 웹사이트는 실제 "앱"이 아니며, 공유 상태, 클라이언트 라우팅, 복잡한 인터랙션이 필요하지 않음
• 마케팅 페이지, 문서 포털, 이커머스, 블로그 등엔 HTML 중심, 빠른 로딩, 심플한 구조가 더 적합함
• 모든 프로젝트에서 SPA 스택을 도입하면, 과도한 복잡성 및 성능 저하 유발 가능
  1. "앱처럼 보여라"라는 요구
  2. 프레임워크 도입
  3. 클라이언트 라우팅 및 복잡성 증가
  4. 성능 하락 및 추가 최적화 필요
  5. 여전히 네이티브 링크 전환 + CSS 애니메이션 구조보다 느린 현실

결론 및 권고

• SPA는 과거 플랫폼 한계에 대한 임시 방편에 가깝지만, 현재는 더 이상 존재하지 않는 제약임
• 이제는 다음과 같은 네이티브 기능의 적극 활용이 가능함:
  • 진짜 페이지 간 전환
  • Speculation Rules 통한 즉각적 사전 렌더링
  • 점진적 기능 저하에 강한 구조
  • 깔끔한 마크업, 빠른 로딩, 실 URL 활용
  • 플랫폼의 도움을 최대로 받을 수 있는 구조
• "부드러움"만을 이유로 SPA를 고수하면, 복잡성, 성능, 유지보수성 모두의 대가를 치르게 됨
• 서버 렌더링, 실 페이지, CSS 기반 애니메이션, 의도적 사전 로딩, 최소한의 JS 도입으로 현 시대에 맞는 빠르고 행복한 웹사이트 제작 가능
• 2025년 현재의 기술을 활용해, 더 빠르고 더 간편하며 누구나 환영할 수 있는 웹 경험을 지향해야 함