들어가며

웹에서 좋은 사용자 경험을 판단하는 지표는 여러가지가 존재한다.
예를 들어 얼마나 빨리 화면이 보여지는지, 얼마나 빨리 상호작용이 가능한지 등이 있다.

그렇다면 좋은 사용자 경험을 판단하는 지표 중 가장 중요한 건 뭐가 있을까?
Google에서는 가장 중요한 Core 지표 3가지를 선정했다.

이번에는 그 지표들이 뭔지 알아보고, 왜 이 지표들이 중요하다고 판단됐는지 내 주관적인 의견을 작성해보고자 한다.

제 의견만 궁금하다면 여기를 눌러주세요.

---

Core Web Vitals

Chrome의 DevRel 에서는 Web Vitals라는 사이트를 운영중이다.
해당 사이트에는 Core Web Vitals라고 하는 항목이 존재한다.

이는 Google이 생각하는 우수한 사용자 경험을 제공하는데 필수적인 성능 지표 라고 생각하면 된다.

해당 사이트에는 이 지표들의 설명과 함께, 어떻게 하면 지표들을 개선할 수 있는지 개선방안까지 작성되어 있다. (역시 구글)

이 게시글만 보고 그치지 말고, 사이트에 들어가 원문을 읽어보는 것을 적극 추천한다.

---

중요 지표 3가지

를 알아보기 전에..

아니 근데 이걸 왜 알아야 하죠? 어차피 다 좋아야 하는 것 아닌가요? 🙄

맞는 말이지만 반은 틀렸다.

모든 업무에는 결국 우선순위가 적용되고, 그 우선순위에 맞춰 계획이 수립된다.

예를들어 당장 다음 달이 수능인데, 삼성 입사 시험을 준비하지 않는 것 처럼 말이다.
나중에 삼성에 입사할 예정이라면 삼성 입사시험도 물론 필요하지만, 현재 우선순위에선 낮다.

이는 웹 개발을 하며 사용자 경험을 개선할 때도 동일하게 적용할 수 있다.
어떤 지표가 중요한지 알아야 더 효과적으로 사용자 경험을 개선시킬 수 있다.

즉, "다 좋으면 물론 좋지만 그 중에서도 이건 제일 중요해!!" 싶은 지표라고 생각하면 좋다.

---

LCP(Largest Contentful Pain)

LCP란 가장 큰 콘텐츠가 표시되기까지 걸린 시간 이다.

엥? 가장 큰 콘텐츠가 보이는게 왜 중요한거죠..?? 🤨

구글은 이전부터 어떻게 하면 쉽게 메인 콘텐츠가 얼마나 빨리 로딩되어 보여지는지 측정 할 수 있는지에 대해 고민했다.

그 과정에서 FCP (First Contentful Paint), FMP (First Meaningful Paint), SI (Speed Index)등을 고려했지만, 이는 복잡하고 정확하지 않았다.

이후 구글은 토론 및 연구를 통해 가장 큰 컨텐츠 = 메인 컨텐츠 로 보고, 그것이 렌더링 됐는지 확인하는 것이 가장 효과적이라고 결론지었다.

즉, LCP는 가장 중요한 컨텐츠가 보여지는 시간 이라고 생각할 수 있다.

좋은 LCP 시간

(이미지 출처 - webvitals)

2.5초 이하 - 양호
2.5초 이상, 4.0초 이하 - 개선 필요
4.0 이상 - 나쁨

---

FID(First Input Delay)

FID란 사용자가 최초로 웹과 상호작용이 가능하기까지 걸린 시간 이다.

웹과 상호작용을 한다는게 뭔가요? 일단 화면이 보여졌으면 된거 아닌가요? 😓

여기서 웹과 상호작용은, 사용자가 어떤 버튼이나 링크를 눌렀을 때 이벤트 처리가 시작되는 것을 말한다.

예를 들어 로그인 페이지로 redirect되는 버튼이 렌더링 됐다고 가정했을 때, 이를 클릭해서 javascript가 redirect 이벤트 수행을 시작하는 시점 이라고 생각하면 된다.

단, 여기서 redirect 이벤트가 수행 돼 로그인 페이지가 보여지는 것 까지는 계산하지 않는다.

쉽게 말해, 사용자가 클릭(과 같은 input)을 통해 이벤트를 발생시킬 수 있을때까지 시간 이라고 할 수 있다.

좋은 FID 시간

(이미지 출처 - webvitals)

0.1초 이하 - 양호
0.1초 이상, 0.3초 이하 - 개선 필요
0.3초 이상 - 나쁨

---

CLS(Cumulative Layout Shift)

(아닙니다)

(이미지출처 - 벤츠)

CLS란 누적 레이아웃 이동 수 이다.

누적 레이아웃 이동 수.... 가 뭐죠...? 🤔

