모바일 앱을 실행했을 때 몇 초간 로고가 등장하곤 한다. 앱의 데이터를 로딩하는 시간 동안 빈 화면을 보여주지 않기 위해 1초에서 2초 정도 노출되는 시작화면이다.
앱에서는 자연스럽게 사용하는 스플래시 스크린이지만, 웹에서는 여러 가지 이유로 권장되지 않는다. 그 이유를 알아보자.
웹에서 스플래시 스크린이 필요한 이유
- 나의 서비스에 처음 방문하는 사용자에게 큰 임팩트를 주기 위해서!
- 메인페이지의 렌더링이 오래 걸려서, 빈 화면을 보여주고 싶지 않아서!
구현한다면, 어떤 것들을 고려해 볼 수 있을까?
- UX: sessionStorage를 이용하여 첫 방문에서만 보이도록 구현하기
- UX: 최대 2초로 제한해서 유저이탈 방지하기
- UX: 비동기로딩 by 백그라운드에서 메인 콘텐츠(메인페이지) 미리 로딩하기
- UX: 스플래시 애니메이션 리소스는 최대한 경량화하기
이제 만들면 될까?? 아니 왜 웹에서는 권장되지 않는 걸까
SEO에 악영향이 불가피하다.
한줄요약
스플래시스크린 특성상 2초간 강제로 다른 페이지에 접근 불가하도록 막기 때문에, 크롤러(구글검색엔진)가 서비스의 구조를 파악할 수 없도록 한다. 이는 SEO 순위에 악영향을 끼치게 된다.
어쩌면 잘 회피할 수 있지 않을까?! 회피 방법을 생각해보고 왜 안되는지 알아보자.
- 방법1: 서버사이드 User-Agent 헤더 수정
- 크롤러(검색엔진)에게는 스플래시 관련 코드를 렌더링하지 않도록 제한하기
- 일반사용자는 스플래시스크린이 보인다.
- 즉, 크롤러와 일반사용자가 보는 화면이 다르게 하는 방법이다.
- 하지만, 대부분의 브라우저에서는 클로킹 정책으로 제한하고 있으며, 걸리면? SEO에 큰 악영향을 받게 된다.
- 방법2: 스플래시 스크린을 클라이언트 컴포넌트로 만들어버리자
- 클라이언트 사이드에서만 스플래시를 실행되며, HTML 위주로 크롤링하는 크롤러가 파악하지 못하도록 하자.
- 하지만, 요즘 검색엔진은 JS도 실행시킨다. 동시에 일반사용자의 Core Web Vitals 지표도 측정하기 때문에, 스플래시 스크린을 사용한다면 SEO에 악영향을 끼칠 수밖에 없다.
그럼에도 해야겠다면?
웹에서의 스플래시스크린에 익숙하지 않은 사용자가 대부분이다. 심지어 접근성에도 문제가 있다.
괜히 불쾌감만 생길 위험이 있는 기능을 굳이 만들어야 할까? 차라리 메인페이지에서 임팩트를 줄 수 있는 무언가를 추가하도록 하자.
결론
나이가 들어가면서 느끼곤하는데.. 역시 안하는데에는 다 이유가 있다.
