역사상 가장 인내심이 없는 현대의 온라인 유저 고객들은
페이지 로딩이 길어지거나 버벅되는 경우
다시는 그 해당 페이지에 기회를 주지 않을 확률이 높습니다.
SPA(Single Page Application)는 이러한 문제점을 극복하고자
개발된 웹페이지 개발방식입니다.
SPA는 현대적인 웹 개발에서 중요한 위치를 차지하고 있습니다.
B2B 마케터로서 SPA의 개념과 활용 사례를 이해하는 것은
효과적인 디지털 마케팅 전략 수립에 도움이 될 것입니다.
이제 SPA 사이트의 기본 원리와 그것이
어떻게 사용자 경험을 극대화하는지 알아보겠습니다.
SPA 사이트란?
SPA(Single Page Application)는 단일 페이지로
구성된 웹 애플리케이션입니다.
SPA의 클라이언트 사이드 라우팅이라는 핵심 기능으로
URL이 변경될 때마다 페이지 전체를 새로 로드하는 대신,
필요한 콘텐츠만을 동적으로 로드하여 화면에 표시하는 방식입니다.
이렇게 함으로써 네트워크 트래픽을 줄이고
보다 빠르고 부드러운 사용자 경험을 제공합니다.
그렇다면 원페이지 웹사이트와 차이가 무엇일까요?
원페이지 웹사이트가 단순히 페이지 하나에 이미지와 콘텐츠들이
나열되있는 사이트라고 한다면 SPA는 여러 어플리케이션이
다른 페이지로 이동 없이 매끄럽게 단일 페이지 내에서 머무르며
구동됩니다.
SPA 예시
우리가 매일 사용하는 서비스들 중 상당수를 차지하는
SPA 기반의 웹사이트 리스트를 확인한다면
SPA가 무엇인지에 대해 좀 더 직관적으로 알 수 있습니다.
Gmail
SPA의 대표적인 예로는 Gmail을 들 수 있습니다.
Gmail에서 이메일을 열거나 작성할 때,
전체 페이지가 새로고침되지 않고 필요한 부분만
동적으로 변경됩니다.
이는 SPA의 핵심 특징을 잘 보여주는 사례입니다.
Facebook, Twitter(X)
뉴스피드(타임라인), 게시물 작성, 댓글 등의
상호작용이 페이지 새로고침 없이 이루어집니다.
또한 각각의 기능들이 추가 페이지로 이동하지 않고
단일 페이지 내에서 모두 처리할 수 있습니다.
네이버 지도
지도 확대/축소, 경로 탐색 기능 사용 시
별도의 탭이 추가되지 않고 해당 화면에서
모두 부드럽게 진행됩니다.
Spotify 웹 플레이어
음악 재생, 플레이리스트 관리 등이 끊김 없이 이루어집니다.
SPA vs MPA 비교
MPA(Multi Page Application)은 많은 부분에서
SPA와는 정반대의 특징을 가진 웹 개발방법입니다.
웹페이지에서 어떤 아이콘을 클릭하게 되면
새로운 페이지가 열리며 해당되는 웹사이트가
추가로 생성되는 방식입니다.
우리가 주로 사용하는 서비스 중 MPA의 방식을
따르고 있는 웹사이트는 주로 웹쇼핑 사이트
(아마존, 알리바바,지마켓 등)에서 많이 볼 수 있습니다.
MPA와 SPA의 차이점을 다음과 같이 요약할 수 있습니다.
| 특징 | SPA (Single Page Application) | MPA (Multi Page Application) |
| 페이지 로드 | 초기 로딩 후 부분적 업데이트 | 매 페이지 전체 로드 |
| 사용자 경험 | 초기 로딩 이후 빠르고 부드러운 전환 경험 | 페이지 간 이동 시 새로고침 발생하므로 로딩시간 길어질 수 있음 |
| 백엔드 의존성 | 낮음 (API 기반) | 높음 |
| SEO | 상대적으로 어려움 | 용이함 |
| 개발 복잡성 | 상대적으로 높음 | 상대적으로 낮음 |
| 초기 로딩 시간 | 상대적으로 길다 | 상대적으로 짧다 |
| 리소스 사용 | 클라이언트 측 리소스 많이 사용 | 서버 측 리소스 많이 사용 |
SPA가 추천되는 웹사이트 그 이유
SPA가 추천되는 웹사이트
SPA 개발 방식이 적합한 웹사이트는 주로 실시간으로 데이터를
업데이트하는 기능이 중요한 경우 추천됩니다.
대시보드 어플리케이션이나 소셜 미디어 플랫폼,
협업도구(Trello, Slack) 서비스 등의 웹사이트 등은
사용자 간의 즉각적인 상호작용과 빠른 업데이트,
콘텐츠 스트리밍이 필요하기 때문에 SPA의 취지와
잘 들어 맞습니다.
SPA가 추천되지 않는 웹사이트
콘텐츠 중심 웹사이트
뉴스 사이트, 블로그 등이 이에 해당됩니다.
콘텐츠로 오가닉 트래픽을 만들기 위해 SEO가 중요하며,
따라서 각 페이지의 고유한 URL이 필요합니다.
SPA로 검색엔진이 콘텐츠를 쉽게 크롤링할 수 있도록 하려면
서버 사이드 렌더링(SSR)과 같은 추가 개발 소요로
단점을 극복할 수는 있습니다.
전자상거래 플랫폼
제품 페이지의 SEO가 중요하며,
다양한 카테고리와 제품 페이지가 필요하기에
SPA보다는 MPA 방식이 더 적합합니다.
문서 중심 웹사이트
위키피이다나, 나무위키, 기술 문서 제공 목적의
페이지에 해당되며 각 페이지의 독립성과 링크 가능성이
중요하기에 SPA 방식은 효과적이지 않을 수 있습니다.
SPA와 MPA의 하이브리드 형태
SPA와 MPA의 장점을 결합한 하이브리드 접근 방식도 가능합니다.
이는 주요 네비게이션은 MPA 방식을 사용하고,
특정 섹션이나 기능에서는 SPA를 활용하는 방식입니다.
전자상거래 사이트에서 메인 페이지, 카테고리 페이지,
제품 상세 페이지는 MPA로 구현하고,
장바구니나 결제 프로세스는 SPA로 구현하는 것을
예로 들 수 있습니다.
또 하나의 예를 들자면, 뉴스 사이트에서
메인 페이지와 기사 페이지는 MPA로,
댓글 시스템이나 관련 기사 추천은 SPA로 구현하는
것을 고려 할 수 있습니다.
결국 웹사이트 내의 기능과 사용자 편의성에 비추어
SPA와 MPA의 장단점을 적절히 조합하는 것을 의미합니다.
이러한 하이브리드 접근은 SEO의 이점을
유지하면서도 사용자 경험을 크게
개선할 수 있는 매력이 있습니다.
SPA의 작동 메커니즘
SPA의 구조는 HTML, CSS 및 JavaScript로 구성되며,
AJAX 기술을 통해 서버와 비동기적으로 데이터 통신을 수행합니다.
이는 페이지를 새로 고침하지 않고도 필요한 데이터를
동적으로 로딩할 수 있게 해줍니다.
SPA를 구현하기 위해 다양한 자바스크립트 프레임워크가 사용됩니다.
대표적으로는 React, Angular, Vue.js가 있습니다.
| SPA 요소 | 기능 |
| JavaScript 프레임워크/ 라이브러리 | React: UI를 효율적으로 구축할 수 있게 함 Angular: 양방향 데이터 바인딩 지원 |
| AJAX (Asynchronous JavaScript and XML) | 서버와 비동기적으로 데이터를 주고받아 페이지 새로고침 없이 콘텐츠를 업데이트 |
| 클라이언트 사이드 라우팅 | 브라우저의 History API를 활용하여 SPA 내에서 페이지 간 네비게이션을 구현 |
| RESTful API 또는 GraphQL | 백엔드와의 효율적인 데이터 통신을 위해 사용 |
| 코드 스플리팅 및 레이지 로딩 | 초기 로딩 시간을 줄이기 위해 필요한 코드만 로드하는 기술을 사용 |
| 상태 관리 라이브러리 | Redux, Vuex 등을 사용하여 복잡한 애플리케이션의 상태를 관리 |
SPA의 이러한 구조와 프레임워크의 사용은 페이지 전환 속도를 높이고,
사용자 경험을 향상시키는 데 중점을 둡니다.
클라이언트 사이드 라우팅과 AJAX가 결합된 SPA는
사용자 인터페이스의 반응성을 극대화하며,
서버에서 필요한 데이터만 전송받아 효율성을 높입니다.
포스팅을 마무리하며
사용자 경험이 그 어느때보다 중요해지는 시기에
SPA 사이트의 중요성은 나날이 커지고 있습니다.
자사의 서비스가 SPA 요건에 충족 된다면
SPA 사이트가 제공할 수 있는 빠른 페이지 전환 속도와
효율적인 데이터 통신을 통해 자사 사용자들의
경험이 극적으로 향상되는 것을 경험해 보세요!
<함께 보면 좋은 글>
마케팅 인게이지먼트로 고객 참여 극대화하기 – 허브스팟
Pros and Cons of Single-Page Applications
