도허티 임계점과 Web Vitals
도허티 임계점에서 시작되어 Web Vitals의 측정 기준까지
Sep 20, 2024
들어가며
프로젝트에서 사용자 경험 개선 및 성능 향상을 위해 Web Vitals를 사용해 보신적 있으실 겁니다.
Web Vitals는 아래 3가지 항목을 측정하여 사용자 경험을 향상시킵니다.
- LCP(Largest Contentful Paint)
- CLS(Cumulative Layout Shift)
- INP(Interaction to Next Paint)
각 항목의 측정 기준은 2.5초 이내, 200밀리초 이하, 0.1초 이하의 기준이 있는데 이 기준은 어디서부터 시작된걸까 궁금하신적 있으신가요?
도허티 임계점과 도허티 임계점이 나오게 된 배경을 알면 어디에서 이런 기준이 왔는지 알 수 있습니다.
먼저 UX/UI의 10가지 심리학 법칙에 소개된 도허티 임계점부터 시작해보겠습니다.
도허티 임계점
도허티 임계점이란 1982년 Walter J. Doherty와 Ahrvind J. Thadani의 IBM Systems Journal에 컴퓨터 응답 시간 요구 사항을 2,000(2초)이 아닌 400밀리초로 설정한 연구 논문에서 시작되었습니다.
하지만 Walter J. Doherty와 Ahrvind J. Thadani는 반응 시간이 0.4초 일때 “생산성은 반응 시간 감소의 정비례 이상으로 증가한다”고 발표했습니다. 컴퓨터 반응 시간이 생산성에 불균형한 영향을 미친다는 도허티(Doherty)의 발견을 바탕으로 도허티 임계(Doherty Threshold)라고 알려진 새로운 표준이 탄생했습니다.
도허티 임계점에 대한 논문 전체 번역본은 여기에서 확인하실 수 있습니다.
사용자 경험과 도허티 임계점
UX/UI의 10가지 심리학 법칙에서는 현대 웹의 페이지 용량 평균은 수년간 기하급수적으로 증가해왔고, 로딩 시간이 길어질수록 아예 작업을 포기하는 사용자가 늘어난다고 합니다.
하지만 도허티 임계가 규정한 0.4초 이하로의 개선 방법이 없을때 해결하기 위한 방법으로 아래와 같은 사례를 설명합니다.
- 스켈레톤: 컨텐츠가 로딩되는 동안 컨텐츠 영역에 임시로 자리 표시자(placeholder) 블록을 표시하는 기법
- 블러업: 용량이 큰 이미지를 먼저 가우시안 블러를 활용해 감추고 이미지 로딩이 완료되면 실제 이미지를 보여주는 기법(nextjs의 Image 컴포넌트의 placeholder 속성)
- 진행상태 표시자: 흔하게 사용되는 로딩바. 연구에 따르면 정확도와 상관없이 진행 표시줄을 보는 것만으로도 사용자는 대기 시간을 더 관대하게 받아들인다고 함.(관련 논문) 그리고 사용자가 눈앞의 작업을 집중할 수 있는 한계는 일반적으로 10초이며, 대기 시간이 10초가 넘어가면 사람들은 딴짓을 하고 싶어함. 그렇기에 예상 대기 시간과 현재 수행 중인 작업에 대한 설명을 추가로 제공하는 편이 좋다.
- optimistic UI: 낙관적 UI는 체감 성능을 개선하는 영리한 기법이다.(관련 블로그) 인스타그램은 이 기법을 활용해서 실제로 게시가 완료되기 전에 사진에 대한 댓글을 표시한다.
또한 아래와 같이 뛰어난 사용자 경험을 만드는 것은 성능이며 이는 개발자만의 기술적인 고민이 아니라 본질적인 디자인 요소라고 주장합니다.
성능은 개발팀만 고민하면 되는 기술적인 문제가 아니라 본질적인 디자인 요소다. 디자이너라면 자신이 디자인한 제품이나 서비스의 사용자가 작업을 최대한 빠르고 효율적으로 완수하도록 도와야 한다. 이러한 목표를 이루려면 사용자에게 적절한 피드백을 제공하고, 체감 성능을 높이고, 진행 표시줄을 사용해 기다린다는 느낌을 줄여주는 게 중요하다.
위 내용을 통해 웹의 성능 향상을 위해서는 스켈레톤, 블러업, 진행 상태 표시자, 낙관적 UI와 같은 사례들과 함께 디자인 요소를 이해할 필요가 있음을 알 수 있습니다.
Web Vitals
코어 웹 바이탈 측정항목 기준점 정의 문서를 살펴보면 LCP에 대한 경험의 질 부분에서 어떤 기준으로 측정했는지 알 수 있습니다.
1초 임곗값과 관련하여 일반적으로 인용되는 두 가지 소스는 카드 외와 밀러입니다. ... 생략... 1초 임곗값에 대해 흔히 인용되는 또 다른 출처인 밀러는 '인간이 기계 통신으로 수행할 수 있고 앞으로 수행할 작업이 응답 지연이 2초 이상이면 성격이 크게 바뀌고 1초 정도 더 연장될 수 있다'고 언급했습니다.
문서에서 설명하는 2초 이상의 응답 지연이라는 것이 도허티 임계점에서 언급한 PC 초창기의 임계값입니다.
그래서 Web Vitals은 다양한 HCI 관련 논문과 CrUX(Chrome UX 보고서)라는 데이터를 이용하여 우리에게 기준점을 제공하고 있다는걸 알 수 있습니다.
마치며
UX/UI의 10가지 심리학 법칙의 “도허티 임계점”을 시작으로 “Web Vitals가 제시하는 측정 기준과 연관있지 않을까?”하는 궁금증까지 이어지는 경험이었습니다.
측정 기준이 어디에서 시작되었고, 어떤 내용을 기반으로 작성되었는지 알고나니 Web Vitals 문서가 더욱 잘 이해가 되기도 했네요.
그리고 좀 더 향상된 사용자 경험을 개선하고 구현하기 위해서는 디자인 요소의 이해도 같이 동반되야 함을 알 수 있었습니다.
읽어주셔서 감사합니다.