UX 객관화_web vitals

UX (User Experience, 사용자 경험성)는 사용자가 제품을 사용하며 발생하는 경험성을 일컫는 말로,
경험성이란 개인의 경험이나 배경지식에 따라 수준이 달라지는 주관적인 부분이 존재한다. 

 

프론트엔드 개발자로서 UI를 설계하고 더 좋은 UX를 사용자에게 제공하기 위해 고민하고 논의하지만 주관적인 영역을 갖고 좋은 답을 유도하기란 쉽지 않다. 그렇기에 UX를 계측할 수 있는 기준이 중요해지는데 보통 UX를 계측하기 위한 방식을 이야기하면 A/B 테스팅 대조실험을 이야기한다. 둘 다 해보고 더 좋은걸 한다는 접근에서 UX를 개선하기 위한 좋은 접근이라고 생각한다.

하지만, A,B 두 기능을 모두 만들어야 하는 비용적인 측면과 부적적인 피드백이 나온 집군의 사용자에게는 불편함을 제공한다는 점에서 이상적인 방식이라 생각 들지 않고, 무엇보다 모든 설계에 실험을 할 수 있는 것은 아니기에 초기 개발과정에서는 계측할 수 없다는 한계를 갖는다.

 

많은 객관화를 위한 방식들이 있고, web vitals를 챙겨볼까합니다.

Web Vitals

사용자 경험을 만드는 필수 요소중 하나는 성능이고 가장 객관화 하기 쉬운 요소라고 생각되기에 반드시 챙겨야 합니다. 

Web Vitals는 웹에서 품질 신호에 대한 통합 메트릭을 제공하기 위한 Google의 이니셔티브입니다.

 

그중 LCP, FID, CLS는 Core Web Vitals로 

• Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
  로딩 성능을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 합니다.
  염두할 내용은 가장 큰 컨텐츠를 불러오는 것까지 2.5초라는 것으로 FCP와 혼동하면 안됩니다.
  • LCP를 줄이기 가장좋은 건 역시 최대 컨텐츠의 크기를 줄이는게 가장 쉽고, 
    이미지 최적화의 경우 tinypng이걸 애용하고있는데, 이미지에 큰 열화를 느끼지 못할정도로 좋은 이미지 최적화를 제공하고 있다. SVG를 다룬글의 SVGO도 이를 위한 최적화이다.
• First Input Delay(최초 입력 지연, FID)
  상호 작용을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.
• Cumulative Layout Shift(누적 레이아웃 시프트, CLS)
  시각적 안정성을 측정합니다. 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 합니다.
  
  • 디자이너 분과 협업을 할 때, 심미적인 요소를 위해서 mouse over시 콘텐츠가 펼쳐진다거나 하는 경우 CLS가 높아져 부정적인 UX를 만들기 쉬워지기에 조심해야 합니다. 

새로운 성능 지표 INP

많이들 core vitals는 create react app 같은 boilerplate에서 web-vitals(npm)를 통해 제공하고 있기에 접하기 쉽다고 생각하고, 이 글을 통해서는 INP를 소개하고 싶었습니다. 

 

사용자의 인터렉션에 시각적인 변경사항을 제공하게 되는 현대의 웹에서 응답성은 성능지표 중에서도 중요한 지표라고 봅니다.

-   200ms 이하 INP는 페이지의 응답성이 양호
-   INP가 200ms 초과하고 500ms이하인 경우 페이지의 응답성이 개선이 필요함

-  500ms 초과의 INP는 페이지의 응답성이 좋지 않음

 

FID와 유사할 수도 있지만, FID는 첫(First)의 상호작용만을 고려하고, 이벤트 렌들러에서의 처리시간이나 다음 프레임이 그려지는 것 가지의 시간이 아닌 입력(Input) 지연에 대해서만 고려합니다.

다시 말해 FID는 JavaScript 코드를 얼마나 빠르게 로드하고 실행할 수 있는지를 확인하는 지표입니다; 로드 응답성

 

 

JavaScript에서 INP 측정

import {onINP} from 'web-vitals';  
  
onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.  
  console.log(value);
});

※ INP 메트릭 수집은 Event Timing API를 완전히 지원하는 브라우저에서만 동작을 합니다.