1. SPA가 무엇인가요?

SPA는 Single Page Application의 약자로 URL이나 페이지가 바뀐 것 같더라도 실제로는 콘텐츠만 갱신되는 형태의 단일 페이지를 말합니다.

일반적으로 우리가 방문하는 웹 사이트는 보통 MPA (Multi Page Application)인데요, 이는 사용자가 한 페이지에서 다른 페이지로 이동할 때 새로운 페이지의 정적 리소스를 다시 다운로드하는 방식을 사용합니다.

즉, MPA는 여러 페이지의 연결로 이루어져 있기 때문에 콘텐츠를 추가하고 싶으면 원하는 만큼 페이지를 추가할 수 있으나 페이지 이동 시 새롭게 리소스를 가져오기 때문에 느린 이동 속도를 가지게 됩니다.

하지만, SPA는 하나의 페이지로 이루어져 있습니다. 때문에 사용자의 인터랙션으로 요청된 새로운 콘텐츠에 대해서 전체 페이지를 다시 불러오지 않고 해당 콘텐츠만 변경되는 특징을 가지고 있습니다. 이 특징 덕분에 새로고침이 발생하지 않아 로딩 시간이 굉장히 빠른 것이 장점입니다.

2. SPA 페이지는 어떻게 확인하나요?

현재 내가 방문한 웹 사이트가 SPA인지 MPA인지 확인하고 싶다면 아래 방법을 따라 해보세요!

이번에는 예시를 보여드리기 위해 ‘Beusable 공식 홈페이지’와 ‘뷰저블 포럼 페이지’에서 SPA 페이지 확인 방법을 실행해보겠습니다.

먼저, Beusable 공식 홈페이지에 들어가 개발자도구 > Sources 탭 > Page 탭을 열어봅시다. 이 때 다른 페이지로 전환하는 버튼을 누르게 되면

(A페이지)

(B페이지로 전환 했을 때)

오른쪽에 보이는 Page 탭에서 리소스가 다시 새로고침되고 있습니다!

따라서 Beusable 공식 홈페이지는 MPA 페이지군요!

다음으로 뷰저블 포럼 홈페이지에 들어가 동일한 방법으로 개발자 도구를 열어봅시다. 이 후 다른 페이지로 전환하는 버튼을 누르게 되면

(A페이지)

(B페이지)

MPA 방식처럼 리소스가 새로고침되지 않는 모습을 보여주고 있습니다.

이처럼 전환 버튼을 눌렀을 때 url은 변경되지만 리소스가 새로고침되지 않는 뷰저블 포럼 페이지는 SPA 페이지라고 볼 수 있습니다.

3. SPA 페이지를 뷰저블로 분석하고 싶어요!

뷰저블 히트맵은 MPA 방식의 웹사이트 기준으로 PV를 측정하는데요, 사용자가 A페이지에서 B 페이지로 진입해 페이지 리소스가 새로고침될 때 B 페이지의 1pv를 수집하게 됩니다.

하지만 SPA 방식의 웹 사이트는 페이지가 하나이기 때문에 처음으로 진입한 페이지에서만 1PV가 측정되고 이후에 다른 페이지로 전환해도 리소스가 새로고침되지 않기 때문에 진입 이후의 페이지에서는 PV가 측정되지 않는다는 단점이 있습니다.

때문에 웹 사이트가 SPA 방식으로 구성되어 있다면 히트맵 상단 우측에 있는 SPA 토글을 체크해야 원하는 페이지의 데이터가 수집할 수 있습니다. SPA 분석 토글을 체크하면 URL이 바뀌는 것을 기준으로 PV를 측정하기 때문에 SPA 페이지에서도 정확한 PV 측정이 가능해질 수 있습니다.

지금까지 SPA가 무엇인지, SPA 페이지 확인 방법과 히트맵 분석 방법에 대해서 알아보았습니다!

이 포스팅을 통해 SPA에 대한 궁금증이 풀리셨기를 바랍니다!

또 SPA 페이지는 원래 A/B Testing 기능이 지원되지 않았는데

조만간 UX Writing이 지원되는 기능 업데이트가 있을 예정입니다.

SPA 기능 업데이트에 대한 포스팅도 놓치지 말고 많은 관심 부탁드립니다! 😊

SPA가 뭔가요? SPA의 개념부터 분석 방법까지 알아보자!

SPA가 뭔가요? SPA의 개념부터 분석 방법까지 알아보자!