웹에서 좋은 사용자 경험을 판단하는 지표는 여러가지가 존재한다.
예를 들어 얼마나 빨리 화면이 보여지는지, 얼마나 빨리 상호작용이 가능한지 등이 있다.
그렇다면 좋은 사용자 경험을 판단하는 지표 중 가장 중요한 건 뭐가 있을까?
Google
에서는 가장 중요한 Core
지표 3가지를 선정했다.
이번에는 그 지표들이 뭔지 알아보고, 왜 이 지표들이 중요하다고 판단됐는지 내 주관적인 의견을 작성해보고자 한다.
제 의견만 궁금하다면 여기를 눌러주세요.
Chrome
의 DevRel
에서는 Web Vitals라는 사이트를 운영중이다.
해당 사이트에는 Core Web Vitals
라고 하는 항목이 존재한다.
이는 Google
이 생각하는 우수한 사용자 경험을 제공하는데 필수적인 성능 지표 라고 생각하면 된다.
해당 사이트에는 이 지표들의 설명과 함께, 어떻게 하면 지표들을 개선할 수 있는지 개선방안까지 작성되어 있다. (역시 구글)
이 게시글만 보고 그치지 말고, 사이트에 들어가 원문을 읽어보는 것을 적극 추천한다.
아니 근데 이걸 왜 알아야 하죠? 어차피 다 좋아야 하는 것 아닌가요? 🙄
맞는 말이지만 반은 틀렸다.
모든 업무에는 결국 우선순위가 적용되고, 그 우선순위에 맞춰 계획이 수립된다.
예를들어 당장 다음 달이 수능인데, 삼성 입사 시험을 준비하지 않는 것 처럼 말이다.
나중에 삼성에 입사할 예정이라면 삼성 입사시험도 물론 필요하지만, 현재 우선순위에선 낮다.
이는 웹 개발을 하며 사용자 경험을 개선할 때도 동일하게 적용할 수 있다.
어떤 지표가 중요한지 알아야 더 효과적으로 사용자 경험을 개선시킬 수 있다.
즉, "다 좋으면 물론 좋지만 그 중에서도 이건 제일 중요해!!" 싶은 지표라고 생각하면 좋다.
LCP
란 가장 큰 콘텐츠가 표시되기까지 걸린 시간 이다.
엥? 가장 큰 콘텐츠가 보이는게 왜 중요한거죠..?? 🤨
구글은 이전부터 어떻게 하면 쉽게 메인 콘텐츠가 얼마나 빨리 로딩되어 보여지는지 측정 할 수 있는지에 대해 고민했다.
그 과정에서 FCP (First Contentful Paint)
, FMP (First Meaningful Paint)
, SI (Speed Index)
등을 고려했지만, 이는 복잡하고 정확하지 않았다.
이후 구글은 토론 및 연구를 통해 가장 큰 컨텐츠
= 메인 컨텐츠
로 보고, 그것이 렌더링 됐는지 확인하는 것이 가장 효과적이라고 결론지었다.
즉, LCP
는 가장 중요한 컨텐츠가 보여지는 시간 이라고 생각할 수 있다.
2.5초 이하 - 양호
2.5초 이상, 4.0초 이하 - 개선 필요
4.0 이상 - 나쁨
FID
란 사용자가 최초로 웹과 상호작용이 가능하기까지 걸린 시간 이다.
웹과 상호작용을 한다는게 뭔가요? 일단 화면이 보여졌으면 된거 아닌가요? 😓
여기서 웹과 상호작용
은, 사용자가 어떤 버튼이나 링크를 눌렀을 때 이벤트 처리가 시작되는 것을 말한다.
예를 들어 로그인 페이지로 redirect
되는 버튼이 렌더링 됐다고 가정했을 때, 이를 클릭해서 javascript
가 redirect
이벤트 수행을 시작하는 시점 이라고 생각하면 된다.
단, 여기서
redirect
이벤트가 수행 돼 로그인 페이지가 보여지는 것 까지는 계산하지 않는다.
쉽게 말해, 사용자가 클릭(과 같은 input)을 통해 이벤트를 발생시킬 수 있을때까지 시간 이라고 할 수 있다.
0.1초 이하 - 양호
0.1초 이상, 0.3초 이하 - 개선 필요
0.3초 이상 - 나쁨
(아닙니다)
CLS
란 누적 레이아웃 이동 수 이다.
누적 레이아웃 이동 수.... 가 뭐죠...? 🤔
누적 레이아웃 이동 수는 사용자가 예상치 못한 layout 이동이 얼마나 발생됐는지에 대한 지표이다.
아무래도 글로 작성하면 이해가 잘 안되는데, 구글에서 한눈에 이해되는 예시 영상을 만들어놨다.
영상을 보면 No, go back
을 클릭하려고 했던 사용자가 갑작스럽게 상단에 팁이 생성되며 전체적인 레이아웃이 이동되었고, Yes, place my order
가 클릭되었다.
아마 웹 사이트를 이용하며 한번 쯤 이런 상황을 경험해 봤을 것이다.
(솔직히 저 마우스 움직임 하며 너무 웃긴다 ㅋㅋㅋ 진짜 잘 표현한 예제이다)
즉, CLS
란 사용자가 예측하지 못한(혹은 의도하지 않은) 화면의 움직임 지표이다.
0.1 이하 - 양호
0.1 이상, 0.25 이하 - 개선 필요
0.25 이상 - 나쁨
지금까지 LCP
, FID
, CLS
지표가 뭔지 알아보았다.
조금 더 자세한 내용과, 이를 개선하는 방법은 Web Vitals에 정말 자세히 나와있으니 꼭 읽어보기를 추천한다.
❗ 여기부터는 제 생각이며, 실제 구글의 생각과 많이 다를 수 있습니다.
구글에서는 LCP
, FID
, CLS
이 3가지가 가장 중요한 지표라고 설명한다.
그런데 FCP
, TBT
등 수많은 지표들이 있는데 왜 이 3개가 가장 중요하다고 할까?
결국 더 중요하다는 건 이유가 있을텐데, 그게 뭘지 고민해보고 정말 중요한게 맞는지 생각해보았다.
아니 근데
개인적으로 개발자는 모든 선택에 고민과 이유가 있어야 한다고 생각한다.
그 고민의 결과가 반드시 맞지 않더라도, 그걸 고민해본 개발자와 그렇지 않은 개발자는 후에 차이가 날 것이다.
나는 그런 습관 하나하나가 좋은 개발자로써 성장할 수 있도록 한다고 생각한다.
구글은 이렇게 정의했다.
LCP
= 가장 큰 요소가 그려지는 시간
-> 가장 큰 요소
= 가장 중요한 요소
즉 LCP
를 선정한 이유는 가장 중요한 요소
를 얼마나 빨리 보여주는지 이다.
나는 여기서 두 가지 의문이 들었다.
- 왜 가장
중요한 요소 렌더링 시점
을 중요하다 생각하지?- 왜
가장 큰 요소
가가장 중요한 요소
지?
지표 중에는 LCP
외에도 FCP(First Contentful Paint)
라는 지표가 있는데, 이는 사용자가 흰색 화면 외에 어떠한 요소를 최초로 볼 수 있는 시점이다.
사진 상 빨간색 동그라미 부분이 FCP
시점이라고 할 수 있다.
어떻게 보면 사용자 경험 측면에서 흰 화면
이 아닌 뭔가 그려진 화면
이 처음 보이는 시점이라
이게 더 중요해보이는데 왜 LCP
를 선택했을까?
이유는 바로 FCP의 특성 때문
FCP
에는 꼭 유의미한 렌더링 화면이 아니더라도 뭔가 렌더링이 되는 시점을 잡는다.
예를 들어 사이트에 들어가서 로딩 인디케이터
만 보여도 잡힌다는 뜻이다.
만약 들어가자마자 0.1초
만에 로딩 인디케이터
가 뜨고, 5초
후에 실제 페이지 화면이 보여진다면 FCP
점수는 좋겠지만 실제 사용자 경험은 좋지 않을 것이다.
이 같은 이슈 때문에 Google
은 단순히 화면이 보이는게 아닌 유의미한 화면
이 보여지는 기준을 중요한 요소 렌더링
으로 선정했다고 생각한다.
정리해보면 가장 중요한 요소
가 빨리 보일 수록 사용자 경험
이 좋아지는 것이다.
근데 왜 가장 중요한 요소
= 가장 큰 요소
일까?
고맙게도 Google
은 이에 대해 간략하게 정리해주었다.
요약해보자면 FMP
, SI
와 같은 지표들을 사용해 봤으나, 이는 부정확하거나 너무 복잡 했다는 것이다.
오히려 단순하게 생각해서 가장 큰 요소가 가장 중요하겠지~
라는 마인드로 갔다고 한다.
(물론 무지성이 아니라 토론, 연구를 진행했다)
나는 이 얘기를 보고 한번 여러 사이트를 둘러보며 진짜 그런지 찾아보았다.
Google
의 검색 결과
페이지. LCP는 검색 결과 이미지.
아무래도 이미지로서 검색 결과를 보여주는 것이 가장 직관적이기 때문에, 검색 결과로써는 가장 중요한 부분이 아닐까 싶다.
강남 언니를 PC로 접속했을 때 보이는 페이지. LCP는 모바일 앱 다운로드 유도 이미지.
PC로 접속한 사람들을 어플을 다운로드 받아 서비스를 이용하도록 유도하는 이미지이다.
아무래도 중요해 보이는 요소라고 생각된다.
원티드 메인 사이트를 PC로 접속했을 때 이미지.
화면 상 가장 큰 배너로, 원티드에서 가장 보여주고 싶은 컨텐츠라고 생각된다.
이것 역시 중요하다고 생각한다.
이처럼 정말로 대부분의 가장 큰 요소는 보편적으로 가장 중요한 요소였다.
직접 찾아보니 왜 가장 큰 요소가 가장 중요한 요소이며, 왜 가장 중요한 요소를 지표로 삼는지 좀 더 이해됐다.
FID
는 내가 뭔가를 클릭
했을 때, 그 이벤트 핸들러가 실행 시작
되기까지의 지연 시간
을 의미한다.
나는 이 지표를 보고 두 가지 의문이 들었다.
한번 또 알아보도록 하자.
- 비슷한 지표인
TTI
도 있는데 왜FID
가 더 중요하지?- 왜
실행 완료
가 아니고실행 시작
시간을 기준하지?
여기서 말하는 TTI
는 Time To Interactive
로 사용자와 페이지가 완전히 상호작용 가능한 상태
까지의 시간을 의미하는 지표이다.
설명만 들으면 뭐가 다를까 싶은데, 이 둘의 차이점을 이해하려면 Long Task
를 알아야 한다.
Long Task
는 간단하게 말하자면, 메인 스레드를 사용해(독점해) UI가 변경되지 않고 고정되도록 하는 JavaScript
코드를 의미한다.
더 모르겠는데요... 😅
사진을 보자.
FCP
이후 몇 개의 JavsScript
코드가 로딩되는 모습이다.
주황색 네모가 Long Task
이고, TTI
는 가장 마지막 Long Task
종료 시점을 기준으로 FCP
와 역산해서 구해진다.
즉 정리해보자면, TTI
= 긴 작업이 없어서 상호작용 하고 UI를 변경할 수 있는 시점
이라고 할 수 있다.
그래서
TTI
랑FID
중에FID
가 왜 중요합니까~ 😐
사진을 보면 FID
는 Long Task
중에 클릭 등의 상호작용을 했을 때 지연되는 시간 만큼임을 알 수 있다.
(※ 무조건 FID
의 정의가 Long Task
일 때 상호작용 딜레이 시간은 아니다!)
내 개인적인 생각으로는, 상호작용 할 수 있는 환경이 조성되는 시점
보다는 실제로 상호작용 했을 때 딜레이되는 정도
가 '사용자 경험 관점'에서 더 중요해서 FID
를 선택한 게 아닐까 싶다.
고맙게도 이 부분 또한 Google
에서 정리해주었다.
정리해보자면,
실행 완료
시간 또한 중요한 요소이다.
그러나 그 지표를 '가장 중요한' 지표로 설정 할 경우, 개발자가 의도치 않게 안좋은 경험을 만드는 코드
를 추가할 수 있게 된다.
라고 할 수 있다.
예를 들어 로직을 비동기적으로 실행
시키면 실행 완료
점수 자체는 높아지겠지만,
실제로 실행이 완료되어 UI가 업데이트
되는 시점은 늦춰지게 개발할 수 있다는 것이다.
그럼 점수 상으로는 좋으나, 실제 사용자 경험은 좋지 않은 아이러니한 코드를 추가할 수 있다.
이 같은 이유로
실행 완료
가 아닌실행 시작
까지만을 기준으로 지연시간을 계산한다.
사실 CLS
에 대해서는 크게 의문점이 없다.
그래서 왜 내가 CLS
에 대해서는 의문이 없는지 적어보고자 한다.
- 레이아웃이 바뀌게 되면 사용자가 보던 요소가 없어질 수도 있음
- 레이아웃이 바뀌게 되면 사용자가 의도하지 않은 상호작용을 하게될 수 있음
즉, 정리해보자면 CLS
가 안좋으면 사용자가 원하지 않은 행위가 발생할 수 있어서 중요하다고 판단했다.
물론 블로그와 같은 정말 간단한 서비스일 경우 보던 글의 위치가 바뀌어, 읽는데 불편함
을 느끼는 정도로 그칠것이다.
그러나 금융 혹은 주식 등의 돈과 관련된 경우 정말 크리티컬한 행동을 만들 수 있다.
(매도를 했어야 하는데 매수버튼이 눌러진다던지, 결제취소가 아니고 결제가 된다던지 등...)
결론적으로 사용자가 원치 않은 행동이 발생해 피해를 줄 수 있기 때문에 중요하다고 생각한다.
이제 "OO님은 프엔 성능 개선 무슨 지표 보고 하세요?" 하면 전문가처럼 대답할 수 있다.
어버버 하지 말고 자신있게 이야기해보자.
다만 단순히 기능 구현만 하는 것이 아닌, 성능 지표의 개선 또한 매우 중요하기 때문에 꼭! 더 자세히 알아보기 바란다.
잉??? 저 지표들은 어떻게 측정하고 개선하는데요????
A :
LCP
, FID
, CLS
)LCP
는 가장 큰 컨텐츠가 보여지는 시간이다.FID
는 가장 처음 상호작용했을 때 발생하는 딜레이 시간이다.CLS
는 상호작용 없이 페이지의 레이아웃이 변경되는 지수이다.+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.
- WebVitals (방문 강추!!!!!!)
내용 중 '개인적으로 개발자는 모든 선택에 고민과 이유가 있어야 한다고 생각한다.' 공감되네요.
좋은 글 공유 감사드립니다