Post: 코어 웹 바이탈 글 추가

posts/Develop/core-web-vitals.mdx

@@ -0,0 +1,142 @@
+---
+title: 코어 웹 바이탈(Core Web Vitals) 알아보기
+description: 웹의 성능을 측정할때 핵심 지표가 되는 코어 웹 바이탈이란 무엇인지 알아봅시다.
+createdAt: 2024-03-28
+thumbnail: /images/posts/develop/core-web-vitals/thumbnail.png
+---
+
+안녕하세요! 오늘은 웹 성능의 핵심 지표를 나타내는 `코어 웹 바이탈(Core Web Vitals)`에 대해서 알아보겠습니다. 🙂
+
+## 1. 웹 성능의 중요성 ❓
+
+![웹 성능](/images/posts/develop/core-web-vitals/web-performance.png)
+
+프론트엔드 개발자분이라면 `성능 최적화`라는 키워드를 많이 들어보셨을겁니다. 다양한 부분에서 많이 사용될 수 있는 용어인데, 이번 글에서는 **웹 페이지의 성능**에 대해서 다루게 됩니다.
+
+### 1-1. 사용자 경험 (UX)
+
+웹 페이지 성능의 중요성 중 첫번째는 `사용자 경험(UX)`입니다.
+
+<br />
+
+여러분들은 웹 페이지에 접속했을때 **페이지 로딩이 느리거나, 불규칙적으로 레이아웃이 움직이거나, 상호작용이 느린** 등의 경험을 한번쯤은 해보셨을겁니다. 그럴때마다 항상 **왜 이렇게 느리지?** 라는 생각이 들곤 하죠. 이런 로딩 시간이 점차 증가할수록 사용자의 `이탈율`도 증가하게 됩니다.
+
+![구글 리서치 자료](/images/posts/develop/core-web-vitals/google-research.png)
+
+> ℹ️ `구글 리서치 자료(2017년)` 에서는 모바일 웹 페이지의 로딩이 5초이상 소요될때 이탈율이 90% 이상이라고 합니다.
+
+만약 다수의 사용자를 확보하려는 서비스의 웹 페이지일때 로딩 성능이 좋지 않다면, **많은 사용자들의 페이지 이탈**로 인해서 사용자를 확보하는데 어려움을 줄 수 있습니다.
+
+<br />
+
+따라서 웹 페이지의 성능을 개선한다면 **사용자 경험 개선 및 이탈율을 감소**하는데 도움을 줄 수 있습니다.
+
+### 1-2. 검색엔진 최적화 (SEO)
+
+![검색엔진 수집](/images/posts/next.js/nextjs-dynamic-sitemap/crawling.png)
+
+웹 페이지 성능의 중요성 중 두번째는 `검색엔진 최적화(SEO)`입니다.
+
+<br />
+
+현대에는 다양한 검색엔진이 존재합니다. 우리가 만든 웹 페이지를 구글, 네이버 등의 검색엔진에서 찾을 수 있도록 하기위해 각 검색엔진의 `크롤러 봇`은 우리의 웹 페이지 정보를 수집합니다.
+
+<br />
+
+그리고 이 과정에서도 웹 페이지의 성능은 매우 중요하게 평가되는데요. 만약 크롤러 봇이 웹 페이지 정보를 수집하러 왔는데, 웹 페이지 로딩이 오랜시간 지속된다면 어떻게 될까요? 이 경우에는 **정보를 수집할 수 없는 페이지, 정보가 없는 페이지**로 인식하게 되어 페이지 정보 수집이 불가능 합니다.
+
+<br />
+
+또한 밑에서 설명드릴 웹 페이지의 성능 지표인 `코어 웹 바이탈(Core Web Vitals)`의 점수에 따라서 **해당 페이지의 검색 노출 우선순위가 낮아질 수 있습니다.** 검색엔진 상위 노출을 목표로 하는경우, 치명적인 문제죠.
+
+<br />
+
+따라서 웹 페이지의 `검색엔진 최적화` 부분에서도 웹 페이지의 성능은 중요한 역할을 담당합니다.
+
+## 2. 코어 웹 바이탈 🔍
+
+![코어 웹 바이탈](/images/posts/develop/core-web-vitals/core-web-vitals.png)
+
+`코어 웹 바이탈 (Core Web Vitals)`은 **사용자의 실제 경험을 측정하는 세가지 주요 지표**를 의미합니다. 구글에서는 해당 지표를 측정하여 검색 결과에 표시할 페이지를 결정하는데 반영합니다.
+
+<br />
+
+세가지 주요 지표는 `Largest Contentful Paint (LCP)`, `Cumulative Layout Shift (CLS)`, `First Input Delay (FID)`로 구성되는데요. 이제 각각의 지표가 무엇을 나타내는것인지 알아보겠습니다.
+
+### 2-1. LCP
+
+![LCP](/images/posts/develop/core-web-vitals/lcp.png)
+
+`LCP(Largest Contentful Paint)`는 기본적인 웹 페이지의 로딩 성능을 나타내는 지표입니다. 웹 페이지 로드가 시작된 이후로 **사용자의 뷰포트 안에 있는 가장 큰 이미지 또는 UI 요소의 렌더링 시간**을 나타냅니다.
+
+<br />
+
+렌더링된 시간에 따라서 아래로 등급이 나눠집니다.
+
+- 0 ~ 2.5초: 좋음
+- 2.5 ~ 4초: 주의
+- 4초 초과: 심각
+
+### 2-2. CLS
+
+![CLS](/images/posts/develop/core-web-vitals/cls.png)
+
+`CLS(Cumulative Layout Shift)`는 시각적 안정성을 나타내는 지표입니다. **페이지 로딩 또는 사용자 상호작용시 요소가 예측 못하게 움직이지 않는지** 등을 검사합니다.
+
+<br />
+
+예를들어 이미지가 로딩 되었을때 밑에 위치한 요소들이 급변하게 움직이지 않는지 등의 상황처럼 **요소의 예측 불가능한 움직임 정도**를 검사합니다.
+
+- 0 ~ 0.1: 좋음
+- 0.1 ~ 0.25: 주의
+- 0.25 초과: 심각
+
+### 2-3. FID
+
+![FID](/images/posts/develop/core-web-vitals/fid.png)
+
+`FID(First Input Delay)`는 사용자의 상호작용성을 나타내는 지표입니다. 사용자가 웹 페이지에서 상호작용시(클릭 등), 브라우저가 해당 동작에 반응하기까지의 지연 시간을 검사합니다.
+
+<br />
+
+이 지표는 첫번째로 소개해드린 LCP 지표처럼 **렌더링 성능**을 평가하는 항목에도 포함될것 같습니다. 브라우저가 렌더링 작업을 처리하는 동안에는 사용자의 상호작용 이벤트가 이루어지지 않기 때문에, 빠른 렌더링이 뒷받침 되어야 할것 같네요.
+
+<br />
+
+성능 측정시에는 `밀리세컨드` 단위로 성능이 측정됩니다.
+
+- 0 ~ 100ms: 좋음
+- 100 ~ 300ms: 주의
+- 300ms 초과: 심각
+
+### 2-4. INP
+
+![INP](/images/posts/develop/core-web-vitals/inp.png)
+
+원래 `코어 웹 바이탈`의 측정 항목은 `LCP`, `CLS`, `FID` 까지만 존재했었는데요. 그러나 몇개월전 구글에서 새로운 지표인 `INP`를 발표했습니다.
+
+이 지표는 곧 도입될 예정이며, 기존의 FID 항목을 대신할 계획이라고 하네요. [(관련 문서 바로가기)](https://developers.google.com/search/blog/2023/05/introducing-inp?hl=ko)
+
+<br />
+
+`INP(Interaction to Next Paint)`도 사용자의 상호작용성을 나타내는 지표입니다. 사용자가 웹 페이지에서 상호작용시(클릭 등), 브라우저가 해당 동작에 반응하기까지의 지연 시간을 검사합니다.
+
+<br />
+
+이와 유사한 `FID`와의 차이점은, 첫 상호작용만 측정하는 `FID`와 달리, `INP`는 모든 상호작용을 측정하기 때문에 응답성에 대해 더 신뢰할 수 있는 지표의 역할을 가집니다.
+
+<br />
+
+성능 측정시에는 `밀리세컨드` 단위로 성능이 측정됩니다.
+
+- 0 ~ 200ms: 좋음
+- 200 ~ 500ms: 주의
+- 500ms 초과: 심각
+
+## 3. 마치며 📌
+
+오늘은 웹 성능의 핵심지표인 `코어 웹 바이탈(Core Web Vitals)`에 대해서 알아보았습니다. 많은 회사에서 프론트엔드 개발자를 채용할때 `성능 최적화` 경험을 많이 중요시 하더라고요.
+
+<br />
+
+그래서 페이지 성능 최적화와 관련한 `코어 웹 바이탈`의 중요성이 높아질 것 같습니다. 🙂 이상으로 글을 마치겠습니다. 글 읽어주셔서 감사합니다!