SPA란?

SPA란?

SPA는 Single Page Application의 약자로, 우리말로는 싱글 페이지 애플리케이션이라 한다. 기존 웹사이트는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아오지만, SPA는 최초 한 번 페이지를 불러온 뒤 필요한 데이터만 비동기적으로 가져와 화면을 갱신하는 방식으로 동작한다. 이러한 구조 덕분에 전체 화면을 새로고침하지 않고도 빠른 화면 전환을 제공할 수 있다.

SPA 예시

SPA는 다양한 웹 서비스에서 널리 활용되고 있다. 대표적으로 Gmail 같은 이메일 서비스는 메일 목록을 클릭해도 전체 화면이 새로 고쳐지지 않고, 필요한 부분만 업데이트된다. 또한 구글 지도 서비스 역시 지도를 이동하거나 확대·축소할 때 전체 페이지가 다시 로딩되지 않고 부드럽게 동작하는데, 이것이 SPA의 특징이다. 국내에서도 쇼핑몰, 포털, 업무용 웹 애플리케이션에서 SPA 방식이 점점 더 많이 사용되고 있다. 

 

Google Maps

 

SPA 장단점

• 장점
• 빠른 화면 전환으로 사용자 경험이 우수하다.
  SPA는 최초에 한 번만 전체 HTML을 로딩하고, 이후에는 필요한 데이터만 불러와 갱신하기 때문에 페이지 새로고침이 발생하지 않는다. 이로 인해 앱을 쓰는 것처럼 빠르고 부드러운 화면 전환이 가능하다.
• 필요한 데이터만 요청하므로 네트워크 사용량을 줄일 수 있다.
  서버에서 전체 HTML을 내려주는 대신 JSON과 같은 데이터만 요청하므로, 불필요한 리소스 낭비가 줄어든다. 결과적으로 네트워크 트래픽이 최적화되고 응답 속도가 개선된다.
• 모바일 환경에서 앱과 유사한 느낌을 제공할 수 있다.
  새로고침이 없는 빠른 인터랙션과 부드러운 전환 효과 덕분에, 사용자에게 네이티브 앱과 비슷한 경험을 제공할 수 있다.
• 컴포넌트 기반 아키텍처와 결합하기 좋아 유지보수가 용이하다.
  React, Vue 같은 프레임워크는 컴포넌트 단위로 화면을 관리하는데 SPA 구조와 자연스럽게 어울린다. 화면의 일부분만 독립적으로 수정·재사용할 수 있어 유지보수와 확장이 쉽다.
• 단점
• 검색 엔진 최적화(SEO)가 어렵다.
  대부분의 콘텐츠가 클라이언트 사이드에서 렌더링되기 때문에, 검색 엔진 크롤러가 페이지 내용을 제대로 인식하지 못하는 경우가 생긴다. 이를 보완하려면 서버 사이드 렌더링(SSR)이나 프리렌더링을 고려해야 한다.
• 초기 로딩 시 많은 자바스크립트 파일을 불러오면 속도가 느려질 수 있다.
  한 번에 전체 애플리케이션 코드를 내려받아야 하므로, 초기 진입 속도가 길어질 수 있다. 코드 스플리팅과 Lazy Loading 같은 기법을 활용해야 성능 문제를 줄일 수 있다.
• 브라우저의 자바스크립트 실행 환경에 크게 의존한다.
  SPA는 모든 화면 렌더링을 자바스크립트에 의존하기 때문에, 사용자의 브라우저 환경에서 자바스크립트가 비활성화되어 있거나 성능이 낮으면 원활하게 동작하지 않는다.

 

결론

첫째, 검색 엔진에 노출이 중요한 서비스라면 SEO 대책을 반드시 고려해야 한다.

둘째, 초기 로딩 속도가 길어지지 않도록 코드 스플리팅과 캐싱 전략을 활용해야 한다.

셋째, 브라우저 호환성을 충분히 테스트해 사용자 환경에 따라 오류가 발생하지 않도록 주의해야 한다.

 

다음엔 Vite도 같이 적어볼 예정이다!!

 

다들 화이팅

 

https://www.youtube.com/watch?v=DuFHaVJpcr4

 

집에 가고 싶다!