블로그 방문자의 첫 스크롤 시간과 초기 스크롤 깊이 분석
개요: 방문자의 첫 반응
블로그 방문자는 게시물 볼 때 언제 스크롤 시작하지? 그리고 페이지 접속 초기에 얼마나 빠르게, 얼마나 깊이 스크롤 하지? 이런 의문에 대한 답을 구하기 위해 2022년에 약 한 달간 실험을 진행했어요.
실험 결과부터 이야기하면 방문자의 절반이 1.3초 이내에 첫 스크롤 시작하고, 방문 3초 시점에서 370px 이내의 스크롤을 했어요. 즉 시작 부분의 중요한 내용은 1.3초 이내에 로딩 되거나 혹은 370px 이후에 표시하는 게 좋다고 볼 수 있죠.
테스트 장소는 따로 운영 중인 티스토리 블로그, 데이터는 구글 애널리틱스로 수집했고 일정 시간 내 스크롤 이벤트를 캡처한 뒤 유효한 부분을 잘라서 사용했어요. 방문자는 소규모 블로그라 약 1만여 개의 세션을 기록했고요.
블로그 주제는 이것저것 뒤섞인 잡블로그지만, 심도 깊은 추적이 아니라 방문자가 각 게시물에 들어온 뒤의 초기 반응만 추적하는 거니까 주제는 그다지 상관없을 것이라 생각해요.
마찬가지로 블로그(사이트)의 반응 시간이 극도로 느리지만 않으면 서버 응답 시간이나 이탈률 등의 다른 지표도 관계 없을 거예요. 접속 후 3초까지의 자료니까요.
방문자가 처음 스크롤 하는 시점
앞에서 방문자가 처음 스크롤하는 시간이 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초 이상 걸리면 이탈한다" 라는 말이 있죠?하지만 이 실험이 2017년 자료라 오래되기도 했고, 제 실험의 그래프를 보았을 때 나오는 결론은 그보다 조금 더 빨라야 한다고 생각해요.
기준을 어디어 둘지 애매한 면이 있지만, 평균선에 걸치는 부분을 threshold로 가정한다면 약 2.5초 이내에 대부분의 첫 반응이 발행하므로 그 안에 페이지 로딩이 끝나야한다고 가정할 수 있겠네요.
만약 그보다 더 까다롭게 2/3의 방문자를 기준으로 하면, 앞의 요약에 나와있듯이 PC: 2.3초, 모바일: 1.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.
- 크롬 기본값인 북마크 바 없는 상황 기준으로 963+370 = 1333px
- 스마트폰 브라우저 높이는 구형 제품은 거의 640~700px, 최근 제품은 800~900px로 가정. (기기마다, OS마다 다를 수 있음.)
- 스마트폰의 경우 중간 정도인 800px 설정
- 여기에 50% 범위인 370px 더하면 1170px
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년 넘는 세월 동안 대부분 사이트가 페이지 최상단에 헤더 같은 탐색 요소를 두었고 그 아래에 글 제목이 위치했으니, 해당 위치는 글을 읽는데 불필요하다는 학습이 되어서 그런게 아닐까 싶어요. 아니면 상단 광고 위치에 익숙해져서 보기 싫으니 가려버리는 행동일 가능성도 있을 것 같고요.
어느쪽이나 페이지의 최상단은 심리적으로 Banner Blindness가 동작하는 구역이라고 봐도 문제없을 거예요.
그래프를 볼 때 주의할 점
첫 스크롤 그래프는 해당 항목에서 설명했듯이 페이지를 열고 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로 변환하면 눈 뜨고 못 봐줄만 한 상황도 많이 나오더라고요.
결국 이래저래 '타협'이 필요해요.
그렇다면 무엇을 어떻게 타협해야 하나? 그건 블로그의 방향성과 블로거의 취향에 달린 문제로 넘어가요. 더 이상 기술적인 문제가 아닌 전략 문제인 거예요.
속도가 우선이면 스타일과 스크립트를 줄이고 저용량 이미지 포맷을 사용하면 돼요. 뛰어난 심미성으로 방문자를 사로잡겠다면, 커다란 이미지와 다양하고 화려한 스타일로 숨이 멎도록 아름다운 사이트를 만들어 눈을 떼지 못하게 하면 되고요.
결국 기본으로 다시 돌아온 셈이죠.
하지만 아무것도 모른 채로 고집하는 기본이 아니라, 이것저것 고민하고 실험해 보면서 무수하게 부딪히고 깨진 다음 다시 돌아온 기본은 비슷해 보여도 한층 더 자유롭고 더 멀리 볼 수 있는 높은 곳이라 생각해요.
한 번에 효율적으로 가면 된다? 그게 되는 사람을 우리는 천재라고 불러요. 세상에는 수 많은 천재가 있겠지만 적어도 저는 아니예요. 그렇기에 결론이 다시 원점이라고 해도 결코 의미 없는 몸부림이 아닌 것이고요.