누적 레이아웃 이동 수는 사용자가 예상치 못한 layout 이동이 얼마나 발생됐는지에 대한 지표이다.
아무래도 글로 작성하면 이해가 잘 안되는데, 구글에서 한눈에 이해되는 예시 영상을 만들어놨다.

(영상 출처 - webvitals)

영상을 보면 No, go back을 클릭하려고 했던 사용자가 갑작스럽게 상단에 팁이 생성되며 전체적인 레이아웃이 이동되었고, Yes, place my order가 클릭되었다.

아마 웹 사이트를 이용하며 한번 쯤 이런 상황을 경험해 봤을 것이다.
(솔직히 저 마우스 움직임 하며 너무 웃긴다 ㅋㅋㅋ 진짜 잘 표현한 예제이다)

즉, CLS란 사용자가 예측하지 못한(혹은 의도하지 않은) 화면의 움직임 지표이다.

좋은 CLS 지표

(이미지 출처 - webvitals)

0.1 이하 - 양호
0.1 이상, 0.25 이하 - 개선 필요
0.25 이상 - 나쁨

---

더 자세한 내용은 Web Vitals 에서!

지금까지 LCP, FID, CLS 지표가 뭔지 알아보았다.

조금 더 자세한 내용과, 이를 개선하는 방법은 Web Vitals에 정말 자세히 나와있으니 꼭 읽어보기를 추천한다.

---

여기부터는 내 생각

❗ 여기부터는 제 생각이며, 실제 구글의 생각과 많이 다를 수 있습니다.

근데 왜 이 지표가 중요한거지?

구글에서는 LCP, FID, CLS 이 3가지가 가장 중요한 지표라고 설명한다.
그런데 FCP, TBT 등 수많은 지표들이 있는데 왜 이 3개가 가장 중요하다고 할까?

결국 더 중요하다는 건 이유가 있을텐데, 그게 뭘지 고민해보고 정말 중요한게 맞는지 생각해보았다.

생각해보ㅈ...

아니 근데 Google이 중요하다는데, 님 뭐 됨???;; 당연 중요하겠죠🤣🤣

개인적으로 개발자는 모든 선택에 고민과 이유가 있어야 한다고 생각한다.
그 고민의 결과가 반드시 맞지 않더라도, 그걸 고민해본 개발자와 그렇지 않은 개발자는 후에 차이가 날 것이다.

나는 그런 습관 하나하나가 좋은 개발자로써 성장할 수 있도록 한다고 생각한다.

---

생각해보자!

LCP

구글은 이렇게 정의했다.

LCP = 가장 큰 요소가 그려지는 시간
-> 가장 큰 요소 = 가장 중요한 요소

즉 LCP를 선정한 이유는 가장 중요한 요소를 얼마나 빨리 보여주는지 이다.
나는 여기서 두 가지 의문이 들었다.

1. 왜 가장 중요한 요소 렌더링 시점을 중요하다 생각하지?
2. 왜 가장 큰 요소가 가장 중요한 요소지?

1. 왜 '가장 중요한 요소 렌더링 시점'을 중요하다 생각하지?

지표 중에는 LCP외에도 FCP(First Contentful Paint)라는 지표가 있는데, 이는 사용자가 흰색 화면 외에 어떠한 요소를 최초로 볼 수 있는 시점이다.

사진 상 빨간색 동그라미 부분이 FCP 시점이라고 할 수 있다.

어떻게 보면 사용자 경험 측면에서 흰 화면이 아닌 뭔가 그려진 화면이 처음 보이는 시점이라
이게 더 중요해보이는데 왜 LCP를 선택했을까?

이유는 바로 FCP의 특성 때문

FCP에는 꼭 유의미한 렌더링 화면이 아니더라도 뭔가 렌더링이 되는 시점을 잡는다.
예를 들어 사이트에 들어가서 로딩 인디케이터만 보여도 잡힌다는 뜻이다.

만약 들어가자마자 0.1초만에 로딩 인디케이터가 뜨고, 5초후에 실제 페이지 화면이 보여진다면 FCP점수는 좋겠지만 실제 사용자 경험은 좋지 않을 것이다.

이 같은 이슈 때문에 Google은 단순히 화면이 보이는게 아닌 유의미한 화면이 보여지는 기준을 중요한 요소 렌더링 으로 선정했다고 생각한다.

---

2. 왜 '가장 큰 요소'가 '가장 중요한 요소'지?

정리해보면 가장 중요한 요소가 빨리 보일 수록 사용자 경험이 좋아지는 것이다.
근데 왜 가장 중요한 요소 = 가장 큰 요소 일까?

고맙게도 Google은 이에 대해 간략하게 정리해주었다.

요약해보자면 FMP, SI와 같은 지표들을 사용해 봤으나, 이는 부정확하거나 너무 복잡 했다는 것이다.

오히려 단순하게 생각해서 가장 큰 요소가 가장 중요하겠지~ 라는 마인드로 갔다고 한다.
(물론 무지성이 아니라 토론, 연구를 진행했다)

