블로그 방문자의 첫 스크롤 시간과 초기 스크롤 깊이 분석
* 기존 글 재발행 + 나중에 다시 보기 위한 기록이라 본문은 짧게 말하니 양해 부탁드려요.
개요: 방문자의 첫 반응
블로그 방문자는 게시물 볼 때 언제 스크롤 시작하지? 그리고 페이지 접속 초기에 얼마나 빠르게, 얼마나 깊이 스크롤 하지? 이런 의문에 대한 답을 구하기 위해 2022년에 약간의 실험을 진행했음.
실험 결과부터 이야기하면 방문자의 절반이 1.3초 이내에 첫 스크롤을 시작하고, 방문 3초 시점에서 370px 이내의 스크롤함. 즉 시작 부분의 중요한 내용은 1.3초 이내에 로딩 되거나 혹은 370px 이후에 표시하는 게 좋다고 볼 수 있음.
테스트 장소는 따로 운영 중인 티스토리 블로그, 데이터는 구글 애널리틱스로 수집했고 일정 시간 내 스크롤 이벤트를 캡처한 뒤 유효한 부분을 잘라서 사용함. 방문자는 소규모 블로그라 약 1만여 개의 세션을 기록했음.
블로그 주제는 이것저것 뒤섞인 잡블로그지만, 심도 깊은 추적이 아니라 방문자가 각 게시물에 들어온 뒤의 초기 반응만 추적하는 거니까 주제는 그다지 상관없을 것이라 생각함.
방문자 규모 역시 그럴 것이고, 마찬가지로 블로그(사이트)의 반응 시간이 극도로 느리지만 않으면 서버 응답 시간이나 이탈률 등의 다른 지표도 관계 없을 것임.
방문자가 처음 스크롤 하는 시점
앞에서 방문자가 처음 스크롤하는 시간이 1.3초 이내라고 했음. 좀 더 상세하게 보면 0.5~1.3초 사이에 많은 비율이 집중되어 있으며 고점은 모든 기기에서 0.8초였음.
아래의 스크린샷에 첫 스크롤이 발생한 시간 비중이 그래프로 표시되어 있음. (클릭하면 커짐)
위 스크린샷은 10초까지만 잘라서 낸 통계임. 전체 데이터량이 너무 많으면서 대부분 값이 너무 작아 그래프상 바닥에 붙어있는 막대가 많았기 때문에 유효하다고 판단한 일부 데이터만 사용함.
그리고 데스크탑(PC)과 모바일에서 큰 차이 없는 비슷한 결과가 나왔기에 통합 그래프만 업로드함.
요약하면 방문자의 첫 스크롤은 다음과 같은 특징이 있음.
- 사소한 차이는 있지만 모바일 PC 둘 다 첫 스크롤이 0.8초를 기준으로 집중적으로 발생함.
- 기울기가 급격히 증가하는, 일종의 threshold에 해당하는 지점은 0.5초.
- 방문자의 스크롤은 50%가 0.5~1.3초 사이에 발생했고 66%(2/3)는 0.1~1.7초 사이에 발생함.
- 66% 범위에서 데스크탑과 모바일 사용자의 반응은 시작은 비슷하고 끝은 약간 차이가 있음. PC에서 0.1~2.3초, 모바일은 0.2~1.5초.
대략 이 정도임.
의외인 점은 데스크탑이 대부분 시스템 성능이 좋고 네트워크 연결도 빠르기 때문에 더 빨리 스크롤 할 것이라는 예상과 다르게, 오히려 모바일 사용자의 행동이 더 좁고 날카로운 분포를 보인다는 것임. 이건 사실상 모바일 사용자의 성격이 데스크탑 사용자보다 '조금 더' 급하다고 볼 수 있을 것임.
이 말은 모바일에서 더 작은 페이지 크기, 더 적은 스크립트 및 CSS 규칙 등으로 빠른 반응을 보여야 한다는 뜻임. 생각보다 더 많이.
단순히 네트워크 속도가 느리고 기기 성능이 데스크탑보다 떨어지기에 그런 게 아님. 기존의 기기 성능 차이를 감안한 웹 페이지의 다이어트에 더해 사용자의 '다소 성급한 반응'에도 응답해야 하므로 블로거는 더욱 더 로딩 속도에 민감하게 굴어야 한다는 결론임.
구체적으로는 그래프에서 0.4s -> 0.5s 구간이 급격한 변화를 보이므로, 어떻게든 0.5초 이내에 첫 화면이 보여야 한다고 볼 수 있음. 아니면 방문자 입장에서 "짜증"이 날 것임.
페이지 방문 후 3초 시점의 스크롤 깊이
페이지 로딩 시점부터 약 3초라는 짧은 시간 동안 사용자가 얼마나 스크롤을 내리는가? 이 실험을 진행하기 전에는 방문자들이 스크롤을 휙 하고 내려버릴 거라 예상했지만 생각보다는 스크롤 깊이가 얕았음.
스크롤 깊이 그래프
실험의 최종 결과물은 다음 스크린샷에 그래프로 요약되어 있음. (클릭 시 커짐)
이 데이터는 0.1초 간격으로 수집한 이벤트를 3.0초 영역만 추출한 것이며 스크롤 깊이를 10px단위로 구분하고 있음. 각 막대는 해당 위치에서 발생한 이벤트 수, 즉 막대가 길다면 그 위치에 시선(뷰)이 더 많이 머물렀다는 뜻임.
그래프 내용을 요약하면 50%의 이벤트가 370px이내에 있고 66%가량의 이벤트는 570px 이내에 있음. 로딩이 오래 걸리는 요소라면 그 뒤에 배치해야 한다는 뜻으로 해석 가능함.
또, 그래프의 모양을 잘 살펴보면 370px 이후에 잠시 높아졌다 급격히 하락하는 모습이 보임.
이런 형태를 감안하면 로딩에 2~3초 가량 소요되는 미디어라면 약 370~400px 정도 스크롤 한 뒤 보이도록 배치하면 적절하다고 생각됨. 더 안전하게 하려면 570~600px 이후면 적당할 것임.
이를 통해 실제 상황을 예상해 보면 다음과 같음.
브라우저 높이는 PC에서는 windows 10, 1920*1080 모니터, 크롬 기준으로 북마크바가 있으면 931px, 없으면 963px임. 스마트폰 높이는 기기마다 다르겠지만, 구형 제품은 거의 640~700px, 최근 제품은 800~900px로 가정함. (윈11의 경우 약간 다를 수 있음.)
스마트폰의 경우 대충 중간 정도인 800px로 기준을 정하고 여기에 50% 범위인 370px를 더하면 1170px, PC는 크롬 기본값인 북마크 바 없는 상황을 기준으로 하면 963+370 = 1333px의 값이 나옴.
즉, PC에서는 1300px 이후, 모바일에서는 1200px 이후에 첫(대형) 이미지 혹은 미디어를 배치하는 것이 적절하다고 생각함. 따로 적용하기 귀찮다면 그 중간인 1250px 혹은 가장 큰 값을 기준으로 하여 1350px 정도면 나쁘지 않은 위치로 보임.
0.5~3.0초 스크롤 깊이 표
| 시간 | 50% | 66% |
|---|---|---|
| 0.5s | 90px | 150px |
| 1.0s | 270px | 410px |
| 1.5s | 250px | 370px |
| 2.0s | 290px | 440px |
| 2.5s | 350px | 530px |
| 3.0s | 370px | 570px |
위 표는 역시 0.1초 간격의 이벤트를 0.5 ~ 3.0초까지 0.5초 단위로 정리한 것임. 해당 데이터를 기준으로 한다면 50%의 방문자들은 페이지를 여는 즉시 100px정도 아래로 내린 뒤 다시 300px 조금 안 되는 위치로 이동하고 거기에 1초쯤 시선이 머물다가 다시 탐색을 시작하는 것으로 보임.
그러니까 블로그에 들어오자마자 헤더에서 넉넉하게는 글 제목까지 보이지 않게 가려버린 뒤 글을 읽기 시작한다고도 생각할 수 있음.
아마도, 인터넷이 활성화 된 뒤 20년 넘는 세월 동안 대부분 사이트가 페이지 최상단에 헤더 같은 탐색 요소를 두었고 그 아래에 글 제목이 위치했으니, 해당 위치는 글을 읽는데 불필요하다는 학습이 되어서 그런게 아닐까 싶음.
아니면 상단 광고 위치에 익숙해져서 보기 싫으니 가려버리는 행동일 가능성도 있을 것 같음.
그래프를 볼 때 주의할 점
첫 스크롤 그래프는 해당 항목에서 설명했듯이 페이지를 열고 10초 동안의 데이터만 사용하였음. 그러나 유효한 데이터가 그 안에 전부 들어있으니 큰 문제는 되지 않을 것임.
주의할 것은 스크롤 깊이 그래프임.
스크롤 깊이 그래프 모양을 보면 처음이 가장 높고 점점 줄어드는 것을 볼 수 있는데, 당연하다고 생각할 수 있지만 함정이 있음. 이 그래프는 전체 시간이 아니라 딱 3초 시점이란 것임.
3초대가 아님. 정확히 3.0초.
1만여 개의 세션에서 10초간 0.1초마다 수집한 수 십만 개의 데이터 중 딱 3.0초에 해당하는 290개의 레이블, 3천여 개의 스크롤 이벤트만 추출한 통계임.
처음 계획은 0~3초까지의 스크롤 데이터를 전부 모아서 판단하려고 했지만, 실험 결과 0.0초에 20000px 등의 이상 동작이 간혹 있고 특히 이벤트 수량이 수 십만 개로 지나치게 많다는 문제가 있었음.
내 PC 사양이 너무 낮아서 그럴지도 모르겠는데, 실험 기간의 이벤트를 읽어 들이면 브라우저가 다운될 정도라 전체가 아닌 일부 시점의 스크롤 데이터만 추출해서 통계를 냈음.
마찬가지의 이유로 모바일과 PC로 따로 나누어 확인하지 못했고 기기 구분 없는 통짜 데이터에서 3.0초 영역만 추출한 결과임.
따라서 이 실험 결과는 이런 흐름이 있다는 정도로만 활용해야 함. 심층 분석이 아니기에 더욱 그러함.
그리고 초기 반응만 분석한 내용이라 주제나 이탈율 등의 지표는 상관 없겠지만, 블로그(사이트)의 속도와 안정성 및 디자인에는 영향을 받을 것이 분명해서 참고용으로만 보는 것이 좋음.
결론: 어떻게 해야 하는가?
스마트폰 사용자는 데스크탑 사용자보다 참을성이 없음. 그래서 기기 간의 차이보다 한층 더 빠른 페이지 로딩이 요구됨.
가장 쉬운 방법으로는 사이트와 페이지를 최대한 단순하게 만들어 불필요한 기능을 줄이는 것인데, 극단적으로는 이미지와 자바스크립트를 아예 사용하지 않고 스타일도 아주 제한적으로만 쓰는 방법이 있음. 인터넷 초창기의 페이지처럼.
대신 기능미가 떨어지고 방문자는 독해력을 시험 받겠지만, 상대적으로 적은 노력을 투입해서 페이지 상단에 사용자의 시선이 머무를 확률을 높일 수 있음.
아니면 글의 제일 앞에 시선을 확 사로잡을 무언가를 배치해서 조금이라도 오래 시선을 붙잡아 놓는 방법도 있음.
하지만 이런 경우에 시선을 사로잡을 무언가는 대부분 이미지가 될 것인데(히어로 이미지), 크고 선명하며 컬러풀한 이미지일 수록 용량이 커져 로딩 속도가 느려지는 경향이 있기 때문에 모순이 발생하게 됨.
이미지 포맷을 용량이 적은 webp로 하면 어느 정도는 해결이 가능하지만 드라마틱한 용량 감소는 드물고, 용량을 너무 줄이면 사람이 보기에도 화질이 떨어지는 것을 쉽게 느끼게 됨.
특히 하늘의 그라데이션이나 야경 촬영 시 암부가 상당히 잘 깨짐. jpeg는 쓸만하지만 webp로 변환하면 눈 뜨고 못 봐줄만 한 상황도 많이 나옴.
결국 이래저래 '타협'이 필요함. 그렇다면 무엇을 어떻게 타협해야 하나? 그건 블로그의 방향성과 블로거의 취향에 달린 문제임.
속도가 우선이라면 스타일과 스크립트를 줄이고 저용량 이미지 포맷을 사용하면 됨.
뛰어난 심미성으로 방문자를 사로잡겠다면, 속도를 포기하는 대신 커다란 이미지와 다양하고 화려한 스타일로 숨이 멎도록 아름다운 사이트를 만들어 눈을 떼지 못하게 하면 됨.
결국 기본으로 다시 돌아온 셈임.
하지만 아무것도 모른 채로 고집하는 기본이 아니라, 이것저것 고민하고 실험해 보면서 무수하게 부딪히고 깨진 다음 다시 돌아온 기본은 비슷해 보여도 한층 더 자유롭고 더 멀리 볼 수 있는 높은 곳이라 생각함.
한 번에 효율적으로 가면 된다? 그게 되는 사람을 우리는 천재라고 부름. 세상에는 수 많은 천재가 있겠지만 적어도 나는 아님. 그렇기에 결론이 다시 원점이라고 해도 결코 의미 없는 몸부림이 아님.