사이트 뜯어보기: 크롬을 중심으로

여러분들이 자주 보는 사이트에는 얼마나 많은 데이터가 오갈까요? 아니면 여러분들은 느리게 움직이는 사이트를 보며 답답함을 느낀 적이 한 번쯤은 있을 겁니다. 실제로도 cloudflare의 자료에 따르면, Mobify, Walmart 등의 회사에서 사이트 페이지 로드 시간을 일정 시간 줄이는 과정을 통해 사이트에서 원하는 행동을 고객들이 행동하는 비율의 지표가 올랐다는 보고가 있고요.

우리 삶에서 사이트의 성능은 알게 모르게 중요한 요소로 자리 잡고 있습니다. 그리고 여러 개발자가 이런 사이트 성능 개선에 대해 큰 노력을 하고 있습니다.

그래서 이번엔 우리가 보는 사이트가 어떻게 흘러가는지, 아니면 어떤 정보를 가졌는지 한번 예시 사이트를 통해 알아봅시다.

참고로 예시 사이트는 필자의 과거 개인 블로그 사이트입니다. 타인의 사이트를 가지고 뜯어보는 것은 조금 실례일 수 있기 때문에 그렇습니다. 최대한 제 사이트의 바이럴을 지양하며 정보가 될 만한 것들은 지우면서 진행하겠습니다.

키보드로 f12를 누른다면 개발자 도구가 켜집니다.

살펴볼 항목들

• Elements
• Console
• Network
• Performance
• Application
• Lighthouse

Elements

Elements에서는 사이트가 어떻게 구성되어 있는지 보여줍니다. 그래서 위의 사진을 참고하여 본다면, 만약 개발자 도구의 왼쪽 영역의 html 태그들을 호버(hover, 마우스 커서로 그냥 얹기)하면 파랗게 아래 사진처럼 영역을 보여주기도 합니다.

그리고 오른쪽 영역을 보게 된다면, 해당 영역들이 어떻게 꾸며져 있는지 상위 태그에서 영향을 받은 CSS(Cascading Style Sheets, 웹 페이지에 스타일과 레이아웃 등을 설정할 때 사용하는 스타일 시트 언어) 속성으로 구성되어 있습니다. 만약 해당 CSS 속성을 지우면 어떻게 될지 궁금하다면 아래 사진처럼 해당 CSS 속성의 왼쪽 체크박스를 해제하는 순간, 해당 속성이 비활성화된 모습을 볼 수 있습니다.

추가로, Elements의 바로 왼쪽의 아이콘이 2개 보일 텐데, 왼쪽 아이콘은 세부적인 사이트의 특정 영역을 볼 수 있으며, 오른쪽 아이콘은 우리가 모바일로 이 사이트를 볼 때, 어떻게 보는지 확인할 수 있습니다.

이 외에도 여러 기능들이 있지만, 일단 대표적인 부분만 짚고 넘어가겠습니다.

Console

Console에서는 사이트를 접속하거나 상호작용을 할 때 나타나는 Warning이나 Error 문구, 혹은 개발자가 의도적으로 디버깅할 때, 해당 변수나 함수의 데이터가 어떤 값을 가지는지 보기 위해 console.log를 사용하는데, 이때 여기에 나타납니다.

그래서 대부분 웹에서 디버깅을 한다고 한다면 여기를 많이 참고하곤 합니다.

Network

Network에서는 브라우저가 서버로부터 어떤 데이터를 받는지 확인할 수 있습니다.

그래서 서버로부터 어떤 파일을 먼저 받는지 확인 가능하고, 필요에 따라 적절하게 받아올 파일을 쪼개고, 조절하여 사이트의 로딩시간(혹은 유저의 로딩 체감시간)을 줄일 수 있습니다.

만약 해당 파일을 어떻게 주고 받았는지 궁금하다면 아래 사진처럼 Headers를 확인하여 볼 수 있습니다.(다만 이해하려면 HTTP(Hypertext Transfer Protocol, 웹에서 정보를 주고 받기 위한 규약)에 대한 이해가 필요합니다.)

Performance

Performance에서는 직접 사이트 안에서 상호작용을 하는 과정을 녹화하고, 그 과정에서 성능상 어떤 문제가 있는지 확인 가능합니다. 아래 사진을 통해 숫자로 표시하긴 했지만, 다음과 같은 과정을 거치며 성능을 확인합니다.

1. 개발자 도구 왼쪽 위의 동그라미 녹화 버튼을 누른다.

2. 왼쪽 사이트의 측정하고 싶은 상호작용을 진행한다.

3. 녹화를 멈추고, 성능을 확인한다.

   

Performance에서 볼 부분은 많지만, 간략하게 보자면, 맨 위의 CPU 부분에서 윗부분의 빨간 바를 통해 병목 현상(한 가지 기능을 수행하느라 다른 기능을 수행하지 못하는 현상)이 발생하는 것을 알게 됩니다. 만약 해당 시점의 수행되는 시간이 지연된다면 해당 상호작용에 문제가 있다는 것을 확인할 수 있습니다.

Application

Application에서는 브라우저에 다양한 방식(쿠키, 로컬/세션 스토리지 등등) 저장된 여러 리소스들을 확인할 수 있습니다.

예를 들어, 현재 Local storage에서는 현재 사이트 테마의 상태를 확인할 수 있습니다. 지금 필자의 시스템은 다크모드가 기본값이라 theme: system은 다크모드로 나오네요

Lighthouse

Lighthouse에서는 웹 품질 향상을 위한 자동화 도구로, 여러 척도를 통해 사이트의 성능을 측정할 수 있습니다.

이렇게 /페이지에서 바로 측정해도 되고, 만약 다른 페이지가 있다면(예를 들어, /blog와 같은 링크가 있다면) /blog에 대한 Lighthouse 측정도 가능합니다.

측정하게 된다면 다음과 같이 결과 보고서가 나오게 되고, Lighthouse의 조언에 따라 사이트의 품질을 높일 수 있습니다.

물론 Lighthouse로도 잡아내지 못하는 성능 저하 이슈가 있다면 위의 다른 개발자 도구 패널을 통해 확인하고, 자신이 작성한 코드 등을 통해 개선해야 합니다.

마무리

이렇게 해서 Chrome을 통해 사이트를 기술적으로 살펴보았습니다.

웹 개발자를 희망하지 않아도, 웹을 이용하는 이용자로서 한번 사용해 보는 것도 마냥 사이트가 느리다고 답답해하는 것보다 좋은 경험이라 생각합니다. 만약 자신이 이용하는 사이트에 문제가 발생한다면 한번 개발자 도구를 켜보는 것은 어떨까요?