건강한 웹사이트란 무엇일까?

화면을 빠르고, 안정적으로 렌더링하는 웹사이트를 우리는 건강한 웹사이트라고 할 수 있어요

친절하게도 구글에서 건강한 웹사이트가 무엇인지 체크할 수 있는 정량적 지표를 제공해주고 있는데요

바로 그 지표가 되는것이 Web Vitals 입니다.

Web Vitals은 사용자가 웹사이트를 경험할 때 ‘건강 상태’가 어떤지를 구체적 수치로 보여주는 지표에요.

크게 LCP(처리시간), INP(응답시간), CLS(시각적 안정성)로 구성되어있어요.

• LCP : 화면의 로딩 시간을 측정
• INP : 브라우저가 사용자의 행위에 반응하는 시간을 측정
• CLS : 화면이 로딩되면서 밀리는 현상이 얼마나 적은가를 측정

위 세가지 기준을 간단히 말하면 화면을 빠르고, 안정적으로 렌더링하는 브라우저가 건강한 웹사이트라고 할 수 있겠습니다. 그럼 이제 우리는 어떻게 빠르고, 안정적으로 브라우저를 출력할 수 있는지 알아봅시다.

브라우저 렌더링은 크게 5단계의 과정을 거치게돼요. 단계별로 어떻게 속도와 시각적 안정성이 저하되는지 알아보겠습니다.

브라우저 렌더링 과정

1. Parsing & 2. Render Tree
   이 단계는 DOM트리와 CSSOM 트리를 분석(파싱)하고 합치는 단계(렌더트리)입니다. 쉽게 말해 HTML 파일과 CSS 파일을 컴퓨터가 읽어가면서 분석하고 컴퓨터가 이해하는 언어로 변환하는 과정이에요.
   컴퓨터는 문서를 읽어가다가 <IMG>태그 등을 만나게되면 그 즉시 서버에 다운로드를 요청하게 되죠 이 때 다운받아야 할 파일의 용량이 크거나, 너무 많은 요청을 할 경우 속도 저하가 발생할 수 있어요
2. Layout & 4. Painting
   Layout 단계에서 렌더 트리를 바탕으로, 각 요소가 화면의 어느 위치에, 얼마나 큰 크기로 배치될지 정확하게 계산 하고, Painting 단계에서 계산된 위치와 크기를 맞춰 각 요소를 레이어 단위로 묶고 실제로 생성합니다.
   이 때 레이아웃 단계에서 크기를 명확히 정의해 두지 않으면, 페인팅 단계에서 실제 크기와 미스매치가 발생하게되고, 리플로우(다시 계산)가 발생하며 결국 화면 밀림 현상이 발생할 수 있어요.
   폰트 역시 Painting 단계에서 적용하게 되는데 폰트의 용량이 너무 크거나, 웹사이트에서 지원하지 않는 경우 우선적으로 브라우저 웹폰트를 사용하고, 폰트의 로딩이 완료된 시점에 해당 폰트를 적용하게 되는데 이 때 Line-Height가 폰트 별로 약간씩 다르기 때문에 텍스트 영역의 변경(리플로우)이 발생하고, 역시 화면 밀림 현상이 발생할 수 있어요.
3. Composite
   마지막으로 생성된 레이어를 합치는 과정을 진행해요.

브라우저 랜더링 과정에서 어떻게 속도가 저하되는지, 화면 불안정이 발생하게 되는지 알아보았습니다 이제 어떻게 이런 문제를 보완할 수 있는지 알아볼까요?

 

1. CSS 스프라이트 기법

CSS 스프라이트 기법을 간단히 설명하면 우리가 필요한 이미지를 하나로 합치고 필요한 이미지의 좌표를 조절하여 노출하는 방식이에요

이 방식의 핵심은 서버에 다운로드 요청 횟수를 줄이므로써 속도를 향상 시킬 수 있다는 것이죠

Parsing 단계에서 100개의 각각의 이미지 태그를 만나면 컴퓨터는 서버에 100번의 다운로드 요청을 보내야해요 반면, 스프라이트 기법을 사용하면 이미지 사용이 100군데에서 됬어도 최초 한번의 다운로드 요청으로 끝낼 수 있죠

하지만 단점도 존재해요. 요청 횟수는 줄지만 초기 로딩 시 부담이 있을 수 있고, 유지보수 측면에서 이미지 교체가 필요한 경우 지속적으로 전체 이미지를 관리해야하며, 좌표가 꼬이는 경우 모든 CSS를 수정해야 할 수 도있어요

 

2. 안정적인 화면 출력

화면을 안정적으로 출력하는 방법은 간단해요. 리플로우를 막으면 되는데요

늦게 로딩되어 크기가 변경될 가능성이 있는 요소 (이미지, 폰트, 광고 등) 자체에 width, height, 또는 폰트의 경우 line-height를 명시하여 자신의 공간을 미리 확보하도록 하면 리플로우를 막을 수 있어요

 

3. SVG

SVG는 XML기반의 백터 그래픽 형식입니다. SVG를 HTML에 인라인으로 작성한 경우 서버에 다운로드 요청을 보내지 않아도 되니 파싱 단계에서 속도 향상을 기대할 수 있다는게 장점이에요. 또한 백터 기반이기 때문에 깨지지않고, 코드에 애니메이션을 추가하거나 색상이나 크기를 조절하기에도 유리하다는 장점이 있어요.

다만, 너무 복잡한 이미지는 페인팅 단계에서 오히려 속도 저하를 일으킬 수 있으니 유의해야 합니다.

이미지를 출력하는 방식은 무엇이 가장 좋다고 할 수 없고, 각 상황에 맞는 적합한 방법을 적용하는 것이 중요해요.

지속 가능한 ‘건강함’을 위하여

지금까지 우리는 웹사이트의 건강 상태를 결정짓는 Web Vitals과 이를 개선하기 위한 브라우저 렌더링 최적화 방법을 살펴보았어요

결국 건강한 웹사이트를 만든다는 것은 단순히 코드를 깨끗하게 짜는 것을 넘어, 사용자의 시간을 존중하고 시각적 편안함을 제공하는 것과 같아요 화려한 기능과 고해상도의 이미지가 가득하더라도, 로딩이 지연되어 사용자가 이탈하거나 갑작스러운 레이아웃 변경으로 엉뚱한 버튼을 클릭하게 된다면 그것은 좋은 웹사이트라 할 수 없습니다

기술은 계속해서 발전하고 사용자의 눈높이는 더욱 높아지고 있습니다. 오늘 배운 이미지 최적화(Sprite, SVG)와 리플로우 방지를 위한 명확한 규격 설정은 그 여정의 시작입니다.

여러분이 만드는 웹사이트가 빠르고, 안정적이며, 언제나 '건강'하기를 응원하며 이만 물러갑니다 총총