나는 이 얘기를 보고 한번 여러 사이트를 둘러보며 진짜 그런지 찾아보았다.

Google의 검색 결과 페이지. LCP는 검색 결과 이미지.

아무래도 이미지로서 검색 결과를 보여주는 것이 가장 직관적이기 때문에, 검색 결과로써는 가장 중요한 부분이 아닐까 싶다.

강남 언니를 PC로 접속했을 때 보이는 페이지. LCP는 모바일 앱 다운로드 유도 이미지.

PC로 접속한 사람들을 어플을 다운로드 받아 서비스를 이용하도록 유도하는 이미지이다.
아무래도 중요해 보이는 요소라고 생각된다.

원티드 메인 사이트를 PC로 접속했을 때 이미지.

화면 상 가장 큰 배너로, 원티드에서 가장 보여주고 싶은 컨텐츠라고 생각된다.
이것 역시 중요하다고 생각한다.

이처럼 정말로 대부분의 가장 큰 요소는 보편적으로 가장 중요한 요소였다.

직접 찾아보니 왜 가장 큰 요소가 가장 중요한 요소이며, 왜 가장 중요한 요소를 지표로 삼는지 좀 더 이해됐다.

---

FID

FID는 내가 뭔가를 클릭 했을 때, 그 이벤트 핸들러가 실행 시작 되기까지의 지연 시간을 의미한다.

나는 이 지표를 보고 두 가지 의문이 들었다.
한번 또 알아보도록 하자.

1. 비슷한 지표인 TTI도 있는데 왜 FID가 더 중요하지?
2. 왜 실행 완료 가 아니고 실행 시작 시간을 기준하지?

1. 비슷한 지표인 '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를 선택한 게 아닐까 싶다.

2. 왜 '실행완료' 가 아니고 '실행시작' 시간을 기준하지?

고맙게도 이 부분 또한 Google에서 정리해주었다.

정리해보자면,

실행 완료 시간 또한 중요한 요소이다.
그러나 그 지표를 '가장 중요한' 지표로 설정 할 경우, 개발자가 의도치 않게 안좋은 경험을 만드는 코드를 추가할 수 있게 된다.

라고 할 수 있다.

예를 들어 로직을 비동기적으로 실행시키면 실행 완료 점수 자체는 높아지겠지만,
실제로 실행이 완료되어 UI가 업데이트되는 시점은 늦춰지게 개발할 수 있다는 것이다.

그럼 점수 상으로는 좋으나, 실제 사용자 경험은 좋지 않은 아이러니한 코드를 추가할 수 있다.

이 같은 이유로 실행 완료 가 아닌 실행 시작 까지만을 기준으로 지연시간을 계산한다.

---

CLS

사실 CLS에 대해서는 크게 의문점이 없다.
그래서 왜 내가 CLS에 대해서는 의문이 없는지 적어보고자 한다.

1. 레이아웃이 바뀌게 되면 사용자가 보던 요소가 없어질 수도 있음
2. 레이아웃이 바뀌게 되면 사용자가 의도하지 않은 상호작용을 하게될 수 있음

즉, 정리해보자면 CLS가 안좋으면 사용자가 원하지 않은 행위가 발생할 수 있어서 중요하다고 판단했다.

물론 블로그와 같은 정말 간단한 서비스일 경우 보던 글의 위치가 바뀌어, 읽는데 불편함을 느끼는 정도로 그칠것이다.

그러나 금융 혹은 주식 등의 돈과 관련된 경우 정말 크리티컬한 행동을 만들 수 있다.
(매도를 했어야 하는데 매수버튼이 눌러진다던지, 결제취소가 아니고 결제가 된다던지 등...)

결론적으로 사용자가 원치 않은 행동이 발생해 피해를 줄 수 있기 때문에 중요하다고 생각한다.

---

정리

이제 "OO님은 프엔 성능 개선 무슨 지표 보고 하세요?" 하면 전문가처럼 대답할 수 있다.
어버버 하지 말고 자신있게 이야기해보자.

다만 단순히 기능 구현만 하는 것이 아닌, 성능 지표의 개선 또한 매우 중요하기 때문에 꼭! 더 자세히 알아보기 바란다.

잉??? 저 지표들은 어떻게 측정하고 개선하는데요????

A :

• 구글은 사용자 경험에 중요한 지표로 3가지를 정했다. (LCP, FID, CLS)
• LCP는 가장 큰 컨텐츠가 보여지는 시간이다.
• FID는 가장 처음 상호작용했을 때 발생하는 딜레이 시간이다.
• CLS는 상호작용 없이 페이지의 레이아웃이 변경되는 지수이다.
• 이외에도 많은 지표, 그에 따른 개선 방법이 있으니 잘 공부해보자.

+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.

---

Reference

1. WebVitals (방문 강추!!!!!!)